Switch from Ace Editor to Codemirror

dhcode · dhcode · commit a5211d3d2fa8 · 2020-08-27T08:06:10.000+02:00
diff --git a/angular.json b/angular.json
@@ -55,15 +55,15 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "20kb"
                 }
               ]
             },
             "es5": {
               "budgets": [
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "20kb"
                 }
               ],
               "tsConfig": "./tsconfig.es5.app.json"
@@ -218,16 +218,16 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "15kb"
+                  "maximumWarning": "15kb",
+                  "maximumError": "20kb"
                 }
               ]
             },
             "es5": {
               "budgets": [
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
+                  "maximumWarning": "15kb"
                 }
               ],
               "tsConfig": "projects/openapi-viewer-element/tsconfig.es5.app.json"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,12 +56,12 @@
     "@angular/platform-browser": "^9.1.3",
     "@angular/platform-browser-dynamic": "^9.1.3",
     "@angular/router": "^9.1.3",
+    "@ctrl/ngx-codemirror": "^4.0.0",
     "@webcomponents/webcomponentsjs": "^2.4.1",
     "ajv": "^6.11.0",
-    "brace": "^0.11.1",
+    "codemirror": "^5.57.0",
     "core-js": "^3.6.4",
     "document-register-element": "^1.7.2",
-    "ngx-ace-wrapper": "^8.0.0",
     "ngx-markdown": "^8.2.2",
     "openapi3-ts": "^1.4.0",
     "rxjs": "^6.5.5",
diff --git a/projects/openapi-viewer/ng-package.json b/projects/openapi-viewer/ng-package.json
@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["ajv", "brace", "ngx-ace-wrapper", "ngx-markdown", "openapi3-ts", "swagger-client"]
+  "whitelistedNonPeerDependencies": ["ajv", "codemirror", "@ctrl/ngx-codemirror", "ngx-markdown", "openapi3-ts", "swagger-client"]
 }
diff --git a/projects/openapi-viewer/package.json b/projects/openapi-viewer/package.json
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "ajv": "^6.10.2",
-    "brace": "^0.11.1",
-    "ngx-ace-wrapper": "^8.0.0",
+    "@ctrl/ngx-codemirror": "^4.0.0",
+    "codemirror": "^5.57.0",
     "ngx-markdown": "^8.1.0",
     "openapi3-ts": "^1.4.0",
     "swagger-client": "^3.10.12"
diff --git a/projects/openapi-viewer/src/lib/openapi-viewer.module.ts b/projects/openapi-viewer/src/lib/openapi-viewer.module.ts
@@ -28,12 +28,12 @@ import { PortalModule } from '@angular/cdk/portal';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { TooltipComponent } from './shared-components/tooltip/tooltip.component';
 import { TooltipDirective } from './shared-components/tooltip/tooltip.directive';
-import { AceModule } from 'ngx-ace-wrapper';
 import { CodeInputComponent } from './shared-components/code-input/code-input.component';
 import { IndexNavEndpointsComponent } from './index-nav/index-nav-endpoints/index-nav-endpoints.component';
 import { OverviewViewEndpointsComponent } from './overview-view/overview-view-endpoints/overview-view-endpoints.component';
 import { ModelsViewComponent } from './models-view/models-view.component';
 import { JsonSchemaComponent } from './shared-components/json-schema/json-schema.component';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 
 @NgModule({
   declarations: [
@@ -74,7 +74,7 @@ import { JsonSchemaComponent } from './shared-components/json-schema/json-schema
     MarkdownModule.forRoot(),
     PortalModule,
     OverlayModule,
-    AceModule
+    CodemirrorModule
   ],
   exports: [OpenapiViewerComponent, OperationComponent]
 })
diff --git a/projects/openapi-viewer/src/lib/openapi-viewer.scss b/projects/openapi-viewer/src/lib/openapi-viewer.scss
@@ -1,4 +1,6 @@
 @import '~@angular/cdk/overlay-prebuilt.css';
+@import '~codemirror/lib/codemirror.css';
+@import '~codemirror/theme/eclipse.css';
 
 $method-colors: (
   'get': #2681ac,
@@ -144,7 +146,7 @@ $line-color: #ccc;
     color: #fb9200;
   }
 
