// ZPWR-HOOKS-EDITOR — SHARED STRYKE HOOKS CODE EDITOR

Four consumers, one source

All four apps load the same editor source. The three Tauri apps serve frontend/ statically and vendor this repo at crates/zpwr-hooks-editor; zpwr-daw is JUCE and loads the bundle in its WebView, vendoring at libs/zpwr-hooks-editor.

What it is

Load order (consuming app)

The consumer's index.html loads the CSS link + the JS bundle; the editor exposes a single global facade, window.HooksEditor. The Monaco base worker is fetched at runtime via MonacoEnvironment.getWorker (no TS/JSON/CSS language workers — all language intelligence comes from the stryke LSP).

<link rel='stylesheet' href='lib/hooks-editor.bundle.css'>
<script src='lib/hooks-editor.bundle.js'></script>
<!-- lib/hooks-editor.worker.js is fetched at runtime, not script-tagged -->

Mounting an editor

HooksEditor.create(parent, opts) mounts an editor into parent and returns a handle. With uri set and an LSP transport wired (see below), language features come online once the stryke handshake completes; without a uri the LSP layer stays off and it is a plain stryke-highlighted editor.

const handle = window.HooksEditor.create(parentEl, {
  uri: 'file:///project/hook.stk',  // identifies the doc to the LSP (omit to disable LSP)
  doc: '# my stryke hook\n',         // initial text
  onChange: (text) => save(text),    // fires on every edit with full text
  mode: 'vim',                       // 'default' | 'vim' | 'emacs'
  statusBar: vimStatusEl,            // optional element for the vim status/command line
  language: 'stryke',                // 'stryke' (default) | 'latex'
});

handle.getValue();        // current text
handle.setValue(text);    // replace text
handle.focus();
handle.setMode('emacs');  // switch modal mode at runtime
handle.language();        // which grammar this editor was created with
handle.insert(text);      // undoable insert at the caret (palette-style)
handle.selectRange(a, b); // select + reveal by document offset
handle.onSelection(fn);   // fires with (from, to) offsets as the caret moves
handle.bindKey(spec, fn); // take a key back from Monaco, this editor only
handle.destroy();         // dispose editor, model, markers, LSP didClose

Editing LaTeX in the same editor

Pass language: 'latex' and the editor mounts the LaTeX Monarch grammar instead of the stryke one — same Monaco instance, same stryke-cyberpunk theme, same vim/emacs keymaps. The stryke language server speaks stryke, so a LaTeX buffer is never opened against it: omit uri and the LSP layer stays off entirely.

What a LaTeX buffer gets instead, all computed locally from the model:

Taking a key back from Monaco

Monaco binds a lot of keys, and a host accelerator can collide with one — ⇧⌘O is Monaco's Go to Symbol, which opens its @ quick access. bindKey overrides the binding inside one editor, for that editor's lifetime, without changing it for every other app on the bundle.

handle.bindKey('CmdOrCtrl+Shift+O', () => app.openOwnSymbolPalette());

The spec is an Electron-style string: Cmd / Ctrl / CmdOrCtrl / Meta all map to Monaco's CtrlCmd, plus Shift and Alt / Option; the last segment is the key (a single letter or digit, or a Monaco KeyCode name such as Enter or Escape). Returns false when the key cannot be parsed.

Wiring the stryke LSP transport

The editor speaks LSP JSON-RPC but does not own the transport. The host (e.g. Rust) connects stryke --lsp, adds Content-Length framing on the server's stdin, and bridges messages. The app calls initClient with a send function and feeds inbound server messages back via receive.

window.HooksEditor.initClient({
  send: (message) => host.sendToServer(message),   // client → server (raw JSON-RPC)
});
host.onServerMessage((msg) => window.HooksEditor.receive(msg)); // server → client

window.HooksEditor.clientReady();   // transport connected?
await window.HooksEditor.whenReady(); // true once the stryke initialize handshake completed

whenReady() resolves true only after the server answered initialize — suitable for a status indicator, unlike a transport "connected" flag. Call it after initClient.

window.HooksEditor facade

Build (build-on-each-consumer)

The editor source lives here in src/, but the bundle is built inside the consuming app so esbuild resolves that app's monaco-* deps and writes into its frontend/lib/. Each consumer keeps esbuild + the pinned monaco-editor / monaco-vim / monaco-emacs in devDependencies and invokes the bundler from its project root (e.g. via tauri.conf.json beforeDevCommand):

node crates/zpwr-hooks-editor/scripts/build-hooks-editor.mjs

The output dir defaults to <cwd>/frontend/lib; override with the HOOKS_EDITOR_OUT env var. The generated bundles are build artifacts (gitignore them in the consumer). The bundler emits IIFE, minified, ES2020, with Monaco's codicon .ttf inlined as a data URL so the single .css artifact is self-contained.

Bundler resolve fixes

scripts/build-hooks-editor.mjs carries esbuild resolve overrides because the default browser/CommonJS resolution pulls in AMD define() builds that throw in the WebView and silently degrade the editor to a textarea:

Source layout

The app stack

zpwr-hooks-editor is the shared editor component across the MenkeTechnologies apps. Browse the rest via the MenkeTechnologiesMeta umbrella repo:

• Audio-Haxor — Tauri v2 desktop app; original home of the editor
• traderview — Tauri trading/market app
• ztranslator — Tauri MIDI/OSC/DMX/Link translation app
• zpwr-daw — JUCE DAW; loads the bundle in its WebView
• strykelang — the stryke language + stryke --lsp server the editor talks to