Moved PrebakeCodeMirror to its own file

website/src/repl/components/panel/SettingsTab.jsx

@@ -1,16 +1,16 @@
 import { defaultSettings, settingsMap, useSettings, storePrebakeScript, setSettingsTab } from '../../../settings.mjs';
-import { themes, codemirrorSettings, PrebakeCodeMirror } from '@strudel/codemirror';
+import { themes, codemirrorSettings } from '@strudel/codemirror';
+import { PrebakeCodeMirror } from '../../../repl/prebakeCodeMirror.mjs';
 import { confirmAndReloadPage, isUdels } from '../../util.mjs';
 import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
 import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
-import { ActionButton, IconButton, SpecialActionButton } from '../button/action-button.jsx';
+import { ActionButton, SpecialActionButton } from '../button/action-button.jsx';
 import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 import { useCallback, useEffect, useRef } from 'react';
 import { Code } from '../Code.jsx';
-import { DocumentArrowUpIcon, DocumentCheckIcon } from '@heroicons/react/16/solid';
 
 function cx(...classes) {
   // : Array<string | undefined>

website/src/repl/prebakeCodeMirror.mjs

@@ -0,0 +1,91 @@
+import { toggleLineComment } from '@codemirror/commands';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState, Prec } from '@codemirror/state';
+import { drawSelection, EditorView, keymap } from '@codemirror/view';
+import { logger } from '@strudel/core';
+import { basicSetup, flash, prebakeField, initTheme, extensions } from '@strudel/codemirror';
+
+export class PrebakeCodeMirror {
+  constructor(initialCode, storePrebake, containerRef, editorRef, settings) {
+    this.storePrebake = storePrebake;
+    const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
+    const initialSettings = Object.keys(compartments).map((key) =>
+      compartments[key].of(extensions[key](parseBooleans(settings[key]))),
+    );
+    initTheme(settings.theme);
+    let state = EditorState.create({
+      doc: initialCode,
+      extensions: [
+        ...initialSettings,
+        basicSetup,
+        javascript(),
+        javascriptLanguage.data.of({
+          closeBrackets: { brackets: ['(', '[', '{', "'", '"', '<'] },
+          bracketMatching: { brackets: ['(', '[', '{', "'", '"', '<'] },
+        }),
+        syntaxHighlighting(defaultHighlightStyle),
+        EditorView.updateListener.of((v) => {
+          if (v.docChanged) {
+            this.code = v.state.doc.toString();
+          }
+        }),
+        drawSelection({ cursorBlinkRate: 0 }),
+        Prec.highest(
+          keymap.of([
+            {
+              mac: 'Meta-Enter',
+              run: () => {
+                this.savePrebake();
+              },
+            },
+            {
+              key: 'Ctrl-Enter',
+              run: () => {
+                this.savePrebake();
+              },
+            },
+            {
+              key: 'Alt-Enter',
+              run: () => {
+                this.savePrebake();
+              },
+            },
+          ]),
+        ),
+        prebakeField,
+      ],
+    });
+    editorRef.current = state;
+    this.code = initialCode;
+    this.view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+  }
+
+  async savePrebake() {
+    flash(this.view);
+    this.storePrebake(this.code);
+    logger('[prebake] prebake saved');
+  }
+
+  toggleComment() {
+    try {
+      // Honor selections; toggleLineComment handles both selections and
+      // single line
+      toggleLineComment(this.view);
+    } catch (err) {
+      console.error('Error handling repl-toggle-comment event', err);
+    }
+  }
+
+  setCode(code) {
+    const changes = {
+      from: 0,
+      to: this.view.state.doc.length,
+      insert: code,
+    };
+    this.view.dispatch({ changes });
+  }
+}