Nicole Tietz-Sokolskaya
137dfa747d
This makes the editor experience much better (by subjective measures). Now instead of a WYSIWYG editor, we have a markdown code editor, and we also have the ability to view documents without editing them. While I was at it, I fixed a bug where if you didn't edit a document at all, it would save blank. This was fixed as a happenstance from the switch. Also included here is making the UI work with Javascript disabled. If you don't have JS, you will get a textarea which allows editing the markdown directly. If you do have JS enabled, you'll get a smarter editor. Reviewed-on: #3
40 lines
1.1 KiB
TypeScript
40 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
|
|
}
|