@growth-labs/cms 0.5.17 → 0.5.19

package/src/ui/editor/serialize.ts

@@ -3,9 +3,10 @@
 // Operates exclusively on the ProseMirror JSONContent shape — no Editor,
 // no EditorView, no DOM, fully testable in vitest (Node env).
 //
-// Supported nodes (StarterKit set + TweetEmbed):
+// Supported nodes (StarterKit set + TweetEmbed + tables):
 //   block: doc, paragraph, heading (h1–h6), bulletList, orderedList,
-//          listItem, blockquote, codeBlock, image, tweetEmbed, hardBreak
+//          listItem, blockquote, codeBlock, image, tweetEmbed, hardBreak,
+//          table (tableRow / tableHeader / tableCell)
 //   inline marks: bold, italic, strike, code, link
 //   (underline is retired: no markdown form exists — `_text_` is emphasis)
 //
@@ -18,6 +19,14 @@
 //   ![alt](src) image
 //   [text](href) link
 //   :::tweet\n<url>\n::: tweet-embed directive
+//   | GFM | pipe | tables | (header row + `| --- |` separator; `\|` escapes a
+//   literal pipe; colspan/rowspan/colwidth/align do NOT survive markdown —
+//   Portable Text is the durable store, markdown is the derived lossy view)
+//   > [!NOTE] GFM alert = callout (tones NOTE/TIP/IMPORTANT/WARNING/CAUTION)
+//   :::pullquote\n<text>\n[-- attribution]\n::: pull-quote directive
+//   [[label]](href) citation annotation
+//   <!-- generated-faq -->…<!-- /generated-faq --> opaque machine-owned atom
+//   (inner markdown re-serializes byte-identically)
 
 import type { JSONContent } from '@tiptap/core'
 import { normalizeBoundaryMarks } from './trim-boundary-marks.js'
