@growth-labs/cms 0.1.0

package/src/ui/editor/serialize.ts

@@ -0,0 +1,522 @@
+// src/ui/editor/serialize.ts
+// PURE Tiptap doc↔markdown round-trip serializer.
+// Operates exclusively on the ProseMirror JSONContent shape — no Editor,
+// no EditorView, no DOM, fully testable in vitest (Node env).
+//
+// Supported nodes (StarterKit set + TweetEmbed):
+//   block: doc, paragraph, heading (h1–h6), bulletList, orderedList,
+//          listItem, blockquote, codeBlock, image, tweetEmbed, hardBreak
+//   inline marks: bold, italic, underline, strike, code, link
+//
+// Markdown dialect:
+//   **bold**, *italic*, _underline_, ~~strike~~, `inline-code`
+//   ## heading (level 2 = ##, level 3 = ###, etc.)
+//   - bullet, 1. ordered
+//   > blockquote
+//   ```…``` code block
+//   ![alt](src) image
+//   [text](href) link
+//   :::tweet\n<url>\n::: tweet-embed directive
+
+import type { JSONContent } from '@tiptap/core'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// docToMarkdown — JSONContent → string
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Serialise a Tiptap JSONContent document to a markdown string. */
+export function docToMarkdown(doc: JSONContent): string {
+	if (!doc.content || doc.content.length === 0) return ''
+	const lines = doc.content.map((node) => serializeBlock(node)).filter((s) => s !== null)
+	return lines.join('\n\n')
+}
+
+function serializeBlock(node: JSONContent): string | null {
+	const type = node.type ?? 'paragraph'
+
+	switch (type) {
+		case 'paragraph': {
+			const text = serializeInlineContent(node.content ?? [])
+			return text
+		}
+		case 'heading': {
+			const level = (node.attrs?.level as number) ?? 2
+			const prefix = '#'.repeat(level)
+			const text = serializeInlineContent(node.content ?? [])
+			return `${prefix} ${text}`
+		}
+		case 'bulletList': {
+			const items = (node.content ?? []).map((item) => serializeListItem(item, '-')).join('\n')
+			return items
+		}
+		case 'orderedList': {
+			const items = (node.content ?? [])
+				.map((item, idx) => serializeListItem(item, `${idx + 1}.`))
+				.join('\n')
+			return items
+		}
+		case 'listItem': {
+			// Directly nested listItem (shouldn't normally happen, but handle gracefully)
+			const text = serializeInlineContent(node.content ?? [])
+			return `- ${text}`
+		}
+		case 'blockquote': {
+			const inner = (node.content ?? [])
+				.map((child) => serializeBlock(child))
+				.filter(Boolean)
+				.join('\n')
+			return inner
+				.split('\n')
+				.map((line) => `> ${line}`)
+				.join('\n')
+		}
+		case 'codeBlock': {
+			const lang = (node.attrs?.language as string) ?? ''
+			const code = (node.content ?? []).map((n) => n.text ?? '').join('')
+			return `\`\`\`${lang}\n${code}\n\`\`\``
+		}
+		case 'image': {
+			const src = (node.attrs?.src as string) ?? ''
+			const alt = (node.attrs?.alt as string) ?? ''
+			const title = node.attrs?.title ? ` "${node.attrs.title as string}"` : ''
+			return `![${alt}](${src}${title})`
+		}
+		case 'tweetEmbed': {
+			const url = (node.attrs?.url as string) ?? ''
+			return `:::tweet\n${url}\n:::`
+		}
+		case 'hardBreak': {
+			return '  \n'
+		}
+		case 'horizontalRule': {
+			return '---'
+		}
+		default: {
+			// Fall back to serializing any text content
+			const fallback = serializeInlineContent(node.content ?? [])
+			return fallback || null
+		}
+	}
+}
+
+function serializeListItem(item: JSONContent, bullet: string): string {
+	// listItem typically wraps one or more paragraphs / nested lists
+	const children = item.content ?? []
+	if (children.length === 0) return `${bullet} `
+
+	const parts: string[] = []
+	let isFirst = true
+
+	for (const child of children) {
+		if (child.type === 'paragraph') {
+			const text = serializeInlineContent(child.content ?? [])
+			if (isFirst) {
+				parts.push(`${bullet} ${text}`)
+				isFirst = false
+			} else {
+				parts.push(`  ${text}`)
+			}
+		} else if (child.type === 'bulletList') {
+			const nested = (child.content ?? [])
+				.map((ni) => serializeListItem(ni, '-'))
+				.join('\n')
+				.split('\n')
+				.map((line) => `  ${line}`)
+				.join('\n')
+			parts.push(nested)
+		} else if (child.type === 'orderedList') {
+			const nested = (child.content ?? [])
+				.map((ni, idx) => serializeListItem(ni, `${idx + 1}.`))
+				.join('\n')
+				.split('\n')
+				.map((line) => `  ${line}`)
+				.join('\n')
+			parts.push(nested)
+		}
+	}
+	return parts.join('\n')
+}
+
+function serializeInlineContent(nodes: JSONContent[]): string {
+	return nodes.map((n) => serializeInlineNode(n)).join('')
+}
+
+function serializeInlineNode(node: JSONContent): string {
+	if (node.type === 'hardBreak') return '\n'
+	if (node.type === 'image') {
+		// image can appear inline too
+		const src = (node.attrs?.src as string) ?? ''
+		const alt = (node.attrs?.alt as string) ?? ''
+		return `![${alt}](${src})`
+	}
+
+	const text = node.text ?? ''
+	if (!text) return ''
+
+	const marks = node.marks ?? []
+	// Apply marks in order: code → link → bold → italic → underline → strike
+	// Code must wrap before other marks because backtick spans are not nestable
+	let result = text
+
+	const hasCode = marks.some((m) => m.type === 'code')
+	const hasBold = marks.some((m) => m.type === 'bold')
+	const hasItalic = marks.some((m) => m.type === 'italic')
+	const hasUnderline = marks.some((m) => m.type === 'underline')
+	const hasStrike = marks.some((m) => m.type === 'strike')
+	const linkMark = marks.find((m) => m.type === 'link')
+
+	if (hasCode) return `\`${result}\``
+
+	if (hasBold) result = `**${result}**`
+	if (hasItalic) result = `*${result}*`
+	if (hasUnderline) result = `_${result}_`
+	if (hasStrike) result = `~~${result}~~`
+
+	if (linkMark) {
+		const href = (linkMark.attrs?.href as string) ?? ''
+		const title = linkMark.attrs?.title ? ` "${linkMark.attrs.title as string}"` : ''
+		result = `[${result}](${href}${title})`
+	}
+
+	return result
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// markdownToDoc — string → JSONContent
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Parse a markdown string into a Tiptap JSONContent document. */
+export function markdownToDoc(md: string): JSONContent {
+	if (!md || md.trim() === '') {
+		return { type: 'doc', content: [] }
+	}
+
+	const blocks = parseBlocks(md)
+	return { type: 'doc', content: blocks }
+}
+
+// ── Block-level parser ──────────────────────────────────────────────────────
+
+function parseBlocks(md: string): JSONContent[] {
+	const nodes: JSONContent[] = []
+	// Split into logical block regions
+	const lines = md.split('\n')
+	let i = 0
+
+	while (i < lines.length) {
+		const line = lines[i]
+
+		// Skip blank lines between blocks
+		if (line.trim() === '') {
+			i++
+			continue
+		}
+
+		// Fenced code block
+		if (/^```/.test(line)) {
+			const lang = line.slice(3).trim()
+			const codeLines: string[] = []
+			i++
+			while (i < lines.length && !/^```/.test(lines[i])) {
+				codeLines.push(lines[i])
+				i++
+			}
+			i++ // consume closing ```
+			nodes.push({
+				type: 'codeBlock',
+				attrs: { language: lang || null },
+				content: codeLines.length ? [{ type: 'text', text: codeLines.join('\n') }] : [],
+			})
+			continue
+		}
+
+		// Tweet-embed directive :::tweet
+		if (/^:::tweet/.test(line)) {
+			i++
+			const urlLines: string[] = []
+			while (i < lines.length && lines[i].trim() !== ':::') {
+				urlLines.push(lines[i].trim())
+				i++
+			}
+			i++ // consume :::
+			const url = urlLines.join('').trim()
+			nodes.push({ type: 'tweetEmbed', attrs: { url } })
+			continue
+		}
+
+		// Blockquote — collect contiguous > lines
+		if (/^>/.test(line)) {
+			const bqLines: string[] = []
+			while (i < lines.length && /^>/.test(lines[i])) {
+				bqLines.push(lines[i].replace(/^>\s?/, ''))
+				i++
+			}
+			const inner = parseBlocks(bqLines.join('\n'))
+			nodes.push({
+				type: 'blockquote',
+				content: inner.length ? inner : [{ type: 'paragraph', content: [] }],
+			})
+			continue
+		}
+
+		// Heading
+		const headingMatch = /^(#{1,6})\s+(.*)$/.exec(line)
+		if (headingMatch) {
+			const level = headingMatch[1].length
+			const text = headingMatch[2].trim()
+			nodes.push({ type: 'heading', attrs: { level }, content: parseInline(text) })
+			i++
+			continue
+		}
+
+		// Horizontal rule
+		if (/^---+$/.test(line.trim()) || /^\*\*\*+$/.test(line.trim())) {
+			nodes.push({ type: 'horizontalRule' })
+			i++
+			continue
+		}
+
+		// Bullet list
+		if (/^[-*+]\s/.test(line)) {
+			const { node, next } = parseBulletList(lines, i)
+			nodes.push(node)
+			i = next
+			continue
+		}
+
+		// Ordered list
+		if (/^\d+\.\s/.test(line)) {
+			const { node, next } = parseOrderedList(lines, i)
+			nodes.push(node)
+			i = next
+			continue
+		}
+
+		// Image-only line
+		if (/^!\[.*\]\(.*\)$/.test(line.trim())) {
+			const imgMatch = /^!\[([^\]]*)\]\(([^)]+)\)/.exec(line.trim())
+			if (imgMatch) {
+				nodes.push({ type: 'image', attrs: { src: imgMatch[2], alt: imgMatch[1], title: null } })
+				i++
+				continue
+			}
+		}
+
+		// Paragraph — collect contiguous non-blank, non-special lines
+		const paraLines: string[] = []
+		while (
+			i < lines.length &&
+			lines[i].trim() !== '' &&
+			!/^```/.test(lines[i]) &&
+			!/^:::/.test(lines[i]) &&
+			!/^>/.test(lines[i]) &&
+			!/^#{1,6}\s/.test(lines[i]) &&
+			!/^[-*+]\s/.test(lines[i]) &&
+			!/^\d+\.\s/.test(lines[i]) &&
+			!/^---+$/.test(lines[i].trim())
+		) {
+			paraLines.push(lines[i])
+			i++
+		}
+		if (paraLines.length > 0) {
+			const text = paraLines.join(' ')
+			nodes.push({ type: 'paragraph', content: parseInline(text) })
+		}
+	}
+
+	return nodes
+}
+
+// ── List parsers ─────────────────────────────────────────────────────────────
+
+function parseBulletList(lines: string[], start: number): { node: JSONContent; next: number } {
+	const items: JSONContent[] = []
+	let i = start
+
+	while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+		const text = lines[i].replace(/^[-*+]\s+/, '')
+		items.push({
+			type: 'listItem',
+			content: [{ type: 'paragraph', content: parseInline(text) }],
+		})
+		i++
+	}
+
+	return { node: { type: 'bulletList', content: items }, next: i }
+}
+
+function parseOrderedList(lines: string[], start: number): { node: JSONContent; next: number } {
+	const items: JSONContent[] = []
+	let i = start
+
+	while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
+		const text = lines[i].replace(/^\d+\.\s+/, '')
+		items.push({
+			type: 'listItem',
+			content: [{ type: 'paragraph', content: parseInline(text) }],
+		})
+		i++
+	}
+
+	return { node: { type: 'orderedList', content: items }, next: i }
+}
+
+// ── Inline parser ─────────────────────────────────────────────────────────────
+
+type InlineMark = {
+	type: 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'link'
+	attrs?: Record<string, unknown>
+}
+
+/** Parse inline markdown and return an array of text/mark nodes. */
+function parseInline(text: string): JSONContent[] {
+	if (!text) return []
+	const nodes: JSONContent[] = []
+
+	// Use a token-based approach for nested marks
+	let remaining = text
+
+	while (remaining.length > 0) {
+		// ── inline code (highest precedence — not nestable) ───────────────
+		const codeMatch = /^`([^`]+)`/.exec(remaining)
+		if (codeMatch) {
+			nodes.push({ type: 'text', text: codeMatch[1], marks: [{ type: 'code' }] })
+			remaining = remaining.slice(codeMatch[0].length)
+			continue
+		}
+
+		// ── image ──────────────────────────────────────────────────────────
+		const imgMatch = /^!\[([^\]]*)\]\(([^)]+)\)/.exec(remaining)
+		if (imgMatch) {
+			nodes.push({ type: 'image', attrs: { src: imgMatch[2], alt: imgMatch[1], title: null } })
+			remaining = remaining.slice(imgMatch[0].length)
+			continue
+		}
+
+		// ── link ───────────────────────────────────────────────────────────
+		const linkMatch = /^\[([^\]]+)\]\(([^)]+)\)/.exec(remaining)
+		if (linkMatch) {
+			const linkText = linkMatch[1]
+			const href = linkMatch[2]
+			// Parse the link text for nested marks
+			const linkNodes = parseInline(linkText)
+			if (linkNodes.length === 1 && linkNodes[0].type === 'text') {
+				nodes.push({
+					type: 'text',
+					text: linkNodes[0].text,
+					marks: [
+						...(linkNodes[0].marks ?? []),
+						{ type: 'link', attrs: { href, title: null, target: null } },
+					],
+				})
+			} else {
+				// Multiple inline nodes inside the link text
+				for (const n of linkNodes) {
+					nodes.push({
+						...n,
+						marks: [
+							...(n.marks ?? []),
+							{ type: 'link', attrs: { href, title: null, target: null } },
+						],
+					})
+				}
+			}
+			remaining = remaining.slice(linkMatch[0].length)
+			continue
+		}
+
+		// ── bold (**text** or __text__) ────────────────────────────────────
+		const boldMatch = /^\*\*([^*]+)\*\*/.exec(remaining) || /^__([^_]+)__/.exec(remaining)
+		if (boldMatch) {
+			const inner = parseInlineWithMark(boldMatch[1], { type: 'bold' })
+			nodes.push(...inner)
+			remaining = remaining.slice(boldMatch[0].length)
+			continue
+		}
+
+		// ── italic (*text*) — single star ─────────────────────────────────
+		const italicMatch = /^\*([^*]+)\*/.exec(remaining)
+		if (italicMatch) {
+			const inner = parseInlineWithMark(italicMatch[1], { type: 'italic' })
+			nodes.push(...inner)
+			remaining = remaining.slice(italicMatch[0].length)
+			continue
+		}
+
+		// ── underline (_text_) ─────────────────────────────────────────────
+		// Match _word_ only when not part of word boundaries to avoid over-matching
+		const underlineMatch = /^_([^_]+)_/.exec(remaining)
+		if (underlineMatch) {
+			const inner = parseInlineWithMark(underlineMatch[1], { type: 'underline' })
+			nodes.push(...inner)
+			remaining = remaining.slice(underlineMatch[0].length)
+			continue
+		}
+
+		// ── strikethrough (~~text~~) ──────────────────────────────────────
+		const strikeMatch = /^~~([^~]+)~~/.exec(remaining)
+		if (strikeMatch) {
+			const inner = parseInlineWithMark(strikeMatch[1], { type: 'strike' })
+			nodes.push(...inner)
+			remaining = remaining.slice(strikeMatch[0].length)
+			continue
+		}
+
+		// ── plain text — consume up to the next special character ─────────
+		const specialStart = findNextSpecial(remaining)
+		if (specialStart === -1) {
+			// Rest is plain text
+			nodes.push({ type: 'text', text: remaining })
+			remaining = ''
+		} else if (specialStart === 0) {
+			// Consume one character as plain text (unmatched special)
+			nodes.push({ type: 'text', text: remaining[0] })
+			remaining = remaining.slice(1)
+		} else {
+			nodes.push({ type: 'text', text: remaining.slice(0, specialStart) })
+			remaining = remaining.slice(specialStart)
+		}
+	}
+
+	// Merge adjacent plain text nodes
+	return mergeTextNodes(nodes)
+}
+
+function parseInlineWithMark(text: string, mark: InlineMark): JSONContent[] {
+	const inner = parseInline(text)
+	return inner.map((n) => ({
+		...n,
+		marks: [mark, ...(n.marks ?? [])],
+	}))
+}
+
+function findNextSpecial(text: string): number {
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (ch === '`') return i
+		if (ch === '!' && text[i + 1] === '[') return i
+		if (ch === '[') return i
+		if (ch === '*') return i
+		if (ch === '_') return i
+		if (ch === '~' && text[i + 1] === '~') return i
+	}
+	return -1
+}
+
+function mergeTextNodes(nodes: JSONContent[]): JSONContent[] {
+	const result: JSONContent[] = []
+	for (const node of nodes) {
+		const prev = result[result.length - 1]
+		if (
+			prev &&
+			prev.type === 'text' &&
+			node.type === 'text' &&
+			JSON.stringify(prev.marks ?? []) === JSON.stringify(node.marks ?? [])
+		) {
+			prev.text = (prev.text ?? '') + (node.text ?? '')
+		} else {
+			result.push({ ...node })
+		}
+	}
+	return result
+}

