import { defaultKeymap } from "@codemirror/commands";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import type { Extension } from "@codemirror/state";
import { EditorView, keymap } from "@codemirror/view";
import { CollabEditorElement } from "../collab/editor.ts";
import { livePreview } from "./live-preview.ts";

/** `<nib-doc>`: a Markdown live-preview editor over a `Doc`. */
export class NibDocElement extends CollabEditorElement {
  protected extensions(): Extension {
    return [keymap.of(defaultKeymap), markdown({ base: markdownLanguage }), livePreview(), EditorView.lineWrapping];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "nib-doc": NibDocElement;
  }
}

if (!customElements.get("nib-doc")) customElements.define("nib-doc", NibDocElement);