From 4dfd9cd21507fcf4382d5f28f03fd969d8fc425c Mon Sep 17 00:00:00 2001 From: Junhan Yang <50307523+yangjunhan@users.noreply.github.com> Date: Wed, 20 Apr 2022 15:39:04 +0800 Subject: [PATCH] feat(module:code-editor): support MonacoEnvironment config in NZ_CONFIG (#7359) close #6502 --- components/code-editor/code-editor.service.ts | 5 ++++- components/code-editor/doc/index.en-US.md | 2 +- components/code-editor/doc/index.zh-CN.md | 2 +- components/code-editor/typings.ts | 8 +++++++- components/core/config/config.ts | 2 ++ package.json | 2 +- scripts/site/_site/doc/app/app.module.ts | 11 ++++++++++- 7 files changed, 26 insertions(+), 6 deletions(-) diff --git a/components/code-editor/code-editor.service.ts b/components/code-editor/code-editor.service.ts index 520f7179ca4..a1097efe959 100644 --- a/components/code-editor/code-editor.service.ts +++ b/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); } } diff --git a/components/code-editor/doc/index.en-US.md b/components/code-editor/doc/index.en-US.md index b23def5a0e4..736af9a4036 100644 --- a/components/code-editor/doc/index.en-US.md +++ b/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` | diff --git a/components/code-editor/doc/index.zh-CN.md b/components/code-editor/doc/index.zh-CN.md index 43f12bc66f1..b1c471ab197 100644 --- a/components/code-editor/doc/index.zh-CN.md +++ b/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` | diff --git a/components/code-editor/typings.ts b/components/code-editor/typings.ts index 61e996b27c3..70f653edefe 100644 --- a/components/code-editor/typings.ts +++ b/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; diff --git a/components/core/config/config.ts b/components/core/config/config.ts index 5d998a1cd1e..1bd55d95e66 100644 --- a/components/core/config/config.ts +++ b/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; diff --git a/package.json b/package.json index 87f485c2839..1c31ac26a71 100644 --- a/package.json +++ b/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", diff --git a/scripts/site/_site/doc/app/app.module.ts b/scripts/site/_site/doc/app/app.module.ts index 93447291a85..90c4632a02b 100644 --- a/scripts/site/_site/doc/app/app.module.ts +++ b/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] })