@actuate-media/cms-admin 0.75.0 → 0.76.1

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

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  Calendar,
   Check,
   ExternalLink,
   Eye,
@@ -65,6 +66,12 @@ interface EditorTopBarProps {
   seoScore?: number
   onSaveDraft: () => void
   onPublish: () => void
+  /** Open the schedule-publish dialog. Omitted when the document is unsaved. */
+  onSchedule?: () => void
+  /** When false, Schedule stays disabled (e.g. unsaved document). Defaults to true. */
+  scheduleReady?: boolean
+  scheduledAt?: string | null
+  scheduledUnpublishAt?: string | null
   /**
    * Section types the canvas renders as placeholders (custom / unmanaged).
    * When non-empty the editor is in "structure" mode: the eye preview is
@@ -113,6 +120,10 @@ export function EditorTopBar({
   seoScore = 0,
   onSaveDraft,
   onPublish,
+  onSchedule,
+  scheduleReady = true,
+  scheduledAt = null,
+  scheduledUnpublishAt = null,
   structuralTypes = [],
 }: EditorTopBarProps) {
   const statusInfo = STATUS_TEXT[status]
@@ -135,6 +146,26 @@ export function EditorTopBar({
           ? 'You do not have permission to publish'
           : undefined
 
+  const scheduleBlocked =
+    !onSchedule ||
+    !canPublish ||
+    !publishReady ||
+    !scheduleReady ||
+    publishing ||
+    saveState === 'saving'
+  const scheduleTitle =
+    saveState === 'saving'
+      ? 'Wait for the current save to finish'
+      : !scheduleReady
+        ? 'Save before scheduling'
+        : canPublish && !publishReady && publishDisabledReason
+          ? publishDisabledReason
+          : !canPublish
+            ? 'You do not have permission to schedule'
+            : scheduledAt
+              ? `Reschedule — currently publishes ${formatScheduleLabel(scheduledAt)}`
+              : 'Schedule a future publish date'
+
   return (
     <header className="bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4">
       {/* Breadcrumb + status */}
