@actuate-media/cms-admin 0.42.1 → 0.42.4

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
@@ -13,6 +13,7 @@ import {
   emptyPostFromTemplate,
   fetchPostForEditor,
   fetchTemplateForEditor,
+  missingPostFields,
   moveSection,
   publishPost,
   removeSection,
@@ -123,12 +124,35 @@ export function PostSectionEditor({
     return col?.labels?.singular ?? postType
   }, [config, postType])
 
+  // A misconfigured post-type collection (missing the fields the editor
+  // writes) would silently drop content on save — detect it up front.
+  // Memoized to a string/null so the load effect can depend on it without
+  // re-running when `config`'s object identity changes between renders.
+  const schemaError = useMemo(() => {
+    const missing = missingPostFields(config, postType)
+    if (missing.length === 0) return null
+    const plural = missing.length > 1
+    return (
+      `The "${postType}" collection is missing required field${plural ? 's' : ''}: ` +
+      `${missing.join(', ')}. Declare ${plural ? 'them' : 'it'} in your CMS config ` +
+      `so the post editor can save without losing content.`
+    )
+  }, [config, postType])
+
   // ─── Load ──────────────────────────────────────────────────────────
   useEffect(() => {
     let cancelled = false
     setLoading(true)
     setLoadError(null)
 
+    // Fail loud on a misconfigured post-type collection rather than letting
+    // the user build a post whose content would be silently dropped on save.
+    if (schemaError) {
+      setLoadError(schemaError)
+      setLoading(false)
+      return
+    }
+
     // Always load the type template header (the post editor renders it but
     // never edits it — header design lives at the type level).
     fetchTemplateForEditor(postType)
@@ -160,7 +184,7 @@ export function PostSectionEditor({
     return () => {
       cancelled = true
     }
-  }, [postType, documentId])
+  }, [postType, documentId, schemaError])
 
   // ─── Unsaved-changes guard ───────────────────────────────────────────
   useEffect(() => {
@@ -424,6 +448,12 @@ export function PostSectionEditor({
 
   const selected = post.sections.find((s) => s.id === selectedId) ?? null
 
+  // Sections whose type has no registered definition (seed/code-owned, e.g.
+  // `opal-*`). They are preserved verbatim on save but can't be edited here.
+  const unmanagedTypes = Array.from(
+    new Set(post.sections.filter((s) => s.unmanaged).map((s) => s.sectionType)),
+  )
+
   // Section types the canvas renders as placeholders — no built-in body
   // component and no consumer-registered admin renderer. When present the
   // editor surfaces "structure view" messaging and promotes "View on site"
@@ -460,6 +490,23 @@ export function PostSectionEditor({
           structuralTypes={structuralTypes}
         />
 
+        {unmanagedTypes.length > 0 && (
+          <div
+            role="status"
+            className="border-border bg-muted/50 flex items-start gap-3 border-b px-4 py-2.5"
+          >
+            <Lock className="text-muted-foreground mt-0.5 shrink-0" size={16} aria-hidden />
+            <p className="text-muted-foreground flex-1 text-sm">
+              This post has{' '}
+              <span className="text-foreground font-medium">
+                {unmanagedTypes.length} section type{unmanagedTypes.length > 1 ? 's' : ''}
+              </span>{' '}
+              managed outside the editor ({unmanagedTypes.join(', ')}). They are preserved on save
+              but edited in your seed script or code, not here.
+            </p>
+          </div>
+        )}
+
         {validation && (
           <ValidationSummary
             errors={validation.errors}