feat(module:code-editor): add code editor component (#3706)

* feat(module:code-editor): add component

* docs: change docs

* fix: remove style export in primary entrance

angular.json

@@ -27,6 +27,11 @@
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/monaco-editor/min/vs",
+                "output": "/assets/vs/"
               }
             ],
             "styles": [
@@ -210,6 +215,13 @@
                 "with": "components/core/environments/environment.test.ts"
               }
             ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/monaco-editor/min/vs",
+                "output": "/assets/vs/"
+              }
+            ],
             "main": "components/test.ts",
             "karmaConfig": "components/karma.conf.js",
             "polyfills": "components/polyfills.ts",

components/code-editor/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The simplest usage.

components/code-editor/demo/basic.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-code-editor-basic',
+  template: `
+    <nz-code-editor class="editor" [ngModel]="code" [nzEditorOption]="{ language: 'typescript' }"></nz-code-editor>
+  `,
+  styles: [
+    `
+      .editor {
+        height: 200px;
+      }
+    `
+  ]
+})
+export class NzDemoCodeEditorBasicComponent {
+  code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'
+
+@Component({})
+export class SomeComponent {}`;
+}

components/code-editor/demo/complex.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 复杂
+  en-US: Complex
+---
+
+## zh-CN
+
+带加载效果和工具条的更复杂的例子。
+
+## en-US
+
+A more complex demo with loading effect and toolkit.

components/code-editor/demo/complex.ts

@@ -0,0 +1,82 @@
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, Renderer2, ViewChild } from '@angular/core';
+import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
+
+@Component({
+  selector: 'nz-demo-code-editor-complex',
+  template: `
+    <p nz-paragraph style="margin-bottom: 8px;">
+      Loading
+      <nz-switch [(ngModel)]="loading"></nz-switch>
+    </p>
+    <nz-code-editor
+      class="editor"
+      [class.full-screen]="fullScreen"
+      [ngModel]="code"
+      [nzLoading]="loading"
+      [nzToolkit]="toolkit"
+      [nzEditorOption]="{ language: 'javascript' }"
+    ></nz-code-editor>
+    <ng-template #toolkit>
+      <i
+        nz-icon
+        [class.active]="fullScreen"
+        [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
+        (click)="toggleFullScreen()"
+      ></i>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .editor {
+        height: 200px;
+      }
+
+      .full-screen {
+        position: fixed;
+        z-index: 999;
+        height: 100vh;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+      }
+    `
+  ]
+})
+export class NzDemoCodeEditorComplexComponent {
+  @ViewChild(NzCodeEditorComponent, { static: false }) editorComponent: NzCodeEditorComponent;
+
+  loading = true;
+  fullScreen = false;
+  code = `function flatten(arr) {
+  if (!(arr instanceof Array)) {
+    throw new Error('The parameter must be an array.');
+  }
+
+  function partial(arr_) {
+    return arr_.reduce((previous, current) => {
+      if (current instanceof Array) {
+        previous.push(...partial(current));
+        return previous;
+      } else {
+        previous.push(current);
+        return previous;
+      }
+    }, []);
+  }
+
+  return partial(arr);
+}
+
+console.log(flatten(['1', 2, [[3]]]))`;
+
+  // tslint:disable-next-line no-any
+  constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2) {}
+
+  toggleFullScreen(): void {
+    this.fullScreen = !this.fullScreen;
+    this.renderer.setStyle((this.document as Document).body, 'overflow-y', this.fullScreen ? 'hidden' : null);
+    this.editorComponent.layout();
+  }
+}

components/code-editor/demo/config.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: 修改配置
+  en-US: Change Config
+---
+
+## zh-CN
+
+可以在运行时修改编辑器的默认配置，和页面上编辑器的配置。
+
+## en-US
+
+You can change default options and options of existing editors at runtime.

components/code-editor/demo/config.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { NzCodeEditorService } from 'ng-zorro-antd/code-editor';
+
+@Component({
+  selector: 'nz-demo-code-editor-config',
+  template: `
+    <p nz-paragraph style="margin-bottom: 8px;">
+      Change Theme
+      <nz-switch
+        [ngModel]="dark"
+        (ngModelChange)="onDarkModeChange($event)"
+        [nzUnCheckedChildren]="unchecked"
+        [nzCheckedChildren]="checked"
+      ></nz-switch>
+    </p>
+    <ng-template #unchecked>
+      <i nz-icon nzType="bulb"></i>
+    </ng-template>
+    <ng-template #checked>
+      <i nz-icon nzType="poweroff"></i>
+    </ng-template>
+    <nz-code-editor style="height: 200px" [ngModel]="code" [nzEditorOption]="{ language: 'markdown' }"></nz-code-editor>
+  `
+})
+export class NzDemoCodeEditorConfigComponent {
+  dark = false;
+
+  code = `**All monaco editor instances on the same page always have the same color. It's a by-design of monaco editor.**
+
+You can refer to [this issue](https://github.com/Microsoft/monaco-editor/issues/338).`;
+
+  constructor(private nzCodeEditorService: NzCodeEditorService) {}
+
+  onDarkModeChange(dark: boolean): void {
+    this.dark = dark;
+    this.nzCodeEditorService.updateDefaultOption({ theme: dark ? 'vs-dark' : 'vs' });
+  }
+}

components/code-editor/demo/diff.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: Diff 编辑器
+  en-US: Diff Editor
+---
+
+## zh-CN
+
+使用 diff 模式。
+
+## en-US
+
+Use diff editor mode.

components/code-editor/demo/diff.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-code-editor-diff',
+  template: `
+    <nz-code-editor
+      class="editor"
+      [nzOriginalText]="originalCode"
+      [nzEditorMode]="'diff'"
+      [ngModel]="code"
+      [nzEditorOption]="{ language: 'typescript' }"
+    ></nz-code-editor>
+  `,
+  styles: [
+    `
+      .editor {
+        height: 200px;
+      }
+    `
+  ]
+})
+export class NzDemoCodeEditorDiffComponent {
+  originalCode = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
+
+@Component({})
+export class SomeComponent {}`;
+
+  code = `import { NzCodeEditorModule } from 'ng-zorro-antd';
+
+@Component({})
+export class SomeComponent {}`;
+}

components/code-editor/demo/full-control.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 完全受控模式
+  en-US: Full Control Mode
+---
+
+## zh-CN
+
+使用完全受控模式，自行管理 monaco editor 的 TextModel。
+
+## en-US
+
+Use full control mode and mangage TextModel of monaco editor by yourself.

components/code-editor/demo/full-control.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+
+// tslint:disable-next-line no-any
+declare const monaco: any;
+
+@Component({
+  selector: 'nz-demo-code-editor-full-control',
+  template: `
+    <nz-code-editor class="editor" [nzFullControl]="true" (nzEditorInitialized)="onEditorInit($event)"></nz-code-editor>
+  `,
+  styles: [
+    `
+      .editor {
+        height: 200px;
+      }
+    `
+  ]
+})
+export class NzDemoCodeEditorFullControlComponent {
+  // tslint:disable-next-line no-any
+  editor: any;
+
+  code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor'
+
+@Component({})
+export class SomeComponent {}`;
+
+  // tslint:disable-next-line no-any
+  onEditorInit(e: any): void {
+    this.editor = e;
+    this.editor.setModel(monaco.editor.createModel("console.log('Hello ng-zorro-antd')", 'typescript'));
+  }
+}

