create-nextblock 0.13.10 → 0.13.12

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>
+  );
+}

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

@@ -1,28 +1,28 @@
 // app/cms/blocks/editors/TextBlockEditor.tsx
 'use client';
 
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import dynamic from 'next/dynamic';
-import type { Extensions } from '@tiptap/core';
-import MediaPickerDialog from '../../media/components/MediaPickerDialog';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import type { Extensions } from '@tiptap/core';
+import MediaPickerDialog from '../../media/components/MediaPickerDialog';
 import { Label } from '@nextblock-cms/ui';
 import { BlockEditorProps } from '../components/BlockEditorModal';
-import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
-import { useCortexAiActive } from '../../components/CortexAiActiveContext';
-import {
-  createDynamicCustomBlockExtensions,
-  type DynamicCustomBlockEditorDefinition,
-} from '../../../../lib/editor/dynamic-extensions';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import {
+  createDynamicCustomBlockExtensions,
+  type DynamicCustomBlockEditorDefinition,
+} from '../../../../lib/editor/dynamic-extensions';
 
 // Props expected by NotionEditor
 type NotionEditorProps = {
   content: string;
   onChange: (html: string) => void;
-  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
-  className?: string;
-  showAiPrompt?: boolean;
-  dynamicExtensions?: Extensions;
-};
+  openImagePicker?: () => Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>;
+  className?: string;
+  showAiPrompt?: boolean;
+  dynamicExtensions?: Extensions;
+};
 
 // Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
 const NotionEditor = dynamic<NotionEditorProps>(
@@ -40,91 +40,91 @@ export default function TextBlockEditor({
   className,
 }: BlockEditorProps<Partial<TextBlockContent>>) {
   const labelId = useId();
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
-  const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
-  const isCortexAiActive = useCortexAiActive();
-  const resolverRef = useRef<null | ((v: any) => void)>(null);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [dynamicDefinitions, setDynamicDefinitions] = useState<DynamicCustomBlockEditorDefinition[]>([]);
+  const [dynamicDefinitionsLoaded, setDynamicDefinitionsLoaded] = useState(false);
+  const isCortexAiActive = useCortexAiActive();
+  const resolverRef = useRef<null | ((v: any) => void)>(null);
   const openImagePicker = useCallback(() => {
     setPickerOpen(true);
     return new Promise<{ src: string; alt?: string; width?: number | null; height?: number | null; blurDataURL?: string | null } | null>((resolve) => {
       resolverRef.current = resolve;
-    });
-  }, []);
-  const dynamicExtensions = useMemo(
-    () => createDynamicCustomBlockExtensions(dynamicDefinitions),
-    [dynamicDefinitions]
-  );
-
-  useEffect(() => {
-    let isActive = true;
-
-    async function loadDynamicDefinitions() {
-      try {
-        const response = await fetch('/api/custom-blocks/editor-definitions', {
-          cache: 'no-store',
-          method: 'GET',
-        });
-        const payload = (await response.json()) as {
-          definitions?: DynamicCustomBlockEditorDefinition[];
-          error?: string;
-        };
-
-        if (!isActive) {
-          return;
-        }
-
-        if (!response.ok) {
-          console.error(
-            '[TextBlockEditor] Failed to load custom block editor definitions:',
-            payload.error
-          );
-          setDynamicDefinitions([]);
-          return;
-        }
-
-        setDynamicDefinitions(payload.definitions ?? []);
-      } catch (error) {
-        if (isActive) {
-          console.error('[TextBlockEditor] Failed to load custom block editor definitions:', error);
-          setDynamicDefinitions([]);
-        }
-      } finally {
-        if (isActive) {
-          setDynamicDefinitionsLoaded(true);
-        }
-      }
-    }
-
-    void loadDynamicDefinitions();
-
-    return () => {
-      isActive = false;
-    };
-  }, []);
-
-  return (
+    });
+  }, []);
+  const dynamicExtensions = useMemo(
+    () => createDynamicCustomBlockExtensions(dynamicDefinitions),
+    [dynamicDefinitions]
+  );
+
+  useEffect(() => {
+    let isActive = true;
+
+    async function loadDynamicDefinitions() {
+      try {
+        const response = await fetch('/api/custom-blocks/editor-definitions', {
+          cache: 'no-store',
+          method: 'GET',
+        });
+        const payload = (await response.json()) as {
+          definitions?: DynamicCustomBlockEditorDefinition[];
+          error?: string;
+        };
+
+        if (!isActive) {
+          return;
+        }
+
+        if (!response.ok) {
+          console.error(
+            '[TextBlockEditor] Failed to load custom block editor definitions:',
+            payload.error
+          );
+          setDynamicDefinitions([]);
+          return;
+        }
+
+        setDynamicDefinitions(payload.definitions ?? []);
+      } catch (error) {
+        if (isActive) {
+          console.error('[TextBlockEditor] Failed to load custom block editor definitions:', error);
+          setDynamicDefinitions([]);
+        }
+      } finally {
+        if (isActive) {
+          setDynamicDefinitionsLoaded(true);
+        }
+      }
+    }
+
+    void loadDynamicDefinitions();
+
+    return () => {
+      isActive = false;
+    };
+  }, []);
+
+  return (
     <div className="h-full flex flex-col">
       <Label htmlFor={labelId} className="sr-only">
         Text Content
       </Label>
 
       <div id={labelId} role="group" aria-labelledby={labelId} className="flex-1 min-h-0 flex flex-col">
-        {dynamicDefinitionsLoaded ? (
-          <NotionEditor
-            key={dynamicDefinitions.map((definition) => definition.id).join('|') || 'static'}
-            content={content?.html_content ?? ''}
-            dynamicExtensions={dynamicExtensions}
-            onChange={(html) => onChange({ html_content: html })}
-            openImagePicker={openImagePicker}
-            className={className}
-            showAiPrompt={isCortexAiActive}
-          />
-        ) : (
-          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
-            Loading editor...
-          </div>
-        )}
+        {dynamicDefinitionsLoaded ? (
+          <NotionEditor
+            key={dynamicDefinitions.map((definition) => definition.id).join('|') || 'static'}
+            content={content?.html_content ?? ''}
+            dynamicExtensions={dynamicExtensions}
+            onChange={(html) => onChange({ html_content: html })}
+            openImagePicker={openImagePicker}
+            className={className}
+            showAiPrompt={isCortexAiActive}
+          />
+        ) : (
+          <div className="flex min-h-[500px] flex-1 items-center justify-center rounded-lg border bg-background text-sm text-muted-foreground">
+            Loading editor...
+          </div>
+        )}
 
         {/* Hidden controlled MediaPickerDialog for image selection */}
         <div className="sr-only" aria-hidden>