viteboard 0.1.0

package/src/content/Markdown.ts

@@ -0,0 +1,431 @@
+import { ContentApi, resolveDocPath } from "./ContentApi";
+
+/**
+ * A small, dependency-free Markdown renderer.
+ *
+ * Supports: frontmatter, ATX headings, fenced code (with a special `board`
+ * block), blockquotes, ordered/unordered/task lists (nested), GFM tables,
+ * horizontal rules, paragraphs, and inline bold/italic/code/links/images.
+ *
+ * Output is plain HTML strings. All text is HTML-escaped before inline
+ * formatting is applied, so untrusted markdown cannot inject markup.
+ */
+
+export type ParsedMarkdown = {
+  frontmatter: Record<string, string>;
+  html: string;
+};
+
+export type BoardEmbed = {
+  src: string;
+  region: [number, number, number, number] | null;
+  height: number;
+  title: string | null;
+};
+
+export type MarkdownRenderOptions = {
+  rootId?: string;
+  docPath?: string;
+};
+
+export function renderMarkdown(input: string, options: MarkdownRenderOptions = {}): ParsedMarkdown {
+  const { frontmatter, body } = extractFrontmatter(input);
+  // Error boundary: a malformed document must never take down the app. Any
+  // unexpected parser error degrades to a visible, escaped error block.
+  try {
+    const html = renderBlocks(body.split("\n"), options);
+    return { frontmatter, html };
+  } catch (err) {
+    console.error("Markdown render failed", err);
+    return {
+      frontmatter,
+      html:
+        `<div class="md-error"><strong>Could not render this document.</strong>` +
+        `<pre>${escapeHtml(String(err))}</pre></div>`,
+    };
+  }
+}
+
+// ---------- frontmatter ----------
+
+function extractFrontmatter(input: string): {
+  frontmatter: Record<string, string>;
+  body: string;
+} {
+  const fm: Record<string, string> = {};
+  if (!input.startsWith("---")) return { frontmatter: fm, body: input };
+  const end = input.indexOf("\n---", 3);
+  if (end === -1) return { frontmatter: fm, body: input };
+  const block = input.slice(3, end).trim();
+  for (const line of block.split("\n")) {
+    const idx = line.indexOf(":");
+    if (idx === -1) continue;
+    fm[line.slice(0, idx).trim()] = line.slice(idx + 1).trim();
+  }
+  const rest = input.slice(end + 4).replace(/^\n+/, "");
+  return { frontmatter: fm, body: rest };
+}
+
+// ---------- block parsing ----------
+
+function renderBlocks(lines: string[], options: MarkdownRenderOptions): string {
+  const out: string[] = [];
+  let i = 0;
+
+  // Defense-in-depth: the index `i` must strictly advance every iteration. If a
+  // future change ever breaks that invariant, fail loudly instead of hanging.
+  let guard = 0;
+  const maxIterations = lines.length * 4 + 1000;
+
+  while (i < lines.length) {
+    if (++guard > maxIterations) {
+      throw new Error(
+        `renderBlocks exceeded ${maxIterations} iterations at line ${i} — aborting to avoid an infinite loop`
+      );
+    }
+    const line = lines[i];
+
+    // blank
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+
+    // fenced code / board block (3+ backticks; closes on a run of >= that many)
+    const fence = line.match(/^(`{3,})\s*(\w+)?\s*$/);
+    if (fence) {
+      const fenceLen = fence[1].length;
+      const lang = (fence[2] ?? "").toLowerCase();
+      const closeRe = new RegExp("^`{" + fenceLen + ",}\\s*$");
+      const buf: string[] = [];
+      i++;
+      while (i < lines.length && !closeRe.test(lines[i])) {
+        buf.push(lines[i]);
+        i++;
+      }
+      i++; // consume closing fence
+      if (lang === "board") {
+        out.push(renderBoardPlaceholder(parseBoardEmbed(buf.join("\n"))));
+      } else {
+        out.push(
+          `<pre class="code-block"><code${
+            lang ? ` class="language-${lang}"` : ""
+          }>${escapeHtml(buf.join("\n"))}</code></pre>`
+        );
+      }
+      continue;
+    }
+
+    // heading
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      const level = heading[1].length;
+      const text = inline(heading[2].trim(), options);
+      const id = slug(heading[2]);
+      out.push(`<h${level} id="${id}">${text}</h${level}>`);
+      i++;
+      continue;
+    }
+
+    // horizontal rule
+    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      out.push("<hr />");
+      i++;
+      continue;
+    }
+
+    // blockquote
+    if (/^>\s?/.test(line)) {
+      const buf: string[] = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) {
+        buf.push(lines[i].replace(/^>\s?/, ""));
+        i++;
+      }
+      out.push(`<blockquote>${renderBlocks(buf, options)}</blockquote>`);
+      continue;
+    }
+
+    // table (GFM): header row followed by separator row
+    if (line.includes("|") && i + 1 < lines.length && isTableSep(lines[i + 1])) {
+      const buf: string[] = [];
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim() !== "") {
+        buf.push(lines[i]);
+        i++;
+      }
+      out.push(renderTable(buf, options));
+      continue;
+    }
+
+    // list (unordered / ordered / task)
+    if (isListItem(line)) {
+      const buf: string[] = [];
+      while (
+        i < lines.length &&
+        (isListItem(lines[i]) || /^\s+\S/.test(lines[i]) || lines[i].trim() === "")
+      ) {
+        // stop a trailing blank line that precedes a non-list block
+        if (lines[i].trim() === "") {
+          const next = lines[i + 1];
+          if (next === undefined || (!isListItem(next) && !/^\s+\S/.test(next))) break;
+        }
+        buf.push(lines[i]);
+        i++;
+      }
+      out.push(renderList(buf, options));
+      continue;
+    }
+
+    // paragraph — always consumes at least the current line so `i` advances
+    const buf: string[] = [lines[i]];
+    i++;
+    while (
+      i < lines.length &&
+      lines[i].trim() !== "" &&
+      !/^`{3,}/.test(lines[i]) &&
+      !/^#{1,6}\s/.test(lines[i]) &&
+      !/^>\s?/.test(lines[i]) &&
+      !isListItem(lines[i]) &&
+      !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(lines[i])
+    ) {
+      buf.push(lines[i]);
+      i++;
+    }
+    out.push(`<p>${inline(buf.join(" ").trim(), options)}</p>`);
+  }
+
+  return out.join("\n");
+}
+
+// ---------- lists ----------
+
+function isListItem(line: string): boolean {
+  return /^\s*([-*+]|\d+\.)\s+/.test(line);
+}
+
+type ListItem = { ordered: boolean; content: string[]; checked: boolean | null };
+
+function renderList(lines: string[], options: MarkdownRenderOptions): string {
+  // group by top-level items at the minimum indentation
+  const indents = lines.filter((l) => isListItem(l)).map((l) => l.match(/^\s*/)![0].length);
+  // No list items (shouldn't happen via the caller, but stay safe): render as text.
+    if (indents.length === 0) return inline(lines.join(" ").trim(), options);
+  const minIndent = Math.min(...indents);
+  const items: ListItem[] = [];
+  let ordered = false;
+  let current: ListItem | null = null;
+
+  for (const raw of lines) {
+    const indent = raw.match(/^\s*/)![0].length;
+    const m = raw.match(/^\s*([-*+]|\d+\.)\s+(.*)$/);
+    if (m && indent === minIndent) {
+      ordered = /\d+\./.test(m[1]);
+      let text = m[2];
+      let checked: boolean | null = null;
+      const task = text.match(/^\[([ xX])\]\s+(.*)$/);
+      if (task) {
+        checked = task[1].toLowerCase() === "x";
+        text = task[2];
+      }
+      current = { ordered, content: [text], checked };
+      items.push(current);
+    } else if (current) {
+      // continuation / nested content for the current item
+      current.content.push(raw.slice(minIndent));
+    }
+  }
+
+  const tag = ordered ? "ol" : "ul";
+  const body = items
+    .map((item) => {
+      const first = item.content[0];
+      const rest = item.content.slice(1);
+      let inner = inline(first, options);
+      const nested = rest.filter((l) => l.trim() !== "");
+      if (nested.some((l) => isListItem(l))) {
+        inner += renderList(rest, options);
+      } else if (nested.length) {
+        inner += " " + inline(nested.join(" ").trim(), options);
+      }
+      if (item.checked !== null) {
+        const box = `<input type="checkbox" disabled${item.checked ? " checked" : ""} /> `;
+        return `<li class="task">${box}${inner}</li>`;
+      }
+      return `<li>${inner}</li>`;
+    })
+    .join("");
+  return `<${tag}>${body}</${tag}>`;
+}
+
+// ---------- tables ----------
+
+function isTableSep(line: string): boolean {
+  return /^\s*\|?\s*:?-{1,}:?\s*(\|\s*:?-{1,}:?\s*)*\|?\s*$/.test(line);
+}
+
+function splitRow(line: string): string[] {
+  return line
+    .trim()
+    .replace(/^\|/, "")
+    .replace(/\|$/, "")
+    .split("|")
+    .map((c) => c.trim());
+}
+
+function renderTable(lines: string[], options: MarkdownRenderOptions): string {
+  const header = splitRow(lines[0]);
+  const aligns = splitRow(lines[1]).map((c) => {
+    const left = c.startsWith(":");
+    const right = c.endsWith(":");
+    if (left && right) return "center";
+    if (right) return "right";
+    if (left) return "left";
+    return "";
+  });
+  const rows = lines.slice(2).map(splitRow);
+  const th = header
+    .map((c, idx) => `<th${aligns[idx] ? ` style="text-align:${aligns[idx]}"` : ""}>${inline(c, options)}</th>`)
+    .join("");
+  const trs = rows
+    .map(
+      (r) =>
+        `<tr>${r
+          .map(
+            (c, idx) =>
+               `<td${aligns[idx] ? ` style="text-align:${aligns[idx]}"` : ""}>${inline(c, options)}</td>`
+          )
+          .join("")}</tr>`
+    )
+    .join("");
+  return `<table><thead><tr>${th}</tr></thead><tbody>${trs}</tbody></table>`;
+}
+
+// ---------- board embeds ----------
+
+export function parseBoardEmbed(body: string): BoardEmbed {
+  const fields: Record<string, string> = {};
+  for (const line of body.split("\n")) {
+    const clean = line.replace(/#.*$/, "").trim(); // strip trailing comments
+    if (!clean) continue;
+    const idx = clean.indexOf(":");
+    if (idx === -1) continue;
+    fields[clean.slice(0, idx).trim()] = clean.slice(idx + 1).trim();
+  }
+  let region: [number, number, number, number] | null = null;
+  if (fields.region) {
+    const nums = fields.region.split(",").map((n) => parseFloat(n.trim()));
+    if (nums.length === 4 && nums.every((n) => Number.isFinite(n))) {
+      region = [nums[0], nums[1], nums[2], nums[3]];
+    }
+  }
+  return {
+    src: fields.src ?? "",
+    region,
+    height: fields.height ? Math.max(120, parseInt(fields.height, 10) || 360) : 360,
+    title: fields.title ?? null,
+  };
+}
+
+function renderBoardPlaceholder(embed: BoardEmbed): string {
+  const region = embed.region ? embed.region.join(",") : "";
+  return (
+    `<figure class="board-embed" data-src="${escapeAttr(embed.src)}" ` +
+    `data-region="${region}" data-height="${embed.height}" ` +
+    `data-title="${escapeAttr(embed.title ?? "")}"></figure>`
+  );
+}
+
+// ---------- inline ----------
+
+function inline(text: string, options: MarkdownRenderOptions): string {
+  let s = escapeHtml(text);
+
+  // Preserve escaped markdown punctuation as literal text before applying
+  // formatting rules, then restore it after inline parsing.
+  const escapedLiterals: string[] = [];
+  s = s.replace(/\\([\\`*_{}\[\]()#+\-.!|])/g, (_m, char) => {
+    escapedLiterals.push(char);
+    return `\u0001${escapedLiterals.length - 1}\u0001`;
+  });
+
+  // protect inline code spans
+  const codes: string[] = [];
+  s = s.replace(/`([^`]+)`/g, (_m, code) => {
+    codes.push(`<code>${code}</code>`);
+    return `\u0000${codes.length - 1}\u0000`;
+  });
+
+  // images: ![alt](src)
+  s = s.replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, (_m, alt, src) => {
+    const resolved = resolveLocalPath(src, options);
+    const rendered = resolveAsset(src, options);
+    const dataAttr = resolved === src ? "" : ` data-md-src="${escapeAttr(src)}"`;
+    return `<img src="${rendered}" alt="${escapeAttr(alt)}" loading="lazy"${dataAttr} />`;
+  });
+
+  // links: [text](href)
+  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, label, href) => {
+    const rendered = resolveLinkHref(href, options);
+    const external = /^(https?:|mailto:|tel:)/.test(href);
+    const rel = external ? ' target="_blank" rel="noopener noreferrer"' : "";
+    const dataAttr = rendered === href ? "" : ` data-md-href="${escapeAttr(href)}"`;
+    return `<a href="${escapeAttr(rendered)}"${rel}${dataAttr}>${label}</a>`;
+  });
+
+  // bold then italic. Bold uses a non-greedy body so it can WRAP inner italics,
+  // e.g. `**bold with *italic* inside**`. The italic pass then runs on the
+  // already-bolded text and converts the remaining single-* spans.
+  s = s.replace(/\*\*([\s\S]+?)\*\*/g, "<strong>$1</strong>");
+  s = s.replace(/__([\s\S]+?)__/g, "<strong>$1</strong>");
+  s = s.replace(/(^|[^*])\*([^*\s][^*]*)\*/g, "$1<em>$2</em>");
+  s = s.replace(/(^|[^_])_([^_\s][^_]*)_/g, "$1<em>$2</em>");
+
+  // restore code spans
+  s = s.replace(/\u0000(\d+)\u0000/g, (_m, n) => codes[Number(n)]);
+  s = s.replace(/\u0001(\d+)\u0001/g, (_m, n) => escapedLiterals[Number(n)]);
+  return s;
+}
+
+function resolveAsset(src: string, options: MarkdownRenderOptions): string {
+  if (/^(https?:|data:)/.test(src)) return src;
+  if (!options.rootId || !options.docPath) return src;
+  const resolved = resolveLocalPath(src, options);
+  if (!resolved) return src;
+  return ContentApi.assetUrl(options.rootId, resolved);
+}
+
+function resolveLinkHref(href: string, options: MarkdownRenderOptions): string {
+  if (/^(https?:|mailto:|tel:|#|data:)/.test(href)) return href;
+  if (!options.rootId || !options.docPath) return href;
+  const resolved = resolveLocalPath(href, options);
+  if (!resolved) return href;
+  if (resolved.endsWith(".md")) {
+    return `#/root/${encodeURIComponent(options.rootId)}/docs/${encodeURIComponent(resolved)}`;
+  }
+  return ContentApi.assetUrl(options.rootId, resolved);
+}
+
+function resolveLocalPath(target: string, options: MarkdownRenderOptions): string {
+  if (!options.docPath) return target;
+  return resolveDocPath(options.docPath, target);
+}
+
+// ---------- utils ----------
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function escapeAttr(s: string): string {
+  return escapeHtml(s).replace(/"/g, "&quot;");
+}
+
+export function slug(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^\w\s-]/g, "")
+    .trim()
+    .replace(/\s+/g, "-");
+}

