New Script section: loads the device's current Lua script (GET /api/script), edits it in a real code editor (CodeMirror 6 with Lua syntax highlighting via @codemirror/legacy-modes -- no dedicated @codemirror/lang-lua package exists, verified against the npm registry), and saves it back (POST /api/script) as raw text, not JSON, matching the device's endpoint. Not Blockly yet -- that's its own, much larger task; this is the raw-text step toward it. Verified end-to-end against a real ESP32-C6: load, edit, save hot-reloads on-device within one tick, and the change survives a power cycle. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
29 lines
957 B
TypeScript
29 lines
957 B
TypeScript
// Thin wrapper around CodeMirror 6 for editing a device's Lua script.
|
|
// There's no dedicated @codemirror/lang-lua package (verified against
|
|
// the npm registry and @codemirror/legacy-modes' source) -- Lua
|
|
// highlighting comes from the legacy StreamLanguage-based mode instead.
|
|
|
|
import { EditorView, basicSetup } from 'codemirror';
|
|
import { StreamLanguage } from '@codemirror/language';
|
|
import { lua } from '@codemirror/legacy-modes/mode/lua';
|
|
|
|
const luaLanguage = StreamLanguage.define(lua);
|
|
|
|
export function createScriptEditor(parent: HTMLElement, initialDoc: string): EditorView {
|
|
return new EditorView({
|
|
parent,
|
|
doc: initialDoc,
|
|
extensions: [basicSetup, luaLanguage],
|
|
});
|
|
}
|
|
|
|
export function getEditorText(view: EditorView): string {
|
|
return view.state.doc.toString();
|
|
}
|
|
|
|
export function setEditorText(view: EditorView, text: string): void {
|
|
view.dispatch({
|
|
changes: { from: 0, to: view.state.doc.length, insert: text },
|
|
});
|
|
}
|