slidemind 0.1.7 → 0.1.9

package/src/builders/plan-md.mjs

@@ -0,0 +1,216 @@
+// A tiny, self-contained markdown → HTML renderer for the constrained subset an
+// agent-authored plan.md uses. Deliberately NO CDN and no dependencies: the plan
+// gate ships this exact source into the browser (exports stripped, exposed as
+// window.__SLIDEMIND_RENDER_MD__) so the editor's live preview renders with the
+// SAME renderer as the served page. Every block still carries its on-disk source
+// line/kind/section stamps — cheap, tested metadata for tooling.
+//
+// Supported blocks: ATX headings (#..######), blank-line-separated paragraphs,
+// unordered (-/*) and ordered (1.) lists with each <li> stamped individually,
+// > blockquotes, ``` fenced code, and simple pipe tables. Inline: **bold**,
+// *italic*, `code`. All text is HTML-escaped BEFORE inline formatting is applied
+// (defense in depth — the content is model/user-authored). Anything unrecognized
+// degrades to a paragraph. One level of nesting only (nested lists may flatten).
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+// For an HTML attribute value: escape as text, then also quotes.
+function escapeAttr(s) {
+  return escapeHtml(s).replace(/"/g, "&quot;");
+}
+
+// Escape first, THEN apply inline formatting. Code spans are handled before
+// bold/italic so their contents aren't re-interpreted; bold before italic so a
+// **run** isn't half-consumed by the single-* rule.
+function renderInline(text) {
+  let s = escapeHtml(text);
+  s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+  s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  s = s.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+  return s;
+}
+
+// Plain-text form of a heading (markers stripped) for the breadcrumb attribute.
+function stripInlineMarkers(text) {
+  return String(text)
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .trim();
+}
+
+function isListItem(line) {
+  return /^\s*(?:[-*]\s+|\d+[.)]\s+)/.test(line);
+}
+
+// A table separator row: pipes and dashes only, optional alignment colons.
+function isTableSeparator(line) {
+  const s = line.trim();
+  if (!s.includes("-")) return false;
+  return /^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?$/.test(s);
+}
+
+function splitTableRow(line) {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|")) s = s.slice(0, -1);
+  return s.split("|").map((c) => c.trim());
+}
+
+// The three stamp attributes carried by every block.
+function stamp(absLine, kind, section) {
+  return (
+    ` data-md-line="${absLine}" data-md-kind="${kind}"` +
+    ` data-md-section="${escapeAttr(section)}"`
+  );
+}
+
+export function renderPlanMarkdown(body, { lineOffset = 0 } = {}) {
+  const lines = String(body).split("\n");
+  const out = [];
+  let section = ""; // nearest preceding heading text (breadcrumb)
+  let i = 0;
+  // idx is 0-based into `lines`; local line number is idx+1, absolute adds the
+  // frontmatter offset.
+  const abs = (idx) => lineOffset + idx + 1;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    if (/^\s*$/.test(line)) {
+      i++;
+      continue;
+    }
+
+    // Fenced code — stamped on the opening fence, contents escaped verbatim.
+    if (/^\s*```/.test(line)) {
+      const startIdx = i;
+      i++;
+      const code = [];
+      while (i < lines.length && !/^\s*```\s*$/.test(lines[i])) {
+        code.push(lines[i]);
+        i++;
+      }
+      if (i < lines.length) i++; // consume the closing fence
+      out.push(
+        `<pre${stamp(abs(startIdx), "code", section)}><code>` +
+          escapeHtml(code.join("\n")) +
+          `</code></pre>`,
+      );
+      continue;
+    }
+
+    // ATX heading.
+    const heading = line.match(/^(#{1,6})\s+(.*)$/);
+    if (heading) {
+      const level = heading[1].length;
+      const raw = heading[2].replace(/\s+#+\s*$/, "").trim(); // drop optional closing #
+      section = stripInlineMarkers(raw);
+      const kind = "h" + level;
+      out.push(
+        `<${kind}${stamp(abs(i), kind, section)}>` +
+          renderInline(raw) +
+          `</${kind}>`,
+      );
+      i++;
+      continue;
+    }
+
+    // Pipe table — header row followed by a separator row.
+    if (
+      line.includes("|") &&
+      i + 1 < lines.length &&
+      isTableSeparator(lines[i + 1])
+    ) {
+      const headerIdx = i;
+      const header = splitTableRow(line);
+      i += 2; // skip header + separator
+      const rows = [];
+      while (i < lines.length && !/^\s*$/.test(lines[i]) && lines[i].includes("|")) {
+        rows.push(splitTableRow(lines[i]));
+        i++;
+      }
+      let html = `<table${stamp(abs(headerIdx), "table", section)}>`;
+      html +=
+        "<thead><tr>" +
+        header.map((c) => `<th>${renderInline(c)}</th>`).join("") +
+        "</tr></thead>";
+      html +=
+        "<tbody>" +
+        rows
+          .map(
+            (r) => "<tr>" + r.map((c) => `<td>${renderInline(c)}</td>`).join("") + "</tr>",
+          )
+          .join("") +
+        "</tbody>";
+      html += "</table>";
+      out.push(html);
+      continue;
+    }
+
+    // Blockquote — consecutive > lines, joined.
+    if (/^\s*>/.test(line)) {
+      const startIdx = i;
+      const quote = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) {
+        quote.push(lines[i].replace(/^\s*>\s?/, ""));
+        i++;
+      }
+      out.push(
+        `<blockquote${stamp(abs(startIdx), "blockquote", section)}>` +
+          renderInline(quote.join(" ")) +
+          `</blockquote>`,
+      );
+      continue;
+    }
+
+    // List — each <li> stamped with its own line; the wrapper is unstamped.
+    if (isListItem(line)) {
+      const ordered = /^\s*\d+[.)]\s+/.test(line);
+      const tag = ordered ? "ol" : "ul";
+      const items = [];
+      while (i < lines.length && isListItem(lines[i])) {
+        const content = lines[i].replace(/^\s*(?:[-*]|\d+[.)])\s+/, "");
+        items.push(
+          `<li${stamp(abs(i), "li", section)}>` + renderInline(content) + `</li>`,
+        );
+        i++;
+      }
+      out.push(`<${tag}>` + items.join("") + `</${tag}>`);
+      continue;
+    }
+
+    // Paragraph (and the degrade-to-<p> fallback for anything unrecognized):
+    // gather until a blank line or the start of another block.
+    const startIdx = i;
+    const para = [];
+    while (
+      i < lines.length &&
+      !/^\s*$/.test(lines[i]) &&
+      !/^(#{1,6})\s+/.test(lines[i]) &&
+      !/^\s*```/.test(lines[i]) &&
+      !/^\s*>/.test(lines[i]) &&
+      !isListItem(lines[i]) &&
+      !(
+        lines[i].includes("|") &&
+        i + 1 < lines.length &&
+        isTableSeparator(lines[i + 1])
+      )
+    ) {
+      para.push(lines[i]);
+      i++;
+    }
+    out.push(
+      `<p${stamp(abs(startIdx), "p", section)}>` +
+        renderInline(para.join(" ")) +
+        `</p>`,
+    );
+  }
+
+  return out.join("\n");
+}