viteboard 0.1.0

package/src/editor/DocEditor.ts

@@ -0,0 +1,799 @@
+import { ContentApi, relativePathBetween } from "../content/ContentApi";
+import { parseBoardEmbed, renderMarkdown } from "../content/Markdown";
+import { htmlToMarkdown } from "./htmlToMarkdown";
+import { ICONS } from "../ui/icons";
+
+export type DocEditorOptions = {
+  rootId: string;
+  /** Content-relative path, e.g. "docs/guide/getting-started.md". */
+  path: string;
+  /** Called after the editor closes (host should re-render the doc). */
+  onClose: () => void;
+};
+
+type SaveState = "idle" | "saving" | "saved" | "error";
+
+/**
+ * A WYSIWYG markdown editor. The document is rendered to rich HTML inside a
+ * single contenteditable surface styled exactly like the reader, so editing is
+ * truly what-you-see-is-what-you-get. On save the DOM is serialized back to
+ * clean markdown; YAML frontmatter is preserved verbatim. Pasted/dropped images
+ * are uploaded into the active docs root's `assets/` folder and referenced by
+ * relative path.
+ */
+export class DocEditor {
+  private opts: DocEditorOptions;
+  private overlay!: HTMLElement;
+  private surface!: HTMLElement;
+  private statusEl!: HTMLElement;
+  private fileInput!: HTMLInputElement;
+  private toolbarButtons: HTMLButtonElement[] = [];
+  private abort = new AbortController();
+
+  private frontmatter = "";
+  private saveTimer: number | null = null;
+  private closed = false;
+  private history: string[] = [];
+  private historyIndex = -1;
+  private applyingHistory = false;
+
+  static open(opts: DocEditorOptions): DocEditor {
+    return new DocEditor(opts);
+  }
+
+  private constructor(opts: DocEditorOptions) {
+    this.opts = opts;
+    this.build();
+    void this.load();
+  }
+
+  // ---------- construction ----------
+
+  private build(): void {
+    this.overlay = div("doc-editor");
+
+    const bar = div("doc-editor-bar");
+    const left = div("doc-editor-bar-left");
+    const back = button("doc-editor-done", "Done");
+    back.addEventListener("click", () => void this.close());
+    const pathLabel = div("doc-editor-path");
+    pathLabel.textContent = this.opts.path;
+    left.append(back, pathLabel);
+
+    this.statusEl = div("doc-editor-status");
+    this.setStatus("idle");
+
+    bar.append(left, this.statusEl);
+
+    const toolbar = this.buildToolbar();
+
+    const scroll = div("doc-editor-scroll");
+    this.surface = div("markdown-body doc-editor-surface");
+    this.surface.contentEditable = "true";
+    this.surface.spellcheck = true;
+    scroll.appendChild(this.surface);
+
+    this.fileInput = document.createElement("input");
+    this.fileInput.type = "file";
+    this.fileInput.accept = "image/*";
+    this.fileInput.style.display = "none";
+    this.fileInput.addEventListener("change", () => {
+      const file = this.fileInput.files?.[0];
+      if (file) void this.insertImageFile(file);
+      this.fileInput.value = "";
+    });
+
+    this.overlay.append(bar, toolbar, scroll, this.fileInput);
+    document.body.appendChild(this.overlay);
+
+    const signal = this.abort.signal;
+    this.surface.addEventListener("input", () => this.handleInput(), { signal });
+    this.surface.addEventListener("keyup", () => this.updateToolbarState(), { signal });
+    this.surface.addEventListener("mouseup", () => this.updateToolbarState(), { signal });
+    this.surface.addEventListener("click", (e) => this.handleSurfaceClick(e), { signal });
+    document.addEventListener("selectionchange", () => this.updateToolbarState(), { signal });
+    this.surface.addEventListener("paste", (e) => this.onPaste(e), { signal });
+    this.surface.addEventListener("dragover", (e) => e.preventDefault(), { signal });
+    this.surface.addEventListener("drop", (e) => this.onDrop(e), { signal });
+    window.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape" && document.activeElement !== this.surface) void this.close();
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+          e.preventDefault();
+          void this.save();
+        }
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+          e.preventDefault();
+          if (e.shiftKey) this.redoHistory();
+          else this.undoHistory();
+          return;
+        }
+        if (e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "y") {
+          e.preventDefault();
+          this.redoHistory();
+          return;
+        }
+        if (this.handleEmbedDeleteKey(e)) return;
+      },
+      { signal }
+    );
+  }
+
+  private buildToolbar(): HTMLElement {
+    const tb = div("doc-editor-toolbar");
+
+    const group = (children: HTMLElement[]) => {
+      const g = div("doc-editor-tb-group");
+      g.append(...children);
+      return g;
+    };
+
+    const cmd = (label: string, title: string, fn: () => void, icon = false) => {
+      const b = button("doc-editor-tb-btn", icon ? "" : label);
+      if (icon) {
+        b.innerHTML = ICONS[label] ?? "";
+        b.classList.add("icon");
+      }
+      b.title = title;
+      // mousedown + preventDefault keeps the editor selection intact.
+      b.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        this.surface.focus();
+        fn();
+        this.updateToolbarState();
+        this.scheduleSave();
+      });
+      this.toolbarButtons.push(b);
+      return b;
+    };
+
+    tb.append(
+      group([
+        cmd("¶", "Paragraph", () => this.formatBlock("P")),
+        withState(cmd("H1", "Heading 1", () => this.formatBlock("H1")), "block", "H1"),
+        withState(cmd("H2", "Heading 2", () => this.formatBlock("H2")), "block", "H2"),
+        withState(cmd("H3", "Heading 3", () => this.formatBlock("H3")), "block", "H3"),
+      ]),
+      group([
+        withState(cmd("B", "Bold (Cmd+B)", () => document.execCommand("bold")), "command", "bold"),
+        withState(cmd("I", "Italic (Cmd+I)", () => document.execCommand("italic")), "command", "italic"),
+        withState(cmd("</>", "Inline code", () => this.toggleInlineCode()), "inline", "CODE"),
+      ]),
+      group([
+        withState(cmd("❝", "Quote", () => this.formatBlock("BLOCKQUOTE")), "block", "BLOCKQUOTE"),
+        withState(cmd("•", "Bulleted list", () => document.execCommand("insertUnorderedList")), "command", "insertUnorderedList"),
+        withState(cmd("1.", "Numbered list", () => document.execCommand("insertOrderedList")), "command", "insertOrderedList"),
+        cmd("{ }", "Code block", () => this.insertCodeBlock()),
+      ]),
+      group([
+        cmd("↗", "Link", () => this.insertLink()),
+        cmd("image", "Image", () => this.fileInput.click(), true),
+        cmd("―", "Divider", () => document.execCommand("insertHorizontalRule")),
+      ])
+    );
+    return tb;
+  }
+
+  // ---------- load / save ----------
+
+  private async load(): Promise<void> {
+    let raw = "";
+    try {
+      raw = await ContentApi.readFile(this.opts.rootId, this.opts.path);
+    } catch {
+      this.surface.innerHTML = "<p></p>";
+      this.setStatus("error", "Could not load file");
+      return;
+    }
+    const { fm, body } = splitFrontmatter(raw);
+    this.frontmatter = fm;
+    const { html } = renderMarkdown(body, { rootId: this.opts.rootId, docPath: this.opts.path });
+    this.surface.innerHTML = html || "<p></p>";
+    this.decorateEmbeds();
+    document.execCommand("defaultParagraphSeparator", false, "p");
+    this.recordHistorySnapshot(true);
+    this.updateToolbarState();
+  }
+
+  /** Render board embeds as non-editable chips so they survive editing. */
+  private decorateEmbeds(): void {
+    this.normalizeEmbedSpacing();
+    this.surface.querySelectorAll<HTMLElement>("figure.board-embed").forEach((fig) => {
+      fig.contentEditable = "false";
+      fig.tabIndex = 0;
+      fig.setAttribute("role", "button");
+      fig.setAttribute("aria-label", `Board embed ${fig.dataset.src ?? ""}. Press Delete to remove.`);
+      fig.classList.add("embed-chip");
+      const region = fig.dataset.region ? " · region" : "";
+      fig.innerHTML = `<span class="embed-chip-icon">▦</span> Board embed: <strong>${
+        fig.dataset.src ?? ""
+      }</strong>${region}<span class="embed-chip-remove" aria-hidden="true">Delete</span>`;
+      this.ensureEmbedCaretSpace(fig);
+    });
+  }
+
+  private ensureEmbedCaretSpace(fig: HTMLElement): void {
+    if (!isCaretParagraph(fig.previousElementSibling)) {
+      fig.before(caretParagraph());
+    }
+    if (!isCaretParagraph(fig.nextElementSibling)) {
+      fig.after(caretParagraph());
+    }
+  }
+
+  private normalizeEmbedSpacing(): void {
+    const figures = Array.from(this.surface.querySelectorAll<HTMLElement>("figure.board-embed"));
+    for (const fig of figures) {
+      convertContentfulSpacer(fig.previousElementSibling);
+      convertContentfulSpacer(fig.nextElementSibling);
+    }
+
+    // Collapse duplicate empty spacers so multiple embeds do not create noisy,
+    // ambiguous typing zones.
+    let prevWasEmptySpacer = false;
+    for (const child of Array.from(this.surface.children)) {
+      if (!isCaretParagraph(child)) {
+        prevWasEmptySpacer = false;
+        continue;
+      }
+      if (hasMeaningfulParagraphContent(child)) {
+        child.classList.remove("embed-caret-spacer");
+        prevWasEmptySpacer = false;
+        continue;
+      }
+      if (prevWasEmptySpacer) {
+        child.remove();
+        continue;
+      }
+      prevWasEmptySpacer = true;
+    }
+  }
+
+  private handleSurfaceClick(e: MouseEvent): void {
+    const target = e.target as HTMLElement | null;
+    const embed = target?.closest<HTMLElement>("figure.board-embed.embed-chip");
+    if (!embed || !this.surface.contains(embed)) return;
+    e.preventDefault();
+    this.selectEmbed(embed);
+  }
+
+  private selectEmbed(embed: HTMLElement): void {
+    this.surface.querySelectorAll(".embed-chip.selected").forEach((el) => el.classList.remove("selected"));
+    embed.classList.add("selected");
+    const range = document.createRange();
+    range.selectNode(embed);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    embed.focus();
+  }
+
+  private clearEmbedSelection(): void {
+    this.surface.querySelectorAll(".embed-chip.selected").forEach((el) => el.classList.remove("selected"));
+  }
+
+  private handleEmbedDeleteKey(e: KeyboardEvent): boolean {
+    if (e.key !== "Backspace" && e.key !== "Delete") return false;
+    const active = document.activeElement as HTMLElement | null;
+    const selected =
+      active?.closest<HTMLElement>("figure.board-embed.embed-chip.selected") ??
+      this.surface.querySelector<HTMLElement>("figure.board-embed.embed-chip.selected");
+    const embedFromCaret = selected ?? this.embedAdjacentToCaret(e.key);
+    if (!embedFromCaret || !this.surface.contains(embedFromCaret)) return false;
+    e.preventDefault();
+    const nextCaret =
+      e.key === "Backspace" ? embedFromCaret.previousElementSibling : embedFromCaret.nextElementSibling;
+    embedFromCaret.remove();
+    this.clearEmbedSelection();
+    this.placeCaretInBlock(isCaretParagraph(nextCaret) ? nextCaret : this.surface);
+    this.recordHistorySnapshot();
+    this.scheduleSave();
+    return true;
+  }
+
+  private embedAdjacentToCaret(key: "Backspace" | "Delete"): HTMLElement | null {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+    const node = sel.anchorNode;
+    const block = closestElement(node, "P");
+    if (!block || !this.surface.contains(block) || !isCaretParagraph(block)) return null;
+    const candidate = key === "Backspace" ? block.previousElementSibling : block.nextElementSibling;
+    return candidate instanceof HTMLElement && candidate.matches("figure.board-embed.embed-chip")
+      ? candidate
+      : null;
+  }
+
+  private handleInput(): void {
+    if (this.applyingHistory) return;
+    this.clearEmbedSelection();
+    this.recordHistorySnapshot();
+    this.scheduleSave();
+  }
+
+  private placeCaretInBlock(block: Element): void {
+    const range = document.createRange();
+    range.selectNodeContents(block);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+    this.surface.focus();
+  }
+
+  private scheduleSave(): void {
+    this.normalizeEmbedSpacing();
+    if (this.saveTimer !== null) clearTimeout(this.saveTimer);
+    this.setStatus("saving");
+    this.saveTimer = window.setTimeout(() => {
+      this.saveTimer = null;
+      void this.save();
+    }, 700);
+  }
+
+  private async save(): Promise<void> {
+    if (this.saveTimer !== null) {
+      clearTimeout(this.saveTimer);
+      this.saveTimer = null;
+    }
+    this.normalizeEmbedSpacing();
+    const body = htmlToMarkdown(this.surface);
+    const content = this.frontmatter ? `${this.frontmatter}\n\n${body}` : body;
+    try {
+      this.setStatus("saving");
+      await ContentApi.writeFile(this.opts.rootId, this.opts.path, content);
+      this.setStatus("saved");
+    } catch {
+      this.setStatus("error", "Save failed");
+    }
+  }
+
+  private async close(): Promise<void> {
+    if (this.closed) return;
+    this.closed = true;
+    await this.save();
+    this.abort.abort();
+    this.overlay.remove();
+    this.opts.onClose();
+  }
+
+  // ---------- formatting helpers ----------
+
+  private formatBlock(tag: string): void {
+    // Angle-bracket form is required by Safari and accepted by Chrome/Firefox.
+    document.execCommand("formatBlock", false, `<${tag}>`);
+  }
+
+  private insertLink(): void {
+    const sel = window.getSelection();
+    const selectedText = sel && !sel.isCollapsed ? sel.toString().trim() : "";
+    const url = window.prompt("Link URL", "https://");
+    if (!url) return;
+    const safeUrl = url.trim();
+    if (!safeUrl) return;
+    if (selectedText) {
+      document.execCommand("createLink", false, safeUrl);
+    } else {
+      document.execCommand("insertHTML", false, `<a href="${escapeAttr(safeUrl)}">${escapeHtml(safeUrl)}</a>`);
+    }
+  }
+
+  private toggleInlineCode(): void {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    const range = sel.getRangeAt(0);
+    // If already inside a <code>, unwrap it.
+    const existing = closestTag(range.commonAncestorContainer, "CODE");
+    if (existing) {
+      const parent = existing.parentNode!;
+      while (existing.firstChild) parent.insertBefore(existing.firstChild, existing);
+      parent.removeChild(existing);
+      return;
+    }
+    const code = document.createElement("code");
+    code.appendChild(range.extractContents());
+    range.insertNode(code);
+    range.setStartAfter(code);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  private insertCodeBlock(): void {
+    const pre = `<pre class="code-block"><code>code</code></pre><p><br></p>`;
+    document.execCommand("insertHTML", false, pre);
+  }
+
+  private updateToolbarState(): void {
+    const sel = window.getSelection();
+    const anchor = sel?.anchorNode ?? null;
+    const insideEditor = !!anchor && this.surface.contains(anchor);
+    for (const btn of this.toolbarButtons) {
+      const type = btn.dataset.stateType;
+      const value = btn.dataset.stateValue;
+      let active = false;
+      if (insideEditor && type === "command" && value) {
+        try {
+          active = document.queryCommandState(value);
+        } catch {
+          active = false;
+        }
+      } else if (insideEditor && type === "block" && value) {
+        active = !!closestTag(anchor!, value);
+      } else if (insideEditor && type === "inline" && value) {
+        active = !!closestTag(anchor!, value);
+      }
+      btn.classList.toggle("active", active);
+      btn.setAttribute("aria-pressed", active ? "true" : "false");
+    }
+  }
+
+  // ---------- images ----------
+
+  private onPaste(e: ClipboardEvent): void {
+    const specialBlock = parseSpecialFenceBlock(e.clipboardData?.getData("text/plain") ?? "");
+    if (specialBlock) {
+      e.preventDefault();
+      this.insertSpecialBlock(specialBlock);
+      return;
+    }
+
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) {
+          e.preventDefault();
+          void this.insertImageFile(file);
+          return;
+        }
+      }
+    }
+  }
+
+  private insertSpecialBlock(block: EditorSpecialBlock): void {
+    this.surface.focus();
+    const embed = renderSpecialBlock(block);
+    this.insertBlockNode(embed);
+    this.decorateEmbeds();
+    this.selectEmbed(embed);
+    this.recordHistorySnapshot();
+    this.updateToolbarState();
+    this.scheduleSave();
+  }
+
+  private insertBlockNode(node: HTMLElement): void {
+    const sel = window.getSelection();
+    const range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+    if (!range || !this.surface.contains(range.commonAncestorContainer)) {
+      this.surface.append(node, caretParagraph());
+      this.placeCaretInBlock(this.surface.lastElementChild ?? this.surface);
+      return;
+    }
+
+    const hostBlock = directChildOf(this.surface, range.commonAncestorContainer);
+    if (hostBlock && isSplittableInlineBlock(hostBlock) && !isCaretParagraph(hostBlock)) {
+      this.replaceBlockWithInsertedNode(hostBlock, range, node);
+      return;
+    }
+
+    range.deleteContents();
+    const trailingCaret = caretParagraph();
+    range.insertNode(trailingCaret);
+    range.insertNode(node);
+
+    // Keep a paragraph after inserted widgets so the user can continue typing.
+    this.placeCaretInBlock(trailingCaret);
+  }
+
+  private replaceBlockWithInsertedNode(block: HTMLElement, range: Range, node: HTMLElement): void {
+    const beforeRange = document.createRange();
+    beforeRange.selectNodeContents(block);
+    beforeRange.setEnd(range.startContainer, range.startOffset);
+
+    const afterRange = document.createRange();
+    afterRange.selectNodeContents(block);
+    afterRange.setStart(range.endContainer, range.endOffset);
+
+    const beforeBlock = cloneBlockWithContent(block, beforeRange.cloneContents());
+    const afterBlock = cloneBlockWithContent(block, afterRange.cloneContents());
+
+    const parent = block.parentNode;
+    if (!parent) return;
+    if (beforeBlock) parent.insertBefore(beforeBlock, block);
+    parent.insertBefore(node, block);
+    if (afterBlock) parent.insertBefore(afterBlock, block);
+    parent.removeChild(block);
+
+    const nextCaret = afterBlock ?? caretParagraph();
+    if (!afterBlock) parent.insertBefore(nextCaret, node.nextSibling);
+    this.placeCaretInBlock(nextCaret);
+  }
+
+  private onDrop(e: DragEvent): void {
+    const file = e.dataTransfer?.files?.[0];
+    if (file && file.type.startsWith("image/")) {
+      e.preventDefault();
+      void this.insertImageFile(file);
+    }
+  }
+
+  private async insertImageFile(file: File): Promise<void> {
+    this.setStatus("saving", "Uploading image…");
+    try {
+      const base64 = await fileToBase64(file);
+      const path = await ContentApi.uploadAsset(this.opts.rootId, file.name, base64);
+      const mdPath = relativePathBetween(this.opts.path, path);
+      const url = ContentApi.assetUrl(this.opts.rootId, path);
+      const alt = file.name.replace(/\.[^.]+$/, "");
+      this.surface.focus();
+      document.execCommand(
+        "insertHTML",
+        false,
+        `<img src="${url}" data-md-src="${mdPath}" alt="${escapeAttr(alt)}" /><p><br></p>`
+      );
+      this.recordHistorySnapshot();
+      await this.save();
+    } catch {
+      this.setStatus("error", "Image upload failed");
+    }
+  }
+
+  private recordHistorySnapshot(reset = false): void {
+    if (this.applyingHistory) return;
+    this.normalizeEmbedSpacing();
+    const snapshot = this.surface.innerHTML;
+    if (reset) {
+      this.history = [snapshot];
+      this.historyIndex = 0;
+      return;
+    }
+    if (this.history[this.historyIndex] === snapshot) return;
+    this.history = this.history.slice(0, this.historyIndex + 1);
+    this.history.push(snapshot);
+    if (this.history.length > 100) this.history.shift();
+    this.historyIndex = this.history.length - 1;
+  }
+
+  private undoHistory(): void {
+    if (this.historyIndex <= 0) return;
+    this.applyHistorySnapshot(this.historyIndex - 1);
+  }
+
+  private redoHistory(): void {
+    if (this.historyIndex >= this.history.length - 1) return;
+    this.applyHistorySnapshot(this.historyIndex + 1);
+  }
+
+  private applyHistorySnapshot(index: number): void {
+    const snapshot = this.history[index];
+    if (snapshot === undefined) return;
+    this.applyingHistory = true;
+    this.historyIndex = index;
+    this.surface.innerHTML = snapshot;
+    this.decorateEmbeds();
+    this.clearEmbedSelection();
+    this.placeCaretInBlock(this.surface.lastElementChild ?? this.surface);
+    this.applyingHistory = false;
+    this.updateToolbarState();
+    this.scheduleSave();
+  }
+
+  // ---------- status ----------
+
+  private setStatus(state: SaveState, message?: string): void {
+    const labels: Record<SaveState, string> = {
+      idle: "",
+      saving: message ?? "Saving…",
+      saved: "Saved",
+      error: message ?? "Couldn't save",
+    };
+    this.statusEl.textContent = labels[state];
+    this.statusEl.dataset.state = state;
+  }
+}
+
+// ---------- module helpers ----------
+
+function div(cls: string): HTMLElement {
+  const el = document.createElement("div");
+  el.className = cls;
+  return el;
+}
+
+function button(cls: string, text: string): HTMLButtonElement {
+  const b = document.createElement("button");
+  b.className = cls;
+  b.textContent = text;
+  return b;
+}
+
+function withState(
+  button: HTMLButtonElement,
+  type: "block" | "command" | "inline",
+  value: string
+): HTMLButtonElement {
+  button.dataset.stateType = type;
+  button.dataset.stateValue = value;
+  button.setAttribute("aria-pressed", "false");
+  return button;
+}
+
+function caretParagraph(): HTMLParagraphElement {
+  const p = document.createElement("p");
+  p.className = "embed-caret-spacer";
+  p.appendChild(document.createElement("br"));
+  return p;
+}
+
+function isCaretParagraph(node: Element | null): node is HTMLParagraphElement {
+  return !!node && node.tagName === "P" && node.classList.contains("embed-caret-spacer");
+}
+
+function convertContentfulSpacer(node: Element | null): void {
+  if (!isCaretParagraph(node)) return;
+  if (!hasMeaningfulParagraphContent(node)) return;
+  node.classList.remove("embed-caret-spacer");
+}
+
+function hasMeaningfulParagraphContent(node: Element): boolean {
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE && (child.textContent ?? "").trim()) return true;
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = child as HTMLElement;
+    if (el.tagName === "BR") continue;
+    if ((el.textContent ?? "").trim()) return true;
+    if (["IMG", "FIGURE", "HR"].includes(el.tagName)) return true;
+  }
+  return false;
+}
+
+function splitFrontmatter(raw: string): { fm: string; body: string } {
+  if (!raw.startsWith("---")) return { fm: "", body: raw };
+  const end = raw.indexOf("\n---", 3);
+  if (end === -1) return { fm: "", body: raw };
+  const fm = raw.slice(0, end + 4); // include the closing ---
+  const body = raw.slice(end + 4).replace(/^\n+/, "");
+  return { fm, body };
+}
+
+function closestTag(node: Node, tag: string): HTMLElement | null {
+  let cur: Node | null = node;
+  while (cur) {
+    if (cur.nodeType === Node.ELEMENT_NODE && (cur as HTMLElement).tagName === tag) {
+      return cur as HTMLElement;
+    }
+    cur = cur.parentNode;
+  }
+  return null;
+}
+
+function closestElement(node: Node | null, selector: string): HTMLElement | null {
+  let cur: Node | null = node;
+  while (cur) {
+    if (cur.nodeType === Node.ELEMENT_NODE && (cur as HTMLElement).matches(selector)) {
+      return cur as HTMLElement;
+    }
+    cur = cur.parentNode;
+  }
+  return null;
+}
+
+function directChildOf(root: HTMLElement, node: Node | null): HTMLElement | null {
+  let cur: Node | null = node;
+  while (cur && cur.parentNode !== root) {
+    cur = cur.parentNode;
+  }
+  return cur instanceof HTMLElement ? cur : null;
+}
+
+function isSplittableInlineBlock(node: HTMLElement): boolean {
+  return node.tagName === "P" || node.tagName === "DIV";
+}
+
+function cloneBlockWithContent(source: HTMLElement, fragment: DocumentFragment): HTMLElement | null {
+  if (!fragmentHasMeaningfulContent(fragment)) return null;
+  const clone = document.createElement(source.tagName);
+  if (source.tagName === "P" && source.classList.contains("embed-caret-spacer")) {
+    clone.className = "embed-caret-spacer";
+  }
+  clone.appendChild(fragment);
+  return clone;
+}
+
+function fragmentHasMeaningfulContent(fragment: DocumentFragment): boolean {
+  for (const node of Array.from(fragment.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim()) return true;
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const el = node as HTMLElement;
+    if (el.tagName === "BR") continue;
+    if (el.tagName === "P" && el.classList.contains("embed-caret-spacer")) continue;
+    if ((el.textContent ?? "").trim()) return true;
+    if (["IMG", "FIGURE", "HR"].includes(el.tagName)) return true;
+  }
+  return false;
+}
+
+function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      resolve(result.slice(result.indexOf(",") + 1));
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+type ParsedFenceBlock = {
+  language: string;
+  body: string;
+};
+
+type EditorSpecialBlock =
+  | {
+      kind: "board";
+      src: string;
+      region: [number, number, number, number] | null;
+      height: number;
+      title: string | null;
+    };
+
+const SPECIAL_FENCE_PARSERS: Record<string, (body: string) => EditorSpecialBlock | null> = {
+  board: (body) => {
+    const embed = parseBoardEmbed(body);
+    return embed.src
+      ? {
+          kind: "board",
+          src: embed.src,
+          region: embed.region,
+          height: embed.height,
+          title: embed.title,
+        }
+      : null;
+  },
+};
+
+function parseSpecialFenceBlock(text: string): EditorSpecialBlock | null {
+  const fence = parseSingleFenceBlock(text);
+  if (!fence) return null;
+  const parse = SPECIAL_FENCE_PARSERS[fence.language];
+  return parse ? parse(fence.body) : null;
+}
+
+function parseSingleFenceBlock(text: string): ParsedFenceBlock | null {
+  const trimmed = text.trim();
+  const match = trimmed.match(/^(`{3,})\s*([^\s`]+)?\s*\n([\s\S]*?)\n\1\s*$/);
+  if (!match) return null;
+  return {
+    language: (match[2] ?? "").toLowerCase(),
+    body: match[3],
+  };
+}
+
+function renderSpecialBlock(block: EditorSpecialBlock): HTMLElement {
+  switch (block.kind) {
+    case "board":
+      return createBoardEmbedFigure(block);
+  }
+}
+
+function createBoardEmbedFigure(block: Extract<EditorSpecialBlock, { kind: "board" }>): HTMLElement {
+  const figure = document.createElement("figure");
+  figure.className = "board-embed";
+  figure.dataset.src = block.src;
+  figure.dataset.height = String(block.height);
+  if (block.region) figure.dataset.region = block.region.join(",");
+  if (block.title) figure.dataset.title = block.title;
+  return figure;
+}