package/src/content/MarkdownView.ts

@@ -0,0 +1,70 @@
+import { renderMarkdown } from "./Markdown";
+import { BoardPreview } from "../board/BoardPreview";
+import { resolveBoardIdCandidatesFromDoc } from "../board/BoardService";
+
+export function currentTheme(): "light" | "dark" {
+  return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+}
+
+export type MarkdownRenderContext = {
+  rootId: string;
+  docPath: string;
+};
+
+/**
+ * Renders markdown into `container` and upgrades any `board` fenced blocks
+ * (emitted as <figure class="board-embed">) into live, read-only BoardPreviews.
+ * Returns a cleanup function that tears down the preview render loops/observers.
+ */
+export function renderMarkdownInto(
+  container: HTMLElement,
+  markdown: string,
+  context: MarkdownRenderContext
+): { frontmatter: Record<string, string>; destroy: () => void } {
+  const { html, frontmatter } = renderMarkdown(markdown, context);
+
+  const body = document.createElement("article");
+  body.className = "markdown-body";
+  body.innerHTML = html;
+  container.replaceChildren(body);
+
+  const previews: BoardPreview[] = [];
+  body.querySelectorAll<HTMLElement>("figure.board-embed").forEach((figure) => {
+    const src = figure.dataset.src ?? "";
+    if (!src) return;
+    const boardIds = resolveBoardIdCandidatesFromDoc(src, context.docPath);
+    const boardId = boardIds[0] ?? "";
+    const regionStr = figure.dataset.region ?? "";
+    const nums = regionStr ? regionStr.split(",").map(Number) : [];
+    const region =
+      nums.length === 4 && nums.every((n) => Number.isFinite(n))
+        ? ([nums[0], nums[1], nums[2], nums[3]] as [number, number, number, number])
+        : null;
+    const height = parseInt(figure.dataset.height ?? "360", 10) || 360;
+    const title = figure.dataset.title || null;
+    // A single broken embed must not break the whole document.
+    try {
+      previews.push(
+        new BoardPreview(figure, {
+          rootId: context.rootId,
+          src: boardId,
+          srcCandidates: boardIds,
+          region,
+          height,
+          title,
+          theme: currentTheme(),
+        })
+      );
+    } catch (err) {
+      console.error("Board embed failed to mount", src, err);
+      figure.textContent = `Could not load board "${src}".`;
+    }
+  });
+
+  return {
+    frontmatter,
+    destroy: () => {
+      for (const p of previews) p.destroy();
+    },
+  };
+}