Basic codemirror custom element wrapper

codemirror-wrapper.js

import { basicSetup, EditorView } from "@codemirror/basic-setup";
import { EditorState, Compartment, StateField } from "@codemirror/state";
import { markdown } from "@codemirror/lang-markdown";

customElements.define(
  "markdown-editor",
  class extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      const editorElement = document.createElement("div");

      this.appendChild(editorElement);

      const language = new Compartment();
      const tabSize = new Compartment();
      const forwardUpdate = StateField.define({
        create: (state) => state,
        update: (state, transaction) => {
          console.log(transaction.newDoc.text);
          this.emitUpdate(transaction.newDoc.text);
          return state;
        },
      });
      const state = EditorState.create({
        extensions: [
          basicSetup,
          language.of(markdown()),
          tabSize.of(EditorState.tabSize.of(8)),
          forwardUpdate,
        ],
      });

      const view = new EditorView({
        state,
        parent: editorElement,
      });
    }

    emitUpdate(text) {
      this.dispatchEvent(
        new CustomEvent("change", { detail: text.join("\n") })
      );
    }

    disconnectedCallback() {}

    adoptedCallback() {}
  }
);