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
}