@jant/core 0.3.35 → 0.3.37

package/src/lib/tiptap-render.ts

@@ -0,0 +1,191 @@
+/**
+ * Tiptap JSON → HTML Renderer
+ *
+ * Lightweight server-side renderer that converts Tiptap JSON documents
+ * to HTML strings. Pure string concatenation — no DOM required.
+ * Works on Cloudflare Workers and any JS runtime.
+ */
+
+import { escapeHtml } from "./html.js";
+import { sanitizeUrl } from "./url.js";
+
+interface TiptapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+interface TiptapNode {
+  type: string;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: TiptapMark[];
+  attrs?: Record<string, unknown>;
+}
+
+function renderMarks(text: string, marks: TiptapMark[]): string {
+  let result = escapeHtml(text);
+
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+        result = `<strong>${result}</strong>`;
+        break;
+      case "italic":
+        result = `<em>${result}</em>`;
+        break;
+      case "strike":
+        result = `<s>${result}</s>`;
+        break;
+      case "code":
+        result = `<code>${result}</code>`;
+        break;
+      case "link": {
+        const href = escapeHtml(sanitizeUrl(String(mark.attrs?.href ?? "")));
+        const target = mark.attrs?.target
+          ? ` target="${escapeHtml(String(mark.attrs.target))}"`
+          : "";
+        const rel = mark.attrs?.target
+          ? ' rel="noopener noreferrer nofollow"'
+          : "";
+        result = `<a href="${href}"${target}${rel}>${result}</a>`;
+        break;
+      }
+    }
+  }
+
+  return result;
+}
+
+function renderNode(node: TiptapNode): string {
+  switch (node.type) {
+    case "doc":
+      return (node.content ?? []).map(renderNode).join("");
+
+    case "paragraph":
+      return `<p>${renderChildren(node)}</p>`;
+
+    case "heading": {
+      const level = Math.min(Math.max(Number(node.attrs?.level ?? 1), 1), 6);
+      return `<h${level}>${renderChildren(node)}</h${level}>`;
+    }
+
+    case "text":
+      if (node.marks && node.marks.length > 0) {
+        return renderMarks(node.text ?? "", node.marks);
+      }
+      return escapeHtml(node.text ?? "");
+
+    case "bulletList":
+      return `<ul>${renderChildren(node)}</ul>`;
+
+    case "orderedList": {
+      const start = node.attrs?.start;
+      const startAttr = start && start !== 1 ? ` start="${start}"` : "";
+      return `<ol${startAttr}>${renderChildren(node)}</ol>`;
+    }
+
+    case "listItem":
+      return `<li>${renderChildren(node)}</li>`;
+
+    case "blockquote":
+      return `<blockquote>${renderChildren(node)}</blockquote>`;
+
+    case "codeBlock": {
+      const lang = node.attrs?.language;
+      const langClass = lang
+        ? ` class="language-${escapeHtml(String(lang))}"`
+        : "";
+      return `<pre><code${langClass}>${renderChildren(node)}</code></pre>`;
+    }
+
+    case "table":
+      return `<table>${renderChildren(node)}</table>`;
+
+    case "tableRow":
+      return `<tr>${renderChildren(node)}</tr>`;
+
+    case "tableCell": {
+      const colspan = node.attrs?.colspan;
+      const rowspan = node.attrs?.rowspan;
+      const colspanAttr =
+        colspan && colspan !== 1 ? ` colspan="${colspan}"` : "";
+      const rowspanAttr =
+        rowspan && rowspan !== 1 ? ` rowspan="${rowspan}"` : "";
+      return `<td${colspanAttr}${rowspanAttr}>${renderChildren(node)}</td>`;
+    }
+
+    case "tableHeader": {
+      const thColspan = node.attrs?.colspan;
+      const thRowspan = node.attrs?.rowspan;
+      const thColspanAttr =
+        thColspan && thColspan !== 1 ? ` colspan="${thColspan}"` : "";
+      const thRowspanAttr =
+        thRowspan && thRowspan !== 1 ? ` rowspan="${thRowspan}"` : "";
+      return `<th${thColspanAttr}${thRowspanAttr}>${renderChildren(node)}</th>`;
+    }
+
+    case "horizontalRule":
+      return "<hr>";
+
+    case "hardBreak":
+      return "<br>";
+
+    case "image": {
+      const src = escapeHtml(String(node.attrs?.src ?? ""));
+      const alt = node.attrs?.alt
+        ? ` alt="${escapeHtml(String(node.attrs.alt))}"`
+        : "";
+      const title = node.attrs?.title
+        ? ` title="${escapeHtml(String(node.attrs.title))}"`
+        : "";
+      const caption = node.attrs?.caption ? String(node.attrs.caption) : "";
+      const layout = node.attrs?.layout ?? "regular";
+      const href = node.attrs?.href ? sanitizeUrl(String(node.attrs.href)) : "";
+      const layoutAttr =
+        layout !== "regular"
+          ? ` data-layout="${escapeHtml(String(layout))}"`
+          : "";
+      const imgTag = `<img src="${src}"${alt}${title}>`;
+      const linkedImg = href
+        ? `<a href="${escapeHtml(href)}">${imgTag}</a>`
+        : imgTag;
+      const figcaption = caption
+        ? `<figcaption>${escapeHtml(caption)}</figcaption>`
+        : "";
+      return `<figure${layoutAttr}>${linkedImg}${figcaption}</figure>`;
+    }
+
+    case "moreBreak":
+      return "<!--more-->";
+
+    default:
+      // Unknown node: render children if any, skip otherwise
+      return node.content ? renderChildren(node) : "";
+  }
+}
+
+function renderChildren(node: TiptapNode): string {
+  return (node.content ?? []).map(renderNode).join("");
+}
+
+/**
+ * Renders a Tiptap JSON document to an HTML string.
+ *
+ * @param json - Tiptap JSON string or parsed document object
+ * @returns HTML string
+ *
+ * @example
+ * ```ts
+ * const html = renderTiptapJson('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello"}]}]}');
+ * // "<p>Hello</p>"
+ * ```
+ */
+export function renderTiptapJson(json: string): string {
+  try {
+    const doc = JSON.parse(json) as TiptapNode;
+    if (doc.type !== "doc") return "";
+    return renderNode(doc);
+  } catch {
+    return "";
+  }
+}

