Stub out story/controls and use code-mirror with vim for text-editing

2026-02-13 20:06:43 +01:00 · 2026-02-13 20:06:43 +01:00 · 6a0f95812a
commit 6a0f95812a
parent c255e19c42
11 changed files with 383 additions and 44 deletions
--- a/index.html
+++ b/index.html
@ -13,11 +13,6 @@
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
-    <h1>Hello from Electron renderer!</h1>
-    <p>👋</p>
-
-    <p id="info"></p>
-
    <div id="app"></div>
    <script type="module" src="/src/renderer.ts"></script>
  </body>
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,13 @@
      "version": "1.0.0",
      "license": "MIT",
      "dependencies": {
+        "@codemirror/commands": "^6.10.2",
+        "@codemirror/state": "^6.5.4",
+        "@codemirror/theme-one-dark": "^6.1.3",
+        "@codemirror/view": "^6.39.14",
        "@picocss/pico": "^2.1.1",
+        "@replit/codemirror-vim": "^6.3.0",
+        "codemirror": "^6.0.2",
        "electron-squirrel-startup": "^1.0.1",
        "solid-js": "^1.9.11"
      },
@ -359,6 +365,99 @@
      "dev": true,
      "license": "(Apache-2.0 AND BSD-3-Clause)"
    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
+      "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.2.tgz",
+      "integrity": "sha512-vvX1fsih9HledO1c9zdotZYUZnE4xV0m6i3m25s5DIfXofuprk6cRcLUZvSk3CASUbwjQX21tOGbkY2BH8TpnQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
+      "integrity": "sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.4.tgz",
+      "integrity": "sha512-ABc9vJ8DEmvOWuH26P3i8FpMWPQkduD9Rvba5iwb6O3hxASgclm3T3krGo8NASXkHCidz6b++LWlzWIUfEPSWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.39.14",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.14.tgz",
+      "integrity": "sha512-WJcvgHm/6Q7dvGT0YFv/6PSkoc36QlR0VCESS6x9tGsnF1lWLmmYxOgX3HH6v8fo6AvSLgpcs+H0Olre6MKXlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
    "node_modules/@cspotcode/source-map-support": {
      "version": "0.8.1",
      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@ -2134,6 +2233,30 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@lezer/common": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+      "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+      "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
    "node_modules/@listr2/prompt-adapter-inquirer": {
      "version": "2.0.22",
      "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-2.0.22.tgz",
@ -2186,6 +2309,12 @@
        "node": ">= 12.13.0"
      }
    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -2583,6 +2712,19 @@
      "integrity": "sha512-kIDugA7Ps4U+2BHxiNHmvgPIQDWPDU4IeU6TNRdvXQM1uZX+FibqDQT2xUOnnO2yq/LUHcwnGlu1hvf4KfXnMg==",
      "license": "MIT"
    },
+    "node_modules/@replit/codemirror-vim": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@replit/codemirror-vim/-/codemirror-vim-6.3.0.tgz",
+      "integrity": "sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@codemirror/commands": "6.x.x",
+        "@codemirror/language": "6.x.x",
+        "@codemirror/search": "6.x.x",
+        "@codemirror/state": "6.x.x",
+        "@codemirror/view": "6.x.x"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.57.1",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
@ -4632,6 +4774,21 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -4707,6 +4864,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
    "node_modules/cross-dirname": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/cross-dirname/-/cross-dirname-0.1.0.tgz",
@ -11101,6 +11264,12 @@
        "node": ">=0.8.0"
      }
    },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
    "node_modules/sumchecker": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@ -11940,6 +12109,12 @@
        }
      }
    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
    "node_modules/watchpack": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
--- a/package.json
+++ b/package.json
@ -36,7 +36,13 @@
    "vite-plugin-solid": "^2.11.10"
  },
  "dependencies": {
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.39.14",
    "@picocss/pico": "^2.1.1",
+    "@replit/codemirror-vim": "^6.3.0",
+    "codemirror": "^6.0.2",
    "electron-squirrel-startup": "^1.0.1",
    "solid-js": "^1.9.11"
  }
