@prenta/admin 0.98.1 → 1.1.0

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

@@ -1,158 +0,0 @@
-'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
-  /** Explicit public path (`data.path`); wins over slug when set. */
-  path?: string | null
-  /** Collection URL prefix (e.g. `blog`). Empty/null for top-level pages. */
-  urlPrefix?: string | null
-  /**
-   * Origin of the Next editing canvas (same host as the admin in Astro-split
-   * and 100% Next builds). Defaults to `window.location.origin` so Site
-   * preview loads the Next builder, not the Astro public apex.
-   */
-  canvasUrl?: string | null
-  /**
-   * @deprecated Prefer {@link canvasUrl}. Kept as a fallback when `canvasUrl`
-   * is unset and `window` is unavailable. "View on site" still uses the
-   * public apex via {@link buildPublicPreviewUrl} at the call site.
-   */
-  siteUrl?: string | null
-  dirty: boolean
-  saveState: SaveState
-  /** Persist the draft; resolves `false` when the save failed. */
-  saveDraft: () => Promise<boolean>
-  /** Open Site preview on load when the document is saved (has id + slug). */
-  defaultActive?: boolean
-}
-
-export interface SitePreviewState {
-  /** Whether the inline iframe preview replaces the editor canvas. */
-  active: boolean
-  /** Canvas 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
-}
-
-/** Prefer the Next canvas origin (admin host); fall back to siteUrl only offline. */
-function resolveCanvasOrigin(canvasUrl?: string | null, siteUrl?: string | null): string {
-  if (canvasUrl) return resolveSiteUrl(canvasUrl)
-  if (typeof window !== 'undefined' && window.location?.origin) {
-    return window.location.origin
-  }
-  return resolveSiteUrl(siteUrl)
-}
-
-/**
- * Inline branded preview — drives an in-editor iframe that renders the draft
- * through the consumer's Next builder route (same `?preview=<token>` contract
- * as "View on site"), so editors see actual site CSS without leaving the
- * admin. On Astro-split deploys the canvas is the CMS host, not the public
- * Astro apex. Saves first when dirty, and reloads the frame after each save.
- */
-export function useSitePreview({
-  collection,
-  documentId,
-  slug,
-  path,
-  urlPrefix,
-  canvasUrl,
-  siteUrl,
-  dirty,
-  saveState,
-  saveDraft,
-  defaultActive = false,
-}: 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)
-  const autoOpenRef = useRef(false)
-
-  const activatePreview = useCallback(async () => {
-    if (!documentId || !slug) {
-      toast.error('Save the page before opening the site preview')
-      return false
-    }
-    setActive(true)
-    setUrl(null)
-    try {
-      if (dirty) {
-        const ok = await saveDraft()
-        if (!ok) {
-          setActive(false)
-          return false
-        }
-      }
-      const { token } = await createPreviewToken(collection, documentId)
-      tokenRef.current = token
-      setUrl(
-        buildPublicPreviewUrl({
-          siteUrl: resolveCanvasOrigin(canvasUrl, siteUrl),
-          urlPrefix: urlPrefix ?? '',
-          slug,
-          path,
-          token,
-        }),
-      )
-      return true
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Failed to open site preview')
-      setActive(false)
-      return false
-    }
-  }, [collection, documentId, slug, path, urlPrefix, canvasUrl, siteUrl, dirty, saveDraft])
-
-  // Opt-in default: open the iframe once a saved document is loaded.
-  useEffect(() => {
-    if (!defaultActive || autoOpenRef.current) return
-    if (!documentId || !slug) return
-    autoOpenRef.current = true
-    void activatePreview()
-  }, [defaultActive, documentId, slug, activatePreview])
-
-  // After a save completes while the preview is open, rebuild the URL (the
-  // slug/path 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: resolveCanvasOrigin(canvasUrl, siteUrl),
-            urlPrefix: urlPrefix ?? '',
-            slug,
-            path,
-            token: tokenRef.current,
-          }),
-        )
-      }
-      setReloadKey((k) => k + 1)
-    }
-    prevSaveState.current = saveState
-  }, [active, saveState, slug, path, canvasUrl, siteUrl, urlPrefix])
-
-  const toggle = useCallback(() => {
-    if (active) {
-      setActive(false)
-      return
-    }
-    void activatePreview()
-  }, [active, activatePreview])
-
-  return { active, url, reloadKey, toggle }
-}

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

