Upgrade Monaco Editor (#847)

package-lock.json

@@ -171,6 +171,11 @@
         "react": "16.5.2"
       },
       "dependencies": {
+        "monaco-editor": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
+          "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+        },
         "react": {
           "version": "16.5.2",
           "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
@@ -4001,6 +4006,11 @@
             "uuid": "^8.0.0"
           }
         },
+        "monaco-editor": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
+          "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+        },
         "react-redux": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz",
@@ -19092,17 +19102,30 @@
       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "monaco-editor": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
-      "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.24.0.tgz",
+      "integrity": "sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A=="
     },
     "monaco-editor-webpack-plugin": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.7.0.tgz",
-      "integrity": "sha512-oItymcnlL14Sjd7EF7q+CMhucfwR/2BxsqrXIBrWL6LQplFfAfV+grLEQRmVHeGSBZ/Gk9ptzfueXnWcoEcFuA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-3.1.0.tgz",
+      "integrity": "sha512-TP5NkCAV0OeFTry5k/d60KR7CkhTXL4kgJKtE3BzjgbDb5TGEPEhoKmHBrSa6r7Oc0sNbPLZhKD/TP2ig7A+/A==",
       "dev": true,
       "requires": {
-        "@types/webpack": "^4.4.19"
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
       }
     },
     "moo": {

package.json

@@ -74,7 +74,7 @@
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.18.1",
+    "monaco-editor": "0.24.0",
     "ms": "2.1.3",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
@@ -159,7 +159,7 @@
     "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "0.4.3",
-    "monaco-editor-webpack-plugin": "1.7.0",
+    "monaco-editor-webpack-plugin": "3.1.0",
     "node-fetch": "2.6.1",
     "playwright": "1.10.0",
     "prettier": "2.2.1",

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -52,7 +52,7 @@ class EditorViewModel extends JsonEditorViewModel {
     if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
       const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
       const monaco = await loadMonaco();
-      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider());
+      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider() as any); //TODO: Remove any. The upstream cosmos language service needs to be fixed
       EditorViewModel.providerRegistered.push("sql");
     }
   }

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -62,7 +62,7 @@ export class EditorReact extends React.Component<EditorReactProps> {
    * Create the monaco editor and attach to DOM
    */
   private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
-    const options: monaco.editor.IEditorConstructionOptions = {
+    const options = {
       value: this.props.content,
       language: this.props.language,
       readOnly: this.props.isReadOnly,

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -90,7 +90,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
   protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
     this.registerCompletionItemProvider();
     this.editorContainer = document.getElementById(this.getEditorId());
-    const options: monaco.editor.IEditorConstructionOptions = {
+    const options = {
       value: content,
       language: this.getEditorLanguage(),
       readOnly: this.params.isReadOnly,