@@ -158,6 +189,18 @@ export function EditorTopBar({
         >
           {statusInfo.label}
         </span>
+        {scheduledAt && (
+          <span
+            className="text-muted-foreground ml-1 hidden shrink-0 text-xs sm:inline"
+            title={
+              scheduledUnpublishAt
+                ? `Publishes ${formatScheduleLabel(scheduledAt)} · Unpublishes ${formatScheduleLabel(scheduledUnpublishAt)}`
+                : `Publishes ${formatScheduleLabel(scheduledAt)}`
+            }
+          >
+            · {formatScheduleLabel(scheduledAt)}
+          </span>
+        )}
         <SaveStatus state={saveState} dirty={dirty} />
       </div>
 
@@ -294,6 +337,20 @@ export function EditorTopBar({
           {saveState === 'saving' ? 'Saving…' : 'Save Draft'}
         </button>
 
+        {onSchedule && (
+          <button
+            type="button"
+            onClick={onSchedule}
+            disabled={scheduleBlocked}
+            title={scheduleTitle}
+            aria-label={scheduledAt ? 'Reschedule publish' : 'Schedule publish'}
+            className="border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Calendar className="h-3.5 w-3.5" aria-hidden />
+            <span className="hidden sm:inline">{scheduledAt ? 'Reschedule' : 'Schedule'}</span>
+          </button>
+        )}
+
         <button
           type="button"
           onClick={onPublish}
@@ -353,3 +410,15 @@ function SaveStatus({ state, dirty }: { state: SaveState; dirty: boolean }) {
   }
   return null
 }
+
+function formatScheduleLabel(iso: string): string {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}

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

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, Blocks, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { useNavigationBlocker } from '../../router/index.js'
+import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js'
 import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
@@ -16,6 +18,7 @@ import {
   missingPageFields,
   moveSection,
   publishPage,
+  PAGES_COLLECTION,
   removeSection,
   reorderSections,
   savePageDraft,
@@ -103,6 +106,7 @@ export function PageSectionEditor({
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
+  const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -187,16 +191,8 @@ export function PageSectionEditor({
     }
   }, [documentId, initialParentId, schemaError])
 
-  // ─── Unsaved-changes guard (browser unload) ──────────────────────────
-  useEffect(() => {
-    if (!dirty) return
-    function onBeforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault()
-      e.returnValue = ''
-    }
-    window.addEventListener('beforeunload', onBeforeUnload)
-    return () => window.removeEventListener('beforeunload', onBeforeUnload)
-  }, [dirty])
+  // ─── Unsaved-changes guard (client-side navigation + browser unload) ──
+  useNavigationBlocker(dirty)
 
   // ─── Section mutations ───────────────────────────────────────────────
   const mutateSections = useCallback(
@@ -324,6 +320,42 @@ export function PageSectionEditor({
     setConfirmPublish(true)
   }, [page])
 
+  const requestSchedule = useCallback(async () => {
+    if (!page) return
+    if (!page.id) {
+      toast.error('Save the page before scheduling')
+      return
+    }
+    const result = validatePage(page, true)
+    setValidation(result.errors.length || result.warnings.length ? result : null)
+    if (result.errors.length > 0) {
+      toast.error('Resolve the listed issues before scheduling')
+      return
+    }
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setScheduleOpen(true)
+  }, [page, dirty, handleSaveDraft])
+
+  const handleScheduled = useCallback(
+    (next: { status: string; scheduledAt: string | null; scheduledUnpublishAt: string | null }) => {
+      setPage((prev) =>
+        prev
+          ? {
+              ...prev,
+              status: next.status as EditorPage['status'],
+              scheduledAt: next.scheduledAt,
+              scheduledUnpublishAt: next.scheduledUnpublishAt,
+            }
+          : prev,
+      )
+      setValidation(null)
+    },
+    [],
+  )
+
   const doPublish = useCallback(async () => {
     if (!page) return
     setPublishing(true)
@@ -533,6 +565,10 @@ export function PageSectionEditor({
           seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          onSchedule={page.id ? requestSchedule : undefined}
+          scheduleReady={Boolean(page.id)}
+          scheduledAt={page.scheduledAt}
+          scheduledUnpublishAt={page.scheduledUnpublishAt}
           structuralTypes={structuralTypes}
         />
 
@@ -687,6 +723,18 @@ export function PageSectionEditor({
         confirmLabel="Publish"
       />
 
+      {page.id && (
+        <SchedulePublishDialog
+          collectionSlug={PAGES_COLLECTION}
+          documentId={page.id}
+          scheduledAt={page.scheduledAt}
+          scheduledUnpublishAt={page.scheduledUnpublishAt}
+          open={scheduleOpen}
+          onClose={() => setScheduleOpen(false)}
+          onScheduled={handleScheduled}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

package/src/views/page-editor/sections/ArticleBodySection.tsx

@@ -37,10 +37,7 @@ export function ArticleBodySection({
         </div>
       )}
       {html.trim() ? (
-        <div
-          className="prose prose-zinc text-foreground max-w-none text-base leading-relaxed"
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
+        <div className="actuate-rich-text max-w-none" dangerouslySetInnerHTML={{ __html: html }} />
       ) : (
         <p className="text-muted-foreground text-base leading-relaxed italic">
           {source === 'field'

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

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { useNavigationBlocker } from '../../router/index.js'
+import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js'
 import { EditorSeoAside } from '../../components/EditorSeoAside.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistory } from '../../components/VersionHistory.js'
@@ -128,6 +130,7 @@ export function PostSectionEditor({
   const [historyOpen, setHistoryOpen] = useState(false)
   const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null)
   const [confirmPublish, setConfirmPublish] = useState(false)
+  const [scheduleOpen, setScheduleOpen] = useState(false)
   const [leaveTarget, setLeaveTarget] = useState<string | null>(null)
   const [validation, setValidation] = useState<ValidationResult | null>(null)
 
@@ -225,16 +228,8 @@ export function PostSectionEditor({
     }
   }, [postType, documentId, schemaError])
 
-  // ─── Unsaved-changes guard ───────────────────────────────────────────
-  useEffect(() => {
-    if (!dirty) return
-    function onBeforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault()
-      e.returnValue = ''
-    }
-    window.addEventListener('beforeunload', onBeforeUnload)
-    return () => window.removeEventListener('beforeunload', onBeforeUnload)
-  }, [dirty])
+  // ─── Unsaved-changes guard (client-side navigation + browser unload) ──
+  useNavigationBlocker(dirty)
 
   const context: PostRenderContext = useMemo(
     () => ({
@@ -375,6 +370,43 @@ export function PostSectionEditor({
     setConfirmPublish(true)
   }, [post])
 
+  const requestSchedule = useCallback(async () => {
+    if (!post) return
+    if (!post.id) {
+      toast.error('Save the post before scheduling')
+      return
+    }
+    const result = validatePost(post, true)
+    setValidation(result.errors.length || result.warnings.length ? result : null)
+    if (result.errors.length > 0) {
+      toast.error('Resolve the listed issues before scheduling')
+      return
+    }
+    if (dirty) {
+      const ok = await handleSaveDraft()
+      if (!ok) return
+    }
+    setScheduleOpen(true)
+  }, [post, dirty, handleSaveDraft])
+
+  const handleScheduled = useCallback(
+    (next: { status: string; scheduledAt: string | null; scheduledUnpublishAt: string | null }) => {
+      setPost((prev) =>
+        prev
+          ? {
+              ...prev,
+              status: next.status as EditorPost['status'],
+              scheduledAt: next.scheduledAt,
+              scheduledUnpublishAt: next.scheduledUnpublishAt,
+              publishDate: next.scheduledAt ?? prev.publishDate,
+            }
+          : prev,
+      )
+      setValidation(null)
+    },
+    [],
+  )
+
   const doPublish = useCallback(async () => {
     if (!post) return
     setPublishing(true)
@@ -576,6 +608,10 @@ export function PostSectionEditor({
           seoScore={liveSeoScore}
           onSaveDraft={handleSaveDraft}
           onPublish={requestPublish}
+          onSchedule={post.id ? requestSchedule : undefined}
+          scheduleReady={Boolean(post.id)}
+          scheduledAt={post.scheduledAt}
+          scheduledUnpublishAt={post.scheduledUnpublishAt}
           structuralTypes={structuralTypes}
         />
 
@@ -718,6 +754,18 @@ export function PostSectionEditor({
         confirmLabel="Publish"
       />
 
+      {post.id && (
+        <SchedulePublishDialog
+          collectionSlug={postType}
+          documentId={post.id}
+          scheduledAt={post.scheduledAt}
+          scheduledUnpublishAt={post.scheduledUnpublishAt}
+          open={scheduleOpen}
+          onClose={() => setScheduleOpen(false)}
+          onScheduled={handleScheduled}
+        />
+      )}
+
       <ConfirmDialog
         open={leaveTarget !== null}
         onClose={() => setLeaveTarget(null)}

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AlertTriangle, ArrowLeft, Layout, Loader2, Save } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { useNavigationBlocker } from '../../router/index.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import {
   addSection,
@@ -99,15 +100,8 @@ export function PostTemplateEditor({
     }
   }, [postType])
 
-  useEffect(() => {
-    if (!dirty) return
-    function onBeforeUnload(e: BeforeUnloadEvent) {
-      e.preventDefault()
-      e.returnValue = ''
-    }
-    window.addEventListener('beforeunload', onBeforeUnload)
-    return () => window.removeEventListener('beforeunload', onBeforeUnload)
-  }, [dirty])
+  // Unsaved-changes guard (client-side navigation + browser unload).
+  useNavigationBlocker(dirty)
 
   const mutateSections = useCallback(
     (fn: (sections: EditorPostTemplate['sections']) => EditorPostTemplate['sections']) => {