package/src/ui/editor/tweet-embed.ts

@@ -0,0 +1,60 @@
+// src/ui/editor/tweet-embed.ts
+// Pure Tiptap Node spec for the TweetEmbed custom node.
+// Defines the schema (group, atom, attrs) + parseHTML/renderHTML.
+// NEVER instantiates Editor or EditorView (browser-only).
+// The node is serialized to/from a fenced directive (:::tweet) by
+// src/ui/editor/serialize.ts; the HTML encoding is for Tiptap's own
+// HTML clipboard pipeline when the editor IS running in the browser.
+
+import { mergeAttributes, Node } from '@tiptap/core'
+
+/** Custom Tiptap node for an embedded tweet / X post. */
+export const TweetEmbed = Node.create({
+	name: 'tweetEmbed',
+
+	group: 'block',
+
+	atom: true,
+
+	addAttributes() {
+		return {
+			url: {
+				default: null,
+				parseHTML: (element: HTMLElement) => element.getAttribute('data-tweet-url'),
+				renderHTML: (attributes: Record<string, unknown>) => ({
+					'data-tweet-url': attributes.url,
+				}),
+			},
+		}
+	},
+
+	parseHTML() {
+		return [
+			{
+				tag: 'div[data-tweet]',
+				getAttrs: (element: HTMLElement | string) => {
+					if (typeof element === 'string') return {}
+					return {
+						url: element.getAttribute('data-tweet-url') || element.getAttribute('data-tweet'),
+					}
+				},
+			},
+		]
+	},
+
+	renderHTML({
+		node,
+		HTMLAttributes,
+	}: {
+		node: { attrs: Record<string, unknown> }
+		HTMLAttributes: Record<string, unknown>
+	}) {
+		return [
+			'div',
+			mergeAttributes(HTMLAttributes, {
+				'data-tweet': '',
+				'data-tweet-url': node.attrs.url,
+			}),
+		]
+	},
+})

package/src/ui/hash-router.ts

@@ -0,0 +1,30 @@
+// src/ui/hash-router.ts — pure hash-route helpers for the Masthead SPA. Astro
+// owns the /admin path; the SPA owns the #/<route> hash (no History conflict).
+
+export const ROUTES = [
+	'dashboard',
+	'content',
+	'calendar',
+	'media',
+	'analytics',
+	'authors',
+	'topics',
+	'content-insights',
+	'subscriptions',
+	'social-share',
+	'settings',
+] as const
+
+export type Route = (typeof ROUTES)[number]
+
+const DEFAULT: Route = 'dashboard'
+
+export function parseHash(hash: string): Route {
+	const raw = hash.replace(/^#\/?/, '').split('?')[0]
+	const root = raw.split('/')[0] || DEFAULT
+	return (ROUTES as readonly string[]).includes(root) ? (root as Route) : DEFAULT
+}
+
+export function hashFor(route: Route): string {
+	return `#/${route}`
+}