@growth-labs/cms 0.8.38 → 0.8.40

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)}`
+}