@actuate-media/cms-admin 0.47.0 → 0.48.0

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 && (