@growth-labs/cms 0.1.0

package/src/ui/editor/Rte.tsx

@@ -0,0 +1,382 @@
+// src/ui/editor/Rte.tsx — Tiptap rich-text editor wrapper.
+//
+// Instantiates a Tiptap Editor (browser-only) inside a React useEffect.
+// The `new Editor(...)` call is guarded by `typeof document !== 'undefined'`
+// so the module can be imported in Node/SSR contexts without throwing.
+//
+// Serialization: the internal state is a Tiptap JSON doc; onChange emits
+// docToMarkdown(json) so callers work with markdown (matching the P0 engine
+// body_markdown storage format).
+//
+// The toolbar maps RTE_TOOLS to editor.chain() toggle commands.
+//
+// Compile-gated: all Tiptap/React usage verified by `pnpm run build` (tsc).
+// Runtime/visual verification is done via the Playwright smoke (SMOKE.md P2 section).
+
+import { Editor } from '@tiptap/core'
+import Image from '@tiptap/extension-image'
+import Link from '@tiptap/extension-link'
+import Underline from '@tiptap/extension-underline'
+import StarterKit from '@tiptap/starter-kit'
+import { useEffect, useRef, useState } from 'react'
+import { Icon } from '../icons.js'
+import { docToMarkdown, markdownToDoc } from './serialize.js'
+import { TweetEmbed } from './tweet-embed.js'
+
+// ---------------------------------------------------------------------------
+// Toolbar config
+// ---------------------------------------------------------------------------
+
+type ToolCmd =
+	| 'bold'
+	| 'italic'
+	| 'underline'
+	| 'strike'
+	| 'code'
+	| 'h2'
+	| 'h3'
+	| 'quote'
+	| 'bullet'
+	| 'ordered'
+	| 'link'
+	| 'image'
+
+interface ToolDef {
+	cmd: ToolCmd
+	label: string
+	icon: Parameters<typeof Icon>[0]['name']
+}
+
+const RTE_TOOLS: ToolDef[] = [
+	{ cmd: 'bold', label: 'Bold', icon: 'edit' },
+	{ cmd: 'italic', label: 'Italic', icon: 'edit' },
+	{ cmd: 'underline', label: 'Underline', icon: 'edit' },
+	{ cmd: 'strike', label: 'Strikethrough', icon: 'edit' },
+	{ cmd: 'code', label: 'Inline code', icon: 'command' },
+	{ cmd: 'h2', label: 'Heading 2', icon: 'doc' },
+	{ cmd: 'h3', label: 'Heading 3', icon: 'doc' },
+	{ cmd: 'quote', label: 'Blockquote', icon: 'bookmark' },
+	{ cmd: 'bullet', label: 'Bullet list', icon: 'rows' },
+	{ cmd: 'ordered', label: 'Ordered list', icon: 'rows' },
+	{ cmd: 'link', label: 'Link', icon: 'link' },
+	{ cmd: 'image', label: 'Image', icon: 'image' },
+]
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RteProps {
+	/** Current markdown value (controlled). */
+	value: string
+	/** Called with the updated markdown on every doc change. */
+	onChange: (md: string) => void
+	/** Optional editor image uploader. When present, the image tool opens a file picker. */
+	onImageUpload?: (file: File) => Promise<{ url: string }>
+	/** Optional placeholder text. */
+	placeholder?: string
+	/** Whether the editor is read-only. */
+	readOnly?: boolean
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function Rte({
+	value,
+	onChange,
+	onImageUpload,
+	placeholder: _placeholder,
+	readOnly = false,
+}: RteProps) {
+	const mountRef = useRef<HTMLDivElement>(null)
+	const editorRef = useRef<Editor | null>(null)
+	const imageInputRef = useRef<HTMLInputElement>(null)
+	const [uploadingImage, setUploadingImage] = useState(false)
+	// Used to force re-render when the editor state changes (e.g. active marks)
+	const [, setTick] = useState(0)
+
+	// Capture value + onChange in refs so the useEffect doesn't need them as
+	// deps — adding them would destroy/recreate the Editor on every keystroke,
+	// clobbering the cursor.  The editor is mounted once; callbacks stay fresh
+	// via the ref.
+	const initialValueRef = useRef(value)
+	const lastAppliedValueRef = useRef(value)
+	const onChangeRef = useRef(onChange)
+	onChangeRef.current = onChange
+
+	useEffect(() => {
+		// Guard: only run in browser environments
+		if (typeof document === 'undefined') return
+		const el = mountRef.current
+		if (!el) return
+
+		const editor = new Editor({
+			element: el,
+			extensions: [
+				StarterKit,
+				Underline,
+				Link.configure({ openOnClick: false }),
+				Image,
+				TweetEmbed,
+			],
+			content: markdownToDoc(initialValueRef.current),
+			editable: !readOnly,
+			onUpdate({ editor: e }) {
+				const md = docToMarkdown(e.getJSON())
+				if (md === lastAppliedValueRef.current) return
+				lastAppliedValueRef.current = md
+				onChangeRef.current(md)
+			},
+			onSelectionUpdate() {
+				// Re-render to reflect active state changes in the toolbar
+				setTick((t) => t + 1)
+			},
+			onTransaction() {
+				setTick((t) => t + 1)
+			},
+		})
+
+		editorRef.current = editor
+
+		return () => {
+			editor.destroy()
+			editorRef.current = null
+		}
+	}, [readOnly])
+
+	useEffect(() => {
+		const editor = editorRef.current
+		if (!editor) return
+		if (value === lastAppliedValueRef.current) return
+		lastAppliedValueRef.current = value
+		editor.commands.setContent(markdownToDoc(value))
+	}, [value])
+
+	const editor = editorRef.current
+
+	async function handleImageFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+		const file = event.currentTarget.files?.[0]
+		event.currentTarget.value = ''
+		if (!file || !editorRef.current || !onImageUpload) return
+		setUploadingImage(true)
+		try {
+			const uploaded = await onImageUpload(file)
+			editorRef.current.chain().focus().setImage({ src: uploaded.url }).run()
+		} catch (err) {
+			if (typeof window !== 'undefined') {
+				window.alert(err instanceof Error ? err.message : 'Image upload failed')
+			}
+		} finally {
+			setUploadingImage(false)
+		}
+	}
+
+	return (
+		<div style={rteWrap}>
+			{/* Toolbar */}
+			{!readOnly && (
+				<div style={toolbarStyle}>
+					{RTE_TOOLS.map((tool) => (
+						<ToolButton
+							key={tool.cmd}
+							tool={tool}
+							editor={editor}
+							onImageUploadClick={
+								tool.cmd === 'image' && onImageUpload
+									? () => imageInputRef.current?.click()
+									: undefined
+							}
+							disabled={tool.cmd === 'image' && uploadingImage}
+						/>
+					))}
+					{onImageUpload && (
+						<input
+							ref={imageInputRef}
+							type="file"
+							accept="image/*"
+							onChange={handleImageFileChange}
+							style={{ display: 'none' }}
+							aria-hidden="true"
+							tabIndex={-1}
+						/>
+					)}
+				</div>
+			)}
+
+			{/* Editor mount target */}
+			<div ref={mountRef} style={contentWrap} />
+		</div>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// ToolButton
+// ---------------------------------------------------------------------------
+
+function ToolButton({
+	tool,
+	editor,
+	onImageUploadClick,
+	disabled = false,
+}: {
+	tool: ToolDef
+	editor: Editor | null
+	onImageUploadClick?: () => void
+	disabled?: boolean
+}) {
+	function handleClick() {
+		if (disabled) return
+		if (tool.cmd === 'image' && onImageUploadClick) {
+			onImageUploadClick()
+			return
+		}
+		if (!editor) return
+		const chain = editor.chain().focus()
+
+		switch (tool.cmd) {
+			case 'bold':
+				chain.toggleBold().run()
+				break
+			case 'italic':
+				chain.toggleItalic().run()
+				break
+			case 'underline':
+				chain.toggleUnderline().run()
+				break
+			case 'strike':
+				chain.toggleStrike().run()
+				break
+			case 'code':
+				chain.toggleCode().run()
+				break
+			case 'h2':
+				chain.toggleHeading({ level: 2 }).run()
+				break
+			case 'h3':
+				chain.toggleHeading({ level: 3 }).run()
+				break
+			case 'quote':
+				chain.toggleBlockquote().run()
+				break
+			case 'bullet':
+				chain.toggleBulletList().run()
+				break
+			case 'ordered':
+				chain.toggleOrderedList().run()
+				break
+			case 'link': {
+				const href = window.prompt('Enter URL')
+				if (href) {
+					chain.setLink({ href }).run()
+				}
+				break
+			}
+			case 'image': {
+				const src = window.prompt('Enter image URL')
+				if (src) {
+					chain.setImage({ src }).run()
+				}
+				break
+			}
+		}
+	}
+
+	function isActive(): boolean {
+		if (!editor) return false
+		switch (tool.cmd) {
+			case 'bold':
+				return editor.isActive('bold')
+			case 'italic':
+				return editor.isActive('italic')
+			case 'underline':
+				return editor.isActive('underline')
+			case 'strike':
+				return editor.isActive('strike')
+			case 'code':
+				return editor.isActive('code')
+			case 'h2':
+				return editor.isActive('heading', { level: 2 })
+			case 'h3':
+				return editor.isActive('heading', { level: 3 })
+			case 'quote':
+				return editor.isActive('blockquote')
+			case 'bullet':
+				return editor.isActive('bulletList')
+			case 'ordered':
+				return editor.isActive('orderedList')
+			default:
+				return false
+		}
+	}
+
+	const active = isActive()
+
+	return (
+		<button
+			type="button"
+			title={tool.label}
+			disabled={disabled}
+			onMouseDown={(e) => {
+				// Prevent editor from losing focus on toolbar click
+				e.preventDefault()
+				handleClick()
+			}}
+			style={{
+				display: 'inline-flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				width: 28,
+				height: 28,
+				padding: 0,
+				background: active ? 'var(--accent-tint)' : 'transparent',
+				color: active ? 'var(--accent)' : 'var(--ink-soft)',
+				border: active ? '1px solid var(--accent-ring)' : '1px solid transparent',
+				borderRadius: 5,
+				cursor: disabled ? 'progress' : 'pointer',
+				opacity: disabled ? 0.6 : 1,
+				fontSize: 11,
+				fontWeight: 600,
+			}}
+		>
+			<Icon name={tool.icon} size={13} />
+		</button>
+	)
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const rteWrap: React.CSSProperties = {
+	border: '1px solid var(--field-border)',
+	borderRadius: 8,
+	background: 'var(--field)',
+	overflow: 'hidden',
+	display: 'flex',
+	flexDirection: 'column',
+	minHeight: 240,
+}
+
+const toolbarStyle: React.CSSProperties = {
+	display: 'flex',
+	flexWrap: 'wrap',
+	gap: 2,
+	padding: 6,
+	borderBottom: '1px solid var(--border)',
+	background: 'var(--panel-2)',
+	position: 'sticky',
+	top: 0,
+	zIndex: 5,
+}
+
+const contentWrap: React.CSSProperties = {
+	flex: 1,
+	padding: '20px 22px',
+	overflowY: 'auto',
+	fontFamily: 'var(--serif)',
+	fontSize: 17,
+	lineHeight: 1.75,
+	color: 'var(--ink)',
+}

package/src/ui/editor/ai-assist.ts

@@ -0,0 +1,139 @@
+// src/ui/editor/ai-assist.ts — pure helpers + browser fetch wrappers for the
+// editor AI-assist panel (AiAssistPanel).
+//
+// Pure helpers (unit-tested in __tests__/ui/ai-assist.test.ts):
+//   aiActionEndpoint(action, docId) → exact URL
+//   parseSseLines(buffer)           → { events: string[], rest: string }
+//   applyHeadlineChoice(text)       → string[] of ≤5 headlines (blanks trimmed)
+//
+// Browser fetch wrappers (not unit-tested — used by AiAssistPanel.tsx only):
+//   streamAi(action, docId, onChunk) → reads SSE body incrementally
+//   syncAi(action, docId)            → POSTs and returns parsed JSON
+
+/** The four AI actions supported by the panel. */
+export type AiAction = 'proofread' | 'headlines' | 'takeaways' | 'meta-description'
+
+/**
+ * Build the URL for a given AI action + doc id.
+ * Maps to the Astro adapters at /admin/api/content/[id]/ai/<action>.
+ */
+export function aiActionEndpoint(action: AiAction, docId: string): string {
+	return `/admin/api/content/${docId}/ai/${action}`
+}
+
+export interface ParsedSse {
+	/** Fully-parsed SSE data event payloads (the text after "data: "). */
+	events: string[]
+	/** Any trailing partial line that didn't yet end with \n\n. */
+	rest: string
+}
+
+/**
+ * Parse an SSE text buffer into completed data events and a trailing remainder.
+ *
+ * SSE messages are separated by a blank line (\n\n).
+ * We split on \n\n, pull out any "data: ..." prefixed lines from each block,
+ * and keep the trailing partial block (if any) as `rest` for the next call.
+ */
+export function parseSseLines(buffer: string): ParsedSse {
+	if (!buffer) return { events: [], rest: '' }
+
+	// Split on the SSE message boundary (double newline).
+	// A trailing \n\n produces a final empty string — safe to ignore.
+	const blocks = buffer.split('\n\n')
+
+	// The last element is either empty (complete buffer) or a partial block.
+	const maybeRest = blocks[blocks.length - 1]
+	const completeBlocks = blocks.slice(0, blocks.length - 1)
+
+	const events: string[] = []
+	for (const block of completeBlocks) {
+		for (const line of block.split('\n')) {
+			if (line.startsWith('data: ')) {
+				events.push(line.slice('data: '.length))
+			}
+		}
+	}
+
+	// If the last block is non-empty it's a partial; carry it forward.
+	const rest = maybeRest ?? ''
+
+	return { events, rest }
+}
+
+/**
+ * Parse a newline-delimited headlines response from the LLM into a string[].
+ * Trims blank lines and caps the result at 5 headlines (the design constraint).
+ */
+export function applyHeadlineChoice(text: string): string[] {
+	return text
+		.split('\n')
+		.map((line) => line.trim())
+		.filter((line) => line.length > 0)
+		.slice(0, 5)
+}
+
+// ---------------------------------------------------------------------------
+// Browser fetch wrappers — not unit-tested; used only by AiAssistPanel.tsx
+// ---------------------------------------------------------------------------
+
+/**
+ * Stream an AI action over SSE.
+ * Reads the response body chunk by chunk, parses SSE lines, and calls `onChunk`
+ * with each completed data event payload.
+ *
+ * @param action - The AI action to invoke.
+ * @param docId  - The content item id.
+ * @param onChunk - Called with each SSE data event payload as it arrives.
+ * @returns A promise that resolves when the stream is complete.
+ */
+export async function streamAi(
+	action: AiAction,
+	docId: string,
+	onChunk: (chunk: string) => void,
+): Promise<void> {
+	const url = aiActionEndpoint(action, docId)
+	const res = await fetch(url, { method: 'POST' })
+	if (!res.ok) {
+		throw new Error(`AI stream request failed: ${res.status}`)
+	}
+	if (!res.body) {
+		throw new Error('No response body for AI stream')
+	}
+
+	const reader = res.body.getReader()
+	const decoder = new TextDecoder()
+	let buffer = ''
+
+	while (true) {
+		const { done, value } = await reader.read()
+		if (done) break
+		buffer += decoder.decode(value, { stream: true })
+		const { events, rest } = parseSseLines(buffer)
+		buffer = rest
+		for (const event of events) {
+			onChunk(event)
+		}
+	}
+
+	// Flush any remaining partial buffer.
+	if (buffer) {
+		const { events } = parseSseLines(`${buffer}\n\n`)
+		for (const event of events) {
+			onChunk(event)
+		}
+	}
+}
+
+/**
+ * Invoke a synchronous AI action (takeaways or meta-description).
+ * POSTs to the AI route and returns the parsed JSON response.
+ */
+export async function syncAi(action: AiAction, docId: string): Promise<unknown> {
+	const url = aiActionEndpoint(action, docId)
+	const res = await fetch(url, { method: 'POST' })
+	if (!res.ok) {
+		throw new Error(`AI sync request failed: ${res.status}`)
+	}
+	return res.json()
+}

package/src/ui/editor/autosave.ts

@@ -0,0 +1,36 @@
+// src/ui/editor/autosave.ts — pure autosave cadence gate for the Masthead editor.
+// The editor debounces every keystroke by AUTOSAVE_DEBOUNCE_MS before calling
+// PATCH /content/:id. When shouldSnapshot returns true, the editor additionally
+// calls POST /content/:id?action=snapshot (which writes a revision via the P0
+// createRevisionWithDelta engine fn). Rule: snapshot ≤ once per 10 saves OR 30 min.
+
+/** Debounce delay (ms) before a keystroke triggers a PATCH save. */
+export const AUTOSAVE_DEBOUNCE_MS = 1500
+
+export interface SnapshotCadenceInput {
+	/** Number of saves since the last snapshot was taken. */
+	savesSinceSnapshot: number
+	/** Timestamp (ms) when the last snapshot was taken (or session start). */
+	lastSnapshotAt: number
+	/** Current timestamp (ms). */
+	now: number
+}
+
+const SNAPSHOT_SAVE_THRESHOLD = 10
+const SNAPSHOT_TIME_THRESHOLD_MS = 30 * 60_000 // 30 minutes
+
+/**
+ * Returns true if a new snapshot revision should be created.
+ * Conditions (either is sufficient):
+ *  - savesSinceSnapshot >= 10 (once per 10 saves), OR
+ *  - elapsed time since lastSnapshotAt >= 30 minutes
+ */
+export function shouldSnapshot({
+	savesSinceSnapshot,
+	lastSnapshotAt,
+	now,
+}: SnapshotCadenceInput): boolean {
+	if (savesSinceSnapshot >= SNAPSHOT_SAVE_THRESHOLD) return true
+	if (now - lastSnapshotAt >= SNAPSHOT_TIME_THRESHOLD_MS) return true
+	return false
+}

package/src/ui/editor/content-payload.ts

@@ -0,0 +1,125 @@
+import { countWords, estimateReadTime } from '../../engine/publisher.js'
+import type { ContentType } from '../../schema/types.js'
+
+export interface ContentDraftFields {
+	title: string
+	dek: string
+	body: string
+	videoUrl: string
+	videoSourceKind?: string | null
+	videoId?: string | null
+	heroImageId?: string | null
+	thumbnailImageId?: string | null
+	audioUrl: string
+}
+
+export function slugifyTitle(title: string): string {
+	return title
+		.toLowerCase()
+		.trim()
+		.replace(/[^\w\s-]/g, '')
+		.replace(/[\s_-]+/g, '-')
+		.replace(/^-+|-+$/g, '')
+		.slice(0, 80)
+}
+
+export function canCreateContentDraft(
+	contentType: ContentType,
+	draft: ContentDraftFields,
+): boolean {
+	if (draft.title.trim().length < 3) return false
+	if (contentType === 'article' || contentType === 'newsletter') {
+		return draft.body.trim().length > 0
+	}
+	if (contentType === 'video') return draft.videoUrl.trim().length > 0
+	if (contentType === 'podcast') return draft.audioUrl.trim().length > 0
+	return false
+}
+
+export function foundryDispatchSourceForDraft(
+	contentType: ContentType,
+	draft: ContentDraftFields,
+): string | null {
+	if (contentType === 'video') {
+		const sourceUrl = draft.videoUrl.trim()
+		return sourceUrl || null
+	}
+	if (contentType === 'podcast') {
+		const audioR2Key = draft.audioUrl.trim()
+		return audioR2Key || null
+	}
+	return null
+}
+
+export function inferVideoSourceKind(sourceUrl: string): 'dropbox' | 'http_url' {
+	try {
+		const { hostname } = new URL(sourceUrl)
+		const host = hostname.toLowerCase()
+		if (
+			host === 'dropbox.com' ||
+			host === 'www.dropbox.com' ||
+			host === 'dl.dropboxusercontent.com'
+		) {
+			return 'dropbox'
+		}
+	} catch {
+		// The route schema requires a URL; keep the UI default deterministic.
+	}
+	return 'http_url'
+}
+
+export function buildContentUpdatePayload(
+	contentType: ContentType,
+	draft: ContentDraftFields,
+): Record<string, unknown> {
+	const payload: Record<string, unknown> = {
+		title: draft.title,
+		excerpt: draft.dek || null,
+	}
+	const heroImageId = draft.heroImageId?.trim()
+	if (heroImageId) {
+		payload.heroImageId = heroImageId
+	}
+
+	if (contentType === 'article' || contentType === 'newsletter') {
+		const wordCount = countWords(draft.body)
+		payload.content = {
+			bodyMarkdown: draft.body,
+			wordCount,
+			readTimeMinutes: estimateReadTime(wordCount),
+		}
+	} else if (contentType === 'video') {
+		const sourceUrl = draft.videoUrl.trim()
+		const videoId = draft.videoId?.trim() || slugifyTitle(draft.title || 'video')
+		const thumbnailImageId = draft.thumbnailImageId?.trim()
+		payload.content = {
+			script: '',
+			videoId,
+			...(thumbnailImageId ? { thumbnailImageId } : {}),
+			...(sourceUrl
+				? {
+						processingSourceUrl: sourceUrl,
+						processingSourceKind: draft.videoSourceKind || inferVideoSourceKind(sourceUrl),
+					}
+				: {}),
+		}
+	} else if (contentType === 'podcast') {
+		payload.content = {
+			transcript: '',
+			audioR2Key: draft.audioUrl,
+		}
+	}
+
+	return payload
+}
+
+export function buildContentCreatePayload(
+	contentType: ContentType,
+	draft: ContentDraftFields,
+): Record<string, unknown> {
+	return {
+		type: contentType,
+		slug: slugifyTitle(draft.title || 'untitled'),
+		...buildContentUpdatePayload(contentType, draft),
+	}
+}

package/src/ui/editor/editor-media-upload.ts

@@ -0,0 +1,26 @@
+import { slugifyTitle } from './content-payload.js'
+
+type FetchLike = (url: string, init?: RequestInit) => Promise<Response>
+
+export async function uploadEditorImage(
+	file: File,
+	title: string,
+	fetchImpl: FetchLike = fetch,
+): Promise<{ url: string }> {
+	const formData = new FormData()
+	formData.set('file', file)
+	formData.set('slug', slugifyTitle(title || file.name || 'inline-image') || 'inline-image')
+
+	const res = await fetchImpl('/admin/api/media/images', {
+		method: 'POST',
+		body: formData,
+	})
+	if (!res.ok) {
+		const err = (await res.json().catch(() => ({ error: res.statusText }))) as { error?: string }
+		throw new Error(err.error ?? 'Image upload failed')
+	}
+	const body = (await res.json()) as { url?: string; publicUrl?: string }
+	const url = body.url || body.publicUrl
+	if (!url) throw new Error('Image upload did not return a URL')
+	return { url }
+}