pique/frontend/editor.ts

41 lines
1.1 KiB
TypeScript

import {basicSetup} from "codemirror"
import {EditorView, keymap} from "@codemirror/view"
import {indentWithTab} from "@codemirror/commands"
import {markdown} from "@codemirror/lang-markdown"
export function makeEditor(divSelector, value) {
let div = document.querySelector(divSelector);
let documentTheme = EditorView.theme({
"&": {
"background-color": "white",
},
".cm-editor": {
"height": "100%",
},
".cm-scroller": {overflow: "auto"}
}, {})
// add a hidden textarea inside the div for form submission
let textarea = document.createElement("textarea");
textarea.setAttribute("name", "content");
textarea.style.display = "none";
div.appendChild(textarea);
let extensions = [
basicSetup,
keymap.of([indentWithTab]),
markdown(),
documentTheme,
EditorView.lineWrapping,
];
let view = new EditorView({parent: div, doc: value, extensions})
textarea.form.addEventListener("submit", () => {
textarea.value = view.state.doc.toString()
})
return view
}