Prebake in settings

Update prebake without reload

packages/codemirror/codemirror.mjs

@@ -19,7 +19,7 @@ import { basicSetup } from './basicSetup.mjs';
 import { evalBlock } from './block_utilities.mjs';
 import { flash, isFlashEnabled } from './flash.mjs';
 import { highlightMiniLocations, isPatternHighlightingEnabled, updateMiniLocations } from './highlight.mjs';
-import { keybindings } from './keybindings.mjs';
+import { keybindings, prebakeField } from './keybindings.mjs';
 import { jumpToCharacter } from './labelJump.mjs';
 import { getSliderWidgets, sliderPlugin, updateSliderWidgets } from './slider.mjs';
 import { activateTheme, initTheme, theme } from './themes.mjs';
@@ -412,6 +412,10 @@ export class StrudelMirror {
   setAutocompletionEnabled(enabled) {
     this.reconfigureExtension('isAutoCompletionEnabled', enabled);
   }
+  updatePrebake(prebake) {
+    logger('[repl] prebake updated');
+    this.prebaked = prebake();
+  }
   updateSettings(settings) {
     this.setFontSize(settings.fontSize);
     this.setFontFamily(settings.fontFamily);
@@ -472,6 +476,85 @@ export class StrudelMirror {
   }
 }
 
+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([
+            {
+              key: 'Ctrl-Enter',
+              mac: 'Meta-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 });
+  }
+}
+
 export function parseBooleans(value) {
   return { true: true, false: false }[value] ?? value;
 }