Feature/1022 codemirror v6 (#791)

* feat(ui): codemirror component for diff-view and editor
liimaorg · Nov 13, 2024 · 0cb4da9 · 0cb4da9
1 parent 1019c22
commit 0cb4da9
Show file tree

Hide file tree

Showing 13 changed files with 993 additions and 120 deletions.
diff --git a/AMW_angular/io/angular.json b/AMW_angular/io/angular.json
@@ -33,13 +33,7 @@
               }
             ],
             "styles": ["src/styles.scss", "./node_modules/bootstrap-icons/font/bootstrap-icons.scss"],
-            "scripts": [
-              "node_modules/codemirror/lib/codemirror.js",
-              "node_modules/codemirror/addon/mode/simple.js",
-              "node_modules/codemirror/addon/dialog/dialog.js",
-              "node_modules/codemirror/addon/search/searchcursor.js",
-              "node_modules/codemirror/addon/search/search.js"
-            ],
+            "scripts": [],
             "extractLicenses": false,
             "sourceMap": true,
             "optimization": true,

diff --git a/AMW_angular/io/package-lock.json b/AMW_angular/io/package-lock.json
diff --git a/AMW_angular/io/package.json b/AMW_angular/io/package.json
@@ -26,13 +26,14 @@
     "@angular/platform-browser": "^18.0.5",
     "@angular/platform-browser-dynamic": "^18.0.5",
     "@angular/router": "^18.0.5",
-    "@ctrl/ngx-codemirror": "^7.0.0",
+    "@codemirror/merge": "^6.0.0",
+    "@codemirror/theme-one-dark": "^6.0.0",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
     "@ng-select/ng-select": "^13.3.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "5.3.2",
     "bootstrap-icons": "^1.11.1",
-    "codemirror": "^5.65.15",
+    "codemirror": "^6.0.0",
     "date-fns": "^2.30.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",

diff --git a/AMW_angular/io/src/app/deployments/logs/deployment-log-content.component.ts b/AMW_angular/io/src/app/deployments/logs/deployment-log-content.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 import { DeploymentLog } from './deployment-log';
+import { CodeEditorComponent } from '../../shared/codemirror/code-editor.component';
 
 type Failed = 'failed';
 @Component({
@@ -10,24 +10,20 @@ type Failed = 'failed';
     <div class="m-2 h-100">
       @if (content !== null && content !== 'failed') {
 
-      <div class="h-100">
-        <ngx-codemirror
-          class="h-100"
+      <div class="editor border border-primary-subtle rounded">
+        <app-code-editor
+          [theme]="'light'"
+          [setup]="'minimal'"
+          [readonly]="true"
           [(ngModel)]="content.content"
-          [options]="{
-            lineNumbers: false,
-            theme: 'default',
-            mode: 'simplemode',
-            readOnly: true
-          }"
-        ></ngx-codemirror>
+        ></app-code-editor>
       </div>
 
       } @else { ... }
     </div>
   `,
   standalone: true,
-  imports: [FormsModule, CodemirrorModule],
+  imports: [FormsModule, CodeEditorComponent],
 })
 export class DeploymentLogContentComponent {
   @Input() content: DeploymentLog | Failed;