web: CodeMirror source editor in place of the textarea

web/e2e/smoke.spec.ts

@@ -39,6 +39,12 @@ test.describe("Compiler Explorer smoke", () => {
     await expect(page.getByText(/cycle 0 \/ \d+/)).toBeVisible();
   });
 
+  test("choosing an example replaces the editor's source", async ({ page }) => {
+    await page.goto("/app");
+    await page.getByLabel("example").selectOption("mlp_gpu");
+    await expect(page.getByRole("textbox", { name: "source" })).toContainText("H = relu(X @ W1 + b1)");
+  });
+
   test("a rejected program is shown as an error, not a crash", async ({ page }) => {
     await page.goto("/app");
     await page.getByLabel("source").fill("input A : i8[2, 2]\nC = A @ A +\noutput C\n");

web/package.json

@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "@astrojs/react": "^4.0.0",
+    "@codemirror/state": "^6.7.6",
     "astro": "^5.0.0",
+    "codemirror": "^6.0.2",
     "framer-motion": "^12.43.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

web/src/components/Explorer.tsx

@@ -3,6 +3,7 @@ import { analyze } from "../lib/compiler";
 import { EXAMPLES } from "../lib/examples.generated";
 import { runTpu, type TpuRun } from "../lib/tpu";
 import TpuSchedule from "./TpuSchedule";
+import SourceEditor from "./SourceEditor";
 import { tpuExact } from "../lib/verify";
 import type { Analysis, GpuRun } from "../lib/types";
 
@@ -106,13 +107,7 @@ export default function Explorer() {
 
       <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.3fr)", gap: 12 }} className="grid">
         <section className="panel">
-          <textarea
-            value={source}
-            onChange={(e) => setSource(e.target.value)}
-            spellCheck={false}
-            aria-label="source"
-            style={{ width: "100%", minHeight: 360, background: "var(--panel)", color: "var(--fg)", border: 0, resize: "vertical" }}
-          />
+          <SourceEditor value={source} onChange={setSource} label="source" />
           <p className="muted" style={{ margin: "8px 0 0" }}>
             Language: <code>input</code>, <code>const</code>, <code>output</code>, <code>@</code> (matmul), <code>+</code>
             (row broadcast), <code>relu</code>. Integers only.

web/src/components/SourceEditor.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+}
+
+// A plain CodeMirror editor, controlled by `value`: edits call `onChange`, and changes to
+// `value` from outside (choosing an example) replace the document.
+export default function SourceEditor({ value, onChange, label }: Props) {
+  const host = useRef<HTMLDivElement>(null);
+  const view = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  useEffect(() => {
+    if (!host.current) return;
+    view.current = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: value,
+        extensions: [
+          basicSetup,
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) onChangeRef.current(update.state.doc.toString());
+          }),
+          EditorView.contentAttributes.of({ "aria-label": label, spellcheck: "false" }),
+          EditorView.theme({
+            "&": { backgroundColor: "var(--panel)", color: "var(--fg)", fontSize: "13px" },
+            ".cm-content": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+            ".cm-gutters": { backgroundColor: "var(--panel)", color: "var(--muted)", border: "none" },
+            "&.cm-focused": { outline: "1px solid var(--accent)" },
+          }),
+        ],
+      }),
+    });
+    return () => view.current?.destroy();
+    // The editor is created once; later value changes go through the effect below.
+  }, []);
+
+  useEffect(() => {
+    const current = view.current;
+    if (current && current.state.doc.toString() !== value) {
+      current.dispatch({ changes: { from: 0, to: current.state.doc.length, insert: value } });
+    }
+  }, [value]);
+
+  return <div ref={host} style={{ minHeight: 360, border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden" }} />;
+}