fix(editor): fix extra actions of editor module, fix flow. Reduce ris…

…ks of extra reinitialization without content change

src/plugins/editor/README.md

@@ -5,18 +5,3 @@ 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. Default value: 60.
-
-## Example
-```html
-<uip-editor editor-config="{wrap: 60}"></uip-editor>
-```

src/plugins/editor/editor.tsx

@@ -4,19 +4,14 @@ if (typeof Prism.manual === 'undefined') Prism.manual = true;
 
 import React from 'jsx-dom';
 import Prism from 'prismjs';
-import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 
 import {CodeJar} from 'codejar';
 
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {bind, decorate, memoize, jsonAttr} from '@exadel/esl/modules/esl-utils/decorators';
+import {bind, decorate, memoize} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPlugin} from '../../core/base/plugin';
 
-export interface UIPEditorConfig {
-  wrap?: number;
-}
-
 /**
  * Editor {@link UIPPlugin} custom element definition
  * Uses Codejar code editor to provide an ability to modify UIP state markup
@@ -26,11 +21,7 @@ export class UIPEditor extends UIPPlugin {
   public static override is = 'uip-editor';
 
   /** Highlight method declaration  */
-  public static highlight: (editor: HTMLElement) => void = Prism.highlightElement;
-
-  /** Editor's {@link UIPEditorConfig} passed through attribute */
-  @jsonAttr({defaultValue: {wrap: 60}})
-  private editorConfig: Partial<UIPEditorConfig>;
+  public static highlight = (editor: HTMLElement): void => Prism.highlightElement(editor, false);
 
   /** Wrapped {@link https://medv.io/codejar/ Codejar} editor instance */
   @memoize()
@@ -50,7 +41,7 @@ export class UIPEditor extends UIPPlugin {
 
   /** Preformat and set editor's content */
   public set value(value: string) {
-    this.editor.updateCode(this.normalizeValue(value));
+    this.editor.updateCode(value);
   }
 
   protected override connectedCallback() {
@@ -64,9 +55,9 @@ export class UIPEditor extends UIPPlugin {
     this.$inner.append(this.$code);
 
     // Initial update
-    this._onChange();
-    this.editor.onUpdate(this._onChange);
     this._onRootStateChange();
+    // Postpone subscription
+    Promise.resolve().then(() => this.editor?.onUpdate(this._onChange));
   }
 
   protected override disconnectedCallback(): void {
@@ -75,14 +66,6 @@ export class UIPEditor extends UIPPlugin {
     super.disconnectedCallback();
   }
 
-  /** Preformat value, calls before setting to editor */
-  protected normalizeValue(value: string): string {
-    const {wrap} = this.editorConfig;
-    const settings: Record<string, any> = {};
-    if (wrap) settings['break-lines'] = wrap;
-    return Prism.plugins.NormalizeWhitespace.normalize(value, settings);
-  }
-
   /** Callback to call on editor's content changes */
   @decorate(debounce, 1000)
   protected _onChange() {
@@ -93,9 +76,6 @@ export class UIPEditor extends UIPPlugin {
   @bind
   protected _onRootStateChange(): void {
     if (this.model!.lastModifier === this) return;
-    const markup = this.model!.html;
-    setTimeout(() => {
-      this.value = markup;
-    });
+    this.value = this.model!.html;
   }
 }