Standardize on monaco 0.3x.x (#2796)

This is compatible with the ~0.31.0 version that the Azure Portal uses for ReactView blades

desktop/package.json

@@ -159,7 +159,7 @@
     "loader-utils": "^1.4.2",
     "merge2": "^1.4.1",
     "mini-css-extract-plugin": "^0.5.0",
-    "monaco-editor-webpack-plugin": "^1.9.0",
+    "monaco-editor-webpack-plugin": "^6.0.0",
     "node-fetch": "^2.6.7",
     "nyc": "^15.1.0",
     "patch-package": "^6.5.1",
@@ -228,7 +228,7 @@
     "luxon": "^1.28.1",
     "make-dir": "^2.1.0",
     "mkdirp": "^1.0.4",
-    "monaco-editor": "^0.19.0",
+    "monaco-editor": "~0.30.0",
     "node-abi": "^2.18.0",
     "node-downloader-helper": "^2.1.6",
     "node-forge": "^1.3.0",

desktop/src/@batch-flask/ui/editor/editor.component.ts

@@ -4,9 +4,7 @@ import {
 } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import * as elementResizeDetectorMaker from "element-resize-detector";
-import { Uri, editor } from "monaco-editor";
-import { AutoscaleLanguage } from "./monaco-languages";
-import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
+import type { Uri, editor, IDisposable } from "monaco-editor";
 
 import "./editor.scss";
 
@@ -63,9 +61,9 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC
     private _value = "";
     private _resizeDetector: any;
     private _config: EditorConfig;
-    private _editor: IStandaloneCodeEditor;
-    private _model: monaco.editor.IModel;
-    private _modelChangeSub: monaco.IDisposable;
+    private _editor: editor.IStandaloneCodeEditor | null = null;
+    private _model: editor.IModel | null = null;
+    private _modelChangeSub: IDisposable;
 
     @Input() public set value(v) {
         if (v !== this._value) {
@@ -114,7 +112,8 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC
     }
 
     public async initMonaco() {
-        const monaco = await import("monaco-editor");
+        const monaco = await import("monaco-editor/esm/vs/editor/editor.api");
+        const { AutoscaleLanguage } = await import("./monaco-languages");
         AutoscaleLanguage.define();
         const myDiv: HTMLDivElement = this.editorContent.nativeElement;
         // const options: IEditorConstructionOptions = this.config;
@@ -125,7 +124,7 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC
         // Assign _model to existing model instead of create new one to avoid error
         const uri = this.config.uri as any;
         const model = uri ? monaco.editor.getModel(uri) : null;
-        this._model = model || monaco.editor.createModel(this._value || "", this.config.language, uri);
+        this._model = model ?? monaco.editor.createModel(this._value || "", this.config.language, uri);
         // Inject this because initMonaco() function is invoked after writeValue()
         // which causes reopen json editor with an incorrect value populated
         this._model.setValue(this._value);
@@ -142,7 +141,7 @@ export class EditorComponent implements ControlValueAccessor, AfterViewInit, OnC
             }
         }
         this._modelChangeSub = this._model.onDidChangeContent((e) => {
-            this.updateValue(this._model.getValue());
+            this.updateValue(this._model?.getValue());
         });
     }
 

desktop/src/@batch-flask/ui/editor/monaco-languages/autoscale.language.ts

@@ -1,3 +1,5 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+
 /**
  * AutoscaleLanguage class defines autoscale formula syntax highlight and keyword autocomplete features in
  * Monaco text editor. Autoscale text editor can be viewed directly in create pool flyout.

desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.spec.ts

@@ -87,7 +87,7 @@ describe("TextFileViewer", () => {
             },
             uri: Uri.file("foo.ts"),
             keybindings: [
-                { key: KeyMod.CtrlCmd | KeyCode.KEY_S, action: jasmine.anything() },
+                { key: KeyMod.CtrlCmd | KeyCode.KeyS, action: jasmine.anything() },
             ],
         });
     });

desktop/src/@batch-flask/ui/file/file-viewer/text-file-viewer/text-file-viewer.component.ts

@@ -52,7 +52,7 @@ export class TextFileViewerComponent extends FileViewer {
         const keybindings: EditorKeyBinding[] = [];
 
         if (this.fileLoader && !this.fileLoader.isReadonly) {
-            keybindings.push({ key: KeyMod.CtrlCmd | KeyCode.KEY_S, action: () => this.save() });
+            keybindings.push({ key: KeyMod.CtrlCmd | KeyCode.KeyS, action: () => this.save() });
         }
         this.editorConfig = {
             readOnly: Boolean(this.fileLoader && this.fileLoader.isReadonly),

package.json

@@ -21,7 +21,7 @@
     "@uifabric/azure-themes": "7.5.19",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "~0.31.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "tslib": "^2.3.1"

packages/bonito-ui/package.json

@@ -66,7 +66,7 @@
     "@uifabric/azure-themes": ">=7.5.19 <8.0.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.19.0 || ^0.25.1",
+    "monaco-editor": ">=0.30.0 <0.40.0",
     "react": ">=17.0.2 <18.0.0",
     "react-dom": ">=17.0.2 <18.0.0",
     "tslib": "~2.3.1"

packages/playground/package.json

@@ -62,7 +62,7 @@
     "@uifabric/azure-themes": ">=7.5.19 <8.0.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.19.0 || ^0.25.1",
+    "monaco-editor": ">=0.30.0 <0.40.0",
     "react": ">=17.0.2 <18.0.0",
     "react-dom": ">=17.0.2 <18.0.0",
     "tslib": "~2.3.1"

packages/react/package.json

@@ -67,7 +67,7 @@
     "@uifabric/azure-themes": ">=7.5.19 <8.0.0",
     "mobx": "^6.3.2",
     "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.19.0 || ^0.25.1",
+    "monaco-editor": ">=0.30.0 <0.40.0",
     "react": ">=17.0.2 <18.0.0",
     "react-dom": ">=17.0.2 <18.0.0",
     "tslib": "~2.3.1"

web/package.json

@@ -59,17 +59,6 @@
     "workspace:test:web": "npm run test",
     "workspace:test:web:all": "npm run test:all"
   },
-  "peerDependencies": {
-    "@fluentui/react": ">=8.97.2 <9.0.0",
-    "@fluentui/react-theme-provider": ">=0.16.2 <1.0.0",
-    "@uifabric/azure-themes": ">=7.5.19 <8.0.0",
-    "mobx": "^6.3.2",
-    "mobx-react-lite": "^3.2.0",
-    "monaco-editor": "^0.41.0",
-    "react": ">=17.0.2 <18.0.0",
-    "react-dom": ">=17.0.2 <18.0.0",
-    "tslib": "~2.3.1"
-  },
   "dependencies": {
     "@azure/bonito-core": "^1.0.0",
     "@azure/bonito-ui": "^1.0.0",