@actuate-media/cms-admin 0.8.0 → 0.8.1

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

@@ -1,26 +1,26 @@
-'use client';
+'use client'
 
-import { useState, useMemo, useCallback } from 'react';
-import { Star, Copy, Trash2 } from 'lucide-react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import type { BlockNode, BlockTypeDefinition, FieldDefinition } from '@actuate-media/cms-core';
-import { BlockCatalog } from '@actuate-media/cms-core';
-import { AIBlockAssist } from './AIBlockAssist.js';
-import { TipTapEditor } from '../../components/TipTapEditor.js';
-import { MediaPickerModal } from '../../components/MediaPickerModal.js';
+import { useState, useMemo, useCallback } from 'react'
+import { Star, Copy, Trash2 } from 'lucide-react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import type { BlockNode, BlockTypeDefinition, FieldDefinition } from '@actuate-media/cms-core'
+import { BlockCatalog } from '@actuate-media/cms-core'
+import { AIBlockAssist } from './AIBlockAssist.js'
+import { TipTapEditor } from '../../components/TipTapEditor.js'
+import { MediaPickerModal } from '../../components/MediaPickerModal.js'
 
 export interface BlockEditorProps {
-  node: BlockNode;
-  onUpdateBlock: (id: string, data: Record<string, unknown>) => void;
-  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void;
-  onRemoveNode: (id: string) => void;
-  onDuplicateNode: (id: string) => void;
-  config: any;
+  node: BlockNode
+  onUpdateBlock: (id: string, data: Record<string, unknown>) => void
+  onUpdateSettings: (id: string, settings: Record<string, unknown>) => void
+  onRemoveNode: (id: string) => void
+  onDuplicateNode: (id: string) => void
+  config: any
 }
 
 const INPUT_CLASS =
