viteboard 0.1.0

package/src/editor/htmlToMarkdown.ts

@@ -0,0 +1,333 @@
+/**
+ * Serializes the DocEditor's contenteditable DOM back into clean markdown.
+ *
+ * It understands exactly the HTML that `renderMarkdown` produces (plus the
+ * `<p>`/`<div>`/`<br>` that browsers create while editing), so a doc can make a
+ * full round-trip: markdown -> HTML -> edit -> markdown without drifting.
+ */
+
+const ASSET_PREFIX = "/__api/asset?path=";
+
+const BLOCK_TAGS = new Set([
+  "P",
+  "DIV",
+  "UL",
+  "OL",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "BLOCKQUOTE",
+  "PRE",
+  "TABLE",
+  "FIGURE",
+  "HR",
+]);
+
+export function htmlToMarkdown(root: HTMLElement): string {
+  const blocks: string[] = [];
+  for (const node of Array.from(root.childNodes)) {
+    pushBlock(blocks, node);
+  }
+  return (
+    blocks
+      .map((b) => b.replace(/[ \t]+$/gm, ""))
+      .join("\n\n")
+      .replace(/\n{3,}/g, "\n\n")
+      .trim() + "\n"
+  );
+}
+
+function pushBlock(out: string[], node: Node): void {
+  const md = serializeBlock(node);
+  if (md !== null && md.trim() !== "") out.push(md);
+}
+
+function serializeBlock(node: Node): string | null {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = (node.textContent ?? "").trim();
+    return text ? text : null;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+
+  const el = node as HTMLElement;
+  const tag = el.tagName;
+
+  switch (tag) {
+    case "H1":
+    case "H2":
+    case "H3":
+    case "H4":
+    case "H5":
+    case "H6":
+      return "#".repeat(Number(tag[1])) + " " + inlineOf(el).trim();
+
+    case "HR":
+      return "---";
+
+    case "P":
+      if (el.classList.contains("embed-caret-spacer") && !hasMeaningfulParagraphContent(el)) return null;
+      if (hasBlockChild(el)) return serializeMixedBlockContainer(el);
+      return paragraphMarkdown(inlineOf(el).trim());
+
+    case "BLOCKQUOTE": {
+      const inner = blocksOf(el);
+      return inner
+        .split("\n")
+        .map((l) => (l ? `> ${l}` : ">"))
+        .join("\n");
+    }
+
+    case "UL":
+      return serializeList(el, false, 0);
+    case "OL":
+      return serializeList(el, true, 0);
+
+    case "PRE": {
+      const code = el.querySelector("code");
+      const lang = langFromClass(code ?? el);
+      const text = (code ?? el).textContent ?? "";
+      return "```" + lang + "\n" + text.replace(/\n$/, "") + "\n```";
+    }
+
+    case "TABLE":
+      return serializeTable(el as HTMLTableElement);
+
+    case "FIGURE":
+      if (el.classList.contains("board-embed")) return boardBlock(el);
+      return blocksOf(el) || null;
+
+    case "DIV": {
+      // Browsers wrap edits in <div>. If it holds blocks, recurse; else treat
+      // the whole thing as a paragraph.
+      if (hasBlockChild(el)) {
+        return serializeMixedBlockContainer(el);
+      }
+      return paragraphMarkdown(inlineOf(el).trim());
+    }
+
+    case "BR":
+      return null;
+
+    default:
+      return inlineOf(el).trim() || null;
+  }
+}
+
+/** Serialize the block-level children of a container into joined markdown. */
+function blocksOf(el: HTMLElement): string {
+  const acc: string[] = [];
+  for (const child of Array.from(el.childNodes)) pushBlock(acc, child);
+  return acc.join("\n\n");
+}
+
+function hasBlockChild(el: HTMLElement): boolean {
+  for (const child of Array.from(el.children)) {
+    if (BLOCK_TAGS.has(child.tagName)) return true;
+  }
+  return false;
+}
+
+function serializeMixedBlockContainer(el: HTMLElement): string | null {
+  const acc: string[] = [];
+  let inlineBuffer = "";
+
+  const flushInline = () => {
+    const paragraph = paragraphMarkdown(inlineBuffer.trim());
+    if (paragraph) acc.push(paragraph);
+    inlineBuffer = "";
+  };
+
+  for (const child of Array.from(el.childNodes)) {
+    if (isBlockNode(child)) {
+      flushInline();
+      pushBlock(acc, child);
+      continue;
+    }
+    inlineBuffer += inlineOfNode(child);
+  }
+
+  flushInline();
+  return acc.join("\n\n") || null;
+}
+
+function isBlockNode(node: Node): boolean {
+  return node.nodeType === Node.ELEMENT_NODE && BLOCK_TAGS.has((node as HTMLElement).tagName);
+}
+
+function hasMeaningfulParagraphContent(el: HTMLElement): boolean {
+  for (const child of Array.from(el.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE && (child.textContent ?? "").trim()) return true;
+    if (child.nodeType !== Node.ELEMENT_NODE) continue;
+    const node = child as HTMLElement;
+    if (node.tagName === "BR") continue;
+    if ((node.textContent ?? "").trim()) return true;
+    if (["IMG", "FIGURE", "HR"].includes(node.tagName)) return true;
+  }
+  return false;
+}
+
+function serializeList(listEl: HTMLElement, ordered: boolean, depth: number): string {
+  const lines: string[] = [];
+  const indent = "  ".repeat(depth);
+  let index = 0;
+  for (const li of Array.from(listEl.children)) {
+    if (li.tagName !== "LI") continue;
+    index++;
+    const marker = ordered ? `${index}. ` : "- ";
+
+    // Split direct content from nested lists.
+    let inlineText = "";
+    const nested: string[] = [];
+    let task: string | null = null;
+    for (const child of Array.from(li.childNodes)) {
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        const ce = child as HTMLElement;
+        if (ce.tagName === "UL") {
+          nested.push(serializeList(ce, false, depth + 1));
+          continue;
+        }
+        if (ce.tagName === "OL") {
+          nested.push(serializeList(ce, true, depth + 1));
+          continue;
+        }
+        if (ce.tagName === "INPUT") {
+          task = (ce as HTMLInputElement).checked ? "[x] " : "[ ] ";
+          continue;
+        }
+      }
+      inlineText += inlineOfNode(child);
+    }
+
+    lines.push(indent + marker + (task ?? "") + inlineText.trim());
+    for (const n of nested) if (n) lines.push(n);
+  }
+  return lines.join("\n");
+}
+
+function serializeTable(table: HTMLTableElement): string {
+  const rows = Array.from(table.querySelectorAll("tr"));
+  if (rows.length === 0) return "";
+  const toCells = (tr: Element) =>
+    Array.from(tr.querySelectorAll("th,td")).map((c) => inlineOf(c as HTMLElement).trim());
+
+  const header = toCells(rows[0]);
+  const out: string[] = [];
+  out.push("| " + header.join(" | ") + " |");
+  out.push("| " + header.map(() => "---").join(" | ") + " |");
+  for (let i = 1; i < rows.length; i++) {
+    out.push("| " + toCells(rows[i]).join(" | ") + " |");
+  }
+  return out.join("\n");
+}
+
+function boardBlock(figure: HTMLElement): string {
+  const lines = ["```board", `src: ${figure.dataset.src ?? ""}`];
+  if (figure.dataset.region) {
+    lines.push(`region: ${figure.dataset.region.split(",").map((s) => s.trim()).join(", ")}`);
+  }
+  if (figure.dataset.height) lines.push(`height: ${figure.dataset.height}`);
+  if (figure.dataset.title) lines.push(`title: ${figure.dataset.title}`);
+  lines.push("```");
+  return lines.join("\n");
+}
+
+// ---------- inline ----------
+
+function inlineOf(el: HTMLElement): string {
+  let s = "";
+  for (const child of Array.from(el.childNodes)) s += inlineOfNode(child);
+  return s;
+}
+
+function inlineOfNode(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) return escapeMarkdownText(node.textContent ?? "");
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+
+  const el = node as HTMLElement;
+  switch (el.tagName) {
+    case "STRONG":
+    case "B":
+      return wrapInline("**", inlineOf(el));
+    case "EM":
+    case "I":
+      return wrapInline("*", inlineOf(el));
+    case "CODE":
+      return inlineCode(el.textContent ?? "");
+    case "A": {
+      const href = (el.getAttribute("data-md-href") ?? el.getAttribute("href") ?? "").trim();
+      const label = inlineOf(el).trim() || escapeMarkdownText(href);
+      if (!href) return label;
+      return `[${escapeLinkLabel(label)}](${escapeUrl(href)})`;
+    }
+    case "IMG":
+      return `![${escapeLinkLabel((el as HTMLImageElement).alt)}](${escapeUrl(
+        imgMarkdownSrc(el as HTMLImageElement)
+      )})`;
+    case "BR":
+      return "\n";
+    default:
+      return inlineOf(el);
+  }
+}
+
+function imgMarkdownSrc(img: HTMLImageElement): string {
+  const dataSrc = img.getAttribute("data-md-src");
+  if (dataSrc) return dataSrc;
+  const src = img.getAttribute("src") ?? "";
+  if (src.startsWith(ASSET_PREFIX)) return decodeURIComponent(src.slice(ASSET_PREFIX.length));
+  return src;
+}
+
+function langFromClass(el: Element): string {
+  const cls = el.getAttribute("class") ?? "";
+  const m = cls.match(/language-(\w+)/);
+  return m ? m[1] : "";
+}
+
+function wrapInline(marker: string, value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  return `${marker}${trimmed}${marker}`;
+}
+
+function inlineCode(value: string): string {
+  if (!value.includes("`")) return "`" + value + "`";
+  const longest = Math.max(...(value.match(/`+/g) ?? [""]).map((run) => run.length));
+  const fence = "`".repeat(longest + 1);
+  return `${fence} ${value} ${fence}`;
+}
+
+function escapeMarkdownText(value: string): string {
+  return value
+    .replace(/\\/g, "\\\\")
+    .replace(/\[/g, "\\[")
+    .replace(/\]/g, "\\]")
+    .replace(/\*/g, "\\*")
+    .replace(/_/g, "\\_")
+    .replace(/`/g, "\\`");
+}
+
+function paragraphMarkdown(value: string): string | null {
+  if (!value) return null;
+  if (
+    /^#{1,6}\s/.test(value) ||
+    /^>\s?/.test(value) ||
+    /^([-+*]|\d+\.)\s+/.test(value) ||
+    /^`{3,}/.test(value) ||
+    /^(-{3,}|\*{3,}|_{3,})$/.test(value)
+  ) {
+    return "\\" + value;
+  }
+  return value;
+}
+
+function escapeLinkLabel(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/\]/g, "\\]");
+}
+
+function escapeUrl(value: string): string {
+  return value.trim().replace(/\s/g, "%20").replace(/\)/g, "%29").replace(/</g, "%3C").replace(/>/g, "%3E");
+}