Update Monaco

This notably updates just to 0.51, as 0.52 seems to throw uncatchable
'cancelled' errors in practical use which is very annoying.

Author: pimterry

package-lock.json

@@ -108,7 +108,7 @@
     "mobx-utils": "^5.1.0",
     "mockrtc": "^0.3.1",
     "mockttp": "^3.15.4",
-    "monaco-editor": "^0.27.0",
+    "monaco-editor": "^0.51.0",
     "node-forge": "^1.3.0",
     "openapi-directory": "^1.3.0",
     "openapi3-ts": "^1.3.0",
@@ -123,7 +123,7 @@
     "react-contexify": "^6.0.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^2.1.3",
-    "react-monaco-editor": "^0.45.0",
+    "react-monaco-editor": "^0.58.0",
     "react-reverse-portal": "^2.1.1",
     "react-split-pane": "^0.1.92",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -191,7 +191,7 @@
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
     "mocha": "^10.8.2",
-    "monaco-editor-webpack-plugin": "^4.1.2",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "node-fetch": "^2.6.7",
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",

package.json

@@ -404,10 +404,7 @@ class BaseEditor extends React.Component<EditorProps> {
             renderValidationDecorations: 'on',
             fixedOverflowWidgets: true,
 
-            // TODO: Would like to set a fontFace here, but due to
-            // https://github.com/Microsoft/monaco-editor/issues/392
-            // it breaks wordwrap
-
+            fontFamily: '"DM mono", monospace',
             fontSize: 16,
             wordWrap: 'on',
 

src/components/editor/base-editor.tsx

@@ -329,6 +329,14 @@ export const GlobalStyles = createGlobalStyle`
         .zone-widget .filename {
             display: none;
         }
+
+        .mtkcontrol {
+            /* Control characters have loud red backgrounds. Common in binary data, and too
+               strong for our purposes. This is visible but gentler. */
+            color: ${p => p.theme.mainColor} !important;
+            background: none !important;
+            opacity: ${p => p.theme.pillContrast};
+        }
     }
 
     .phosphor-icon {