--- a/src/renderer.ts
+++ b/src/renderer.ts
@ -31,8 +31,7 @@ import { Versions } from './versions';

 declare const versions: Versions; // preload

-const information = document.getElementById('info') as HTMLElement;
-information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`;
+console.log(`This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`);

 async function func() {
  const response = await versions.ping();
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@ -1,26 +1,20 @@
 import { createSignal } from 'solid-js';
-import { ExprREPL } from './REPL';
-
-function Hello() {
-  const [ count, setCount ] = createSignal(0);
-
-  return (
-    <div>
-      { count() > 5 ? <span style={{ color: "red" }}>too damn high</span> : <span>{ count() }</span> }
-      <div>
-        <button onClick={ () => setCount((x: number) => x + 1) }>+</button>
-        <button onClick={ () => setCount((x: number) => Math.max(x - 1, 0)) }>-</button>
-      </div>
-    </div>
-  );
-}
+import { Story } from './Story';
+import { Controls } from './Controls';

 export default function App() {
-
  return (
-    <div>
-      <Hello />
-      <ExprREPL />
-    </div>
+    <main
+      class="container"
+      style={{
+        display: "grid",
+        "grid-template-columns": "2fr 1fr",
+        gap: "2rem",
+        "margin-top": "2rem",
+      }}
+    >
+      <Story />
+      <Controls />
+    </main>
  );
 }
--- a/src/ui/CodeEditor.tsx
+++ b/src/ui/CodeEditor.tsx
@ -0,0 +1,67 @@
+import { onMount, onCleanup } from "solid-js";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { vim } from "@replit/codemirror-vim";
+
+export interface EditorProps {
+  value: string,
+  onUpdate(val: string): void,
+  onRun(): void,
+  height?: string,
+}
+
+export function CodeEditor(props: EditorProps) {
+  let containerRef: HTMLDivElement | undefined;
+  let view: EditorView;
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      e.stopImmediatePropagation(); 
+      props.onRun();
+    }
+  };
+
+  onMount(() => {
+    const themeConfig = EditorView.theme({
+      "&": { height: props.height || "300px" },
+      ".cm-scroller": { overflow: "auto" }
+    });
+
+    const state = EditorState.create({
+      doc: props.value,
+      extensions: [
+        basicSetup,
+        oneDark,
+        vim(),
+        themeConfig,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            props.onUpdate(update.state.doc.toString());
+          }
+        }),
+      ],
+    });
+
+    view = new EditorView({
+      state,
+      parent: containerRef!,
+    });
+
+    containerRef?.addEventListener("keydown", handleKeydown, { capture: true });
+  });
+
+  onCleanup(() => {
+    containerRef?.removeEventListener("keydown", handleKeydown, { capture: true });
+    view.destroy()
+  });
+
+  return (
+    <div 
+      ref={containerRef} 
+      class="editor-frame"
+    />
+  );
+}
+
--- a/src/ui/Controls.tsx
+++ b/src/ui/Controls.tsx
@ -0,0 +1,34 @@
+
+type Props = {
+  // TODO
+}
+
+export function Controls(props: Props) {
+  return (
+    <aside
+      style={{
+        position: "sticky", 
+        top: "2rem", 
+        height: "fit-content"
+      }}
+    >
+      <article>
+        <header>Controls</header>
+
+        <fieldset>
+          <label>
+            <input type="checkbox" role="switch" checked />
+            Auto-evaluate
+          </label>
+          <button class="secondary outline" style={{ width: "100%" }}>
+            Clear All
+          </button>
+        </fieldset>
+
+        <footer>
+          <small>Language v0.1.0</small>
+        </footer>
+      </article>
+    </aside>
+  );
+}
--- a/src/ui/REPL.tsx
+++ b/src/ui/REPL.tsx
@ -7,6 +7,7 @@ import { SourceText, sourceText } from 'src/lang/parser/source_text';
 import { ParseError, parseExpr } from 'src/lang/parser/parser';
 import { ShowParseError } from './ParseError';
 import { Val } from './Value';
+import { CodeEditor } from './CodeEditor';

 namespace ReplResult {
  export type Idle =
@ -55,25 +56,15 @@ export function ExprREPL() {

  return (
    <section>
-      <textarea
-        placeholder="+(3, 4)"
-        rows="5"
-        value={input()}
-        onInput={(e) => setInput(e.currentTarget.value)}
-        onKeyDown={(e) => {
-          // Check for Enter + (Ctrl or Command for Mac)
-          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-            e.preventDefault(); // Stop the newline from being added
-            runExecution();
-          }
-        }}
+      <CodeEditor 
+        value={input()} 
+        onUpdate={setInput} 
+        onRun={runExecution} 
      />

      <button onClick={runExecution}>Run</button>
-
-      <hr />
      
-      <div>
+      <div style={{ "margin-top": "1rem" }}>
        <Switch>
          <Match when={result().tag === "idle"}>
            { "" }
--- a/src/ui/Story.tsx
+++ b/src/ui/Story.tsx
@ -0,0 +1,45 @@
+import { ExprREPL } from "./REPL";
+
+
+type Props = {
+  // TODO
+}
+
+export function Story(props: Props) {
+  return (
+    <div
+      id="story"
+      style={{
+        display: "flex",
+        "flex-direction": "column",
+        gap: "1.5rem",
+      }}
+    >
+      <article>
+        <header><strong>Interactive REPL</strong></header>
+        <ExprREPL />
+      </article>
+
+      <article>
+        <header><strong>Header</strong></header>
+        <p>This is a place for other items</p>
+      </article>
+      <article>
+        <header><strong>Header</strong></header>
+        <p>This is a place for other items</p>
+      </article>
+      <article>
+        <header><strong>Header</strong></header>
+        <p>This is a place for other items</p>
+      </article>
+      <article>
+        <header><strong>Header</strong></header>
+        <p>This is a place for other items</p>
+      </article>
+      <article>
+        <header><strong>Header</strong></header>
+        <p>This is a place for other items</p>
+      </article>
+    </div>
+  );
+}
--- a/src/ui/index.scss
+++ b/src/ui/index.scss
@ -1,3 +1,37 @@
@use "@picocss/pico/scss/pico";

-// Custom styling goes here
+// ===Code-Mirror vim styling===
+.editor-frame {
+  // Pico variable for cards, usually a slightly lighter dark grey
+  background-color: var(--pico-card-background-color);
+  border: 1px solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  overflow: hidden; // Ensures the editor corners don't poke out
+  margin-bottom: var(--pico-spacing);
+  transition: border-color 0.2s ease-in-out;
+
+  &:focus-within {
+    border-color: var(--pico-primary);
+    box-shadow: 0 0 0 0.125rem rgba(var(--pico-primary-rgb), 0.25);
+  }
+
+  // CodeMirror internal overrides
+  .cm-editor {
+    outline: none !important; // Remove default chrome/safari focus rings
+    font-family: var(--pico-font-family-monospace);
+  }
+
+  // Styling the Vim Command/Status Bar at the bottom
+  .cm-vim-panel {
+    background: #282c34 !important; // One Dark's background
+    color: #abb2bf !important;
+    border-top: 1px solid #181a1f;
+    font-size: 0.8rem;
+    padding: 4px 8px;
+    
+    input {
+      color: var(--pico-primary) !important;
+      font-weight: bold;
+    }
+  }
+}
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@ -2,7 +2,6 @@ import './index.scss';
 import { render } from 'solid-js/web';
 import { Program } from 'src/lang/program';
 import { ProgramProvider } from './ProgramProvider';
-// import App from './AppElm';
 import App from './App';

 export function startApp() {