@actuate-media/cms-admin 0.7.3 → 0.8.0

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

@@ -6,6 +6,8 @@ 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;
@@ -180,13 +182,13 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       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>
       );
 
@@ -236,26 +238,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       );
 
     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 (
@@ -277,12 +260,41 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       );
 
     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>
       );
 
@@ -350,3 +362,170 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       );
   }
 }
+
+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>
+  );
+}

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

@@ -207,6 +207,22 @@ export function PageBuilder({
   const canvasWidth = DEVICE_WIDTHS[deviceMode];
   const isConstrained = deviceMode !== 'desktop';
 
+  // `pageBuilder.previewTheme` lets consumers preview blocks with their
+  // brand fonts/colors/radii without baking them into the admin's tokens.
+  // We scope the CSS variables to the canvas wrapper so they never leak
+  // into the rest of the admin chrome.
+  const previewTheme = config?.pageBuilder?.previewTheme ?? {};
+  const previewStyle: Record<string, string> = {};
+  if (previewTheme.fontFamily) previewStyle['--preview-font-family'] = previewTheme.fontFamily;
+  if (previewTheme.headingFontFamily) previewStyle['--preview-heading-font-family'] = previewTheme.headingFontFamily;
+  if (previewTheme.primaryColor) previewStyle['--preview-primary'] = previewTheme.primaryColor;
+  if (previewTheme.secondaryColor) previewStyle['--preview-secondary'] = previewTheme.secondaryColor;
+  if (previewTheme.borderRadius) previewStyle['--preview-radius'] = previewTheme.borderRadius;
+  const canvasShellStyle: React.CSSProperties = {
+    ...previewStyle,
+    fontFamily: previewTheme.fontFamily ?? undefined,
+  };
+
   return (
     <ErrorBoundary>
     <div className="h-full flex flex-col bg-background overflow-hidden">
@@ -237,7 +253,8 @@ export function PageBuilder({
             style={{ width: canvasWidth }}
           >
             <div
-              className={`h-full bg-background ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
+              className={`h-full bg-background page-builder-canvas-shell ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
+              style={canvasShellStyle}
             >
               <BuilderCanvas
                 tree={tree}