@actuate-media/cms-admin 0.46.0 → 0.48.0

package/src/views/page-editor/SitePreviewFrame.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { getViewport, type ViewportId } from './viewports.js'
+
+interface SitePreviewFrameProps {
+  /** Public draft URL; null while the preview token is still minting. */
+  src: string | null
+  viewport: ViewportId
+  /** Changing this remounts the iframe so it reloads the persisted draft. */
+  reloadKey: number
+  title?: string
+}
+
+/**
+ * Inline branded preview surface — replaces the editor canvas with an iframe
+ * of the consumer's real public route rendering the draft (site CSS, real
+ * components). Sized to the selected viewport's logical width and scaled to
+ * fit the canvas column, mirroring {@link EditorCanvas}.
+ */
+export function SitePreviewFrame({
+  src,
+  viewport,
+  reloadKey,
+  title = 'Site preview',
+}: SitePreviewFrameProps) {
+  const vp = getViewport(viewport)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [scale, setScale] = useState(1)
+  const [frameHeight, setFrameHeight] = useState(600)
+  const [loaded, setLoaded] = useState(false)
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+    const recompute = () => {
+      // 48px breathing room, matching EditorCanvas.
+      const availableW = container.clientWidth - 48
+      const availableH = container.clientHeight - 48
+      const next = Math.min(1, availableW / vp.width)
+      setScale(next > 0 ? next : 1)
+      setFrameHeight(availableH > 0 ? availableH : 600)
+    }
+    recompute()
+    const ro = new ResizeObserver(recompute)
+    ro.observe(container)
+    return () => ro.disconnect()
+  }, [vp.width])
+
+  useEffect(() => {
+    setLoaded(false)
+  }, [src, reloadKey])
+
+  return (
+    <div ref={containerRef} className="bg-muted relative h-full overflow-hidden p-6">
+      {(!src || !loaded) && (
+        <div
+          className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2"
+          aria-live="polite"
+        >
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+          <span className="text-muted-foreground text-sm">Loading site preview…</span>
+        </div>
+      )}
+      {src && (
+        <div className="mx-auto" style={{ width: vp.width * scale, height: frameHeight }}>
+          <iframe
+            key={reloadKey}
+            src={src}
+            title={title}
+            onLoad={() => setLoaded(true)}
+            className="border-border rounded-xl border bg-white shadow-sm"
+            style={{
+              width: vp.width,
+              height: frameHeight / scale,
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/page-editor/useSitePreview.ts

@@ -0,0 +1,117 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  buildPublicPreviewUrl,
+  createPreviewToken,
+  resolveSiteUrl,
+} from '../../lib/preview-link.js'
+import type { SaveState } from './EditorTopBar.js'
+
+interface UseSitePreviewOptions {
+  collection: string
+  documentId?: string | null
+  slug?: string | null
+  /** Collection URL prefix (e.g. `blog`). Empty/null for top-level pages. */
+  urlPrefix?: string | null
+  /** Raw `config.seo.siteUrl`; falls back to the current origin. */
+  siteUrl?: string | null
+  dirty: boolean
+  saveState: SaveState
+  /** Persist the draft; resolves `false` when the save failed. */
+  saveDraft: () => Promise<boolean>
+}
+
+export interface SitePreviewState {
+  /** Whether the inline iframe preview replaces the editor canvas. */
+  active: boolean
+  /** Public draft URL (`/<slug>?preview=<jwt>`); null while the token mints. */
+  url: string | null
+  /** Bumped after each completed save so the iframe reloads the fresh draft. */
+  reloadKey: number
+  toggle: () => void
+}
+
+/**
+ * Inline branded preview — drives an in-editor iframe that renders the draft
+ * through the consumer's REAL public route (same `?preview=<token>` contract
+ * as "View on site"), so editors see actual site CSS without leaving the
+ * admin. Saves first when dirty, and reloads the frame after each save so
+ * what you see always matches the persisted draft.
+ */
+export function useSitePreview({
+  collection,
+  documentId,
+  slug,
+  urlPrefix,
+  siteUrl,
+  dirty,
+  saveState,
+  saveDraft,
+}: UseSitePreviewOptions): SitePreviewState {
+  const [active, setActive] = useState(false)
+  const [url, setUrl] = useState<string | null>(null)
+  const [reloadKey, setReloadKey] = useState(0)
+  const tokenRef = useRef<string | null>(null)
+  const prevSaveState = useRef(saveState)
+
+  // After a save completes while the preview is open, rebuild the URL (the
+  // slug may have changed in settings — the token is bound to the document
+  // id, not the path) and reload the frame.
+  useEffect(() => {
+    if (active && prevSaveState.current === 'saving' && saveState === 'saved') {
+      if (tokenRef.current && slug) {
+        setUrl(
+          buildPublicPreviewUrl({
+            siteUrl: resolveSiteUrl(siteUrl),
+            urlPrefix: urlPrefix ?? '',
+            slug,
+            token: tokenRef.current,
+          }),
+        )
+      }
+      setReloadKey((k) => k + 1)
+    }
+    prevSaveState.current = saveState
+  }, [active, saveState, slug, siteUrl, urlPrefix])
+
+  const toggle = useCallback(() => {
+    if (active) {
+      setActive(false)
+      return
+    }
+    if (!documentId || !slug) {
+      toast.error('Save the page before opening the site preview')
+      return
+    }
+    setActive(true)
+    setUrl(null)
+    void (async () => {
+      try {
+        if (dirty) {
+          const ok = await saveDraft()
+          if (!ok) {
+            setActive(false)
+            return
+          }
+        }
+        const { token } = await createPreviewToken(collection, documentId)
+        tokenRef.current = token
+        setUrl(
+          buildPublicPreviewUrl({
+            siteUrl: resolveSiteUrl(siteUrl),
+            urlPrefix: urlPrefix ?? '',
+            slug,
+            token,
+          }),
+        )
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
+        setActive(false)
+      }
+    })()
+  }, [active, collection, documentId, slug, urlPrefix, siteUrl, dirty, saveDraft])
+
+  return { active, url, reloadKey, toggle }
+}

package/src/views/post-editor/PostSectionEditor.tsx

@@ -42,6 +42,8 @@ import {
 } from '../page-editor/sections/index.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from '../page-editor/viewports.js'
 import { EditorTopBar, type SaveState } from '../page-editor/EditorTopBar.js'
+import { SitePreviewFrame } from '../page-editor/SitePreviewFrame.js'
+import { useSitePreview } from '../page-editor/useSitePreview.js'
 import { SectionsPanel } from '../page-editor/SectionsPanel.js'
 import { SectionInspector } from '../page-editor/SectionInspector.js'
 import { AddSectionModal } from '../page-editor/AddSectionModal.js'
@@ -312,6 +314,18 @@ export function PostSectionEditor({
     }
   }, [post, documentId, postType, onNavigate])
 
+  // Inline branded preview — iframe of the public site rendering this draft.
+  const sitePreview = useSitePreview({
+    collection: postType,
+    documentId: post?.id,
+    slug: post?.slug,
+    urlPrefix: config?.collections?.[postType]?.urlPrefix ?? postType,
+    siteUrl: config?.seo?.siteUrl,
+    dirty,
+    saveState,
+    saveDraft: handleSaveDraft,
+  })
+
   const requestPublish = useCallback(() => {
     if (!post) return
     const result = validatePost(post, true)
@@ -491,6 +505,8 @@ export function PostSectionEditor({
           onBack={() => guardedNavigate('/posts')}
           onPreview={handlePreview}
           onViewOnSite={post.id ? handleViewOnSite : undefined}
+          sitePreview={sitePreview.active}
+          onToggleSitePreview={post.id && post.slug ? sitePreview.toggle : undefined}
           onHistory={post.id ? () => setHistoryOpen(true) : undefined}
           onOpenSettings={() => setFieldsOpen(true)}
           onSaveDraft={handleSaveDraft}
@@ -537,16 +553,25 @@ export function PostSectionEditor({
           />
 
           <div className="flex-1 overflow-hidden">
-            <PostEditorCanvas
-              sections={post.sections}
-              header={header}
-              context={context}
-              selectedId={selectedId}
-              viewport={viewport}
-              onSelect={setSelectedId}
-              onAddSection={() => setAddOpen(true)}
-              structuralTypes={structuralTypes}
-            />
+            {sitePreview.active ? (
+              <SitePreviewFrame
+                src={sitePreview.url}
+                viewport={viewport}
+                reloadKey={sitePreview.reloadKey}
+                title={`Site preview: ${post.title || `New ${typeLabel}`}`}
+              />
+            ) : (
+              <PostEditorCanvas
+                sections={post.sections}
+                header={header}
+                context={context}
+                selectedId={selectedId}
+                viewport={viewport}
+                onSelect={setSelectedId}
+                onAddSection={() => setAddOpen(true)}
+                structuralTypes={structuralTypes}
+              />
+            )}
           </div>
 
           {selected && (