feat(editor): implement wrap attribute

src/plugins/editor/README.md

@@ -6,7 +6,17 @@ the component inside [UIPPreview](src/core/README.md). Extends [UIPPlugin](src/c
 ## Description
 **UIPEditor** is based on [Codejar](https://medv.io/codejar/) editor. We also use [Prism.js](https://prismjs.com/) for highlighting.
 
+You can pass an optional `editor-config` attribute to configure editor's behaviour:
+
+```typescript
+interface EditorConfig {
+  wrap?: number;
+}
+```
+
+- **wrap** option specifies characters limit by line. If the number of characters is greater than **wrap**, then the line is splitted into multiple ones, each shorter than **wrap** characters. By default there is no limit. We apply this transformation only on markup changes from snippets/settings.
+
 ## Example
 ```html
-<uip-editor></uip-editor>
+<uip-editor editor-config="{wrap: 60}"></uip-editor>
 ```

src/plugins/editor/editor.tsx

@@ -1,10 +1,11 @@
 import React from 'jsx-dom';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {bind, decorate} from '@exadel/esl/modules/esl-utils/decorators';
+import {bind, decorate, jsonAttr} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPlugin} from '../../core/registration';
 import {JarEditor} from './jar/jar-editor';
+import {EditorConfig} from './jar/jar-utils';
 
 /**
  * Editor {@link UIPPlugin} custom element definition
@@ -15,6 +16,9 @@ export class UIPEditor extends UIPPlugin {
   public static is = 'uip-editor';
   /** Wrapped {@link https://medv.io/codejar/ Codejar} editor instance */
   protected editor: JarEditor;
+  /** Editor's {@link EditorConfig} passed through attribute */
+  @jsonAttr({defaultValue: {}})
+  private editorConfig: Partial<EditorConfig>;
 
   protected connectedCallback() {
     super.connectedCallback();
@@ -34,7 +38,7 @@ export class UIPEditor extends UIPPlugin {
     const codeBlock = (<pre class='language-html editor-content'><code/></pre>) as HTMLPreElement;
     this.$inner.append(codeBlock);
 
-    this.editor = new JarEditor(codeBlock);
+    this.editor = new JarEditor(codeBlock, this.editorConfig);
     this.editor.addEventListener('uip:editor-change', this._onChange);
     this._onRootStateChange();
   }

src/plugins/editor/jar/jar-editor.ts

@@ -2,24 +2,29 @@ import {bind} from '@exadel/esl/modules/esl-utils/decorators/bind';
 import {SyntheticEventTarget} from '@exadel/esl/modules/esl-utils/dom/events/target';
 
 import {CodeJar} from 'codejar';
-import { normalize, useLineNumbers, wrapLines } from './jar-utils';
+import {EditorConfig, normalize, useLineNumbers, wrapLines} from './jar-utils';
 
 /** {@link https://medv.io/codejar/ Codejar} editor wrapper */
 export class JarEditor extends SyntheticEventTarget {
   /** Inner {@link https://medv.io/codejar/ Codejar} instance */
   private editor: CodeJar;
+  /** Editor's {@link EditorConfig} passed through attribute */
+  private editorConfig: Partial<EditorConfig>;
 
   /**
    * @param {HTMLElement} element - element to place editor inside
    */
-  constructor(element: HTMLElement) {
+  constructor(element: HTMLElement, editorConfig: Partial<EditorConfig>) {
     super();
+
     this.editor = CodeJar(
       element,
       useLineNumbers(),
       { tab: '\t' }
     );
     this.editor.onUpdate(this._onChange);
+
+    this.editorConfig = editorConfig;
   }
 
   /** Set editor's text content
@@ -42,7 +47,7 @@ export class JarEditor extends SyntheticEventTarget {
 
   private prepareValue(markup: string): string {
     const value = normalize(markup);
-    return wrapLines(value);
+    return wrapLines(value, this.editorConfig.wrap);
   }
 
   /** Handle editor's content change */

src/plugins/editor/jar/jar-utils.ts

@@ -1,4 +1,4 @@
-import { withLineNumbers } from 'codejar/linenumbers';
+import {withLineNumbers} from 'codejar/linenumbers';
 import Prism from 'prismjs';
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 
@@ -14,7 +14,8 @@ export function normalize(markup: string): string {
 }
 
 /** Wrap long markup lines. */
-export function wrapLines(markup: string, wrapThreshold: number = 60) : string {
+export function wrapLines(markup: string, wrapThreshold?: number) : string {
+  wrapThreshold = wrapThreshold ?? Infinity;
   const lines: string[] = [];
 
   for (const line of markup.split('\n')) {
@@ -28,4 +29,8 @@ export function wrapLines(markup: string, wrapThreshold: number = 60) : string {
   }
 
   return lines.join('\n');
-}
+}
+
+export interface EditorConfig {
+  wrap: number;
+}