Add component ch-code-diff-editor and refactoring the ch-code-editor interface (#346)

* Move monaco to common

* Update references to monaco

* Remove diff support and add options property

* Update ch-code-editor showcase

* Add component ch-code-diff-editor

* Add ch-code-diff-editor showcase

* Update component.d.ts

* Disconnect ResizeObserver

* Theme initialization

* ReadOnly initialization

* Remove if() and use .? instead

* Add Watch in "options" property

* Sort the code according to the StencilJS documentation

* Add updateOptions method

* Readonly improvements

* Update generated files

* Fix updateOptions parameter

* Sort properties alphabetical

* Fix backsticks

Author: dangmarm

Diff for: .gitignore

@@ -31,7 +31,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
-src/components/code-editor/monaco/output
+src/common/monaco/output
 
 # TypeScript v1 declaration files
 typings/

Diff for: src/components/code-editor/monaco-styles-after-build.scss renamed to src/common/monaco/monaco-styles-after-build.scss

@@ -11,6 +11,8 @@ import { ActionGroupModel } from "./components/action-group/types";
 import { ActionListItemActionable, ActionListItemAdditionalInformation, ActionListItemModel, ActionListModel } from "./components/action-list/types";
 import { ActionListFixedChangeEventDetail } from "./components/action-list/internal/action-list-item/types";
 import { MarkdownCodeRender } from "./components/code/internal/types";
+import { CodeDiffEditorOptions } from "./components/code-diff-editor/code-diff-editor-types.js";
+import { CodeEditorOptions } from "./components/code-editor/code-editor-types.js";
 import { ComboBoxFilterOptions, ComboBoxFilterType, ComboBoxModel } from "./components/combobox/types";
 import { ChPopoverAlign, ChPopoverSizeMatch, PopoverActionElement } from "./components/popover/types";
 import { GxDataTransferInfo, ImageRender, LabelPosition } from "./common/types";
@@ -58,6 +60,8 @@ export { ActionGroupModel } from "./components/action-group/types";
 export { ActionListItemActionable, ActionListItemAdditionalInformation, ActionListItemModel, ActionListModel } from "./components/action-list/types";
 export { ActionListFixedChangeEventDetail } from "./components/action-list/internal/action-list-item/types";
 export { MarkdownCodeRender } from "./components/code/internal/types";
+export { CodeDiffEditorOptions } from "./components/code-diff-editor/code-diff-editor-types.js";
+export { CodeEditorOptions } from "./components/code-editor/code-editor-types.js";
 export { ComboBoxFilterOptions, ComboBoxFilterType, ComboBoxModel } from "./components/combobox/types";
 export { ChPopoverAlign, ChPopoverSizeMatch, PopoverActionElement } from "./components/popover/types";
 export { GxDataTransferInfo, ImageRender, LabelPosition } from "./common/types";
@@ -484,41 +488,65 @@ export namespace Components {
          */
         "value": string;
     }
-    interface ChCodeEditor {
-        /**
-          * Allow the user to resize the diff editor split view. This property only works if `mode` === `"diff-editor"`.
-         */
-        "enableSplitViewResizing": boolean;
+    interface ChCodeDiffEditor {
         /**
           * Specifies the language of the auto created model in the editor.
          */
         "language": string;
         /**
-          * Specifies the rendered mode of the editor, allowing to set a normal editor or a diff editor.
+          * Specifies the modified value of the diff editor.
          */
-        "mode": "editor" | "diff-editor";
+        "modifiedValue": string;
         /**
-          * Specifies the modified value of the diff editor. This property only works if `mode` === `"diff-editor"`.
+          * Specifies the editor options.
          */
-        "modifiedValue": string;
+        "options": CodeDiffEditorOptions;
+        /**
+          * Specifies if the editor should be readonly. If the ´readOnly´ or ´originalEditable´ property is specified in the ´options´ property, this property has no effect.
+         */
+        "readonly": boolean;
         /**
-          * Specifies if the modified value of the diff editor should be readonly. This property only works if `mode` === `"diff-editor"`.
+          * Specifies the theme to be used for rendering.
          */
-        "modifiedValueReadonly": boolean;
+        "theme": string;
         /**
-          * Specifies if the editor should be readonly. When `mode` === `"diff-editor"` this property will apply to the left pane.  - If `mode` === `"editor"` defaults to `false`.  - If `mode` === `"diff-editor"` defaults to `true`.
+          * Update the editor's options after the editor has been created.
+          * @param options Set of options to be updated
          */
-        "readonly"?: boolean;
+        "updateOptions": (options: CodeDiffEditorOptions) => Promise<void>;
+        /**
+          * Specifies the original value of the diff editor.
+         */
+        "value": string;
         /**
-          * Render the differences in two side-by-side editors. Only works if `mode` === `"diff-editor"`.
+          * Specifies the schema URI for the YAML language.
+         */
+        "yamlSchemaUri": string;
+    }
+    interface ChCodeEditor {
+        /**
+          * Specifies the language of the auto created model in the editor.
          */
-        "renderSideBySide": boolean;
+        "language": string;
+        /**
+          * Specifies the editor options.
+         */
+        "options": CodeEditorOptions;
+        /**
+          * Specifies if the editor should be readonly. If the ´readOnly´ property is specified in the ´options´ property, this property has no effect.
+         */
+        "readonly": boolean;
         /**
           * Specifies the theme to be used for rendering.
          */
         "theme": string;
         /**
-          * Specifies the value of the editor. If `mode` === `"diff-editor"`, this property will be used as the original model.
+          * Update the editor's options after the editor has been created.
+          * @param options Set of options to be updated
+         */
+        "updateOptions": (options: CodeEditorOptions) => Promise<void>;
+        /**
+          * Specifies the value of the editor.
          */
         "value": string;
         /**
@@ -3656,6 +3684,12 @@ declare global {
         prototype: HTMLChCodeElement;
         new (): HTMLChCodeElement;
     };
+    interface HTMLChCodeDiffEditorElement extends Components.ChCodeDiffEditor, HTMLStencilElement {
+    }
+    var HTMLChCodeDiffEditorElement: {
+        prototype: HTMLChCodeDiffEditorElement;
+        new (): HTMLChCodeDiffEditorElement;
+    };
     interface HTMLChCodeEditorElement extends Components.ChCodeEditor, HTMLStencilElement {
     }
     var HTMLChCodeEditorElement: {
@@ -5091,6 +5125,7 @@ declare global {
         "ch-barcode-scanner": HTMLChBarcodeScannerElement;
         "ch-checkbox": HTMLChCheckboxElement;
         "ch-code": HTMLChCodeElement;
+        "ch-code-diff-editor": HTMLChCodeDiffEditorElement;
         "ch-code-editor": HTMLChCodeEditorElement;
         "ch-combo-box": HTMLChComboBoxElement;
         "ch-dialog": HTMLChDialogElement;
@@ -5613,41 +5648,55 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface ChCodeEditor {
-        /**
-          * Allow the user to resize the diff editor split view. This property only works if `mode` === `"diff-editor"`.
-         */
-        "enableSplitViewResizing"?: boolean;
+    interface ChCodeDiffEditor {
         /**
           * Specifies the language of the auto created model in the editor.
          */
         "language": string;
         /**
-          * Specifies the rendered mode of the editor, allowing to set a normal editor or a diff editor.
-         */
-        "mode"?: "editor" | "diff-editor";
-        /**
-          * Specifies the modified value of the diff editor. This property only works if `mode` === `"diff-editor"`.
+          * Specifies the modified value of the diff editor.
          */
         "modifiedValue"?: string;
         /**
-          * Specifies if the modified value of the diff editor should be readonly. This property only works if `mode` === `"diff-editor"`.
+          * Specifies the editor options.
          */
-        "modifiedValueReadonly"?: boolean;
+        "options"?: CodeDiffEditorOptions;
         /**
-          * Specifies if the editor should be readonly. When `mode` === `"diff-editor"` this property will apply to the left pane.  - If `mode` === `"editor"` defaults to `false`.  - If `mode` === `"diff-editor"` defaults to `true`.
+          * Specifies if the editor should be readonly. If the ´readOnly´ or ´originalEditable´ property is specified in the ´options´ property, this property has no effect.
          */
         "readonly"?: boolean;
         /**
-          * Render the differences in two side-by-side editors. Only works if `mode` === `"diff-editor"`.
+          * Specifies the theme to be used for rendering.
+         */
+        "theme"?: string;
+        /**
+          * Specifies the original value of the diff editor.
+         */
+        "value"?: string;
+        /**
+          * Specifies the schema URI for the YAML language.
+         */
+        "yamlSchemaUri"?: string;
+    }
+    interface ChCodeEditor {
+        /**
+          * Specifies the language of the auto created model in the editor.
+         */
+        "language": string;
+        /**
+          * Specifies the editor options.
          */
-        "renderSideBySide"?: boolean;
+        "options"?: CodeEditorOptions;
+        /**
+          * Specifies if the editor should be readonly. If the ´readOnly´ property is specified in the ´options´ property, this property has no effect.
+         */
+        "readonly"?: boolean;
         /**
           * Specifies the theme to be used for rendering.
          */
         "theme"?: string;
         /**
-          * Specifies the value of the editor. If `mode` === `"diff-editor"`, this property will be used as the original model.
+          * Specifies the value of the editor.
          */
         "value"?: string;
         /**
@@ -8455,6 +8504,7 @@ declare namespace LocalJSX {
         "ch-barcode-scanner": ChBarcodeScanner;
         "ch-checkbox": ChCheckbox;
         "ch-code": ChCode;
+        "ch-code-diff-editor": ChCodeDiffEditor;
         "ch-code-editor": ChCodeEditor;
         "ch-combo-box": ChComboBox;
         "ch-dialog": ChDialog;
@@ -8576,6 +8626,7 @@ declare module "@stencil/core" {
              * - When the code highlighting is needed at runtime, the control will load on demand the code parser and the programming language needed to parse the code.
              */
             "ch-code": LocalJSX.ChCode & JSXBase.HTMLAttributes<HTMLChCodeElement>;
+            "ch-code-diff-editor": LocalJSX.ChCodeDiffEditor & JSXBase.HTMLAttributes<HTMLChCodeDiffEditorElement>;
             "ch-code-editor": LocalJSX.ChCodeEditor & JSXBase.HTMLAttributes<HTMLChCodeEditorElement>;
             "ch-combo-box": LocalJSX.ChComboBox & JSXBase.HTMLAttributes<HTMLChComboBoxElement>;
             /**

Diff for: src/components/code-editor/monaco/monaco.ts renamed to src/common/monaco/monaco.ts

@@ -0,0 +1,4 @@
+import * as monaco from "monaco-editor";
+
+export interface CodeDiffEditorOptions
+  extends monaco.editor.IStandaloneDiffEditorConstructionOptions {}

Diff for: src/components/code-editor/monaco/yaml.worker.ts renamed to src/common/monaco/yaml.worker.ts

@@ -0,0 +1,13 @@
+// This is a WA to import required styles for the editor in production build
+@import "../../common/monaco/monaco-styles-after-build.scss";
+
+ch-code-diff-editor {
+  display: grid;
+  position: relative;
+}
+
+.ch-code-diff-editor-absolute-content {
+  display: grid;
+  position: absolute;
+  inset: 0;
+}