feat(module:code-editor): support MonacoEnvironment config in NZ_CONF…

…IG (#7359)

close #6502

components/code-editor/code-editor.service.ts

@@ -53,6 +53,9 @@ export class NzCodeEditorService implements OnDestroy {
 
     this.document = _document;
     this.config = { ...globalConfig };
+    if (this.config.monacoEnvironment) {
+      window.MonacoEnvironment = { ...this.config.monacoEnvironment };
+    }
     this.option = this.config.defaultEditorOption || {};
 
     this.subscription = this.nzConfigService.getConfigChangeEventForComponent(NZ_CONFIG_MODULE_NAME).subscribe(() => {
@@ -72,7 +75,7 @@ export class NzCodeEditorService implements OnDestroy {
     this.option = { ...this.option, ...option };
     this.option$.next(this.option);
 
-    if (option.theme) {
+    if ('theme' in option && option.theme) {
       monaco.editor.setTheme(option.theme);
     }
   }

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

@@ -93,7 +93,7 @@ You can set the default configuration of the `CodeEditor` component through the
 | --- | --- | --- | --- |
 | `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` | - |
+| `onLoad` | The hook invoked when the resource of monaco editor is loaded. At this moment and afterwards the global variable `monaco` is usable (`window.MonacoEnvironment = { globalAP: true }` is required if monaco-editor's version is greater or equal to 0.22.0) | `() => 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`  | - |
 | `useStaticLoading` | Load monaco editor statically | `boolean` | `false` |

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

@@ -100,7 +100,7 @@ npm install monaco-editor
 | --- | --- | --- | --- |
 | `assetsRoot` | 组件加载 monaco editor 资源文件的位置 | `string` \| `SageUrl` | - |
 | `defaultEditorOption` | 默认的编辑器设置，[参考 monaco editor 的定义](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` |
-| `onLoad` | 当 monaco editor 资源加载完毕时触发的钩子，此时全局对象 `monaco` 可用 | `() => void` | - |
+| `onLoad` | 当 monaco editor 资源加载完毕时触发的钩子，此时全局对象 `monaco` 可用 (monaco-editor 版本不小于 0.22.0 时需定义 `window.MonacoEnvironment = { globalAP: true }`) | `() => void` | - |
 | `onFirstEditorInit` | 当第一个编辑器请求初始化时触发的钩子 | `() => void` | - |
 | `onInit` | 每个编辑器请求初始化时触发的钩子  | `() => void`  | - |
 | `useStaticLoading` | 使用静态加载 | `boolean` | `false` |

components/code-editor/typings.ts

@@ -3,11 +3,17 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { editor } from 'monaco-editor';
+import { editor, Environment } from 'monaco-editor';
 
 import IStandAloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions;
 import IDiffEditorConstructionOptions = editor.IDiffEditorConstructionOptions;
 
+declare global {
+  interface Window {
+    MonacoEnvironment: Environment | undefined;
+  }
+}
+
 export type EditorOptions = IStandAloneEditorConstructionOptions;
 export type DiffEditorOptions = IDiffEditorConstructionOptions;
 export type JoinedEditorOptions = EditorOptions | DiffEditorOptions;

components/core/config/config.ts

@@ -8,6 +8,7 @@ import { InjectionToken, TemplateRef, Type } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
 
 import { ThemeType } from '@ant-design/icons-angular';
+import { Environment } from 'monaco-editor';
 
 import { NzBreakpointEnum } from 'ng-zorro-antd/core/services';
 import {
@@ -111,6 +112,7 @@ export interface CodeEditorConfig {
   assetsRoot?: string | SafeUrl;
   defaultEditorOption?: NzSafeAny;
   useStaticLoading?: boolean;
+  monacoEnvironment?: Environment;
 
   onLoad?(): void;
 

package.json

@@ -115,7 +115,7 @@
     "lodash.debounce": "^4.0.8",
     "marked": "^4.0.10",
     "minimist": "^1.2.5",
-    "monaco-editor": "^0.21.2",
+    "monaco-editor": "^0.33.0",
     "ng-packagr": "^13.0.3",
     "ngx-color": "^6.2.0",
     "node-prismjs": "^0.1.2",

scripts/site/_site/doc/app/app.module.ts

@@ -77,7 +77,16 @@ const icons: IconDefinition[] = [LeftOutline, RightOutline, EditOutline];
   ],
   providers: [
     Title,
-    { provide: NZ_CONFIG, useValue: { icon: { nzTwotoneColor: '#1890ff' }, global: { nzDirection: 'ltr' } } }
+    {
+      provide: NZ_CONFIG,
+      useValue: {
+        codeEditor: {
+          monacoEnvironment: { globalAPI: true }
+        },
+        icon: { nzTwotoneColor: '#1890ff' },
+        global: { nzDirection: 'ltr' }
+      }
+    }
   ],
   bootstrap: [AppComponent]
 })