viteboard 0.1.0 → 0.1.2

package/src/editor/htmlToMarkdown.ts

@@ -1,333 +0,0 @@
-/**
- * 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");
-}