-  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring';
-const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block';
+  'w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring'
+const LABEL_CLASS = 'text-sm font-medium text-foreground mb-1 block'
 
 export function BlockEditor({
   node,
@@ -30,36 +30,36 @@ export function BlockEditor({
   onDuplicateNode,
   config,
 }: BlockEditorProps) {
-  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false)
 
-  const catalog = useMemo(() => new BlockCatalog(), []);
+  const catalog = useMemo(() => new BlockCatalog(), [])
   const blockDef = useMemo(
     () => catalog.get(node.settings.blockType),
-    [catalog, node.settings.blockType]
-  );
+    [catalog, node.settings.blockType],
+  )
 
   const handleFieldChange = useCallback(
     (fieldName: string, value: unknown) => {
-      onUpdateBlock(node.id, { [fieldName]: value });
+      onUpdateBlock(node.id, { [fieldName]: value })
     },
-    [node.id, onUpdateBlock]
-  );
+    [node.id, onUpdateBlock],
+  )
 
   const handleVariantChange = useCallback(
     (variantName: string) => {
-      onUpdateSettings(node.id, { variant: variantName });
+      onUpdateSettings(node.id, { variant: variantName })
     },
-    [node.id, onUpdateSettings]
-  );
+    [node.id, onUpdateSettings],
+  )
 
   const handleDelete = useCallback(() => {
     if (confirmDelete) {
-      onRemoveNode(node.id);
-      setConfirmDelete(false);
+      onRemoveNode(node.id)
+      setConfirmDelete(false)
     } else {
-      setConfirmDelete(true);
+      setConfirmDelete(true)
     }
-  }, [confirmDelete, node.id, onRemoveNode]);
+  }, [confirmDelete, node.id, onRemoveNode])
 
   if (!blockDef) {
     return (
@@ -68,7 +68,7 @@ export function BlockEditor({
           Unknown block type: <code className="text-xs">{node.settings.blockType}</code>
         </p>
       </div>
-    );
+    )
   }
 
   return (
@@ -77,10 +77,7 @@ export function BlockEditor({
         <div className="flex items-center gap-2">
           <Star size={16} className="text-muted-foreground" />
           <span className="text-sm font-medium text-foreground flex-1">{blockDef.label}</span>
-          <AIBlockAssist
-            block={node}
-            onUpdateData={(data) => onUpdateBlock(node.id, data)}
-          />
+          <AIBlockAssist block={node} onUpdateData={(data) => onUpdateBlock(node.id, data)} />
         </div>
         {blockDef.description && (
           <p className="text-xs text-muted-foreground mt-1">{blockDef.description}</p>
@@ -150,18 +147,18 @@ export function BlockEditor({
         </button>
       </div>
     </div>
-  );
+  )
 }
 
 interface FieldRendererProps {
-  name: string;
-  definition: FieldDefinition;
-  value: unknown;
-  onChange: (value: unknown) => void;
+  name: string
+  definition: FieldDefinition
+  value: unknown
+  onChange: (value: unknown) => void
 }
 
 function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps) {
-  const label = definition.label || name;
+  const label = definition.label || name
 
   switch (definition.type) {
     case 'text':
@@ -176,7 +173,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'richText':
       return (
@@ -190,7 +187,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             />
           </div>
         </div>
-      );
+      )
 
     case 'url':
       return (
@@ -204,7 +201,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'number':
       return (
@@ -220,7 +217,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'boolean':
       return (
@@ -235,10 +232,10 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             <SwitchPrimitive.Thumb className="block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
           </SwitchPrimitive.Root>
         </div>
-      );
+      )
 
     case 'media':
-      return <MediaFieldRenderer label={label} value={value} onChange={onChange} />;
+      return <MediaFieldRenderer label={label} value={value} onChange={onChange} />
 
     case 'select':
       return (
@@ -257,13 +254,13 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             ))}
           </select>
         </div>
-      );
+      )
 
     case 'array':
-      return <ArrayFieldRenderer label={label} value={value} onChange={onChange} />;
+      return <ArrayFieldRenderer label={label} value={value} onChange={onChange} />
 
     case 'json':
-      return <JsonFieldRenderer label={label} value={value} onChange={onChange} />;
+      return <JsonFieldRenderer label={label} value={value} onChange={onChange} />
 
     case 'date':
       return (
@@ -276,7 +273,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'slug':
       return (
@@ -289,14 +286,14 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
               const slug = e.target.value
                 .toLowerCase()
                 .replace(/[^a-z0-9-]+/g, '-')
-                .replace(/^-+|-+$/g, '');
-              onChange(slug);
+                .replace(/^-+|-+$/g, '')
+              onChange(slug)
             }}
             placeholder={definition.admin?.placeholder ?? 'page-slug'}
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'relationship':
       return (
@@ -310,7 +307,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'email':
       return (
@@ -324,7 +321,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'color':
       return (
@@ -346,7 +343,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             />
           </div>
         </div>
-      );
+      )
 
     default:
       return (
@@ -359,14 +356,14 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
   }
 }
 
 interface SimpleFieldProps {
-  label: string;
-  value: unknown;
-  onChange: (value: unknown) => void;
+  label: string
+  value: unknown
+  onChange: (value: unknown) => void
 }
 
 /**
@@ -375,12 +372,13 @@ interface SimpleFieldProps {
  * browse-and-select flow instead of a free-text input.
  */
 function MediaFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
-  const [open, setOpen] = useState(false);
-  const url = typeof value === 'string'
-    ? value
-    : (value && typeof value === 'object' && 'url' in (value as any))
-      ? String((value as any).url)
-      : '';
+  const [open, setOpen] = useState(false)
+  const url =
+    typeof value === 'string'
+      ? value
+      : value && typeof value === 'object' && 'url' in (value as any)
+        ? String((value as any).url)
+        : ''
 
   return (
     <div>
@@ -411,12 +409,12 @@ function MediaFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         open={open}
         onClose={() => setOpen(false)}
         onSelect={(selectedUrl) => {
-          onChange(selectedUrl);
-          setOpen(false);
+          onChange(selectedUrl)
+          setOpen(false)
         }}
       />
     </div>
-  );
+  )
 }
 
 /**
@@ -429,30 +427,30 @@ function MediaFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
  */
 function JsonFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
   const initial = useMemo(() => {
-    if (value === undefined || value === null) return '';
+    if (value === undefined || value === null) return ''
     try {
-      return JSON.stringify(value, null, 2);
+      return JSON.stringify(value, null, 2)
     } catch {
-      return '';
+      return ''
     }
-  }, [value]);
-  const [draft, setDraft] = useState(initial);
-  const [error, setError] = useState<string | null>(null);
+  }, [value])
+  const [draft, setDraft] = useState(initial)
+  const [error, setError] = useState<string | null>(null)
 
   const handleChange = (next: string) => {
-    setDraft(next);
+    setDraft(next)
     if (next.trim() === '') {
-      setError(null);
-      onChange(undefined);
-      return;
+      setError(null)
+      onChange(undefined)
+      return
     }
     try {
-      onChange(JSON.parse(next));
-      setError(null);
+      onChange(JSON.parse(next))
+      setError(null)
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Invalid JSON');
+      setError(err instanceof Error ? err.message : 'Invalid JSON')
     }
-  };
+  }
 
   return (
     <div>
@@ -470,7 +468,7 @@ function JsonFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         </p>
       )}
     </div>
-  );
+  )
 }
 
 /**
@@ -479,22 +477,22 @@ function JsonFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
  * nested-field editing belongs in the document-level FieldRenderer.
  */
 function ArrayFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
-  const items = Array.isArray(value) ? value : [];
-  const isObjectArray = items.length > 0 && typeof items[0] === 'object' && items[0] !== null;
+  const items = Array.isArray(value) ? value : []
+  const isObjectArray = items.length > 0 && typeof items[0] === 'object' && items[0] !== null
 
   if (isObjectArray) {
     // For object arrays fall back to JSON — mirrors what most consumers
     // expect when their block declares `type: 'array'` with no schema.
-    return <JsonFieldRenderer label={label} value={value} onChange={onChange} />;
+    return <JsonFieldRenderer label={label} value={value} onChange={onChange} />
   }
 
   const updateItem = (idx: number, next: string) => {
-    const copy = [...items];
-    copy[idx] = next;
-    onChange(copy);
-  };
-  const addItem = () => onChange([...items, '']);
-  const removeItem = (idx: number) => onChange(items.filter((_, i) => i !== idx));
+    const copy = [...items]
+    copy[idx] = next
+    onChange(copy)
+  }
+  const addItem = () => onChange([...items, ''])
+  const removeItem = (idx: number) => onChange(items.filter((_, i) => i !== idx))
 
   return (
     <div>
@@ -527,5 +525,5 @@ function ArrayFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         </button>
       </div>
     </div>
-  );
+  )
 }