package/src/lib/tiptap-to-markdown.ts

@@ -0,0 +1,305 @@
+/**
+ * Tiptap JSON → Markdown Converter
+ *
+ * Server-side converter that transforms Tiptap JSON documents to Markdown strings.
+ * Pure string concatenation — no DOM required. Mirrors the node types
+ * supported by `tiptap-render.ts`.
+ */
+
+interface TiptapMark {
+  type: string;
+  attrs?: Record<string, unknown>;
+}
+
+interface TiptapNode {
+  type: string;
+  content?: TiptapNode[];
+  text?: string;
+  marks?: TiptapMark[];
+  attrs?: Record<string, unknown>;
+}
+
+/**
+ * Converts a Tiptap JSON document to a Markdown string.
+ *
+ * @param json - Tiptap JSON string or parsed document object
+ * @returns Markdown string
+ *
+ * @example
+ * ```ts
+ * const md = tiptapJsonToMarkdown('{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello"}]}]}');
+ * // "Hello"
+ * ```
+ */
+export function tiptapJsonToMarkdown(json: string): string {
+  try {
+    const doc = JSON.parse(json) as TiptapNode;
+    if (doc.type !== "doc") return "";
+    return renderBlocks(doc.content ?? []).trimEnd();
+  } catch {
+    return "";
+  }
+}
+
+function renderBlocks(nodes: TiptapNode[], indent = ""): string {
+  const parts: string[] = [];
+
+  for (const node of nodes) {
+    const rendered = renderBlockNode(node, indent);
+    if (rendered !== null) {
+      parts.push(rendered);
+    }
+  }
+
+  return parts.join("\n\n");
+}
+
+function renderBlockNode(node: TiptapNode, indent: string): string | null {
+  switch (node.type) {
+    case "paragraph": {
+      const text = renderInline(node.content ?? []);
+      return indent + text;
+    }
+
+    case "heading": {
+      const level = Math.min(Math.max(Number(node.attrs?.level ?? 1), 1), 6);
+      const prefix = "#".repeat(level);
+      const text = renderInline(node.content ?? []);
+      return `${indent}${prefix} ${text}`;
+    }
+
+    case "bulletList":
+      return renderList(node.content ?? [], indent, "bullet");
+
+    case "orderedList": {
+      const start = Number(node.attrs?.start ?? 1);
+      return renderList(node.content ?? [], indent, "ordered", start);
+    }
+
+    case "blockquote": {
+      const inner = renderBlocks(node.content ?? []);
+      return inner
+        .split("\n")
+        .map((line) => indent + (line ? `> ${line}` : ">"))
+        .join("\n");
+    }
+
+    case "codeBlock": {
+      const lang = node.attrs?.language ? String(node.attrs.language) : "";
+      const content = getPlainText(node.content ?? []);
+      const fence = chooseFence(content);
+      return `${indent}${fence}${lang}\n${content}\n${indent}${fence}`;
+    }
+
+    case "table":
+      return renderTable(node.content ?? [], indent);
+
+    case "horizontalRule":
+      return `${indent}---`;
+
+    case "hardBreak":
+      return null;
+
+    case "image": {
+      const src = String(node.attrs?.src ?? "");
+      const alt = node.attrs?.alt ? String(node.attrs.alt) : "";
+      const title = node.attrs?.title ? String(node.attrs.title) : "";
+      const titlePart = title ? ` "${title}"` : "";
+      return `${indent}![${alt}](${src}${titlePart})`;
+    }
+
+    case "moreBreak":
+      return `${indent}<!--more-->`;
+
+    default:
+      if (node.content) {
+        return renderBlocks(node.content, indent);
+      }
+      return null;
+  }
+}
+
+function renderList(
+  items: TiptapNode[],
+  indent: string,
+  type: "bullet" | "ordered",
+  start = 1,
+): string {
+  const lines: string[] = [];
+
+  for (let i = 0; i < items.length; i++) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- index-bounded loop
+    const item = items[i]!;
+    const marker = type === "bullet" ? "-" : `${(start + i).toString()}.`;
+    const children = item.content ?? [];
+
+    for (let j = 0; j < children.length; j++) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- index-bounded loop
+      const child = children[j]!;
+      if (j === 0) {
+        // First child gets the list marker
+        if (child.type === "bulletList" || child.type === "orderedList") {
+          // Nested list as first child — render with increased indent
+          const nested = renderBlockNode(child, indent + "  ");
+          if (nested !== null) {
+            lines.push(`${indent}${marker} \n${nested}`);
+          }
+        } else {
+          const text = renderInline(child.content ?? []);
+          lines.push(`${indent}${marker} ${text}`);
+        }
+      } else {
+        // Subsequent children: indent to align with first line content
+        const childIndent = indent + " ".repeat(marker.length + 1);
+        if (child.type === "bulletList" || child.type === "orderedList") {
+          const nested = renderBlockNode(child, childIndent);
+          if (nested !== null) lines.push(nested);
+        } else if (child.type === "paragraph") {
+          const text = renderInline(child.content ?? []);
+          lines.push("");
+          lines.push(`${childIndent}${text}`);
+        } else {
+          const rendered = renderBlockNode(child, childIndent);
+          if (rendered !== null) {
+            lines.push("");
+            lines.push(rendered);
+          }
+        }
+      }
+    }
+  }
+
+  return lines.join("\n");
+}
+
+function renderTable(rows: TiptapNode[], indent: string): string {
+  if (rows.length === 0) return "";
+
+  const matrix: string[][] = [];
+
+  for (const row of rows) {
+    const cells: string[] = [];
+    for (const cell of row.content ?? []) {
+      // Each cell may contain paragraphs — render inline content
+      const parts: string[] = [];
+      for (const child of cell.content ?? []) {
+        parts.push(renderInline(child.content ?? []));
+      }
+      cells.push(parts.join(" "));
+    }
+    matrix.push(cells);
+  }
+
+  // Calculate column widths
+  const colCount = Math.max(...matrix.map((r) => r.length));
+  const widths: number[] = [];
+  for (let c = 0; c < colCount; c++) {
+    widths.push(Math.max(3, ...matrix.map((r) => (r[c] ?? "").length)));
+  }
+
+  const lines: string[] = [];
+
+  // Header row
+  const headerRow = matrix[0] ?? [];
+  lines.push(
+    indent +
+      "| " +
+      widths.map((w, i) => (headerRow[i] ?? "").padEnd(w)).join(" | ") +
+      " |",
+  );
+
+  // Separator row (first row is always the header)
+  lines.push(
+    indent + "| " + widths.map((w) => "-".repeat(w)).join(" | ") + " |",
+  );
+
+  // Body rows
+  for (let r = 1; r < matrix.length; r++) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- index-bounded loop
+    const row = matrix[r]!;
+    lines.push(
+      indent +
+        "| " +
+        widths.map((w, i) => (row[i] ?? "").padEnd(w)).join(" | ") +
+        " |",
+    );
+  }
+
+  return lines.join("\n");
+}
+
+function renderInline(nodes: TiptapNode[]): string {
+  return nodes.map(renderInlineNode).join("");
+}
+
+function renderInlineNode(node: TiptapNode): string {
+  switch (node.type) {
+    case "text": {
+      let text = node.text ?? "";
+      if (node.marks && node.marks.length > 0) {
+        text = applyMarks(text, node.marks);
+      }
+      return text;
+    }
+
+    case "hardBreak":
+      return "  \n";
+
+    case "image": {
+      const src = String(node.attrs?.src ?? "");
+      const alt = node.attrs?.alt ? String(node.attrs.alt) : "";
+      const title = node.attrs?.title ? String(node.attrs.title) : "";
+      const titlePart = title ? ` "${title}"` : "";
+      return `![${alt}](${src}${titlePart})`;
+    }
+
+    default:
+      if (node.content) return renderInline(node.content);
+      return "";
+  }
+}
+
+function applyMarks(text: string, marks: TiptapMark[]): string {
+  let result = text;
+
+  for (const mark of marks) {
+    switch (mark.type) {
+      case "bold":
+        result = `**${result}**`;
+        break;
+      case "italic":
+        result = `*${result}*`;
+        break;
+      case "strike":
+        result = `~~${result}~~`;
+        break;
+      case "code":
+        result = `\`${result}\``;
+        break;
+      case "link": {
+        const href = String(mark.attrs?.href ?? "");
+        result = `[${result}](${href})`;
+        break;
+      }
+    }
+  }
+
+  return result;
+}
+
+function getPlainText(nodes: TiptapNode[]): string {
+  return nodes.map((n) => n.text ?? "").join("");
+}
+
+function chooseFence(content: string): string {
+  let count = 3;
+  const regex = /(`{3,})/g;
+  let match;
+  while ((match = regex.exec(content)) !== null) {
+    const backticks = match[1] ?? "";
+    if (backticks.length >= count) {
+      count = backticks.length + 1;
+    }
+  }
+  return "`".repeat(count);
+}