feat(editor): update editor's docs

exadel-inc · Jun 29, 2023 · 15798b4 · 15798b4
1 parent f03e35f
commit 15798b4
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 203 deletions.
diff --git a/src/plugins/editor/README.md b/src/plugins/editor/README.md
@@ -4,53 +4,7 @@
 the component inside [UIPPreview](src/core/README.md). Extends [UIPPlugin](src/core/README.md#uip-plugin).
 
 ## Description
-**UIPEditor** is based on [ACE](https://ace.c9.io/) editor. It supports Ace's basic features like shortcuts, syntax
-highlighting, etc.
-
-### Useful links
-1) [Ace playgroung](https://ace.c9.io/build/kitchen-sink.html)
-2) [Shortcuts](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts)
-3) [Themes](https://github.com/ajaxorg/ace/tree/master/src/theme)
-
-## Customization
-To make customization easier, we defined the following interface:
-
-```typescript
-interface EditorConfig {
-  theme: string;
-  printMarginColumn: number;
-  wrap?: number | boolean;
-  minLines? : number;
-  maxLines? : number;
-}
-
-```
-- **Theme** allows you to change editor's appearance. You can play with themes [here]((https://ace.c9.io/build/kitchen-sink.html)).
-- **PrintMarginColumn** is used for setting the position of the vertical line for wrapping. Set the value to **-1** to
-   remove the line.
-- **Wrap** number sets the limit of characters before wrapping. Set to **0** to remove wrapping or **true** for wrapping
-  on the container's width.
-- **MinLines** is a minimum number of lines to be displayed.
-- **MaxLines** is a maximum number of lines to be displayed. If the number of lines exceeds this limit, vertical scroll will appear.
-
-We think that these options are the most common, so we made their configuration easier. All you need is to pass an object
-to the editor's attribute *editor-config*, like in the example below:
-
-```html
-<uip-editor editor-config="{wrap: 70}"></uip-editor>
-```
-
-If you don't specify it, the default one will be used:
-
-```typescript
-defaultConfig: EditorConfig = {
-    theme: 'ace/theme/chrome',
-    printMarginColumn: -1,
-    wrap: true,
-    minLines: 8,
-    maxLines: 22,
-  };
-```
+**UIPEditor** is based on [Codejar](https://medv.io/codejar/) editor. We also use [Prism.js](https://prismjs.com/) for highlighting.
 
 ## Example
 ```html

diff --git a/src/plugins/editor/editor.less b/src/plugins/editor/editor.less
@@ -11,118 +11,6 @@
   }
 
   .uip-root.dark-theme & {
-    code[class*=language-],
-    pre[class*=language-] {
-      color: #ccc;
-      background: 0 0;
-      text-shadow: none;
-      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-      font-size: 1em;
-      text-align: left;
-      white-space: pre;
-      word-spacing: normal;
-      word-break: normal;
-      word-wrap: normal;
-      line-height: 1.5;
-      -moz-tab-size: 4;
-      -o-tab-size: 4;
-      tab-size: 4;
-      -webkit-hyphens: none;
-      -moz-hyphens: none;
-      -ms-hyphens: none;
-      hyphens: none
-    }
-
-    pre[class*=language-] {
-      padding: 1em;
-      margin: .5em 0;
-      overflow: auto
-    }
-
-    :not(pre)>code[class*=language-],
-    pre[class*=language-] {
-      background: #2d2d2d
-    }
-
-    :not(pre)>code[class*=language-] {
-      padding: .1em;
-      border-radius: .3em;
-      white-space: normal
-    }
-
-    .token.block-comment,
-    .token.cdata,
-    .token.comment,
-    .token.doctype,
-    .token.prolog {
-      color: #999
-    }
-
-    .token.punctuation {
-      color: #ccc
-    }
-
-    .token.attr-name,
-    .token.deleted,
-    .token.namespace,
-    .token.tag {
-      color: #e2777a
-    }
-
-    .token.function-name {
-      color: #6196cc
-    }
-
-    .token.boolean,
-    .token.function,
-    .token.number {
-      color: #f08d49
-    }
-
-    .token.class-name,
-    .token.constant,
-    .token.property,
-    .token.symbol {
-      color: #f8c555
-    }
-
-    .token.atrule,
-    .token.builtin,
-    .token.important,
-    .token.keyword,
-    .token.selector {
-      color: #cc99cd
-    }
-
-    .token.attr-value,
-    .token.char,
-    .token.regex,
-    .token.string,
-    .token.variable {
-      color: #7ec699
-    }
-
-    .token.entity,
-    .token.operator,
-    .token.url {
-      color: #67cdcc
-    }
-
-    .token.bold,
-    .token.important {
-      font-weight: 700
-    }
-
-    .token.italic {
-      font-style: italic
-    }
-
-    .token.entity {
-      cursor: help
-    }
-
-    .token.inserted {
-      color: green
-    }
+    @import "./jar/dark-theme.less";
   }
-}
+}
diff --git a/src/plugins/editor/editor.ts b/src/plugins/editor/editor.ts
@@ -1,16 +1,17 @@
 import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce';
-import {bind, decorate, listen} from '@exadel/esl/modules/esl-utils/decorators';
+import {bind, decorate} from '@exadel/esl/modules/esl-utils/decorators';
 
 import {UIPPlugin} from '../../core/registration';
-import {EditorConfig, AceTheme} from './jar/utils';
 import {JarEditor} from './jar/jar-editor';
 
 /**
  * Editor {@link UIPPlugin} custom element definition
+ * Uses Codejar code editor to provide an ability to modify UIP state markup
  * @extends UIPPlugin
  */
 export class UIPEditor extends UIPPlugin {
   public static is = 'uip-editor';
+  /** Wrapped {@link https://medv.io/codejar/ Codejar} editor instance */
   protected editor: JarEditor;
 
   protected connectedCallback() {
@@ -21,10 +22,12 @@ export class UIPEditor extends UIPPlugin {
   }
 
   protected disconnectedCallback(): void {
+    this.editor.removeEventListener(this._onChange);
     this.editor?.destroy();
     super.disconnectedCallback();
   }
 
+  /** Initialize inner {@link https://medv.io/codejar/ Codejar} editor */
   protected initEditor(): void {
     const codeBlock = document.createElement('pre');
     codeBlock.classList.add('language-html');
@@ -49,22 +52,4 @@ export class UIPEditor extends UIPPlugin {
     const markup = this.model!.html;
     setTimeout(() => this.editor?.setValue(markup));
   }
-
-  /**
-   * Merge passed editorConfig with current editorConfig
-   * @param {Partial<EditorConfig>} editorConfig - config to merge
-   */
-  public updateEditorConfig(editorConfig: Partial<EditorConfig>): void {
-  }
-
-  /** Callback to catch theme changes from {@link UIPRoot} */
-  @listen({event: 'uip:configchange', target: '::parent(.uip-root)'})
-  protected _onRootConfigChange(e: CustomEvent) {
-    const attr = e.detail.attribute;
-    const value = e.detail.value;
-
-    if (attr === 'dark-theme') {
-      return this.updateEditorConfig({theme: value === null ? AceTheme.Light : AceTheme.Dark});
-    }
-  }
 }
diff --git a/src/plugins/editor/jar/dark-theme.less b/src/plugins/editor/jar/dark-theme.less
@@ -0,0 +1,113 @@
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: 0 0;
+  text-shadow: none;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+.token.block-comment,
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.attr-name,
+.token.deleted,
+.token.namespace,
+.token.tag {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.function,
+.token.number {
+  color: #f08d49;
+}
+
+.token.class-name,
+.token.constant,
+.token.property,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.atrule,
+.token.builtin,
+.token.important,
+.token.keyword,
+.token.selector {
+  color: #cc99cd;
+}
+
+.token.attr-value,
+.token.char,
+.token.regex,
+.token.string,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.entity,
+.token.operator,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.bold,
+.token.important {
+  font-weight: 700;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}
diff --git a/src/plugins/editor/jar/jar-editor.ts b/src/plugins/editor/jar/jar-editor.ts
@@ -6,15 +6,23 @@ import {withLineNumbers} from 'codejar/linenumbers';
 import Prism from 'prismjs';
 import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 
+/** {@link https://medv.io/codejar/ Codejar} editor wrapper */
 export class JarEditor extends SyntheticEventTarget {
+  /** Inner {@link https://medv.io/codejar/ Codejar} instance */
   private editor: CodeJar;
 
   /**
    * @param {HTMLElement} element - element to place editor inside
    */
   constructor(element: HTMLElement) {
     super();
-    this.editor = CodeJar(element, withLineNumbers(Prism.highlightElement as any), {tab: '\t'});
+    this.editor = CodeJar(
+      element,
+      withLineNumbers(Prism.highlightElement as any, {
+        color: '#C9BFBF'
+      }),
+      { tab: '\t' }
+    );
     this.editor.onUpdate(this._onChange);
   }
 
@@ -36,6 +44,7 @@ export class JarEditor extends SyntheticEventTarget {
     this.editor.destroy();
   }
 
+  /** Normalize markup indents */
   private normalize(markup: string): string {
     return Prism.plugins.NormalizeWhitespace.normalize(markup);
   }