feat: support auto switch language with content

Postcatlab · Aug 3, 2022 · dc154f5 · dc154f5
1 parent bb8f4fe
commit dc154f5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html b/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.html
@@ -20,8 +20,8 @@
 <!-- JSON -->
 <!-- XML -->
 <!-- Raw -->
-<eo-monaco-editor [(code)]="model" (codeChange)="rawDataChange()" *ngIf="bodyType === 'raw'" [maxLine]="100"
-  [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
+<eo-monaco-editor [(code)]="model" (codeChange)="rawDataChange($event)" *ngIf="bodyType === 'raw'" [maxLine]="100"
+  [config]="editorConfig" [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-monaco-editor>
 <!-- Binary -->
 <div class="px-5" *ngIf="bodyType === 'binary'">
   <nz-upload nzType="drag" [nzBeforeUpload]="uploadBinary"

diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts b/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts
@@ -26,6 +26,7 @@ import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-m
 import { transferFileToDataUrl } from 'eo/workbench/browser/src/app/utils';
 import { NzUploadFile } from 'ng-zorro-antd/upload';
 import { EoMonacoEditorComponent } from 'eo/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component';
+import { EditorOptions, JoinedEditorOptions } from 'ng-zorro-antd/code-editor';
 
 @Component({
   selector: 'eo-api-test-body',
@@ -46,6 +47,9 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, O
   binaryFiles: NzUploadFile[] = [];
   CONST: any = {};
   cache: any = {};
+  editorConfig: EditorOptions = {
+    language: 'json',
+  };
   private itemStructure: ApiTestBody = {
     required: true,
     name: '',
@@ -147,8 +151,8 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, O
     this.modelChange.emit(data);
   }
 
-  rawDataChange() {
-    this.rawChange$.next(this.model);
+  rawDataChange(code: string) {
+    this.rawChange$.next(code);
   }
   /**
    * Set model after change bodyType

diff --git a/...er/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.html b/...er/src/app/pages/api/test/result-request-body/api-test-result-request-body.component.html
@@ -12,5 +12,5 @@
   </ul>
   <!-- JSON / XML / Raw -->
   <eo-monaco-editor *ngIf="modelType === 'string'" class="mt20" [(code)]="model" [config]="{readOnly: true}"
-    [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
+    [maxLine]="20" [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
 </div>
diff --git a/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.html b/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.html
@@ -4,5 +4,5 @@
     <span>{{ item.label }}</span>
   </div>
 </div>
-<nz-code-editor [(ngModel)]="$$code" style="min-height: 100px;" [nzEditorOption]="editorOption"
-  (nzEditorInitialized)="onEditorInitialized($event)"></nz-code-editor>
+<nz-code-editor [ngModel]="$$code" style="min-height: 100px;" [nzEditorOption]="editorOption"
+  (nzEditorInitialized)="onEditorInitialized($event)" (ngModelChange)="modelChangeFn($event)"></nz-code-editor>
diff --git a/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts b/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts
@@ -104,11 +104,11 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   async ngOnChanges() {
     // * update root type
     if (this.eventList.includes('type') && !this.hiddenList.includes('type')) {
-      const type = whatTextType(this.$$code || '');
-      this.editorType = type;
-      if (this.autoFormat) {
-        // this.$$code = await this.formatCode();
-      }
+      requestIdleCallback(() => {
+        const type = whatTextType(this.$$code || '');
+        this.editorType = type;
+        window.monaco?.editor.setModelLanguage(this.codeEdtor.getModel(), type);
+      });
     }
   }
   ngOnInit() {
@@ -134,10 +134,15 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     this.completionItemProvider?.dispose();
   }
 
+  modelChangeFn(code) {
+    // console.log('modelChangeFn', code);
+  }
+
   private setCode(val: string) {
     if (val === this.$$code) {
       return;
     }
+
     let code = '';
     try {
       code = typeof val === 'string' ? val : JSON.stringify(val);