@actuate-media/cms-admin 0.76.0 → 0.76.2

package/src/__tests__/views/article-body-section.render.test.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment happy-dom
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { ArticleBodySection } from '../../views/page-editor/sections/ArticleBodySection.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+
+function section(content: Record<string, unknown> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'article-body',
+    name: 'Article Body',
+    visible: true,
+    content,
+    settings: {},
+  }
+}
+
+describe('ArticleBodySection', () => {
+  it('renders post body HTML with rich-text preview class', () => {
+    const { container } = render(
+      <ArticleBodySection
+        section={section({ source: 'field' })}
+        context={{ body: '<h2>What is Lorem Ipsum?</h2><p>Body copy.</p>' }}
+      />,
+    )
+
+    expect(screen.getByRole('heading', { level: 2, name: 'What is Lorem Ipsum?' })).toBeTruthy()
+    expect(container.querySelector('.actuate-rich-text')).toBeTruthy()
+    expect(container.querySelector('.prose')).toBeNull()
+  })
+})

package/src/components/seo/SeoEditorPane.tsx

@@ -269,20 +269,18 @@ export function SeoEditorPane({
         return
       }
       if (result.text) {
-        const targetField =
-          field === 'ogTitle' ? 'metaTitle' : field === 'ogDescription' ? 'metaDescription' : field
-        const patch: Partial<SeoFieldPayload> = { [targetField]: result.text }
-        if (field === 'ogTitle') patch.ogTitle = ''
-        if (field === 'ogDescription') patch.ogDescription = ''
+        // Write the suggestion into the field the editor actually asked to
+        // generate. Previously an OG title/description generate was remapped
+        // onto metaTitle/metaDescription (and the OG field cleared), silently
+        // destroying a hand-written search title with no undo. Social fields
+        // still inherit meta at render time when left blank, so filling the OG
+        // field explicitly is non-destructive and matches the button's intent.
+        const patch: Partial<SeoFieldPayload> = { [field]: result.text }
         update(patch)
         if (result.brandAlignment) {
-          setAiAlignments((prev) => ({ ...prev, [targetField]: result.brandAlignment }))
+          setAiAlignments((prev) => ({ ...prev, [field]: result.brandAlignment }))
         }
-        toast.success(
-          field === 'ogTitle' || field === 'ogDescription'
-            ? 'AI suggestion applied to meta tags — social fields inherit unless overridden.'
-            : 'AI suggestion applied — review before saving.',
-        )
+        toast.success('AI suggestion applied — review before saving.')
       } else {
         toast.error('No suggestion was returned.')
       }
@@ -381,7 +379,11 @@ export function SeoEditorPane({
       title: record?.title ?? draftMeta?.seoTitle ?? '',
       slug: slug || record?.url?.split('/').filter(Boolean).pop() || '',
       content: contentHtml,
-      metaTitle: form.metaTitle,
+      // Measure the FULL rendered title (site template applied), matching what
+      // the page score (`calculatePageSeoScore`) and the server /seo/analysis
+      // endpoint measure — otherwise the meta-title-length check gives the
+      // editor advice that contradicts the list score for the same field.
+      metaTitle: renderedTitle,
       metaDescription: form.metaDescription,
       focusKeyphrase: form.focusKeyword,
       canonical: form.canonicalUrl,
@@ -389,7 +391,7 @@ export function SeoEditorPane({
       ogDescription: form.ogDescription,
       ogImage: record?.ogImage ?? undefined,
     }),
-    [record, draftMeta, slug, contentHtml, form],
+    [record, draftMeta, slug, contentHtml, form, renderedTitle],
   )
 
   const liveAnalysis = useMemo(() => {
@@ -474,7 +476,15 @@ export function SeoEditorPane({
                     >
                       <span>
                         SEO score: <span className="font-medium">{record.seoScore}</span> (
-                        {meta.label}){analysis && ` · Live analysis ${analysis.score}`}
+                        {meta.label})
+                        {analysis && (
+                          <>
+                            {' · '}
+                            <span title="Content quality from the analysis checklist below (readability, keyphrase, links). Separate from the meta-weighted SEO score used to rank this list.">
+                              Content analysis {analysis.score}/100
+                            </span>
+                          </>
+                        )}
                       </span>
                     </div>
                   )

package/src/layout/Sidebar.tsx

@@ -876,6 +876,25 @@ export function buildNavItems(config: any): NavItem[] {
   }
   for (const bucket of groupBuckets.values()) items.push(...bucket)
 
+  // Plugin-contributed custom nav links (PluginDefinition.adminNavItems,
+  // collected onto `_pluginNavItems` by cms-core's applyPlugins). Deduped by
+  // path against everything already present so a plugin can't double a built-in
+  // destination or one of its own collections.
+  const pluginNav: Array<{ label?: string; icon?: string; path?: string }> = Array.isArray(
+    config?._pluginNavItems,
+  )
+    ? config._pluginNavItems
+    : []
+  for (const item of pluginNav) {
+    if (!item?.path || items.some((n) => n.path === item.path)) continue
+    items.push({
+      label: item.label ?? item.path,
+      path: item.path,
+      icon: (item.icon && ICON_MAP[item.icon]) || FileText,
+      group: 'Content',
+    })
+  }
+
   // Settings destinations — always last. Users + API Keys now live inside
   // the Settings view as tabs (see Settings.tsx), so only Settings is anchored
   // here.

package/src/router/index.ts

@@ -23,6 +23,61 @@ export function parseRouteQuery(path: string): URLSearchParams {
   return new URLSearchParams(path.split('#')[0]!.split('?')[1] ?? '')
 }
 
+/** Confirmation shown when navigating away from an editor with unsaved changes. */
+export const NAVIGATION_CONFIRM_MESSAGE =
+  'You have unsaved changes that will be lost. Leave this page anyway?'
+
+// Module-level registry of "is there unsaved work?" predicates. Editors register
+// via useNavigationBlocker; the SPA router's navigate() consults them before an
+// in-app route change so Cancel / sidebar / breadcrumb / command-palette links
+// can't silently discard an editor's unsaved changes (beforeunload only covers
+// hard reloads, never client-side navigation).
+type BlockerPredicate = () => boolean
+const navigationBlockers = new Set<BlockerPredicate>()
+
+export function registerNavigationBlocker(predicate: BlockerPredicate): () => void {
+  navigationBlockers.add(predicate)
+  return () => {
+    navigationBlockers.delete(predicate)
+  }
+}
+
+/** True when any registered editor currently has unsaved changes. */
+export function hasBlockingNavigation(): boolean {
+  for (const predicate of navigationBlockers) {
+    try {
+      if (predicate()) return true
+    } catch {
+      // A misbehaving predicate must not wedge navigation.
+    }
+  }
+  return false
+}
+
+/**
+ * Register an unsaved-changes guard for an editor. While `isDirty` is true, an
+ * in-app navigation prompts for confirmation (via navigate()) and a browser
+ * unload/refresh shows the native "leave site?" prompt. The registration and
+ * the beforeunload listener are torn down on unmount.
+ */
+export function useNavigationBlocker(isDirty: boolean): void {
+  const dirtyRef = useRef(isDirty)
+  dirtyRef.current = isDirty
+
+  useEffect(() => registerNavigationBlocker(() => dirtyRef.current), [])
+
+  useEffect(() => {
+    if (!isDirty || typeof window === 'undefined') return
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+      // Required by Chrome/Safari to actually trigger the native prompt.
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', onBeforeUnload)
+    return () => window.removeEventListener('beforeunload', onBeforeUnload)
+  }, [isDirty])
+}
+
 export function useAdminRouter(basePath = '/admin', serverPath = '/') {
   const [currentPath, setCurrentPath] = useState(serverPath)
   const baseRef = useRef(basePath)
@@ -52,6 +107,12 @@ export function useAdminRouter(basePath = '/admin', serverPath = '/') {
 
   const navigate = useCallback((path: string) => {
     const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+    // Guard against discarding unsaved editor work on client-side navigation.
+    if (hasBlockingNavigation() && typeof window !== 'undefined') {
+      if (!window.confirm(NAVIGATION_CONFIRM_MESSAGE)) return
+    }
+
     setCurrentPath(normalizedPath)
 
     const fullUrl = normalizedPath === '/' ? baseRef.current : `${baseRef.current}${normalizedPath}`

package/src/styles/theme.css

@@ -224,6 +224,97 @@
     letter-spacing: revert-layer;
     line-height: revert-layer;
   }
+
+  /*
+   * Rich-text HTML in the canvas preview (article body, etc.). The TipTap
+   * editor styles headings in `.ProseMirror`; the canvas cannot rely on
+   * `prose` because @tailwindcss/typography is not bundled, and the revert
+   * above strips admin heading scales without substituting site typography.
+   */
+  .actuate-admin .actuate-canvas .actuate-rich-text {
+    color: var(--foreground);
+    font-size: 1rem;
+    line-height: 1.625;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text :is(h1, h2, h3, h4, h5, h6) {
+    color: var(--foreground);
+    font-weight: 600;
+    line-height: 1.5;
+    margin-top: 1.25em;
+    margin-bottom: 0.5em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h1 {
+    font-size: 2em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h2 {
+    font-size: 1.5em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h3 {
+    font-size: 1.25em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h4 {
+    font-size: 1.125em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h5 {
+    font-size: 1em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text h6 {
+    font-size: 0.875em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text p {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text :is(ul, ol) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+    padding-left: 1.5rem;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text ul {
+    list-style-type: disc;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text ol {
+    list-style-type: decimal;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text li {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text a {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text :is(strong, b) {
+    font-weight: 600;
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text blockquote {
+    border-left: 3px solid var(--border);
+    margin: 1em 0;
+    padding-left: 1em;
+    color: var(--muted-foreground);
+  }
+
+  .actuate-admin .actuate-canvas .actuate-rich-text img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md);
+    margin: 1em 0;
+  }
 }
 
 .actuate-admin.reduce-motion,

package/src/views/DocumentEdit.tsx

@@ -14,6 +14,7 @@ import {
   XCircle,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { useNavigationBlocker } from '../router/index.js'
 import { FieldRenderer } from '../fields/FieldRenderer.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { Button } from '../components/ui/Button.js'
@@ -101,14 +102,9 @@ export function DocumentEdit({
     }
   }, [documentId, isNew])
 
-  useEffect(() => {
-    if (!isDirty) return
-    const handler = (e: BeforeUnloadEvent) => {
-      e.preventDefault()
-    }
-    window.addEventListener('beforeunload', handler)
-    return () => window.removeEventListener('beforeunload', handler)
-  }, [isDirty])
+  // Warn before discarding unsaved changes on client-side navigation (Cancel,
+  // sidebar/breadcrumb links) and on browser unload/refresh.
+  useNavigationBlocker(isDirty)
 
   const SEO_FIELDS: (keyof SEOData)[] = [
     'metaTitle',

package/src/views/page-builder/PageBuilder.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'
 import { Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../../lib/api.js'
+import { useNavigationBlocker } from '../../router/index.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import {
   useBuilderState,
@@ -169,6 +170,9 @@ export function PageBuilder({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- replaceTree/setPageSettings are stable builder actions
   }, [documentId, templateId, collectionSlug])
 
+  // Warn before discarding unsaved builder changes on navigation / unload.
+  useNavigationBlocker(dirty)
+
   const handleSave = useCallback(async () => {
     setSaving(true)
     const body = JSON.stringify({

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

@@ -4,6 +4,7 @@ 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'
@@ -190,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(

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,7 @@ 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'
@@ -227,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(
     () => ({

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']) => {