@actuate-media/cms-admin 0.7.3 → 0.8.1

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

@@ -1,24 +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 { 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,
@@ -28,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 (
@@ -66,7 +68,7 @@ export function BlockEditor({
           Unknown block type: <code className="text-xs">{node.settings.blockType}</code>
         </p>
       </div>
-    );
+    )
   }
 
   return (
@@ -75,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>
@@ -148,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':
@@ -174,21 +173,21 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'richText':
       return (
         <div>
           <label className={LABEL_CLASS}>{label}</label>
-          <textarea
-            value={(value as string) ?? ''}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={definition.admin?.placeholder}
-            rows={4}
-            className={`${INPUT_CLASS} resize-y`}
-          />
+          <div className="rounded-md border border-input overflow-hidden bg-background">
+            <TipTapEditor
+              content={(value as string) ?? ''}
+              onChange={(html) => onChange(html)}
+              placeholder={definition.admin?.placeholder}
+            />
+          </div>
         </div>
-      );
+      )
 
     case 'url':
       return (
@@ -202,7 +201,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'number':
       return (
@@ -218,7 +217,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'boolean':
       return (
@@ -233,29 +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 (
-        <div>
-          <label className={LABEL_CLASS}>{label}</label>
-          <div className="flex gap-2">
-            <input
-              type="text"
-              value={(value as string) ?? ''}
-              onChange={(e) => onChange(e.target.value)}
-              placeholder="Select media..."
-              className={`${INPUT_CLASS} flex-1`}
-            />
-            <button
-              type="button"
-              className="px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
-            >
-              Browse
-            </button>
-          </div>
-        </div>
-      );
+      return <MediaFieldRenderer label={label} value={value} onChange={onChange} />
 
     case 'select':
       return (
@@ -274,17 +254,46 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             ))}
           </select>
         </div>
-      );
+      )
 
     case 'array':
+      return <ArrayFieldRenderer label={label} value={value} onChange={onChange} />
+
+    case 'json':
+      return <JsonFieldRenderer label={label} value={value} onChange={onChange} />
+
+    case 'date':
       return (
         <div>
           <label className={LABEL_CLASS}>{label}</label>
-          <div className="px-3 py-2 text-sm bg-muted border border-input rounded-md text-muted-foreground">
-            {Array.isArray(value) ? `${value.length} items` : '0 items'}
-          </div>
+          <input
+            type="date"
+            value={typeof value === 'string' && value ? value.slice(0, 10) : ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            className={INPUT_CLASS}
+          />
+        </div>
+      )
+
+    case 'slug':
+      return (
+        <div>
+          <label className={LABEL_CLASS}>{label}</label>
+          <input
+            type="text"
+            value={(value as string) ?? ''}
+            onChange={(e) => {
+              const slug = e.target.value
+                .toLowerCase()
+                .replace(/[^a-z0-9-]+/g, '-')
+                .replace(/^-+|-+$/g, '')
+              onChange(slug)
+            }}
+            placeholder={definition.admin?.placeholder ?? 'page-slug'}
+            className={INPUT_CLASS}
+          />
         </div>
-      );
+      )
 
     case 'relationship':
       return (
@@ -298,7 +307,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'email':
       return (
@@ -312,7 +321,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
 
     case 'color':
       return (
@@ -334,7 +343,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             />
           </div>
         </div>
-      );
+      )
 
     default:
       return (
@@ -347,6 +356,174 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
             className={INPUT_CLASS}
           />
         </div>
-      );
+      )
+  }
+}
+
+interface SimpleFieldProps {
+  label: string
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+/**
+ * Block-level media picker. Wires the cross-cutting MediaPickerModal so
+ * custom blocks declared with `type: 'media'` actually get a working
+ * 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)
+        : ''
+
+  return (
+    <div>
+      <label className={LABEL_CLASS}>{label}</label>
+      <div className="flex gap-2">
+        <input
+          type="text"
+          value={url}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://..."
+          className={`${INPUT_CLASS} flex-1`}
+        />
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
+        >
+          Browse
+        </button>
+      </div>
+      {url && /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/i.test(url) && (
+        <div className="mt-2 rounded-md border border-border overflow-hidden bg-muted">
+          {/* Plain img is fine here; admin only and we don't have next/image in scope. */}
+          <img src={url} alt="" className="w-full h-32 object-contain bg-checkered" />
+        </div>
+      )}
+      <MediaPickerModal
+        open={open}
+        onClose={() => setOpen(false)}
+        onSelect={(selectedUrl) => {
+          onChange(selectedUrl)
+          setOpen(false)
+        }}
+      />
+    </div>
+  )
+}
+
+/**
+ * JSON editor for free-form object/array fields. The textarea is the
+ * source of truth while the user is typing — we only commit a parsed
+ * value back upstream once the JSON is well-formed, otherwise the user
+ * sees a validation error inline. This prevents typing-induced state
+ * loss and keeps the UI usable for arrays of objects (a common shape
+ * for custom blocks).
+ */
+function JsonFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
+  const initial = useMemo(() => {
+    if (value === undefined || value === null) return ''
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return ''
+    }
+  }, [value])
+  const [draft, setDraft] = useState(initial)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleChange = (next: string) => {
+    setDraft(next)
+    if (next.trim() === '') {
+      setError(null)
+      onChange(undefined)
+      return
+    }
+    try {
+      onChange(JSON.parse(next))
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid JSON')
+    }
+  }
+
+  return (
+    <div>
+      <label className={LABEL_CLASS}>{label}</label>
+      <textarea
+        value={draft}
+        onChange={(e) => handleChange(e.target.value)}
+        rows={6}
+        spellCheck={false}
+        className={`${INPUT_CLASS} font-mono text-xs resize-y`}
+      />
+      {error && (
+        <p className="mt-1 text-xs text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Lightweight array editor — supports homogenous arrays of strings or
+ * objects. For block fields we deliberately keep this simple: full
+ * 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
+
+  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} />
+  }
+
+  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))
+
+  return (
+    <div>
+      <label className={LABEL_CLASS}>{label}</label>
+      <div className="space-y-2">
+        {items.map((item, idx) => (
+          <div key={idx} className="flex gap-2">
+            <input
+              type="text"
+              value={typeof item === 'string' ? item : ''}
+              onChange={(e) => updateItem(idx, e.target.value)}
+              className={`${INPUT_CLASS} flex-1`}
+            />
+            <button
+              type="button"
+              onClick={() => removeItem(idx)}
+              aria-label={`Remove item ${idx + 1}`}
+              className="px-2 py-2 text-xs text-destructive border border-input rounded-md hover:bg-destructive/10 transition-colors"
+            >
+              <Trash2 size={14} />
+            </button>
+          </div>
+        ))}
+        <button
+          type="button"
+          onClick={addItem}
+          className="w-full px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
+        >
+          + Add item
+        </button>
+      </div>
+    </div>
+  )
 }