editor: drop use of react-monaco-editor

The upstream package is currently broken and doesn't actually save us
any work.

src/editor/Editor.test.tsx

@@ -3,8 +3,8 @@
 
 import { Classes } from '@blueprintjs/core';
 import { cleanup, fireEvent, waitFor } from '@testing-library/react';
+import * as monaco from 'monaco-editor';
 import React from 'react';
-import { monaco } from 'react-monaco-editor';
 import { testRender, uuid } from '../../test';
 import { FileMetadata } from '../fileStorage';
 import { useFileStorageMetadata, useFileStoragePath } from '../fileStorage/hooks';

src/editor/Editor.tsx

@@ -16,17 +16,13 @@ import {
     Text,
 } from '@blueprintjs/core';
 import { ContextMenu2, ResizeSensor2 } from '@blueprintjs/popover2';
+import * as monaco from 'monaco-editor';
 import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
 import xcodeTheme from 'monaco-themes/themes/Xcode_default.json';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useId } from 'react-aria';
-import MonacoEditor, {
-    EditorDidMount,
-    EditorWillUnmount,
-    monaco,
-} from 'react-monaco-editor';
 import { useDispatch } from 'react-redux';
-import { useTernaryDarkMode } from 'usehooks-ts';
+import { useEffectOnce, useTernaryDarkMode } from 'usehooks-ts';
 import { UUID } from '../fileStorage';
 import { useFileStoragePath } from '../fileStorage/hooks';
 import { compile } from '../mpy/actions';
@@ -364,18 +360,9 @@ const Editor: React.VFC = () => {
 
     const i18n = useI18n();
 
-    const options = useMemo<monaco.editor.IStandaloneEditorConstructionOptions>(
-        () => ({
-            model: null,
-            fontSize: 18,
-            minimap: { enabled: false },
-            contextmenu: false,
-            rulers: [80],
-            lineNumbersMinChars: 4,
-            wordBasedSuggestions: false,
-        }),
-        [],
-    );
+    useEffect(() => {
+        monaco.editor.setTheme(isDarkMode ? tomorrowNightEightiesId : xcodeId);
+    }, [isDarkMode]);
 
     useEditor(
         editor,
@@ -429,18 +416,6 @@ const Editor: React.VFC = () => {
         [],
     );
 
-    const handleEditorDidMount = useCallback<EditorDidMount>(
-        (editor) => {
-            editor.focus();
-            setEditor(editor);
-        },
-        [setEditor],
-    );
-
-    const handleEditorWillUnmount = useCallback<EditorWillUnmount>(() => {
-        setEditor(undefined);
-    }, [setEditor]);
-
     const popoverProps = useMemo<IOverlayLifecycleProps>(
         () => ({
             onOpened: (e) => {
@@ -462,6 +437,34 @@ const Editor: React.VFC = () => {
         [editor],
     );
 
+    const editorRef = useRef<HTMLDivElement>(null);
+
+    useEffectOnce(() => {
+        // istanbul ignore if: should never happen
+        if (!editorRef.current) {
+            console.error('no editorRef!');
+            return;
+        }
+
+        const monacoEditor = monaco.editor.create(editorRef.current, {
+            model: null,
+            fontSize: 18,
+            minimap: { enabled: false },
+            contextmenu: false,
+            rulers: [80],
+            lineNumbersMinChars: 4,
+            wordBasedSuggestions: false,
+        });
+
+        monacoEditor.focus();
+        setEditor(monacoEditor);
+
+        return () => {
+            setEditor(undefined);
+            monacoEditor.dispose();
+        };
+    });
+
     return (
         <div className="pb-editor">
             <EditorTabs onChange={() => editor?.focus()} />
@@ -475,12 +478,7 @@ const Editor: React.VFC = () => {
                     content={() => <EditorContextMenu editor={editor} />}
                     popoverProps={popoverProps}
                 >
-                    <MonacoEditor
-                        theme={isDarkMode ? tomorrowNightEightiesId : xcodeId}
-                        options={options}
-                        editorDidMount={handleEditorDidMount}
-                        editorWillUnmount={handleEditorWillUnmount}
-                    />
+                    <div className="pb-editor-monaco" ref={editorRef} />
                 </ContextMenu2>
             </ResizeSensor2>
         </div>

src/editor/editor.scss

@@ -26,6 +26,7 @@
     justify-content: flex-start;
 
     &-tablist {
+        flex: none;
         padding: bp.$pt-grid-size * 0.3;
         overflow-x: auto;
         @include pb.background-contrast(6%);
@@ -63,6 +64,11 @@
         flex: 1 1 auto;
     }
 
+    &-monaco {
+        width: 100%;
+        height: 100%;
+    }
+
     &-placeholder {
         pointer-events: none;
         width: max-content;

src/editor/lib.test.ts

@@ -2,7 +2,7 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import { mock } from 'jest-mock-extended';
-import type { monaco } from 'react-monaco-editor';
+import type * as monaco from 'monaco-editor';
 import { uuid } from '../../test';
 import { ActiveFileHistoryManager, OpenFileInfo, OpenFileManager } from './lib';
 

src/editor/lib.ts

@@ -2,7 +2,7 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import dexieObservable from 'dexie-observable';
-import type { monaco } from 'react-monaco-editor';
+import type * as monaco from 'monaco-editor';
 import { UUID } from '../fileStorage';
 
 // HACK: Using window.name to detect page reloads vs. tab duplication.

src/editor/pybricksMicroPython.ts

@@ -5,7 +5,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import type { monaco } from 'react-monaco-editor';
+import type * as monaco from 'monaco-editor';
 
 /** The Pybricks MicroPython language identifier. */
 export const pybricksMicroPythonId = 'pybricks-micropython';

src/editor/sagas.test.ts

@@ -2,7 +2,7 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import { mock } from 'jest-mock-extended';
-import { monaco } from 'react-monaco-editor';
+import * as monaco from 'monaco-editor';
 import { AsyncSaga, uuid } from '../../test';
 import {
     fileStorageDidFailToLoadTextFile,

src/editor/sagas.ts

@@ -2,7 +2,7 @@
 // Copyright (c) 2022 The Pybricks Authors
 
 import type { DatabaseChangeType, IDatabaseChange } from 'dexie-observable/api';
-import { monaco } from 'react-monaco-editor';
+import * as monaco from 'monaco-editor';
 import { EventChannel, buffers, eventChannel } from 'redux-saga';
 import {
     call,

src/editor/untitledHint.ts

@@ -4,7 +4,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import type { monaco } from 'react-monaco-editor';
+import type * as monaco from 'monaco-editor';
 
 export class UntitledHintContribution implements monaco.editor.IEditorContribution {
     public static readonly ID = 'editor.contrib.untitledHint';