components/code-editor/demo/module

@@ -0,0 +1,7 @@
+import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTypographyModule } from 'ng-zorro-antd/typography'
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzSwitchModule } from 'ng-zorro-antd/switch'
+
+export const moduleList = [ NzCodeEditorModule, NzSpinModule, NzIconModule, NzSwitchModule, NzTypographyModule ];

components/code-editor/doc/index.en-US.md

@@ -0,0 +1,66 @@
+---
+category: Components
+type: Date Entry
+title: Code Editor
+cols: 1
+experimental: true
+---
+
+Support monaco editor in Angular.
+
+## When To Use
+
+- When you want to use monaco editor in Angular.
+
+## API
+
+Before using this component, you should load resources of monaco editor itself. You can load these resources with Angular CLI. Write this configuration in angular.json:
+
+```diff
+"assets": [
++ {
++   "glob": "**/*",
++   "input": "./node_modules/monaco-editor/min/vs",
++   "output": "/assets/vs/"
++ }
+],
+```
+
+Or you can provide an `assetsRoot` to determine where should the component load resources of monaco editor.
+
+And don't forget to install `monaco-editor`.
+
+```sh
+npm install monaco-editor
+```
+
+### nz-code-editor
+
+| Parameter | Description | Type | Default |
+| --- | --- | --- | --- |
+| `[nzEditorMode]` | Mode of monaco editor | `normal`\|`diff` | `normal` |
+| `[nzLoading]` | Show the loading spin | `boolean` | `false` |
+| `[nzOriginalText]` | The content of the left editor in `diff` mode | `boolean` | `false` |
+| `[nzFullControl]` | Enable full control mode. User should manage `TextModel` manually in this mode | `boolean` | `false` |
+| `[nzEditorOption]` | [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` |
+| `[nzToolkit]` | A placeholder for adding some quick actions | `TemplateRef<void>` | - |
+| `(nzEditorInitialized)` | The event that a code editor is initialized  | `IEditor` \| `IDiffEditor` | - |
+
+#### Methods
+
+| Method | Description |
+| --- | --- |
+| `layout()` | Force monaco editor to re-render itself |
+
+### NZ_CODE_EDITOR_CONFIG
+
+You can inject an object that implements `NzCodeEditorConfig` with the injection token `NZ_CODE_EDITOR_CONFIG`.
+
+| Parameter | Description | Type | Default |
+| --- | --- | --- | --- |
+| `assetsRoot` | Where should the component load resource of monaco editor | `string` \| `SageUrl` | - |
+| `defaultEditorOption` | Default options. [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` |
+| `onLoad` | The hook invoked when the resource of monaco editor is loaded. At this moment and afterwards the global variable `monaco` is usable | `() => void` | - |
+| `onFirstEditorInit` | The hook invoked when the first monaco editor is initialized | `() => void` | - |
+| `onInit` | The hook invoked every time a monaco editor is initialized | `() => void`  | - |
+