Add CodeMirror-based script editor, verified against real hardware
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>
This commit is contained in:
28
src/editor.ts
Normal file
28
src/editor.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
// 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 },
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user