-  .ace_editor {
+  .CodeMirror {
     border: 1px solid $line-color;
   }
 }
diff --git a/projects/openapi-viewer/src/lib/parameter/parameter.component.spec.ts b/projects/openapi-viewer/src/lib/parameter/parameter.component.spec.ts
@@ -1,14 +1,14 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
 import { ParameterComponent } from './parameter.component';
 import { MultiItemsInputComponent } from '../shared-components/multi-items-input/multi-items-input.component';
 import { DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ParameterObject } from 'openapi3-ts';
 import { MarkdownModule } from 'ngx-markdown';
 import { CodeInputComponent } from '../shared-components/code-input/code-input.component';
-import { AceComponent, AceModule } from 'ngx-ace-wrapper';
 import { JsonSchemaComponent } from '../shared-components/json-schema/json-schema.component';
+import { CodemirrorComponent, CodemirrorModule } from '@ctrl/ngx-codemirror';
 
 describe('ParameterComponent', () => {
   let fixture: ComponentFixture<ParameterComponent>;
@@ -17,7 +17,7 @@ describe('ParameterComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule, MarkdownModule.forRoot(), AceModule],
+      imports: [FormsModule, ReactiveFormsModule, MarkdownModule.forRoot(), CodemirrorModule],
       declarations: [ParameterComponent, MultiItemsInputComponent, CodeInputComponent, JsonSchemaComponent]
     }).compileComponents();
     fixture = TestBed.createComponent(ParameterComponent);
@@ -115,9 +115,9 @@ describe('ParameterComponent', () => {
     expect(component.formGroup.get('body')).toBeDefined();
     expect(component.formGroup.get('body').value).toEqual(JSON.stringify({ name: '', tag: '' }, null, 2));
 
-    const input = element.query(By.directive(AceComponent));
-    const ace: AceComponent = input.componentInstance;
-    input.componentInstance.valueChange.next('{}');
+    const input = element.query(By.directive(CodemirrorComponent));
+    const dir = input.injector.get(NgModel);
+    dir.control.setValue('{}');
     expect(component.formGroup.get('body').value).toEqual('{}');
   });
 });
diff --git a/projects/openapi-viewer/src/lib/request-body-input/request-body-input.component.spec.ts b/projects/openapi-viewer/src/lib/request-body-input/request-body-input.component.spec.ts
@@ -6,8 +6,8 @@ import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MultiItemsInputComponent } from '../shared-components/multi-items-input/multi-items-input.component';
 import { MarkdownModule } from 'ngx-markdown';
 import { CodeInputComponent } from '../shared-components/code-input/code-input.component';
-import { AceModule } from 'ngx-ace-wrapper';
 import { JsonSchemaComponent } from '../shared-components/json-schema/json-schema.component';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 
 describe('RequestBodyInputComponent', () => {
   let component: RequestBodyInputComponent;
@@ -16,7 +16,7 @@ describe('RequestBodyInputComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule, MarkdownModule, AceModule],
+      imports: [FormsModule, ReactiveFormsModule, MarkdownModule, CodemirrorModule],
       declarations: [RequestBodyInputComponent, ParameterComponent, MultiItemsInputComponent, CodeInputComponent, JsonSchemaComponent]
     }).compileComponents();
   }));
diff --git a/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.html b/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.html
@@ -1,4 +1,4 @@
 <div>
-  <ace [config]="config" [mode]="mode" [value]="value" (valueChange)="updateValue($event)"></ace>
+  <ngx-codemirror [ngModel]="value" (ngModelChange)="updateValue($event)" [options]="config"></ngx-codemirror>
 </div>
 <div *ngFor="let err of errors" class="oav-error">{{ err }}</div>
diff --git a/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.spec.ts b/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.spec.ts
@@ -1,15 +1,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CodeInputComponent } from './code-input.component';
-import { AceModule } from 'ngx-ace-wrapper';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
 
 describe('CodeInputComponent', () => {
   let component: CodeInputComponent;
   let fixture: ComponentFixture<CodeInputComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [AceModule],
+      imports: [CodemirrorModule],
       declarations: [CodeInputComponent]
     }).compileComponents();
   }));
