@growth-labs/cms 0.8.35 → 0.8.40

package/src/ui/preview/SitePreviewFrame.tsx

@@ -0,0 +1,111 @@
+// src/ui/preview/SitePreviewFrame.tsx — the real site page for a draft.
+//
+// Embeds the publication's own draft render (`previewUrlFor`, a same-origin
+// route gated on publisher access) so the editor sees the live template and
+// CSS, not a copy of them. The frame renders at the device's true viewport
+// width (SITE_FRAME_WIDTHS) and is scaled to fit the pane, so the site's own
+// breakpoints pick the layout. Each save bumps `version`, which reloads the
+// frame in place (a reload keeps the reader's scroll position).
+
+import { useEffect, useRef, useState } from 'react'
+import { type PreviewDevice, SITE_FRAME_WIDTHS, siteFrameScale } from './preview-layout.js'
+
+export interface SitePreviewFrameProps {
+	/** Draft preview URL from `previewUrlFor`. */
+	url: string
+	device: PreviewDevice
+	/** Changes after each save; a new value reloads the frame. */
+	version: number | null
+	title: string
+}
+
+export function SitePreviewFrame({ url, device, version, title }: SitePreviewFrameProps) {
+	const paneRef = useRef<HTMLDivElement | null>(null)
+	const frameRef = useRef<HTMLIFrameElement | null>(null)
+	const [pane, setPane] = useState({ width: 0, height: 0 })
+	const [loading, setLoading] = useState(true)
+	const shown = useRef({ url, version })
+
+	useEffect(() => {
+		const node = paneRef.current
+		if (!node || typeof ResizeObserver === 'undefined') return
+		const observer = new ResizeObserver(([entry]) => {
+			setPane({ width: entry.contentRect.width, height: entry.contentRect.height })
+		})
+		observer.observe(node)
+		return () => observer.disconnect()
+	}, [])
+
+	useEffect(() => {
+		const previous = shown.current
+		shown.current = { url, version }
+		// A new URL (the saved slug changed) navigates through `src`; reloading
+		// here too would reload the old page over that navigation.
+		if (previous.url !== url) {
+			setLoading(true)
+			return
+		}
+		if (previous.version === version) return
+		const frameWindow = frameRef.current?.contentWindow
+		if (!frameWindow) return
+		setLoading(true)
+		try {
+			frameWindow.location.reload()
+		} catch {
+			// The frame navigated off-origin (a link clicked inside it); reset it.
+			if (frameRef.current) frameRef.current.src = url
+		}
+	}, [version, url])
+
+	const viewportWidth = SITE_FRAME_WIDTHS[device]
+	const scale = siteFrameScale(pane.width, device)
+	const frameHeight = pane.height > 0 ? pane.height / scale : 800
+
+	return (
+		<div ref={paneRef} style={paneStyle}>
+			<iframe
+				ref={frameRef}
+				src={url}
+				title={`Preview: ${title || 'Untitled'}`}
+				onLoad={() => setLoading(false)}
+				style={{
+					width: viewportWidth,
+					height: frameHeight,
+					border: 'none',
+					background: '#fff',
+					transform: `scale(${scale})`,
+					transformOrigin: 'top left',
+					position: 'absolute',
+					top: 0,
+					left: Math.max(0, (pane.width - viewportWidth * scale) / 2),
+				}}
+			/>
+			{loading && (
+				<span style={badgeStyle} role="status">
+					Updating preview…
+				</span>
+			)}
+		</div>
+	)
+}
+
+const paneStyle: React.CSSProperties = {
+	position: 'relative',
+	flex: 1,
+	overflow: 'hidden',
+	background: 'var(--panel)',
+}
+
+const badgeStyle: React.CSSProperties = {
+	position: 'absolute',
+	top: 10,
+	right: 12,
+	padding: '3px 9px',
+	borderRadius: 20,
+	fontSize: 11,
+	fontWeight: 600,
+	background: 'var(--surface-raised-nav)',
+	color: 'var(--ink-muted)',
+	border: '1px solid var(--border)',
+	pointerEvents: 'none',
+}

package/src/ui/preview/preview-layout.ts

@@ -47,3 +47,20 @@ export function previewLayout(
 		device,
 	}
 }
