chore: add thireds

package.json

@@ -89,7 +89,7 @@
     "qrious": "^4.0.2",
     "@webcomponents/custom-elements": "^1.6.0",
     "aos": "^3.0.0-beta.6",
-    "@ng-util/monaco-editor": "^16.0.0",
+    "@ng-util/monaco-editor": "^16.0.1",
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2",
     "isutf8": "^4.0.0",

packages/form/widgets-third/monaco-editor/demo/simple.md

@@ -0,0 +1,48 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFSchema } from '@delon/form';
+import type { MonacoEditorWidgetSchema } from '@delon/form/widgets-third/monaco-editor';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      json: {
+        type: 'string',
+        title: 'JSON',
+        default: `{"string": "abc","number": 1 }`,
+        ui: {
+          widget: 'monaco-editor',
+          options: { language: 'json' }
+        } as MonacoEditorWidgetSchema
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```

packages/form/widgets-third/monaco-editor/index.en-US.md

@@ -0,0 +1,33 @@
+---
+title: monaco-editor
+subtitle: Monaco Editor
+type: Third Widgets
+---
+
+Markdown Editor
+
+## How to Use
+
+**Installation dependencies**  
+
+`yarn add @ng-util/monaco-editor`
+
+**Import module**    
+
+- 1. Import `NuMonacoEditorModule.forRoot()` in `app.module.ts`
+- 2. Import `MonacoEditorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+> For more Monaco Editor configuration, please refer to [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[options]` | Configuration options, [official website](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - |
+| `[delay]` | Time of lazy loading | `number` | - |
+| `[change]` | Callback function when content in editor is changed | `(value: string) => void` | - |
+| `[height]` | Height of monaco editor | `string` | `200px` |
+| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - |
+| `(event)` | Event callback | `EventEmitter<NuMonacoEditorEvent>` | - |

packages/form/widgets-third/monaco-editor/index.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NuMonacoEditorModule } from '@ng-util/monaco-editor';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+
+import { MonacoEditorWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, DelonFormModule, NuMonacoEditorModule],
+  declarations: [MonacoEditorWidget]
+})
+export class MonacoEditorWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(MonacoEditorWidget.KEY, MonacoEditorWidget);
+  }
+}

packages/form/widgets-third/monaco-editor/index.zh-CN.md

@@ -0,0 +1,33 @@
+---
+title: monaco-editor
+subtitle: Monaco Editor
+type: Third Widgets
+---
+
+Markdown编辑器。
+
+## 如何使用
+
+**安装依赖**  
+
+`yarn add @ng-util/monaco-editor`
+
+**导入模块**
+
+- 1、在 `app.module.ts` 下导入 `NuMonacoEditorModule.forRoot()`
+- 2、在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `MonacoEditorWidgetModule`。
+
+> 关于更多 Monaco Editor 配置请参考 [@ng-util/monaco-editor](https://github.com/ng-util/ng-util/blob/master/packages/monaco-editor/README.md#usage)。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[options]` | 配置项说明，[见官网](https://microsoft.github.io/monaco-editor/docs.html) | `monaco.editor.IStandaloneEditorConstructionOptions` | - |
+| `[delay]` | 延迟加载时间 | `number` | - |
+| `[change]` | 编辑器内容发生改变时会触发该事件 | `(value: string) => void` | - |
+| `[height]` | Height of monaco editor | `string` | `200px` |
+| `[model]` | Model of monaco editor | `NuMonacoEditorModel` | - |
+| `(event)` | Event callback | `EventEmitter<NuMonacoEditorEvent>` | - |

packages/form/widgets-third/monaco-editor/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-third-monaco-editor",
+    "entryFile": "index.ts"
+  }
+}

packages/form/widgets-third/monaco-editor/schema.ts

@@ -0,0 +1,19 @@
+import type { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor';
+
+import type { SFUISchemaItem } from '@delon/form';
+
+export interface MonacoEditorWidgetSchema extends SFUISchemaItem {
+  options?: monaco.editor.IStandaloneEditorConstructionOptions;
+  delay?: number;
+  change?: (value: string) => void;
+  model?: NuMonacoEditorModel;
+  /**
+   * Height of monaco editor, default: `200px`
+   */
+  height?: string;
+  /**
+   * Whether to automatically format the document
+   */
+  autoFormat?: boolean;
+  event?: (ev: NuMonacoEditorEvent) => void;
+}