37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
import { EditorState } from "@codemirror/state";
|
||
|
|
import { EditorView, keymap, lineNumbers } from "@codemirror/view";
|
||
|
|
import { defaultKeymap } from "@codemirror/commands";
|
||
|
|
import { init, evaluate } from "./wasm";
|
||
|
|
|
||
|
|
function instantiate(element: HTMLElement): EditorView {
|
||
|
|
const divEditor = document.createElement("div");
|
||
|
|
const divOutput = document.createElement("pre");
|
||
|
|
const initState = element.innerText.trim();
|
||
|
|
|
||
|
|
element.innerText = "";
|
||
|
|
element.appendChild(divEditor);
|
||
|
|
element.appendChild(divOutput);
|
||
|
|
divEditor.className = "editor";
|
||
|
|
divOutput.className = "output";
|
||
|
|
init.then((_) => (divOutput.innerText = evaluate(initState)));
|
||
|
|
|
||
|
|
const state = EditorState.create({
|
||
|
|
doc: initState,
|
||
|
|
extensions: [
|
||
|
|
keymap.of(defaultKeymap),
|
||
|
|
lineNumbers(),
|
||
|
|
EditorView.updateListener.of((update) => {
|
||
|
|
if (update.docChanged) {
|
||
|
|
divOutput.innerText = evaluate(update.state.doc.toString());
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
return new EditorView({ state, parent: divEditor });
|
||
|
|
}
|
||
|
|
|
||
|
|
for (const el of document.getElementsByClassName("flox-eval")) {
|
||
|
|
const editor = instantiate(el as HTMLElement);
|
||
|
|
}
|