create-nextblock 0.16.3 → 0.17.0

package/templates/nextblock-template/app/cms/blocks/components/CustomBlockEditorPreview.tsx

@@ -1,160 +1,160 @@
-"use client";
-
-import React, { useEffect, useMemo, useState } from "react";
-import { Loader2 } from "lucide-react";
-import { DynamicLayoutEngine } from "../../../../components/renderers/DynamicLayoutEngine";
-
-// Module-level cache so every block preview shares a single network request for
-// the custom block definitions instead of re-fetching per card.
-type EditorDefinition = {
-  slug: string;
-  name: string;
-  description?: string | null;
-  fields: any[];
-  layout_schema: any;
-};
-
-const definitionCache: { definitions: EditorDefinition[]; promise: Promise<EditorDefinition[]> | null } = {
-  definitions: [],
-  promise: null,
-};
-
-function loadCustomBlockDefinitions(): Promise<EditorDefinition[]> {
-  if (definitionCache.definitions.length > 0) {
-    return Promise.resolve(definitionCache.definitions);
-  }
-  if (!definitionCache.promise) {
-    definitionCache.promise = fetch("/api/custom-blocks/editor-definitions")
-      .then((res) => (res.ok ? res.json() : { definitions: [] }))
-      .then((data) => {
-        definitionCache.definitions = (data?.definitions ?? []) as EditorDefinition[];
-        return definitionCache.definitions;
-      })
-      .catch(() => []);
-  }
-  return definitionCache.promise;
-}
-
-function useCustomBlockDefinition(slug: string) {
-  const [definitions, setDefinitions] = useState<EditorDefinition[]>(definitionCache.definitions);
-  const [loading, setLoading] = useState(definitionCache.definitions.length === 0);
-
-  useEffect(() => {
-    let cancelled = false;
-    loadCustomBlockDefinitions().then((defs) => {
-      if (!cancelled) {
-        setDefinitions(defs);
-        setLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const definition = useMemo(
-    () => definitions.find((def) => def.slug === slug) ?? null,
-    [definitions, slug]
-  );
-
-  return { definition, loading };
-}
-
-// Resolve db_relation field values into records so the preview matches the front
-// end (including relation images), mirroring the server-side hydration.
-function useResolvedRelations(definition: EditorDefinition | null, content: Record<string, any>) {
-  const [resolvedRelations, setResolvedRelations] = useState<Record<string, any>>({});
-
-  const relationSignature = useMemo(() => {
-    if (!definition) return "";
-    return definition.fields
-      .filter((field) => field.type === "db_relation")
-      .map((field) => `${field.key}:${JSON.stringify(content?.[field.key] ?? null)}`)
-      .join("|");
-  }, [definition, content]);
-
-  useEffect(() => {
-    if (!definition) return;
-    const relationFields = definition.fields.filter((field) => field.type === "db_relation");
-    if (relationFields.length === 0) {
-      setResolvedRelations({});
-      return;
-    }
-
-    let cancelled = false;
-    (async () => {
-      const next: Record<string, any> = {};
-      await Promise.all(
-        relationFields.map(async (field) => {
-          const raw = content?.[field.key];
-          const values = Array.isArray(raw) ? raw : raw ? [raw] : [];
-          if (values.length === 0) return;
-
-          const params = new URLSearchParams({
-            table: field.table,
-            valueColumn: field.value_column || "id",
-            displayColumn: field.display_column || "title",
-            values: values.map(String).join(","),
-            limit: String(values.length),
-          });
-
-          try {
-            const res = await fetch(`/api/custom-blocks/db-relations?${params.toString()}`, {
-              cache: "no-store",
-            });
-            if (!res.ok) return;
-            const data = await res.json();
-            const items = data?.items ?? [];
-            next[field.key] = field.multiple ? items : items[0] ?? null;
-          } catch {
-            // Leave the relation unresolved; the engine falls back gracefully.
-          }
-        })
-      );
-
-      if (!cancelled) {
-        setResolvedRelations(next);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [definition, relationSignature]);
-
-  return resolvedRelations;
-}
-
-export interface CustomBlockEditorPreviewProps {
-  blockType: string;
-  content: Record<string, any>;
-  fallback: React.ReactNode;
-}
-
-export function CustomBlockEditorPreview({ blockType, content, fallback }: CustomBlockEditorPreviewProps) {
-  const { definition, loading } = useCustomBlockDefinition(blockType);
-  const resolvedRelations = useResolvedRelations(definition, content);
-
-  if (!definition) {
-    if (loading) {
-      return (
-        <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
-          <Loader2 className="h-3.5 w-3.5 animate-spin" />
-          Loading block preview…
-        </div>
-      );
-    }
-    return <>{fallback}</>;
-  }
-
-  return (
-    // pointer-events-none lets clicks fall through to the card so editing still opens.
-    <div className="pointer-events-none w-full overflow-hidden">
-      <DynamicLayoutEngine
-        fields={definition.fields}
-        layoutSchema={definition.layout_schema}
-        data={{ ...(content || {}), resolved_relations: resolvedRelations }}
-      />
-    </div>
-  );
-}
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { DynamicLayoutEngine } from "../../../../components/renderers/DynamicLayoutEngine";
+
+// Module-level cache so every block preview shares a single network request for
+// the custom block definitions instead of re-fetching per card.
+type EditorDefinition = {
+  slug: string;
+  name: string;
+  description?: string | null;
+  fields: any[];
+  layout_schema: any;
+};
+
+const definitionCache: { definitions: EditorDefinition[]; promise: Promise<EditorDefinition[]> | null } = {
+  definitions: [],
+  promise: null,
+};
+
+function loadCustomBlockDefinitions(): Promise<EditorDefinition[]> {
+  if (definitionCache.definitions.length > 0) {
+    return Promise.resolve(definitionCache.definitions);
+  }
+  if (!definitionCache.promise) {
+    definitionCache.promise = fetch("/api/custom-blocks/editor-definitions")
+      .then((res) => (res.ok ? res.json() : { definitions: [] }))
+      .then((data) => {
+        definitionCache.definitions = (data?.definitions ?? []) as EditorDefinition[];
+        return definitionCache.definitions;
+      })
+      .catch(() => []);
+  }
+  return definitionCache.promise;
+}
+
+function useCustomBlockDefinition(slug: string) {
+  const [definitions, setDefinitions] = useState<EditorDefinition[]>(definitionCache.definitions);
+  const [loading, setLoading] = useState(definitionCache.definitions.length === 0);
+
+  useEffect(() => {
+    let cancelled = false;
+    loadCustomBlockDefinitions().then((defs) => {
+      if (!cancelled) {
+        setDefinitions(defs);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const definition = useMemo(
+    () => definitions.find((def) => def.slug === slug) ?? null,
+    [definitions, slug]
+  );
+
+  return { definition, loading };
+}
+
+// Resolve db_relation field values into records so the preview matches the front
+// end (including relation images), mirroring the server-side hydration.
+function useResolvedRelations(definition: EditorDefinition | null, content: Record<string, any>) {
+  const [resolvedRelations, setResolvedRelations] = useState<Record<string, any>>({});
+
+  const relationSignature = useMemo(() => {
+    if (!definition) return "";
+    return definition.fields
+      .filter((field) => field.type === "db_relation")
+      .map((field) => `${field.key}:${JSON.stringify(content?.[field.key] ?? null)}`)
+      .join("|");
+  }, [definition, content]);
+
+  useEffect(() => {
+    if (!definition) return;
+    const relationFields = definition.fields.filter((field) => field.type === "db_relation");
+    if (relationFields.length === 0) {
+      setResolvedRelations({});
+      return;
+    }
+
+    let cancelled = false;
+    (async () => {
+      const next: Record<string, any> = {};
+      await Promise.all(
+        relationFields.map(async (field) => {
+          const raw = content?.[field.key];
+          const values = Array.isArray(raw) ? raw : raw ? [raw] : [];
+          if (values.length === 0) return;
+
+          const params = new URLSearchParams({
+            table: field.table,
+            valueColumn: field.value_column || "id",
+            displayColumn: field.display_column || "title",
+            values: values.map(String).join(","),
+            limit: String(values.length),
+          });
+
+          try {
+            const res = await fetch(`/api/custom-blocks/db-relations?${params.toString()}`, {
+              cache: "no-store",
+            });
+            if (!res.ok) return;
+            const data = await res.json();
+            const items = data?.items ?? [];
+            next[field.key] = field.multiple ? items : items[0] ?? null;
+          } catch {
+            // Leave the relation unresolved; the engine falls back gracefully.
+          }
+        })
+      );
+
+      if (!cancelled) {
+        setResolvedRelations(next);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [definition, relationSignature]);
+
+  return resolvedRelations;
+}
+
+export interface CustomBlockEditorPreviewProps {
+  blockType: string;
+  content: Record<string, any>;
+  fallback: React.ReactNode;
+}
+
+export function CustomBlockEditorPreview({ blockType, content, fallback }: CustomBlockEditorPreviewProps) {
+  const { definition, loading } = useCustomBlockDefinition(blockType);
+  const resolvedRelations = useResolvedRelations(definition, content);
+
+  if (!definition) {
+    if (loading) {
+      return (
+        <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          Loading block preview…
+        </div>
+      );
+    }
+    return <>{fallback}</>;
+  }
+
+  return (
+    // pointer-events-none lets clicks fall through to the card so editing still opens.
+    <div className="pointer-events-none w-full overflow-hidden">
+      <DynamicLayoutEngine
+        fields={definition.fields}
+        layoutSchema={definition.layout_schema}
+        data={{ ...(content || {}), resolved_relations: resolvedRelations }}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/blocks/editors/DynamicCustomBlockEditor.tsx

@@ -1,167 +1,167 @@
-// app/cms/blocks/editors/DynamicCustomBlockEditor.tsx
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { Label } from "@nextblock-cms/ui";
-import { Input } from "@nextblock-cms/ui";
-import { Textarea } from "@nextblock-cms/ui";
-import { BlockEditorProps } from "../components/BlockEditorModal";
-import { DBRelationSelect } from "../../custom-blocks/components/DBRelationSelect";
-import { ImageR2Picker } from "../../custom-blocks/components/ImageR2Picker";
-import type { CustomBlockField } from "@nextblock-cms/utils";
-
-type CustomBlockDefinitionResponse = {
-  id: string;
-  slug: string;
-  name: string;
-  fields: CustomBlockField[];
-};
-
-// Fallback raw-JSON editor for block types with no custom definition.
-function JsonFallbackEditor({
-  content,
-  onChange,
-}: {
-  content: Record<string, any>;
-  onChange: (next: any) => void;
-}) {
-  const [value, setValue] = useState(() => JSON.stringify(content ?? {}, null, 2));
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    setValue(JSON.stringify(content ?? {}, null, 2));
-    setError(null);
-  }, [content]);
-
-  return (
-    <div className="space-y-2 p-4 border rounded-xl bg-card/50">
-      <Label htmlFor="custom-block-json-fallback" className="text-xs font-semibold">
-        Block Content (JSON)
-      </Label>
-      <Textarea
-        id="custom-block-json-fallback"
-        value={value}
-        spellCheck={false}
-        className="min-h-[320px] font-mono text-xs"
-        onChange={(e) => {
-          const next = e.target.value;
-          setValue(next);
-          try {
-            onChange(JSON.parse(next));
-            setError(null);
-          } catch (parseError) {
-            setError(parseError instanceof Error ? parseError.message : "Invalid JSON");
-          }
-        }}
-      />
-      {error && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}
-
-export default function DynamicCustomBlockEditor({
-  block,
-  content,
-  onChange,
-}: BlockEditorProps<Record<string, any>>) {
-  const [definition, setDefinition] = useState<CustomBlockDefinitionResponse | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function loadDefinition() {
-      try {
-        const response = await fetch("/api/custom-blocks/editor-definitions");
-        if (response.ok) {
-          const payload = await response.json();
-          const blockType = block.block_type || (block as any).type;
-          const def = payload.definitions?.find((d: any) => d.slug === blockType);
-          if (def) {
-            setDefinition(def);
-          }
-        }
-      } catch (err) {
-        console.error("Failed to load custom block definition for editor:", err);
-      } finally {
-        setLoading(false);
-      }
-    }
-    loadDefinition();
-  }, [block.block_type, (block as any).type]);
-
-  if (loading) {
-    return <div className="p-4 text-center text-sm text-muted-foreground">Loading custom block settings...</div>;
-  }
-
-  // No matching custom block definition (e.g. a non-custom block type routed
-  // here as a fallback). Degrade gracefully to a raw JSON editor instead of an
-  // error so content stays editable.
-  if (!definition) {
-    return <JsonFallbackEditor content={content} onChange={onChange} />;
-  }
-
-  const handleFieldChange = (key: string, val: any) => {
-    onChange({ ...content, [key]: val });
-  };
-
-  return (
-    <div className="space-y-4 p-4 border rounded-xl bg-card/50">
-      <div className="pb-2 border-b">
-        <h4 className="text-sm font-bold text-slate-800 dark:text-slate-200">{definition.name}</h4>
-        <p className="text-xs text-muted-foreground">Custom Block Properties</p>
-      </div>
-
-      {definition.fields.map((field) => {
-        const fieldVal = content[field.key];
-        const fieldId = `custom-block-editor-${definition.slug}-${field.key}`;
-
-        return (
-          <div key={field.key} className="space-y-1 pt-2">
-            <Label htmlFor={fieldId} className="text-xs font-semibold text-slate-700 dark:text-slate-300">
-              {field.label} {field.required && <span className="text-destructive">*</span>}
-            </Label>
-            
-            {field.type === "rich-text" ? (
-              <Textarea
-                id={fieldId}
-                value={fieldVal || ""}
-                onChange={(e) => handleFieldChange(field.key, e.target.value)}
-                placeholder={field.placeholder}
-                className="min-h-24 text-sm"
-              />
-            ) : field.type === "image_r2" ? (
-              <ImageR2Picker
-                value={fieldVal && typeof fieldVal === "object" && "url" in fieldVal ? fieldVal : null}
-                onChange={(val) => handleFieldChange(field.key, val)}
-                accept={field.accept}
-                maxBytes={field.max_bytes}
-              />
-            ) : field.type === "db_relation" ? (
-              <DBRelationSelect
-                table={field.table}
-                value={
-                  field.multiple
-                    ? Array.isArray(fieldVal) ? fieldVal.map(String) : []
-                    : fieldVal ? String(fieldVal) : null
-                }
-                onChange={(val) => handleFieldChange(field.key, val)}
-                multiple={field.multiple}
-                displayColumn={field.display_column}
-                valueColumn={field.value_column}
-                filters={field.filters}
-              />
-            ) : (
-              <Input
-                id={fieldId}
-                type="text"
-                value={fieldVal || ""}
-                onChange={(e) => handleFieldChange(field.key, e.target.value)}
-                placeholder={field.placeholder}
-                className="h-9"
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+// app/cms/blocks/editors/DynamicCustomBlockEditor.tsx
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Label } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Textarea } from "@nextblock-cms/ui";
+import { BlockEditorProps } from "../components/BlockEditorModal";
+import { DBRelationSelect } from "../../custom-blocks/components/DBRelationSelect";
+import { ImageR2Picker } from "../../custom-blocks/components/ImageR2Picker";
+import type { CustomBlockField } from "@nextblock-cms/utils";
+
+type CustomBlockDefinitionResponse = {
+  id: string;
+  slug: string;
+  name: string;
+  fields: CustomBlockField[];
+};
+
+// Fallback raw-JSON editor for block types with no custom definition.
+function JsonFallbackEditor({
+  content,
+  onChange,
+}: {
+  content: Record<string, any>;
+  onChange: (next: any) => void;
+}) {
+  const [value, setValue] = useState(() => JSON.stringify(content ?? {}, null, 2));
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setValue(JSON.stringify(content ?? {}, null, 2));
+    setError(null);
+  }, [content]);
+
+  return (
+    <div className="space-y-2 p-4 border rounded-xl bg-card/50">
+      <Label htmlFor="custom-block-json-fallback" className="text-xs font-semibold">
+        Block Content (JSON)
+      </Label>
+      <Textarea
+        id="custom-block-json-fallback"
+        value={value}
+        spellCheck={false}
+        className="min-h-[320px] font-mono text-xs"
+        onChange={(e) => {
+          const next = e.target.value;
+          setValue(next);
+          try {
+            onChange(JSON.parse(next));
+            setError(null);
+          } catch (parseError) {
+            setError(parseError instanceof Error ? parseError.message : "Invalid JSON");
+          }
+        }}
+      />
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+export default function DynamicCustomBlockEditor({
+  block,
+  content,
+  onChange,
+}: BlockEditorProps<Record<string, any>>) {
+  const [definition, setDefinition] = useState<CustomBlockDefinitionResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadDefinition() {
+      try {
+        const response = await fetch("/api/custom-blocks/editor-definitions");
+        if (response.ok) {
+          const payload = await response.json();
+          const blockType = block.block_type || (block as any).type;
+          const def = payload.definitions?.find((d: any) => d.slug === blockType);
+          if (def) {
+            setDefinition(def);
+          }
+        }
+      } catch (err) {
+        console.error("Failed to load custom block definition for editor:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadDefinition();
+  }, [block.block_type, (block as any).type]);
+
+  if (loading) {
+    return <div className="p-4 text-center text-sm text-muted-foreground">Loading custom block settings...</div>;
+  }
+
+  // No matching custom block definition (e.g. a non-custom block type routed
+  // here as a fallback). Degrade gracefully to a raw JSON editor instead of an
+  // error so content stays editable.
+  if (!definition) {
+    return <JsonFallbackEditor content={content} onChange={onChange} />;
+  }
+
+  const handleFieldChange = (key: string, val: any) => {
+    onChange({ ...content, [key]: val });
+  };
+
+  return (
+    <div className="space-y-4 p-4 border rounded-xl bg-card/50">
+      <div className="pb-2 border-b">
+        <h4 className="text-sm font-bold text-slate-800 dark:text-slate-200">{definition.name}</h4>
+        <p className="text-xs text-muted-foreground">Custom Block Properties</p>
+      </div>
+
+      {definition.fields.map((field) => {
+        const fieldVal = content[field.key];
+        const fieldId = `custom-block-editor-${definition.slug}-${field.key}`;
+
+        return (
+          <div key={field.key} className="space-y-1 pt-2">
+            <Label htmlFor={fieldId} className="text-xs font-semibold text-slate-700 dark:text-slate-300">
+              {field.label} {field.required && <span className="text-destructive">*</span>}
+            </Label>
+            
+            {field.type === "rich-text" ? (
+              <Textarea
+                id={fieldId}
+                value={fieldVal || ""}
+                onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                placeholder={field.placeholder}
+                className="min-h-24 text-sm"
+              />
+            ) : field.type === "image_r2" ? (
+              <ImageR2Picker
+                value={fieldVal && typeof fieldVal === "object" && "url" in fieldVal ? fieldVal : null}
+                onChange={(val) => handleFieldChange(field.key, val)}
+                accept={field.accept}
+                maxBytes={field.max_bytes}
+              />
+            ) : field.type === "db_relation" ? (
+              <DBRelationSelect
+                table={field.table}
+                value={
+                  field.multiple
+                    ? Array.isArray(fieldVal) ? fieldVal.map(String) : []
+                    : fieldVal ? String(fieldVal) : null
+                }
+                onChange={(val) => handleFieldChange(field.key, val)}
+                multiple={field.multiple}
+                displayColumn={field.display_column}
+                valueColumn={field.value_column}
+                filters={field.filters}
+              />
+            ) : (
+              <Input
+                id={fieldId}
+                type="text"
+                value={fieldVal || ""}
+                onChange={(e) => handleFieldChange(field.key, e.target.value)}
+                placeholder={field.placeholder}
+                className="h-9"
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}