Prevent the Monaco editor from being recreated on every keystroke.

Split the actions dependency out into a separate effect. Use a ref for
runCode so that we can memoize amaranthSourceEditorActions and not
re-run the actions effect on every render either.

Author: miyukoc

src/app.tsx

@@ -157,6 +157,20 @@ function AppContent() {
     }
   }, [amaranthSource, amaranthVersion]);
 
+  const runCodeRef = useRef(runCode);
+  runCodeRef.current = runCode;
+
+  const amaranthSourceEditorActions = React.useMemo(() => [
+    {
+      id: 'amaranth-playground.run',
+      label: 'Run Code',
+      keybindings: [
+          monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
+      ],
+      run: runCodeRef.current,
+    }
+  ], [runCodeRef]);
+
   function tabAndPanel({ key, title, titleStyle = {}, content }) {
     return [
       <Tab key={`${key}-tab`} value={key} style={titleStyle}>{title}</Tab>,
@@ -307,16 +321,7 @@ function AppContent() {
       title: 'Amaranth Source',
       content: <Editor
         state={amaranthSourceEditorState.current}
-        actions={[
-          {
-            id: 'amaranth-playground.run',
-            label: 'Run Code',
-            keybindings: [
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-            ],
-            run: runCode,
-          }
-        ]}
+        actions={amaranthSourceEditorActions}
         padding={{ top: 10, bottom: 10 }}
         focus
       />

src/monaco.tsx

@@ -52,7 +52,6 @@ export function Editor({ state, actions = [], padding, focus = false }: EditorPr
       readOnly: state.readOnly,
       padding,
     });
-    actions.forEach(action => editorRef.current?.addAction(action));
     const resizeObserver = new ResizeObserver(events => editorRef.current?.layout());
     resizeObserver.observe(containerRef.current!);
     editorRef.current.restoreViewState(state.viewState);
@@ -63,6 +62,15 @@ export function Editor({ state, actions = [], padding, focus = false }: EditorPr
       resizeObserver.disconnect();
       editorRef.current?.dispose();
     };
+  }, []);
+
+  useEffect(() => {
+    if (!editorRef.current)
+      return;
+    const disposables = actions.map(action => editorRef.current!.addAction(action));
+    return () => {
+      disposables.forEach(disposable => disposable.dispose());
+    };
   }, [actions]);
 
   return <div style={{ height: '100%' }} ref={containerRef}/>;