Replace ACE with monaco – with lots of UI issues

angular.json

@@ -24,8 +24,8 @@
               "output": "./"
             },{
               "glob": "**/*",
-              "input": "node_modules/brace/",
+              "input": "./node_modules/ngx-monaco-editor/assets/monaco",
-              "output": "./"
+              "output": "./assets/monaco/"
             }
              ],
             "styles": [

package.json

@@ -23,10 +23,9 @@
     "@angular/router": "^6.0.2",
     "@ng-bootstrap/ng-bootstrap": "^2.0.0",
     "bootstrap": "^4.0.0",
-    "brace": "^0.11.0",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.4",
-    "ng2-ace-editor": "^0.3.7",
+    "ngx-monaco-editor": "^6.0.0",
     "node-sass": "^4.7.2",
     "rxjs": "^6.0.0",
     "rxjs-compat": "^6.1.0",
@@ -54,7 +53,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
+    "tslint": "^5.10.0",
     "typescript": "~2.7.2"
   }
-}
+}

src/app/app.module.ts

@@ -6,7 +6,6 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { AceEditorModule } from 'ng2-ace-editor';
 
 
 import { AppComponent } from './app.component';
@@ -28,6 +27,7 @@ import { DeploymentNotificationService } from './services/deployment-notificatio
 import { SafePipe } from './pipes/safe.pipe';
 import { ConsoleComponent } from './console/console.component';
 import { ProcessLogService } from './services/processlog.service';
+import { MonacoEditorModule } from 'ngx-monaco-editor';
 
 
 @NgModule({
@@ -49,8 +49,8 @@ import { ProcessLogService } from './services/processlog.service';
     FormsModule,
     HttpClientModule,
     NgbModule.forRoot(),
-    AceEditorModule,
     AppRoutingModule,
+    MonacoEditorModule.forRoot()
   ],
   providers: [
     MarkdownService,

src/app/ide/ide.component.html

@@ -37,11 +37,17 @@
   </div>
 </div>
 
-<div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
+<!--div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
   ace-editor
   [(text)]="code"
   [mode]="language"
   [theme]="theme"
   [options]="options"
   class="tfw-ace-editor">
-</div>
+</div-->
+
+<ngx-monaco-editor [(ngModel)]="code"
+                   class="tfw-ace-editor"
+                   (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
+                   [options]="editorOptions"
+></ngx-monaco-editor>

src/app/ide/ide.component.ts

@@ -3,20 +3,6 @@
 
 import { ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
 
-import * as brace from 'brace';
-import 'brace/ext/modelist';
-import 'brace/ext/language_tools';
-
-import 'brace/mode/c_cpp';
-import 'brace/mode/csharp';
-import 'brace/mode/java';
-import 'brace/mode/typescript';
-import 'brace/mode/javascript';
-import 'brace/mode/json';
-import 'brace/mode/python';
-import 'brace/mode/sql';
-
-import 'brace/theme/cobalt';
 import { IDECommand } from '../message-types/ide-command';
 import { WebSocketService } from '../services/websocket.service';
 import { ProcessManagerService } from '../services/processmanager.service';
@@ -24,9 +10,6 @@ import { DeploymentNotificationService } from '../services/deployment-notificati
 import { config } from '../config';
 import { CommandMessage } from '../message-types/command-message';
 
-const modelist = brace.acequire('ace/ext/modelist');
-const langTools = brace.acequire('ace/ext/language_tools');
-
 
 enum DeployButtonState {
   DEPLOYED,
@@ -63,7 +46,7 @@ export class IdeComponent implements OnInit {
   autosave = null;
 
   language: string = config.ide.defaultLanguage;
-  theme = 'cobalt';
+  editorOptions = {theme: 'vs-dark', language: 'python'};
 
   @Output() newLogs = new EventEmitter<any>();
 
@@ -125,7 +108,6 @@ export class IdeComponent implements OnInit {
     this.filename = data.filename;
     this.directory = data.directory;
     this.code = (data.content != null) ? data.content : this.code;
-    this.language = modelist.getModeForPath(this.filename).name;
     this.files = data.files;
   }