remove ngx-monaco-editor-v2

Ahoo-Wang · Feb 20, 2024 · 01e180f · 01e180f
1 parent ff6b2d3
commit 01e180f
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 47 deletions.
diff --git a/cosky-dashboard/angular.json b/cosky-dashboard/angular.json
@@ -35,13 +35,14 @@
               },
               {
                 "glob": "**/*",
-                "input": "node_modules/monaco-editor",
-                "output": "/assets/monaco/"
+                "input": "./node_modules/monaco-editor/min/vs",
+                "output": "/assets/vs/"
               }
             ],
             "styles": [
               "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/ng-zorro-antd/code-editor/style/index.min.css"
             ],
             "scripts": [
               "node_modules/echarts/dist/echarts.min.js"

diff --git a/cosky-dashboard/package-lock.json b/cosky-dashboard/package-lock.json
diff --git a/cosky-dashboard/package.json b/cosky-dashboard/package.json
@@ -22,7 +22,6 @@
     "file-saver": "^2.0.5",
     "monaco-editor": "^0.44.0",
     "ng-zorro-antd": "^17.0.1",
-    "ngx-monaco-editor-v2": "^17.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
@@ -41,4 +40,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.2.2"
   }
-}
+}
diff --git a/cosky-dashboard/src/app/app.module.ts b/cosky-dashboard/src/app/app.module.ts
@@ -46,7 +46,7 @@ import {UserChangePwdComponent} from './components/user/user-change-pwd/user-cha
 import {UserAddComponent} from './components/user/user-add/user-add.component';
 import {AuditLogComponent} from './components/audit-log/audit-log.component';
 import {TopologyComponent} from './components/topology/topology.component';
-import {MonacoEditorModule} from "ngx-monaco-editor-v2";
+import {NzCodeEditorModule} from 'ng-zorro-antd/code-editor';
 import {NgZorroAntdModule} from "./ng-zorro-antd.module";
 import {NzWaterMarkModule} from "ng-zorro-antd/water-mark";
 
@@ -90,8 +90,7 @@ export const httpInterceptorProviders = [
     IconsProviderModule,
     NgZorroAntdModule,
     NzWaterMarkModule,
-    MonacoEditorModule,
-    MonacoEditorModule.forRoot()
+    NzCodeEditorModule
   ],
   providers: [{provide: NZ_I18N, useValue: zh_CN}, httpInterceptorProviders],
   bootstrap: [AppComponent]

