spine-framework 0.3.145 → 0.4.1

package/.framework/src/components/kb/KBArticleEditor.tsx

@@ -1,4 +1,14 @@
-import { useState, useEffect, useMemo } from 'react'
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:module_header:module_header" type="module_header" identity="module_header" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
+
+
+
+
+
+
+
+
+
+import { useState, useEffect, useMemo, useRef } from 'react'
 import DOMPurify from 'dompurify'
 import { apiFetch } from '../../lib/api'
 import { formatDateTime } from '../../lib/utils'
@@ -11,7 +21,34 @@ import { RichTextEditor } from '../ui/RichTextEditor'
 import { SchemaFields } from '../shared/SchemaFields'
 import { LoadingSpinner } from '../ui/LoadingSpinner'
 import { ArrowLeft, Save, Send, Trash, X, Edit } from 'lucide-react'
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:module_header:module_header"]
+
+
+
+
+
+
+
+
+
+
+
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBArticleEditorProps:interface" type="interface" identity="KBArticleEditorProps" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
 export interface KBArticleEditorProps {
   typeSlug: string
   typeName?: string
@@ -25,8 +62,53 @@ export interface KBArticleEditorProps {
   onEdit?: (id: string) => void
   onCancel?: () => void
   onDelete?: () => void
+  /** Fires whenever the form values change after initialization (field edits). */
+  onFormChange?: (values: Record<string, any>) => void
+  /**
+   * Custom publish step: handleSave(true) saves the current form first, then
+   * awaits this callback. When omitted the editor falls back to
+   * /api/kb?action=publish. Throwing surfaces the error in the editor UI.
+   */
+  onPublish?: (recordId: string, savedRecord: any) => Promise<void>
+  publishLabel?: string
+  saveLabel?: string
+  publishDisabled?: boolean
+  /**
+   * Optional allowlist of schema fields rendered in the right-hand metadata
+   * sidebar. Omitted → all non-main fields (default). An empty array hides the
+   * sidebar entirely — hidden fields still seed formData, so saves preserve them.
+   */
+  sidebarFieldNames?: string[]
 }
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBArticleEditorProps:interface"]
+
+
+
+
+
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBRecord:interface" type="interface" identity="KBRecord" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
 interface KBRecord {
   id: string
   title: string
@@ -35,7 +117,35 @@ interface KBRecord {
   data: Record<string, any>
   [key: string]: any
 }
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBRecord:interface"]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:getFieldDefault:function" type="function" identity="getFieldDefault" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
 function getFieldDefault(def: any): any {
   if (def.data_type === 'multiselect' || (def.data_type === 'array' && def.options)) return []
   if (def.data_type === 'boolean' || def.data_type === 'checkbox' || def.data_type === 'switch') return false
@@ -50,7 +160,35 @@ function getFieldDefault(def: any): any {
   if (def.data_type === 'datetime' || def.data_type === 'date') return null
   return ''
 }
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:getFieldDefault:function"]
+
+
+
+
+
+
+
+
+
+
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:initialFormData:function" type="function" identity="initialFormData" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
 function initialFormData(schema: any, record: KBRecord | null): Record<string, any> {
   const values: Record<string, any> = {}
   Object.entries(schema?.fields || {}).forEach(([fieldName, fieldDef]: [string, any]) => {
@@ -70,7 +208,35 @@ function initialFormData(schema: any, record: KBRecord | null): Record<string, a
   }
   return values
 }
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:initialFormData:function"]
+
+
+
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// CIL[BEGIN stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBArticleEditor:component" type="component" identity="KBArticleEditor" parent="~/.framework/src/components/kb/KBArticleEditor.tsx"]
 export function KBArticleEditor({
   typeSlug,
   typeName,
@@ -84,6 +250,12 @@ export function KBArticleEditor({
   onEdit,
   onCancel,
   onDelete,
+  onFormChange,
+  onPublish,
+  publishLabel,
+  saveLabel,
+  publishDisabled,
+  sidebarFieldNames,
 }: KBArticleEditorProps) {
   const isCreating = mode === 'new'
   const isEditing = mode === 'edit' || isCreating
@@ -174,7 +346,10 @@ export function KBArticleEditor({
 
   const mainFieldNames = ['title', 'content']
   const mainFields = useMemo(() => allFields.filter(f => mainFieldNames.includes(f.name)), [allFields])
-  const sidebarFields = useMemo(() => allFields.filter(f => !mainFieldNames.includes(f.name)), [allFields])
+  const sidebarFields = useMemo(() => {
+    const fields = allFields.filter(f => !mainFieldNames.includes(f.name))
+    return sidebarFieldNames === undefined ? fields : fields.filter(f => sidebarFieldNames.includes(f.name))
+  }, [allFields, sidebarFieldNames])
   const titleField = mainFields.find(f => f.name === 'title')
   const contentField = mainFields.find(f => f.name === 'content')
 
@@ -197,7 +372,7 @@ export function KBArticleEditor({
         data[fieldName] = value
       }
     })
-    return { entity: 'items', type_slug: record?.type_slug || typeRecord?.slug || typeSlug, ...system, data }
+    return { entity: 'items', type_slug: record?.type_slug || typeRecord?.slug || typeSlug, ...system, data: { ...(record?.data || {}), ...data } }
   }
 
   const handleSave = async (publish = false) => {
@@ -206,7 +381,10 @@ export function KBArticleEditor({
     setError(null)
     try {
       const payload = buildPayload()
-      if (publish) payload.status = 'published'
+      // Custom onPublish callers (e.g. app-level validated publish) must save at
+      // the record's current status — the backend decides publication after
+      // validation, so a hard-failing draft never becomes published here.
+      if (publish && !onPublish) payload.status = 'published'
       if (!payload.title?.trim()) throw new Error('Title is required')
       if (!payload.data?.content?.trim()) throw new Error('Content is required')
 
@@ -235,11 +413,17 @@ export function KBArticleEditor({
       const recordId = saved?.id || (isCreating ? null : articleId)
 
       if (publish && recordId) {
-        await apiFetch('/api/kb?action=publish', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ id: recordId }),
-        })
+        // Custom publish path (e.g. app-level validated publish/re-embed) — the
+        // form was just saved, so the callback operates on durable content.
+        if (onPublish) {
+          await onPublish(recordId, saved)
+        } else {
+          await apiFetch('/api/kb?action=publish', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id: recordId }),
+          })
+        }
       }
 
       onSave?.(saved)
@@ -265,10 +449,24 @@ export function KBArticleEditor({
     }
   }
 
+  // Updaters must stay pure — calling the parent's setState (onFormChange)
+  // inside the updater runs during this component's render, producing React's
+  // setState-during-render warning and re-render loops. Flag the edit here
+  // and report it from a post-commit effect instead.
+  const formSyncPending = useRef(false)
   const handleFieldChange = (name: string, value: any) => {
+    formSyncPending.current = true
     setFormData(prev => ({ ...prev, [name]: value }))
   }
 
+  // Post-initialization edits only — schema/record hydration sets formData
+  // directly and does not flag a sync.
+  useEffect(() => {
+    if (!formSyncPending.current) return
+    formSyncPending.current = false
+    onFormChange?.(formData)
+  }, [formData, onFormChange])
+
   if (loading && !record && !isCreating) {
     return (
       <div className="p-6 space-y-4 h-full">
@@ -325,10 +523,10 @@ export function KBArticleEditor({
                 </Button>
               )}
               <Button size="sm" variant="outline" onClick={() => handleSave(false)} disabled={saving} className="gap-1">
-                <Save className="h-3.5 w-3.5" /> Save Draft
+                <Save className="h-3.5 w-3.5" /> {saveLabel || 'Save Draft'}
               </Button>
-              <Button size="sm" onClick={() => handleSave(true)} disabled={saving} className="gap-1">
-                <Send className="h-3.5 w-3.5" /> Publish
+              <Button size="sm" onClick={() => handleSave(true)} disabled={saving || publishDisabled} className="gap-1">
+                <Send className="h-3.5 w-3.5" /> {publishLabel || 'Publish'}
               </Button>
             </>
           )}
@@ -393,17 +591,28 @@ export function KBArticleEditor({
           )}
         </div>
 
-        <div className="w-72 shrink-0 border-l border-border p-4 space-y-4 overflow-y-auto">
-          <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Metadata</h3>
-          <SchemaFields
-            fields={sidebarFields}
-            data={isEditing ? { ...formData, data: formData } : { ...record, data: record?.data }}
-            onChange={isEditing ? handleFieldChange : undefined}
-            readonly={!isEditing}
-            twoColumn={false}
-          />
-        </div>
+        {sidebarFields.length > 0 && (
+          <div className="w-72 shrink-0 border-l border-border p-4 space-y-4 overflow-y-auto">
+            <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">Metadata</h3>
+            <SchemaFields
+              fields={sidebarFields}
+              data={isEditing ? { ...formData, data: formData } : { ...record, data: record?.data }}
+              onChange={isEditing ? handleFieldChange : undefined}
+              readonly={!isEditing}
+              twoColumn={false}
+            />
+          </div>
+        )}
       </div>
     </div>
   )
 }
+// CIL[END stable_id="~/.framework/src/components/kb/KBArticleEditor.tsx:KBArticleEditor:component"]
+
+
+
+
+
+
+
+