fix(editor): pr fix

src/plugins/editor/editor.less

@@ -8,9 +8,19 @@
   &-inner {
     height: 100%;
     border-top: 1px solid @section-border;
+    padding: 0;
+  }
+
+  .editor-content {
+    margin-top: 0;
+  }
+
+  .codejar-linenumbers {
+    // Override default width set by withLineNumbers
+    width: unset !important;
   }
 
   .uip-root.dark-theme & {
-    @import "./jar/dark-theme.less";
+    @import "./jar/jar-editor.less";
   }
 }

src/plugins/editor/editor.tsx

@@ -35,7 +35,7 @@ export class UIPEditor extends UIPPlugin {
     this.$inner.append(codeBlock);
 
     this.editor = new JarEditor(codeBlock);
-    this.editor.addEventListener('editor-change', this._onChange);
+    this.editor.addEventListener('uip:editor-change', this._onChange);
     this._onRootStateChange();
   }
 

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

@@ -2,9 +2,7 @@ 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 {withLineNumbers} from 'codejar/linenumbers';
-import Prism from 'prismjs';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+import { normalize, useLineNumbers, wrapLines } from './jar-utils';
 
 /** {@link https://medv.io/codejar/ Codejar} editor wrapper */
 export class JarEditor extends SyntheticEventTarget {
@@ -18,9 +16,7 @@ export class JarEditor extends SyntheticEventTarget {
     super();
     this.editor = CodeJar(
       element,
-      withLineNumbers(Prism.highlightElement, {
-        color: '#C9BFBF'
-      }),
+      useLineNumbers(),
       { tab: '\t' }
     );
     this.editor.onUpdate(this._onChange);
@@ -30,7 +26,7 @@ export class JarEditor extends SyntheticEventTarget {
    * @param {string} value - text content to set
    */
   public setValue(value: string): void {
-    value = this.normalize(value);
+    value = this.prepareValue(value);
     this.editor.updateCode(value);
   }
 
@@ -44,14 +40,14 @@ export class JarEditor extends SyntheticEventTarget {
     this.editor.destroy();
   }
 
-  /** Normalize markup indents */
-  private normalize(markup: string): string {
-    return Prism.plugins.NormalizeWhitespace.normalize(markup);
+  private prepareValue(markup: string): string {
+    const value = normalize(markup);
+    return wrapLines(value);
   }
 
   /** Handle editor's content change */
   @bind
   private _onChange() {
-    this.dispatchEvent(new CustomEvent('editor-change'));
+    this.dispatchEvent(new CustomEvent('uip:editor-change'));
   }
 }

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

@@ -0,0 +1,31 @@
+import { withLineNumbers } from 'codejar/linenumbers';
+import Prism from 'prismjs';
+import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+
+export function useLineNumbers(color: string = '#C9BFBF'): (editor: HTMLElement) => void {
+  return withLineNumbers(Prism.highlightElement, {
+    color,
+  });
+}
+
+/** Normalize lines indents. */
+export function normalize(markup: string): string {
+  return Prism.plugins.NormalizeWhitespace.normalize(markup);
+}
+
+/** Wrap long markup lines. */
+export function wrapLines(markup: string, wrapThreshold: number = 60) : string {
+  const lines: string[] = [];
+
+  for (const line of markup.split('\n')) {
+    if (line.length < wrapThreshold) {
+      lines.push(line);
+    } else {
+      for (let splitPos = 0; splitPos < line.length; splitPos += wrapThreshold) {
+        lines.push(line.substring(splitPos, splitPos + wrapThreshold));
+      }
+    }
+  }
+
+  return lines.join('\n');
+}