@@ -94,6 +103,33 @@ function serializeBlock(node: JSONContent): string | null {
 		case 'horizontalRule': {
 			return '---'
 		}
+		case 'table': {
+			return serializeTableMarkdown(node)
+		}
+		case 'callout': {
+			const tone = ((node.attrs?.tone as string) ?? 'note').toUpperCase()
+			const inner = (node.content ?? [])
+				.map((child) => serializeBlock(child))
+				.filter((s) => s !== null)
+				.join('\n\n')
+			const quoted = inner
+				.split('\n')
+				.map((line) => (line === '' ? '>' : `> ${line}`))
+				.join('\n')
+			return `> [!${tone}]\n${quoted}`
+		}
+		case 'pullQuote': {
+			const inner = (node.content ?? [])
+				.map((child) => serializeBlock(child))
+				.filter((s) => s !== null)
+				.join('\n\n')
+			const attribution = node.attrs?.attribution ? `\n-- ${node.attrs.attribution as string}` : ''
+			return `:::pullquote\n${inner}${attribution}\n:::`
+		}
+		case 'generatedFaq': {
+			const inner = (node.attrs?.markdown as string) ?? ''
+			return `<!-- generated-faq -->\n${inner}\n<!-- /generated-faq -->`
+		}
 		default: {
 			// Fall back to serializing any text content
 			const fallback = serializeInlineContent(node.content ?? [])
@@ -140,6 +176,36 @@ function serializeListItem(item: JSONContent, bullet: string): string {
 	return parts.join('\n')
 }
 
+function serializeTableMarkdown(node: JSONContent): string {
+	const rows = (node.content ?? []).filter((row) => row.type === 'tableRow')
+	if (rows.length === 0) return ''
+
+	const cellText = (cell: JSONContent): string =>
+		(cell.content ?? [])
+			.map((child) => serializeInlineContent(child.content ?? []))
+			.join(' ')
+			.replace(/\n/g, ' ')
+			.replace(/\|/g, '\\|')
+	const rowLine = (row: JSONContent): string =>
+		`| ${(row.content ?? []).map(cellText).join(' | ')} |`
+
+	const firstCells = rows[0].content ?? []
+	const hasHeader = firstCells.length > 0 && firstCells.every((c) => c.type === 'tableHeader')
+	const columns = firstCells.length || 1
+	const separator = `| ${Array.from({ length: columns }, () => '---').join(' | ')} |`
+
+	const lines: string[] = []
+	if (hasHeader) {
+		lines.push(rowLine(rows[0]), separator)
+		for (const row of rows.slice(1)) lines.push(rowLine(row))
+	} else {
+		// GFM requires a header row; emit an empty one so body rows survive.
+		lines.push(`| ${Array.from({ length: columns }, () => '').join(' | ')} |`, separator)
+		for (const row of rows) lines.push(rowLine(row))
+	}
+	return lines.join('\n')
+}
+
 function serializeInlineContent(nodes: JSONContent[]): string {
 	return nodes.map((n) => serializeInlineNode(n)).join('')
 }
@@ -166,6 +232,7 @@ function serializeInlineNode(node: JSONContent): string {
 	const hasItalic = marks.some((m) => m.type === 'italic')
 	const hasStrike = marks.some((m) => m.type === 'strike')
 	const linkMark = marks.find((m) => m.type === 'link')
+	const citationMark = marks.find((m) => m.type === 'citation')
 
 	if (hasCode) return `\`${result}\``
 
@@ -177,7 +244,10 @@ function serializeInlineNode(node: JSONContent): string {
 	// Word paste underlined whole runs.
 	if (hasStrike) result = `~~${result}~~`
 
-	if (linkMark) {
+	if (citationMark) {
+		const href = (citationMark.attrs?.href as string) ?? ''
+		result = `[[${result}]](${href})`
+	} else if (linkMark) {
 		const href = (linkMark.attrs?.href as string) ?? ''
 		const title = linkMark.attrs?.title ? ` "${linkMark.attrs.title as string}"` : ''
 		result = `[${result}](${href}${title})`
@@ -235,6 +305,45 @@ function parseBlocks(md: string): JSONContent[] {
 			continue
 		}
 
+		// Generated-FAQ block — the comment-delimited region becomes one atom
+		// that re-serializes byte-identically (the markers stay authoritative
+		// for every body_markdown consumer).
+		if (line.trim() === '<!-- generated-faq -->') {
+			const inner: string[] = []
+			i++
+			while (i < lines.length && lines[i].trim() !== '<!-- /generated-faq -->') {
+				inner.push(lines[i])
+				i++
+			}
+			i++ // consume the closing marker
+			nodes.push({ type: 'generatedFaq', attrs: { markdown: inner.join('\n') } })
+			continue
+		}
+
+		// Pull-quote directive :::pullquote (optional trailing `-- attribution`)
+		if (/^:::pullquote/.test(line)) {
+			i++
+			const inner: string[] = []
+			while (i < lines.length && lines[i].trim() !== ':::') {
+				inner.push(lines[i])
+				i++
+			}
+			i++ // consume :::
+			let attribution: string | null = null
+			const last = inner[inner.length - 1]
+			if (last?.startsWith('-- ')) {
+				attribution = last.slice(3)
+				inner.pop()
+			}
+			const content = parseBlocks(inner.join('\n'))
+			nodes.push({
+				type: 'pullQuote',
+				attrs: { attribution },
+				content: content.length ? content : [{ type: 'paragraph', content: [] }],
+			})
+			continue
+		}
+
 		// Tweet-embed directive :::tweet
 		if (/^:::tweet/.test(line)) {
 			i++
@@ -249,13 +358,26 @@ function parseBlocks(md: string): JSONContent[] {
 			continue
 		}
 
-		// Blockquote — collect contiguous > lines
+		// Blockquote — collect contiguous > lines. A `[!TONE]` first line is a
+		// GFM alert and parses as a callout instead.
 		if (/^>/.test(line)) {
 			const bqLines: string[] = []
 			while (i < lines.length && /^>/.test(lines[i])) {
 				bqLines.push(lines[i].replace(/^>\s?/, ''))
 				i++
 			}
+			const alertMatch = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]$/.exec(
+				bqLines[0]?.trim() ?? '',
+			)
+			if (alertMatch) {
+				const inner = parseBlocks(bqLines.slice(1).join('\n'))
+				nodes.push({
+					type: 'callout',
+					attrs: { tone: alertMatch[1].toLowerCase() },
+					content: inner.length ? inner : [{ type: 'paragraph', content: [] }],
+				})
+				continue
+			}
 			const inner = parseBlocks(bqLines.join('\n'))
 			nodes.push({
 				type: 'blockquote',
@@ -281,6 +403,14 @@ function parseBlocks(md: string): JSONContent[] {
 			continue
 		}
 
+		// GFM pipe table (header row followed by a `| --- |` separator line)
+		if (isTableStart(lines, i)) {
+			const { node, next } = parseMarkdownTable(lines, i)
+			nodes.push(node)
+			i = next
+			continue
+		}
+
 		// Bullet list
 		if (/^[-*+]\s/.test(line)) {
 			const { node, next } = parseBulletList(lines, i)
@@ -318,7 +448,9 @@ function parseBlocks(md: string): JSONContent[] {
 			!/^#{1,6}\s/.test(lines[i]) &&
 			!/^[-*+]\s/.test(lines[i]) &&
 			!/^\d+\.\s/.test(lines[i]) &&
-			!/^---+$/.test(lines[i].trim())
+			!/^---+$/.test(lines[i].trim()) &&
+			lines[i].trim() !== '<!-- generated-faq -->' &&
+			!isTableStart(lines, i)
 		) {
 			paraLines.push(lines[i])
 			i++
@@ -332,6 +464,64 @@ function parseBlocks(md: string): JSONContent[] {
 	return nodes
 }
 
+// ── Table parser ─────────────────────────────────────────────────────────────
+
+function isTableStart(lines: string[], index: number): boolean {
+	if (!/^\|/.test(lines[index] ?? '')) return false
+	return /^\|(?:\s*:?-{3,}:?\s*\|)+\s*$/.test(lines[index + 1] ?? '')
+}
+
+function splitTableRow(line: string): string[] {
+	let inner = line.trim()
+	if (inner.startsWith('|')) inner = inner.slice(1)
+	if (inner.endsWith('|')) inner = inner.slice(0, -1)
+
+	const cells: string[] = []
+	let current = ''
+	for (let i = 0; i < inner.length; i++) {
+		const ch = inner[i]
+		if (ch === '\\' && inner[i + 1] === '|') {
+			current += '\\|'
+			i++
+			continue
+		}
+		if (ch === '|') {
+			cells.push(current)
+			current = ''
+			continue
+		}
+		current += ch
+	}
+	cells.push(current)
+	return cells.map((cell) => cell.trim().replace(/\\\|/g, '|'))
+}
+
+function parseMarkdownTable(lines: string[], start: number): { node: JSONContent; next: number } {
+	const makeCell = (kind: 'tableHeader' | 'tableCell', text: string): JSONContent => ({
+		type: kind,
+		attrs: { colspan: 1, rowspan: 1, colwidth: null, align: null },
+		content: [{ type: 'paragraph', content: parseInline(text) }],
+	})
+
+	const rows: JSONContent[] = [
+		{
+			type: 'tableRow',
+			content: splitTableRow(lines[start]).map((text) => makeCell('tableHeader', text)),
+		},
+	]
+
+	let i = start + 2 // skip the header row and the separator line
+	while (i < lines.length && /^\|/.test(lines[i])) {
+		rows.push({
+			type: 'tableRow',
+			content: splitTableRow(lines[i]).map((text) => makeCell('tableCell', text)),
+		})
+		i++
+	}
+
+	return { node: { type: 'table', content: rows }, next: i }
+}
+
 // ── List parsers ─────────────────────────────────────────────────────────────
 
 function parseBulletList(lines: string[], start: number): { node: JSONContent; next: number } {
@@ -398,6 +588,18 @@ function parseInline(text: string): JSONContent[] {
 			continue
 		}
 
+		// ── citation ([[label]](href)) — must run before the link matcher ──
+		const citationMatch = /^\[\[([^\]]+)\]\]\(([^)]+)\)/.exec(remaining)
+		if (citationMatch) {
+			const inner = parseInline(citationMatch[1]).map((n) => ({
+				...n,
+				marks: [...(n.marks ?? []), { type: 'citation', attrs: { href: citationMatch[2] } }],
+			}))
+			nodes.push(...inner)
+			remaining = remaining.slice(citationMatch[0].length)
+			continue
+		}
+
 		// ── link ───────────────────────────────────────────────────────────
 		const linkMatch = /^\[([^\]]+)\]\(([^)]+)\)/.exec(remaining)
 		if (linkMatch) {

package/src/ui/styles/broadsheet.css

@@ -392,3 +392,24 @@ input, textarea, select { font-family: inherit; }
 /* tooltip dots used in calendar / analytics */
 .spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
 .spark span { width: 6px; border-radius: 2px; background: var(--accent); opacity: .85; }
+
+/* ── Rich-text editor tables (TableKit) ──────────────────────────────────
+   The extension ships no CSS: without these rules the cell-selection overlay
+   and the column-resize handle are functional but invisible. */
+.ProseMirror table { border-collapse: collapse; margin: 1em 0; table-layout: fixed; width: 100%; overflow: hidden; }
+.ProseMirror table td, .ProseMirror table th { border: 1px solid var(--border); box-sizing: border-box; min-width: 1em; padding: 6px 8px; position: relative; vertical-align: top; }
+.ProseMirror table th { background: var(--panel-2); font-weight: 600; text-align: left; }
+.ProseMirror table .selectedCell:after { background: var(--accent-tint); content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
+.ProseMirror table .column-resize-handle { background: var(--accent); bottom: -2px; pointer-events: none; position: absolute; right: -2px; top: 0; width: 4px; }
+.ProseMirror .tableWrapper { margin: 1.5em 0; overflow-x: auto; }
+.ProseMirror.resize-cursor { cursor: col-resize; }
+
+/* ── Typed editorial blocks (Phase 1) ──────────────────────────────────── */
+.ProseMirror div[data-callout] { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 6px; padding: 10px 14px; margin: 1em 0; }
+.ProseMirror div[data-callout][data-tone="warning"], .ProseMirror div[data-callout][data-tone="caution"] { border-left-color: #b45309; }
+.ProseMirror div[data-callout][data-tone="tip"] { border-left-color: #15803d; }
+.ProseMirror div[data-callout][data-tone="important"] { border-left-color: #7c3aed; }
+.ProseMirror figure[data-pull-quote] { border-left: 3px solid var(--ink-faint); margin: 1.5em 0; padding: 4px 18px; font-size: 1.15em; font-style: italic; color: var(--ink-soft); }
+.ProseMirror figure[data-pull-quote][data-attribution]::after { content: "— " attr(data-attribution); display: block; font-size: 0.8em; font-style: normal; color: var(--ink-faint); margin-top: 6px; }
+.ProseMirror div[data-generated-faq] { border: 1px dashed var(--border); border-radius: 6px; padding: 8px 12px; margin: 1em 0; color: var(--ink-faint); font-size: 0.85em; user-select: none; }
+.ProseMirror a[data-citation] { text-decoration: underline dotted; color: var(--accent); }