+
+// ---- Real-site preview frame ---------------------------------------------
+
+/** The viewport width each device renders the real site at. The site's own
+ * breakpoints decide the layout, so desktop needs a desktop-sized viewport even
+ * when the pane is narrower. */
+export const SITE_FRAME_WIDTHS: Record<PreviewDevice, number> = {
+	mobile: 390,
+	tablet: 768,
+	desktop: 1280,
+}
+
+/** Scale that fits a device viewport into the pane width; never enlarges. */
+export function siteFrameScale(paneWidth: number, device: PreviewDevice): number {
+	if (!Number.isFinite(paneWidth) || paneWidth <= 0) return 1
+	return Math.min(1, paneWidth / SITE_FRAME_WIDTHS[device])
+}

package/src/ui/screens/EditorScreen.tsx

@@ -2,13 +2,13 @@
 //
 // Ported from editor.jsx:
 //   - Header: back-to-Content, type icon, status pill, autosaved indicator,
-//     preview-position segment (right/bottom/off), Preview (open signed URL),
-//     Publish action
+//     preview-position segment (right/bottom/off), Preview (real-site draft in
+//     a new tab), Publish action
 //   - Work area: <ContentForm/> in the main column + 340px empty P3 inspector slot
-//   - Live-preview pane: <DraftPage doc={...} device={...} /> with device toggle
-//     (desktop/tablet/mobile)
-//   - "Open in new tab" mints a HMAC preview token via POST /content/:id/preview-token
-//     and opens the signed URL
+//   - Live-preview pane: the real site's draft render (<SitePreviewFrame/>,
+//     `previewUrlFor`) at true device widths, reloaded after every save; types
+//     the site cannot render as a draft keep the approximate <DraftPage/>
+//   - "Preview" saves, then opens the same real-site draft render in a new tab
 //   - New docs (docRef.id === null) create on first save via ContentForm; the
 //     onDocCreated callback swaps to update mode
 //
@@ -16,7 +16,7 @@
 // ContentForm/DraftPage/preview-layout are tested separately; the Tiptap Rte
 // is Playwright-smoked only.
 
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import type { ContentMetadataSelectField, PrimaryTopicControl } from '../../integration/options.js'
 import type { ContentStatus, ContentType, FrontsPublishStatus } from '../../schema/types.js'
 import { buildSharePrefill, ShareModal } from '../components/ShareModal.js'
@@ -30,7 +30,9 @@ import { Inspector } from '../inspector/Inspector.js'
 import type { DraftDoc } from '../preview/draft-page.js'
 import { DraftPage } from '../preview/draft-page.js'
 import type { PreviewDevice } from '../preview/preview-layout.js'
+import { SitePreviewFrame } from '../preview/SitePreviewFrame.js'
 import type { ContentView } from './content-view.js'
+import { hasSitePreview, previewUrlFor } from './public-url.js'
 
 // ---------------------------------------------------------------------------
 // Props
