upgrade Monaco Editor/ Monaco-editor/react

Author: BrianFreemanAtlanta

Web/ClientApp/package-lock.json

@@ -3,10 +3,10 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@monaco-editor/react": "^3.8.3",
+        "@monaco-editor/react": "^4.1.3",
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
-        "monaco-editor": "^0.21.3",
+        "monaco-editor": "^0.24.0",
         "prop-types": "^15.7.2",
         "react": "^17.0.0",
         "react-dom": "^17.0.0",
@@ -17,7 +17,7 @@
         "rimraf": "^2.6.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.9.0",
+        "@babel/core": "^7.14.3",
         "@babel/preset-react": "^7.9.0",
         "@types/history": "4.7.3",
         "@types/jest": "24.0.19",

Web/ClientApp/package.json

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from "react";
 import axios from "axios";
 import ClientSettings from "../ClientSettings.json"
-import { ControlledEditor } from "@monaco-editor/react";
+import  Editor  from "@monaco-editor/react";
 import * as monacoEditor from "monaco-editor";
 
 export const Home = () => {
@@ -28,10 +28,10 @@ export const Home = () => {
             }
         });
     };
-    const setDefaultInput = (conversionType: string) => {
-        setConversionType(conversionType);
+    const setDefaultInput = (type: string) => {
+        setConversionType(type);
         if (!inputCode || inputCode === defaultVbCode || inputCode === defaultCsCode) {
-            setInputCode(conversionType === vbNetToCsId ? defaultVbCode : defaultCsCode);
+            setInputCode(type === vbNetToCsId ? defaultVbCode : defaultCsCode);
             setConvertedCode("");
         } else if (convertedCode) {
             setInputCode(convertedCode);
@@ -100,11 +100,11 @@ export const Home = () => {
             <div id="app">
                 <div className="form-group">
                     <label>Input code ({conversionIsFromVb ? "VB.NET" : "C#"})</label>
-                    <ControlledEditor
+                    <Editor
                         className="code-editor"
                         value={inputCode} language={conversionIsFromVb ? "vb" : "csharp"} 
-                        onChange={(ev, code) => setInputCode(code || "")}
-                        editorDidMount={ (_, editor) => { inputEditor.current = editor; selectAndFocus(inputEditor); } }
+                        onChange={( code, _) => setInputCode(code || "")}
+                        onMount={ ( editor,_) => { inputEditor.current = editor; selectAndFocus(inputEditor); } }
                         height="30vh"
                         options={{ ...commonEditorOptions }}
                     />
@@ -126,12 +126,12 @@ export const Home = () => {
                 </div>
                 <div className="form-group">
                     <label>Converted code ({conversionIsFromVb ? "C#" : "VB.NET"})</label>
-                    <ControlledEditor
+                    <Editor
                         className="code-editor"
                         value={convertedCode}
                         language={conversionIsFromVb ? "csharp" : "vb"}
-                        onChange={(ev, code) => setConvertedCode(code || "")}
-                        editorDidMount={(_, editor) => outputEditor.current = editor}
+                        onChange={(code, _) => setConvertedCode(code || "")}
+                        onMount={(editor, _) => outputEditor.current = editor}
                         height="30vh"
                         options={{ ...commonEditorOptions, readOnly: true }}
                     />