@ampless/runtime 0.2.0-alpha.10 → 0.2.0-alpha.11

package/dist/index.d.ts

@@ -159,32 +159,42 @@ declare function renderBody(post: Post): string;
  * Convert a tiptap doc to its HTML form. Same renderer the public
  * site uses. Defensive: tiptap accepts an HTML string as initial
  * content and parses it on mount, but won't fire onUpdate until the
- * user edits — so a format-switch chain (e.g. markdown → tiptap →
+ * user edits, so a format-switch chain (e.g. markdown -> tiptap ->
  * markdown without editing) can still hand us a raw HTML string
  * here. In that case, return it as-is rather than walking it as a
  * malformed tiptap node and producing empty output.
  */
 declare function tiptapToHtml(doc: unknown): string;
-/** Convert markdown to HTML using the built-in minimal renderer. */
+/** Convert markdown to HTML using marked + GFM. */
 declare function markdownToHtml(md: string): string;
 /**
  * Walk a tiptap doc and emit Markdown. Mirrors `renderTiptap` in
  * shape but produces markdown syntax. Loses anything markdown can't
  * express (data attributes, image display modes, custom marks).
  *
+ * Notes on info loss:
+ * - underline / highlight are not in GFM, so they fall back to the
+ *   literal `<u>` / `<mark>` HTML tags (preserved as-is across round trips).
+ * - paragraph / heading textAlign cannot be expressed in markdown and
+ *   is therefore lost on conversion.
+ *
  * Same defensive path as tiptapToHtml: a string input means tiptap
  * hasn't emitted JSON yet (the body is still the HTML we handed it).
  * Route through htmlToMarkdown so the content survives.
  */
 declare function tiptapToMarkdown(doc: unknown): string;
 /**
- * Regex-based HTML → Markdown converter. Handles the tag set the
+ * Regex-based HTML -> Markdown converter. Handles the tag set the
  * editor produces (`<p>` `<h1>`-`<h6>` `<strong>` `<em>` `<a>`
  * `<img>` `<ul>` `<ol>` `<li>` `<code>` `<pre>` `<blockquote>` `<hr>`
- * `<br>`). Anything else (tables, sections, divs) keeps its content
- * but loses structural meaning.
+ * `<br>` `<u>` `<mark>` `<table>` task-list `<ul data-type="taskList">`).
+ * Decorative containers like `<div style="text-align:...">` are dropped.
+ *
+ * Tables are reduced to GFM pipe syntax via convertHtmlTable. Complex
+ * nested content inside cells (lists, other tables) is flattened to
+ * plain text.
  *
- * Not a full library — there are known limits like nested formatting
+ * Not a full library, there are known limits like nested formatting
  * inside list items potentially merging. Acceptable for a v0.x
  * format-switch convenience; complex HTML round-trips shouldn't be
  * relied on.

package/dist/index.js

@@ -285,9 +285,17 @@ ${lines.join("\n")}
 }
 
 // src/rendering.ts
+import { marked } from "marked";
 function escape(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function textAlignStyle(attrs) {
+  const v = attrs?.textAlign;
+  if (v === "left" || v === "center" || v === "right" || v === "justify") {
+    return ` style="text-align: ${v}"`;
+  }
+  return "";
+}
 function renderTiptap(node) {
   if (node.type === "text") {
     let html = escape(node.text ?? "");
@@ -296,6 +304,8 @@ function renderTiptap(node) {
       else if (mark.type === "italic") html = `<em>${html}</em>`;
       else if (mark.type === "code") html = `<code>${html}</code>`;
       else if (mark.type === "strike") html = `<s>${html}</s>`;
+      else if (mark.type === "underline") html = `<u>${html}</u>`;
+      else if (mark.type === "highlight") html = `<mark>${html}</mark>`;
       else if (mark.type === "link") {
         const href = escape(String(mark.attrs?.href ?? "#"));
         html = `<a href="${href}" target="_blank" rel="noopener">${html}</a>`;
@@ -308,10 +318,10 @@ function renderTiptap(node) {
     case "doc":
       return children;
     case "paragraph":
-      return `<p>${children}</p>`;
+      return `<p${textAlignStyle(node.attrs)}>${children}</p>`;
     case "heading": {
       const level = Number(node.attrs?.level ?? 1);
-      return `<h${level}>${children}</h${level}>`;
+      return `<h${level}${textAlignStyle(node.attrs)}>${children}</h${level}>`;
     }
     case "bulletList":
       return `<ul>${children}</ul>`;
@@ -336,52 +346,39 @@ function renderTiptap(node) {
       const display = node.attrs?.display ? ` data-display="${escape(String(node.attrs.display))}"` : "";
       return `<img src="${src}" alt="${alt}"${title}${display} loading="lazy" />`;
     }
+    case "table":
+      return `<table class="tiptap-table"><tbody>${children}</tbody></table>`;
+    case "tableRow":
+      return `<tr>${children}</tr>`;
+    case "tableHeader":
+      return `<th${tableCellAttrs(node.attrs)}>${children}</th>`;
+    case "tableCell":
+      return `<td${tableCellAttrs(node.attrs)}>${children}</td>`;
+    case "taskList":
+      return `<ul data-type="taskList">${children}</ul>`;
+    case "taskItem": {
+      const checked = node.attrs?.checked === true ? "true" : "false";
+      return `<li data-type="taskItem" data-checked="${checked}">${children}</li>`;
+    }
     default:
       return children;
   }
 }
-function renderMarkdown(md) {
-  const lines = md.split("\n");
-  const out = [];
-  let i = 0;
-  while (i < lines.length) {
-    const line = lines[i] ?? "";
-    if (line.startsWith("# ")) {
-      out.push(`<h1>${escape(line.slice(2))}</h1>`);
-      i++;
-    } else if (line.startsWith("## ")) {
-      out.push(`<h2>${escape(line.slice(3))}</h2>`);
-      i++;
-    } else if (line.startsWith("```")) {
-      const lang = line.slice(3).trim();
-      const code = [];
-      i++;
-      while (i < lines.length && !(lines[i] ?? "").startsWith("```")) {
-        code.push(lines[i] ?? "");
-        i++;
-      }
-      i++;
-      out.push(
-        `<pre><code${lang ? ` class="language-${escape(lang)}"` : ""}>${escape(code.join("\n"))}</code></pre>`
-      );
-    } else if (line.startsWith("- ")) {
-      const items = [];
-      while (i < lines.length && (lines[i] ?? "").startsWith("- ")) {
-        items.push(`<li>${renderInlineMarkdown((lines[i] ?? "").slice(2))}</li>`);
-        i++;
-      }
-      out.push(`<ul>${items.join("")}</ul>`);
-    } else if (line.trim() === "") {
-      i++;
-    } else {
-      out.push(`<p>${renderInlineMarkdown(line)}</p>`);
-      i++;
-    }
+function tableCellAttrs(attrs) {
+  let out = "";
+  const colspan = Number(attrs?.colspan ?? 1);
+  if (colspan > 1) out += ` colspan="${colspan}"`;
+  const rowspan = Number(attrs?.rowspan ?? 1);
+  if (rowspan > 1) out += ` rowspan="${rowspan}"`;
+  const colwidth = attrs?.colwidth;
+  if (Array.isArray(colwidth) && colwidth.length > 0) {
+    const w = Number(colwidth[0]);
+    if (Number.isFinite(w) && w > 0) out += ` style="width: ${w}px"`;
   }
-  return out.join("\n");
+  return out;
 }
-function renderInlineMarkdown(text) {
-  return text.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+function renderMarkdown(md) {
+  return marked.parse(md, { gfm: true, breaks: false, async: false });
 }
 function renderBody(post) {
   if (post.format === "html") return String(post.body);
@@ -412,6 +409,8 @@ function tiptapNodeToMarkdown(node) {
       else if (mark.type === "italic") txt = `*${txt}*`;
       else if (mark.type === "code") txt = `\`${txt}\``;
       else if (mark.type === "strike") txt = `~~${txt}~~`;
+      else if (mark.type === "underline") txt = `<u>${txt}</u>`;
+      else if (mark.type === "highlight") txt = `<mark>${txt}</mark>`;
       else if (mark.type === "link") txt = `[${txt}](${String(mark.attrs?.href ?? "#")})`;
     }
     return txt;
@@ -449,12 +448,54 @@ function tiptapNodeToMarkdown(node) {
       const alt = String(node.attrs?.alt ?? "");
       return `![${alt}](${src})`;
     }
+    case "table":
+      return tiptapTableToMarkdown(node);
+    case "taskList":
+      return children + "\n";
+    case "taskItem": {
+      const checked = node.attrs?.checked === true ? "x" : " ";
+      const inner = children.replace(/\n+$/, "");
+      const [first, ...rest] = inner.split("\n");
+      const cont = rest.map((l) => l ? "  " + l : l).join("\n");
+      return `- [${checked}] ${first ?? ""}${cont ? "\n" + cont : ""}
+`;
+    }
     default:
       return children;
   }
 }
+function tiptapTableToMarkdown(node) {
+  const rows = node.content ?? [];
+  if (rows.length === 0) return "";
+  const renderedRows = [];
+  let headerIdx = -1;
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    const cells = row.content ?? [];
+    const cellTexts = cells.map((c) => {
+      const inner = (c.content ?? []).map(tiptapNodeToMarkdown).join("");
+      return inner.replace(/\n+$/, "").replace(/\n/g, "<br>").replace(/\|/g, "\\|");
+    });
+    renderedRows.push(cellTexts);
+    if (headerIdx === -1 && cells.some((c) => c.type === "tableHeader")) headerIdx = i;
+  }
+  if (headerIdx === -1) headerIdx = 0;
+  const header = renderedRows[headerIdx] ?? [];
+  const body = renderedRows.filter((_, i) => i !== headerIdx);
+  const cols = header.length;
+  const headerLine = "| " + header.join(" | ") + " |";
+  const sepLine = "| " + Array.from({ length: cols }, () => "---").join(" | ") + " |";
+  const bodyLines = body.map((r) => {
+    const cells = Array.from({ length: cols }, (_, i) => r[i] ?? "");
+    return "| " + cells.join(" | ") + " |";
+  });
+  return "\n" + [headerLine, sepLine, ...bodyLines].join("\n") + "\n\n";
+}
 function htmlToMarkdown(html) {
   let md = html;
+  md = md.replace(/<table[^>]*>([\s\S]*?)<\/table>/gi, (_, inner) => {
+    return "\n" + convertHtmlTable(String(inner)) + "\n";
+  });
   md = md.replace(/<h([1-6])[^>]*>([\s\S]*?)<\/h\1>/gi, (_, level, text) => {
     return "\n" + "#".repeat(Number(level)) + " " + String(text).trim() + "\n\n";
   });
@@ -467,6 +508,9 @@ function htmlToMarkdown(html) {
   md = md.replace(/<blockquote[^>]*>([\s\S]*?)<\/blockquote>/gi, (_, content) => {
     return "\n" + String(content).trim().split("\n").map((l) => "> " + l).join("\n") + "\n\n";
   });
+  md = md.replace(/<ul[^>]*data-type="taskList"[^>]*>([\s\S]*?)<\/ul>/gi, (_, items) => {
+    return "\n" + convertHtmlTaskList(String(items)) + "\n";
+  });
   md = md.replace(/<ul[^>]*>([\s\S]*?)<\/ul>/gi, (_, items) => {
     return "\n" + String(items).replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, "- $1\n") + "\n";
   });
@@ -486,11 +530,63 @@ function htmlToMarkdown(html) {
   md = md.replace(/<(em|i)>([\s\S]*?)<\/\1>/gi, "*$2*");
   md = md.replace(/<s>([\s\S]*?)<\/s>/gi, "~~$1~~");
   md = md.replace(/<code>([\s\S]*?)<\/code>/gi, "`$1`");
+  const PH_U_OPEN = "AMP_U_OPEN";
+  const PH_U_CLOSE = "AMP_U_CLOSE";
+  const PH_MARK_OPEN = "AMP_MARK_OPEN";
+  const PH_MARK_CLOSE = "AMP_MARK_CLOSE";
+  md = md.replace(/<u>([\s\S]*?)<\/u>/gi, `${PH_U_OPEN}$1${PH_U_CLOSE}`);
+  md = md.replace(/<mark>([\s\S]*?)<\/mark>/gi, `${PH_MARK_OPEN}$1${PH_MARK_CLOSE}`);
   md = md.replace(/<\/?[^>]+>/g, "");
+  md = md.split(PH_U_OPEN).join("<u>").split(PH_U_CLOSE).join("</u>").split(PH_MARK_OPEN).join("<mark>").split(PH_MARK_CLOSE).join("</mark>");
   md = md.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&nbsp;/g, " ");
   md = md.replace(/\n{3,}/g, "\n\n");
   return md.trim() + "\n";
 }
+function convertHtmlTable(inner) {
+  const stripped = inner.replace(/<\/?(thead|tbody)[^>]*>/gi, "");
+  const rowRe = /<tr[^>]*>([\s\S]*?)<\/tr>/gi;
+  const rows = [];
+  let m;
+  while ((m = rowRe.exec(stripped)) !== null) {
+    const rowHtml = m[1] ?? "";
+    const cellRe = /<(th|td)[^>]*>([\s\S]*?)<\/\1>/gi;
+    const cells = [];
+    let isHeader = false;
+    let cm;
+    while ((cm = cellRe.exec(rowHtml)) !== null) {
+      if ((cm[1] ?? "").toLowerCase() === "th") isHeader = true;
+      cells.push(normalizeTableCell(cm[2] ?? ""));
+    }
+    if (cells.length > 0) rows.push({ isHeader, cells });
+  }
+  if (rows.length === 0) return "";
+  let headerIdx = rows.findIndex((r) => r.isHeader);
+  if (headerIdx === -1) headerIdx = 0;
+  const header = rows[headerIdx].cells;
+  const body = rows.filter((_, i) => i !== headerIdx).map((r) => r.cells);
+  const cols = header.length;
+  const headerLine = "| " + header.join(" | ") + " |";
+  const sepLine = "| " + Array.from({ length: cols }, () => "---").join(" | ") + " |";
+  const bodyLines = body.map((cells) => {
+    const padded = Array.from({ length: cols }, (_, i) => cells[i] ?? "");
+    return "| " + padded.join(" | ") + " |";
+  });
+  return [headerLine, sepLine, ...bodyLines].join("\n") + "\n";
+}
+function normalizeTableCell(html) {
+  return html.replace(/<br\s*\/?>/gi, " ").replace(/<\/?[^>]+>/g, "").replace(/\|/g, "\\|").replace(/\s+/g, " ").trim();
+}
+function convertHtmlTaskList(items) {
+  const liRe = /<li[^>]*data-checked="(true|false)"[^>]*>([\s\S]*?)<\/li>/gi;
+  const out = [];
+  let m;
+  while ((m = liRe.exec(items)) !== null) {
+    const checked = m[1] === "true" ? "x" : " ";
+    const inner = String(m[2] ?? "").replace(/<\/?p[^>]*>/gi, "").trim();
+    out.push(`- [${checked}] ${inner}`);
+  }
+  return out.join("\n");
+}
 
 // src/index.ts
 function createAmpless(opts) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampless/runtime",
-  "version": "0.2.0-alpha.10",
+  "version": "0.2.0-alpha.11",
   "description": "Public-side runtime for ampless: post fetching, theme dispatch, middleware, public route handlers",
   "license": "MIT",
   "type": "module",
@@ -47,6 +47,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.16.0",
+    "marked": "^14.1.4",
     "tailwind-merge": "^3.6.0",
     "ampless": "0.2.0-alpha.7",
     "@ampless/plugin-og-image": "0.2.0-alpha.7"