diff --git a/cosky-dashboard/src/app/components/config/config-editor.service.ts b/cosky-dashboard/src/app/components/config/config-editor.service.ts
@@ -78,7 +78,7 @@ export class ConfigEditorService {
 
     const drawerRef = this.drawerService.create<ConfigVersionComponent, { configId: string, version: number }, string>({
       nzTitle: `Config [${configId}] Version [${version}]`,
-      nzWidth: '880px',
+      nzWidth: '960px',
       nzContent: ConfigVersionComponent,
       nzContentParams: {
         configId,

diff --git a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.html
@@ -72,10 +72,10 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider nzText="Config Data"></nz-divider>
-  <ngx-monaco-editor style="min-height: 600px;"
-                     [options]="editorOptions" [(ngModel)]="config.data"
-                     [ngModelOptions]="{standalone: true}"
-  ></ngx-monaco-editor>
+  <nz-code-editor style="min-height: 600px;"
+                     [nzEditorOption]="editorOptions" [(ngModel)]="config.data"
+                  [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
 
   <nz-divider></nz-divider>
   <nz-form-item>

diff --git a/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts b/cosky-dashboard/src/app/components/config/config-editor/config-editor.component.ts
@@ -19,7 +19,6 @@ import {NzMessageService} from 'ng-zorro-antd/message';
 import {ConfigClient} from '../../../api/config/ConfigClient';
 import {ConfigName, Configs} from '../../../api/config/Configs';
 
-
 @Component({
   selector: 'app-config-editor',
   templateUrl: './config-editor.component.html',

diff --git a/cosky-dashboard/src/app/components/config/config-version/config-version.component.html b/cosky-dashboard/src/app/components/config/config-version/config-version.component.html
@@ -67,15 +67,17 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider [nzText]="'Current Data - VS - History Version:'+configHistory.version"></nz-divider>
-  <ngx-monaco-diff-editor
-    style="min-height: 660px;"
-    [options]=" {theme:'vs-dark',readOnly:true}" [originalModel]="configCurrentCode"
-    [modifiedModel]="configHistoryCode"
-    (onInit)="onInitDiffEditor($event)"></ngx-monaco-diff-editor>
+  <nz-code-editor
+    style="height: 660px;"
+    nzEditorMode="diff"
+    [nzEditorOption]=" {language:lang,theme:'vs-dark',readOnly:true}" [nzOriginalText]="configHistoryCode"
+    [ngModel]="configCurrentCode"
+    [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
   <nz-divider></nz-divider>
   <nz-form-item>
     <button nz-button nzType="primary" nzSize="large" nzDanger nzBlock (click)="rollback()">Rollback To
-      Version:[{{configHistory.version}}]
+      Version:[{{ configHistory.version }}]
     </button>
   </nz-form-item>
 </form>

diff --git a/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts b/cosky-dashboard/src/app/components/config/config-version/config-version.component.ts
@@ -28,9 +28,10 @@ export class ConfigVersionComponent implements OnInit {
   @Input() version!: number;
   configHistory!: ConfigHistoryDto;
   configCurrent!: ConfigDto;
+  configHistoryCode: string = '';
+  configCurrentCode: string = '';
+  lang!: string;
   @Output() rollbackAfter: EventEmitter<boolean> = new EventEmitter<boolean>();
-  configHistoryCode: any = {code: ''};
-  configCurrentCode: any = {code: ''};
 
   constructor(private namespaceContext: NamespaceContext,
               private configClient: ConfigClient) {
@@ -39,16 +40,16 @@ export class ConfigVersionComponent implements OnInit {
 
   ngOnInit(): void {
     const configName = ConfigName.of(this.configId);
-    const lang = Configs.extAsLang(configName.ext);
+    this.lang = Configs.extAsLang(configName.ext);
     this.configClient.getConfigHistory(this.namespaceContext.ensureCurrentNamespace(), this.configId, this.version)
       .subscribe(configHistory => {
         this.configHistory = configHistory;
-        this.configHistoryCode = Object.assign({}, this.configHistoryCode, {language: lang, code: configHistory.data});
+        this.configHistoryCode = configHistory.data
       });
     this.configClient.getConfig(this.namespaceContext.ensureCurrentNamespace(), this.configId)
       .subscribe(config => {
         this.configCurrent = config;
-        this.configCurrentCode = Object.assign({}, this.configCurrentCode, {language: lang, code: config.data});
+        this.configCurrentCode = config.data;
       });
   }
 
@@ -58,8 +59,4 @@ export class ConfigVersionComponent implements OnInit {
         this.rollbackAfter.emit(result);
       });
   }
-
-  onInitDiffEditor($event: any): void {
-    console.log($event);
-  }
 }
diff --git a/cosky-dashboard/src/app/components/service/instance-editor.service.ts b/cosky-dashboard/src/app/components/service/instance-editor.service.ts
@@ -40,7 +40,7 @@ export class InstanceEditorService {
 
     const drawerRef = this.drawerService.create<InstanceEditorComponent, { instance: ServiceInstanceDto }, string>({
       nzTitle: `Managing service[${serviceId}] instances`,
-      nzWidth: '550px',
+      nzWidth: '660px',
       nzContent: InstanceEditorComponent,
       nzContentParams: {
         instance: editInstance

diff --git a/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html b/cosky-dashboard/src/app/components/service/instance-editor/instance-editor.component.html
@@ -70,9 +70,9 @@
     </nz-form-control>
   </nz-form-item>
   <nz-divider nzText="Metadata (JSON)"></nz-divider>
-  <ngx-monaco-editor [options]="{theme:'vs-dark',language:'json'}" [(ngModel)]="metadata"
-                     [ngModelOptions]="{standalone: true}"
-  ></ngx-monaco-editor>
+  <nz-code-editor style="min-height: 600px;" [nzEditorOption]="{theme:'vs-dark',language:'json'}" [(ngModel)]="metadata"
+                  [ngModelOptions]="{standalone: true}"
+  ></nz-code-editor>
   <nz-divider></nz-divider>
   <nz-form-item>
     <nz-form-control>