feat: add loading and toolkit

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/doc/index.en-US.md

@@ -46,9 +46,11 @@ npm install monaco-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
@@ -65,7 +67,7 @@ You can inject an object that implements `NzCodeEditorConfig` with the injection
 | --- | --- | --- | --- |
 | `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 `monaco` is usable | `() => void` | - |
+| `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`  | - |
 

components/code-editor/doc/index.zh-CN.md

@@ -42,22 +42,24 @@ import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
 npm install monaco-editor
 ```
 
-#### 方法
-
-| 名称 | 描述 |
-| --- | --- |
-| `layout()` | 强制组件重新渲染 |
-
 ### nz-code-editor
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzEditorMode]` | 编辑器的模式 | `normal`\|`diff` | `normal` |
+| `[nzLoading]` | 加载中 | `boolean` | `false` |
 | `[nzOriginalText]` | Diff 模式下，左半边的文本内容 | `boolean` | `false` |
 | `[nzFullControl]` | 完全控制模式，此模式下组件不会帮助用户处理 `TextModel`，用户应当自行管理 monaco editor 实例 | `boolean` | `false` |
 | `[nzEditorOption]` | 编辑器选项，[参考 monaco editor 的定义](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` |
+| `[nzToolkit]` | 暴露快捷操作 | `TemplateRef<void>` | - |
 | `(nzEditorInitialized)` | 当编辑器组件初始化完毕之后派发事件  | `IEditor` \| `IDiffEditor` | - |
 
+#### 方法
+
+| 名称 | 描述 |
+| --- | --- |
+| `layout()` | 强制组件重新渲染 |
+
 ### NZ_CODE_EDITOR_CONFIG
 
 你可以通过注入令牌 `NZ_CODE_EDITOR_CONFIG` 提供一个符合 `NzCodeEditorConfig` 接口的对象，来进行配置、使用钩子或设置编辑器默认选项。

components/code-editor/nz-code-editor.component.html

@@ -1,16 +1,7 @@
-<div #trigger
-     class="ant-resize"
-     [class.ant-resize-dotted]="nzLazy && isDragging && canMove"
-     [class.ant-resize-vertical]="nzMode === 'vertical'"
-     [class.ant-resize-horizontal]="nzMode === 'horizontal'"
-     [class.ant-resize-show-border]="nzShowBorder || (nzLazy && isDragging)"
-     [class.ant-resize-can-move]="canMove && !nzHidden"
-     [style.left.px]="nzMode === 'vertical' ? left : 0"
-     [style.top.px]="nzMode === 'horizontal' ? top : 0"
-     (mousedown)="startDragging()">
-  <div class="ant-resize-handler"
-       *ngIf="!nzHidden && canMove">
-    <i nz-icon
-       nzType="ellipsis"></i>
-  </div>
+<div class="ant-code-editor-loading" *ngIf="nzLoading">
+  <nz-spin></nz-spin>
+</div>
+
+<div class="ant-code-editor-toolkit" *ngIf="nzToolkit">
+  <ng-template [ngTemplateOutlet]="nzToolkit"></ng-template>
 </div>

components/code-editor/nz-code-editor.component.ts

@@ -17,6 +17,7 @@ import {
   NgZone,
   OnDestroy,
   Output,
+  TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -66,17 +67,21 @@ declare const monaco: any;
 export class NzCodeEditorComponent implements OnDestroy, AfterViewInit {
   @Input() nzEditorMode: NzEditorMode = 'normal';
   @Input() nzOriginalText = '';
+  @Input() @InputBoolean() nzLoading = false;
   @Input() @InputBoolean() nzFullControl = false;
+  @Input() nzToolkit: TemplateRef<void>;
+
   @Input() set nzEditorOption(value: JoinedEditorOption) {
     this.editorOption$.next(value);
   }
 
   @Output() readonly nzEditorInitialized = new EventEmitter<IEditor | IDiffEditor>();
 
+  editorOptionCached: JoinedEditorOption = {};
+
   private readonly el: HTMLElement;
   private destroy$ = new Subject<void>();
   private resize$ = new Subject<void>();
-  private editorOptionCached: JoinedEditorOption = {};
   private editorOption$ = new BehaviorSubject<JoinedEditorOption>({});
   private editorInstance: IEditor | IDiffEditor;
   private value = '';

components/code-editor/nz-code-editor.module.ts

@@ -10,12 +10,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 import { NzCodeEditorComponent } from './nz-code-editor.component';
 
 @NgModule({
   declarations: [NzCodeEditorComponent],
-  imports: [CommonModule, NzIconModule],
+  imports: [CommonModule, NzIconModule, NzSpinModule],
   exports: [NzCodeEditorComponent]
 })
 export class NzCodeEditorModule {}

components/code-editor/style/index.less

@@ -5,6 +5,44 @@
 
 .@{code-editor-prefix-cls} {
   display: block;
+  position: relative;
+  overflow: hidden;
   height: 100%;
   width: 100%;
+  background-color: @component-background;
+
+  .@{code-editor-prefix-cls}-loading {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    z-index: 100;
+    background-color: @component-background;
+  }
+
+  .@{code-editor-prefix-cls}-toolkit {
+    top: 20px;
+    right: 160px;
+    position: absolute;
+    height: 24px;
+    z-index: 2;
+    min-width: 100px;
+    background: transparent;
+    text-align: right;
+
+    i {
+      position: relative;
+      right: 4px;
+      cursor: pointer;
+
+      &:not(:last-child) {
+        padding-right: 4px;
+      }
+
+      &.active {
+        color: @primary-color
+      }
+    }
+  }
 }

components/package.json

@@ -37,5 +37,8 @@
     "@angular/common": "~8.0.0",
     "@angular/core": "~8.0.0",
     "@angular/forms": "~8.0.0"
+  },
+  "devDependencies": {
+    "@antv/g2": "^3.5.8-beta.1"
   }
 }

components/tsconfig.json

@@ -17,7 +17,7 @@
       "ng-zorro-antd/*": ["./*"]
     }
   },
-  "files": ["./ng-zorro-antd.module.ts"],
+  "files": ["./ng-zorro-antd.module.ts", "*/public-api.ts"],
   "angularCompilerOptions": {
     "skipTemplateCodegen": true
   }