@@ -155,20 +157,45 @@ export function EditorScreen({
 	// Share modal — true when the Share button is clicked in the editor header
 	const [shareOpen, setShareOpen] = useState(false)
 
-	// Mint a preview token and open the signed URL in a new tab
-	const handlePreviewInTab = useCallback(async () => {
-		const id = docId
-		if (!id) return
-		try {
-			const res = await fetch(`/admin/api/content/${id}/preview-token`, { method: 'POST' })
-			if (!res.ok) return
-			const body = (await res.json()) as { token?: string; url?: string }
-			const url = body.url ?? body.token
-			if (url) window.open(url, '_blank')
-		} catch {
-			// non-fatal
+	// The real-site preview follows the slug as last SAVED, so typing a new slug
+	// does not point the frame at a URL the draft does not answer to yet.
+	const latestSlug = useRef(previewDoc.slug)
+	latestSlug.current = previewDoc.slug
+	const [savedSlug, setSavedSlug] = useState('')
+	useEffect(() => {
+		if (!savedSlug && previewDoc.slug && saveState.lastSavedAt === null) {
+			setSavedSlug(previewDoc.slug)
 		}
-	}, [docId])
+	}, [previewDoc.slug, savedSlug, saveState.lastSavedAt])
+	useEffect(() => {
+		if (saveState.lastSavedAt !== null) setSavedSlug(latestSlug.current)
+	}, [saveState.lastSavedAt])
+	const sitePreviewUrl = docId
+		? previewUrlFor({ type: contentType, slug: savedSlug, id: docId }, siteBase)
+		: null
+
+	// Preview in a new tab: open the tab inside the click (popup blockers allow
+	// that), save, then point it at the real-site draft render once the save
+	// settles so the tab shows the latest edits.
+	const pendingPreviewTab = useRef<{ tab: Window; since: number | null } | null>(null)
+	const handlePreviewInTab = useCallback(() => {
+		if (!docId) return
+		const tab = window.open('about:blank', '_blank')
+		if (!tab) return
+		pendingPreviewTab.current = { tab, since: saveState.lastSavedAt }
+		setSaveRequest((value) => value + 1)
+	}, [docId, saveState.lastSavedAt])
+	useEffect(() => {
+		const pending = pendingPreviewTab.current
+		if (!pending || saveState.saving) return
+		if (saveState.lastSavedAt === pending.since && !saveState.saveError) return
+		pendingPreviewTab.current = null
+		const url = docId
+			? previewUrlFor({ type: contentType, slug: latestSlug.current, id: docId }, siteBase)
+			: null
+		if (url) pending.tab.location.href = url
+		else pending.tab.close()
+	}, [saveState, docId, contentType, siteBase])
 
 	const handleOpenAnalytics = useCallback(() => {
 		if (!previewDoc.slug) return
@@ -337,15 +364,16 @@ export function EditorScreen({
 						</fieldset>
 					)}
 
-					{/* Open preview in new tab */}
-					{previewPos !== 'off' && docId && (
+					{/* Preview on the real site, in a new tab */}
+					{sitePreviewUrl && (
 						<button
 							type="button"
-							onClick={() => void handlePreviewInTab()}
-							style={actionBtn}
-							title="Open preview in new tab"
+							onClick={handlePreviewInTab}
+							style={saveBtn}
+							title="Save and open this draft on the live site template in a new tab"
 						>
-							<Icon name="globe" size={14} />
+							<Icon name="eye" size={14} />
+							Preview
 						</button>
 					)}
 
@@ -432,7 +460,20 @@ export function EditorScreen({
 				{/* Live-preview pane */}
 				{previewPos !== 'off' && (
 					<div style={grid.previewPane}>
-						<DraftPage doc={previewDoc} device={device} />
+						{sitePreviewUrl ? (
+							<SitePreviewFrame
+								url={sitePreviewUrl}
+								device={device}
+								version={saveState.lastSavedAt}
+								title={previewDoc.title}
+							/>
+						) : hasSitePreview(contentType) ? (
+							<p style={previewEmptyNote}>
+								Save the draft with a title to see it on the live site template.
+							</p>
+						) : (
+							<DraftPage doc={previewDoc} device={device} />
+						)}
 					</div>
 				)}
 			</div>
@@ -744,6 +785,14 @@ const legendHidden: React.CSSProperties = {
 	display: 'none',
 }
 
+const previewEmptyNote: React.CSSProperties = {
+	margin: 'auto',
+	padding: 24,
+	fontSize: 13,
+	color: 'var(--ink-muted)',
+	textAlign: 'center',
+}
+
 // Void the unused variable warning by referencing the label map in a subtle
 // way (it's used implicitly via the type system; keep for completeness).
 void CONTENT_TYPE_LABELS

package/src/ui/screens/public-url.ts

@@ -81,3 +81,39 @@ export function publicUrlFor(row: { type: ContentType; slug: string }, siteBase?
 	const base = siteBase.replace(/\/+$/, '')
 	return `${base}${path}`
 }
+
+// ---------------------------------------------------------------------------
+// previewUrlFor
+// ---------------------------------------------------------------------------
+
+/**
+ * Public routes that render an unpublished draft for a signed-in publisher via
+ * `?preview=<id>` (apps/web publication-routes/article/[slug].astro and
+ * videos/[slug].astro). Video uses `/videos/` directly: `/video/<slug>` 301s
+ * there and drops the query. The other types have no draft render on the site.
+ */
+const SITE_PREVIEW_PATH: Partial<Record<ContentType, (slug: string) => string>> = {
+	article: (slug) => `/article/${slug}/`,
+	video: (slug) => `/videos/${slug}/`,
+}
+
+/** Whether the site renders this content type as a draft (see SITE_PREVIEW_PATH). */
+export function hasSitePreview(type: ContentType): boolean {
+	return SITE_PREVIEW_PATH[type] !== undefined
+}
+
+/**
+ * The draft preview URL on the real site: the public page for the item's
+ * saved slug, rendered from the current row with the live template and CSS.
+ * Returns `null` for a type the site cannot render as a draft.
+ */
+export function previewUrlFor(
+	row: { type: ContentType; slug: string; id: string },
+	siteBase?: string,
+): string | null {
+	const path = SITE_PREVIEW_PATH[row.type]
+	const cleanSlug = row.slug.replace(/^\/+/, '')
+	if (!path || !cleanSlug || !row.id) return null
+	const base = siteBase ? siteBase.replace(/\/+$/, '') : ''
+	return `${base}${path(cleanSlug)}?preview=${encodeURIComponent(row.id)}`
+}