diff --git a/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.ts b/projects/openapi-viewer/src/lib/shared-components/code-input/code-input.component.ts
@@ -10,10 +10,7 @@ import {
   SimpleChanges
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { AceConfigInterface } from 'ngx-ace-wrapper';
-import 'brace';
-import 'brace/mode/json';
-import 'brace/mode/xml';
+import 'codemirror/mode/javascript/javascript';
 import { ValidateFunction } from 'ajv';
 import { getValidationFunction } from '../../util/validation.util';
 import { Subject } from 'rxjs';
@@ -33,7 +30,7 @@ import { debounceTime } from 'rxjs/operators';
   ]
 })
 export class CodeInputComponent implements OnChanges, ControlValueAccessor, OnInit, OnDestroy {
-  config: AceConfigInterface = {};
+  config: Record<string, any> = {};
 
   disabled = false;
 
@@ -84,10 +81,11 @@ export class CodeInputComponent implements OnChanges, ControlValueAccessor, OnIn
 
   updateConfig() {
     this.config = {
-      minLines: this.minLines,
-      maxLines: this.maxLines,
-      wrap: true,
-      tabSize: 2
+      lineNumbers: true,
+      theme: 'eclipse',
+      mode: 'javascript',
+      tabSize: 2,
+      lineWrapping: true
     };
     if (this.readonly || this.readonly === '') {
       this.config.readOnly = true;

Original file line number	Diff line number	Diff line change
`@@ -55,15 +55,15 @@`
`55`	`55`	`},`
`56`	`56`	`{`
`57`	`57`	`"type": "anyComponentStyle",`
`58`		`- "maximumWarning": "6kb"`
	`58`	`+ "maximumWarning": "20kb"`
`59`	`59`	`}`
`60`	`60`	`]`
`61`	`61`	`},`
`62`	`62`	`"es5": {`
`63`	`63`	`"budgets": [`
`64`	`64`	`{`
`65`	`65`	`"type": "anyComponentStyle",`
`66`		`- "maximumWarning": "6kb"`
	`66`	`+ "maximumWarning": "20kb"`
`67`	`67`	`}`
`68`	`68`	`],`
`69`	`69`	`"tsConfig": "./tsconfig.es5.app.json"`
`@@ -218,16 +218,16 @@`
`218`	`218`	`},`
`219`	`219`	`{`
`220`	`220`	`"type": "anyComponentStyle",`
`221`		`- "maximumWarning": "6kb",`
`222`		`- "maximumError": "15kb"`
	`221`	`+ "maximumWarning": "15kb",`
	`222`	`+ "maximumError": "20kb"`
`223`	`223`	`}`
`224`	`224`	`]`
`225`	`225`	`},`
`226`	`226`	`"es5": {`
`227`	`227`	`"budgets": [`
`228`	`228`	`{`
`229`	`229`	`"type": "anyComponentStyle",`
`230`		`- "maximumWarning": "6kb"`
	`230`	`+ "maximumWarning": "15kb"`
`231`	`231`	`}`
`232`	`232`	`],`
`233`	`233`	`"tsConfig": "projects/openapi-viewer-element/tsconfig.es5.app.json"`
Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`"lib": {`
`5`	`5`	`"entryFile": "src/public-api.ts"`
`6`	`6`	`},`
`7`		`- "whitelistedNonPeerDependencies": ["ajv", "brace", "ngx-ace-wrapper", "ngx-markdown", "openapi3-ts", "swagger-client"]`
	`7`	`+ "whitelistedNonPeerDependencies": ["ajv", "codemirror", "@ctrl/ngx-codemirror", "ngx-markdown", "openapi3-ts", "swagger-client"]`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,6 @@`
`1`	`1`	`@import '~@angular/cdk/overlay-prebuilt.css';`
	`2`	`+@import '~codemirror/lib/codemirror.css';`
	`3`	`+@import '~codemirror/theme/eclipse.css';`
`2`	`4`
`3`	`5`	`$method-colors: (`
`4`	`6`	`'get': #2681ac,`
`@@ -144,7 +146,7 @@ $line-color: #ccc;`
`144`	`146`	`color: #fb9200;`
`145`	`147`	`}`
`146`	`148`
`147`		`- .ace_editor {`
	`149`	`+ .CodeMirror {`
`148`	`150`	`border: 1px solid $line-color;`
`149`	`151`	`}`
`150`	`152`	`}`