bearblog-codemirror.html

<script type="module" async>

// TODO: Fix error using `@codemirror/lang-markdown`:
// ```
// Uncaught TypeError: Cannot read properties of undefined (reading 'deserialize')
//     at h (index.js:1585:48)
//     at new l (index.js:1600:29)
//     at l.deserialize (index.js:1841:16)
//     at index.js:252:25
// ```

// TODO: Place editor before "Markdown syntax | Insert image | Preview" links

// TODO: Enable text wrapping

// TODO: Change font

import { basicSetup, EditorView } from "https://esm.sh/codemirror@6.0.1";
// import { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.2.4";
// import { languages } from "https://esm.sh/@codemirror/language-data@6.4.1";

(() => {

const textarea = document.getElementById("body_content");

if (!textarea) return;

const form = textarea.parentElement;

textarea.style.display = "none";

const editor = new EditorView({
  parent: form,
  doc: textarea.value,
  extensions: [
    basicSetup,
    // markdown({ codeLanguages: languages }),
  ],
});

form.addEventListener("submit", () => {
  textarea.value = editor.state.doc.toString();
}, { capture: true });

// TODO: Sync contents to handle image uploads
// - Copy editor contents to textarea on blur
// - Copy textarea contents to editor on `value` change (must detect changes
//   from JavaScript)

})();

</script>