@@ -1,125 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { AlertTriangle, Loader2, Pencil, X } from 'lucide-react'
-import {
-  fetchPostForEditor,
-  fetchTemplateForEditor,
-  type EditorPost,
-  type PostHeaderConfig,
-} from '../../lib/post-editor-service.js'
-import { defaultPostHeader } from '@prenta/core/page-sections'
-import { SectionRenderer, type PostRenderContext } from '../page-editor/sections/index.js'
-import { PostHeader } from './PostHeader.js'
-
-interface PostPreviewProps {
-  postType: string
-  documentId: string
-  session?: any
-  onNavigate: (path: string) => void
-}
-
-/**
- * Chrome-free render of a post using the same header + section renderers as
- * the editor canvas, so the preview reflects what ships. Only visible
- * sections render (hidden ones are omitted, like the public page).
- */
-export function PostPreview({ postType, documentId, session, onNavigate }: PostPreviewProps) {
-  const [post, setPost] = useState<EditorPost | null>(null)
-  const [header, setHeader] = useState<PostHeaderConfig>(defaultPostHeader())
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    setLoading(true)
-    fetchTemplateForEditor(postType)
-      .then((t) => !cancelled && setHeader(t.header))
-      .catch(() => {
-        /* default header */
-      })
-    fetchPostForEditor(postType, documentId)
-      .then((p) => !cancelled && setPost(p))
-      .catch((err) => !cancelled && setError(err instanceof Error ? err.message : 'Failed to load'))
-      .finally(() => !cancelled && setLoading(false))
-    return () => {
-      cancelled = true
-    }
-  }, [postType, documentId])
-
-  if (loading) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center">
-        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
-        <span className="sr-only">Loading preview…</span>
-      </div>
-    )
-  }
-
-  if (error || !post) {
-    return (
-      <div className="bg-background flex h-full items-center justify-center p-6">
-        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
-          <AlertTriangle className="text-destructive shrink-0" size={20} aria-hidden />
-          <p className="text-foreground text-sm font-medium">{error ?? 'Post not found.'}</p>
-        </div>
-      </div>
-    )
-  }
-
-  const context: PostRenderContext = {
-    title: post.title,
-    excerpt: post.excerpt,
-    body: post.body,
-    featuredImageUrl: post.featuredImage,
-    publishDate: post.publishDate ?? post.updatedAt ?? null,
-    category: post.category,
-    author: { name: session?.user?.name || session?.user?.email },
-  }
-  const visible = post.sections.filter((s) => s.visible)
-
-  // `window.close()` only works for tabs JS opened (the "View preview" action
-  // opens this view via window.open). When the user reached it through in-app
-  // navigation there is no opener, so close() is a silent no-op — fall back to
-  // the editor after a tick so the Close button always does something.
-  const handleClose = () => {
-    window.close()
-    setTimeout(() => {
-      onNavigate(`/posts/${postType}/${documentId}/edit`)
-    }, 120)
-  }
-
-  return (
-    <div className="flex h-full flex-col">
-      {/* Slim preview bar. This view opens in its own browser tab, so
-          actions are tab-scoped. */}
-      <div className="bg-card border-border flex h-12 shrink-0 items-center justify-between border-b px-4">
-        <button
-          type="button"
-          onClick={handleClose}
-          className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm"
-          aria-label="Close preview tab"
-        >
-          <X className="h-4 w-4" aria-hidden />
-          Close
-        </button>
-        <span className="text-muted-foreground text-xs">Preview · {post.title || 'Untitled'}</span>
-        <button
-          type="button"
-          onClick={() => onNavigate(`/posts/${postType}/${documentId}/edit`)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
-        >
-          <Pencil className="h-3.5 w-3.5" aria-hidden />
-          Open editor
-        </button>
-      </div>
-
-      <div className="prenta-canvas bg-card flex-1 overflow-auto">
-        <PostHeader config={header} context={context} />
-        {visible.map((section) => (
-          <SectionRenderer key={section.id} section={section} context={context} />
-        ))}
-      </div>
-    </div>
-  )
-}