create-nextblock 0.12.9 → 0.12.12

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

@@ -1,6 +1,6 @@
-"use client";
-
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+"use client";
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { Editor } from '@tiptap/react';
 import Image from 'next/image';
 import { Image as ImageIconLucide, Search, CheckCircle } from 'lucide-react';
@@ -14,113 +14,113 @@ import {
   DialogFooter,
   DialogClose,
 } from '@nextblock-cms/ui';
-import { Input } from '@nextblock-cms/ui';
-import type { Database } from '@nextblock-cms/db';
-import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
-
-type Media = Database['public']['Tables']['media']['Row'];
-
-const MEDIA_REQUEST_TIMEOUT_MS = 8000;
-const MEDIA_LIBRARY_LIMIT = 20;
-
-function resolveMediaPreviewPath(media: Media) {
-  return media.file_path || media.object_key || null;
-}
-
-function resolveMediaPreviewSrc(path: string) {
-  return resolveMediaUrl(path);
-}
+import { Input } from '@nextblock-cms/ui';
+import type { Database } from '@nextblock-cms/db';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+
+type Media = Database['public']['Tables']['media']['Row'];
+
+const MEDIA_REQUEST_TIMEOUT_MS = 8000;
+const MEDIA_LIBRARY_LIMIT = 20;
+
+function resolveMediaPreviewPath(media: Media) {
+  return media.file_path || media.object_key || null;
+}
+
+function resolveMediaPreviewSrc(path: string) {
+  return resolveMediaUrl(path);
+}
 
 interface MediaLibraryModalProps {
   editor: Editor | null;
 }
 
-export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [mediaLibrary, setMediaLibrary] = useState<Media[]>([]);
-  const [isLoadingMedia, setIsLoadingMedia] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [searchTerm, setSearchTerm] = useState("");
-  const requestIdRef = useRef(0);
-
-  const fetchLibrary = useCallback(async () => {
-    if (!isModalOpen) return;
-    const requestId = ++requestIdRef.current;
-    setIsLoadingMedia(true);
-    setLoadError(null);
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    try {
-      const controller = new AbortController();
-      timeoutId = setTimeout(
-        () => controller.abort(new Error('Media library request timed out.')),
-        MEDIA_REQUEST_TIMEOUT_MS
-      );
-      const params = new URLSearchParams({
-        limit: MEDIA_LIBRARY_LIMIT.toString(),
-      });
-
-      if (searchTerm.trim()) {
-        params.set('q', searchTerm.trim());
-      }
-
-      const response = await fetch(`/api/media/library?${params.toString()}`, {
-        method: 'GET',
-        cache: 'no-store',
-        signal: controller.signal,
-      });
-      clearTimeout(timeoutId);
-
-      const payload = (await response.json()) as {
-        items?: Media[];
-        error?: string;
-      };
-
-      if (requestId !== requestIdRef.current) {
-        return;
-      }
-
-      if (!response.ok) {
-        console.error('Error fetching media library:', payload.error);
-        setMediaLibrary([]);
-        setLoadError(payload.error || 'We could not load the media library. Please retry.');
-        return;
-      }
-
-      setMediaLibrary(payload.items || []);
-    } catch (error: any) {
-      if (requestId !== requestIdRef.current) {
-        return;
-      }
-
-      console.error('Error fetching media library:', error);
-      setMediaLibrary([]);
-      if (error?.name === 'AbortError' || error?.message === 'Media library request timed out.') {
-        setLoadError('The media library took too long to respond. Please retry.');
-      } else {
-        setLoadError('We could not load the media library. Please retry.');
-      }
-    } finally {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      if (requestId === requestIdRef.current) {
-        setIsLoadingMedia(false);
-      }
-    }
-  }, [isModalOpen, searchTerm]);
+export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [mediaLibrary, setMediaLibrary] = useState<Media[]>([]);
+  const [isLoadingMedia, setIsLoadingMedia] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const requestIdRef = useRef(0);
+
+  const fetchLibrary = useCallback(async () => {
+    if (!isModalOpen) return;
+    const requestId = ++requestIdRef.current;
+    setIsLoadingMedia(true);
+    setLoadError(null);
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    try {
+      const controller = new AbortController();
+      timeoutId = setTimeout(
+        () => controller.abort(new Error('Media library request timed out.')),
+        MEDIA_REQUEST_TIMEOUT_MS
+      );
+      const params = new URLSearchParams({
+        limit: MEDIA_LIBRARY_LIMIT.toString(),
+      });
+
+      if (searchTerm.trim()) {
+        params.set('q', searchTerm.trim());
+      }
+
+      const response = await fetch(`/api/media/library?${params.toString()}`, {
+        method: 'GET',
+        cache: 'no-store',
+        signal: controller.signal,
+      });
+      clearTimeout(timeoutId);
+
+      const payload = (await response.json()) as {
+        items?: Media[];
+        error?: string;
+      };
+
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      if (!response.ok) {
+        console.error('Error fetching media library:', payload.error);
+        setMediaLibrary([]);
+        setLoadError(payload.error || 'We could not load the media library. Please retry.');
+        return;
+      }
+
+      setMediaLibrary(payload.items || []);
+    } catch (error: any) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      console.error('Error fetching media library:', error);
+      setMediaLibrary([]);
+      if (error?.name === 'AbortError' || error?.message === 'Media library request timed out.') {
+        setLoadError('The media library took too long to respond. Please retry.');
+      } else {
+        setLoadError('We could not load the media library. Please retry.');
+      }
+    } finally {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (requestId === requestIdRef.current) {
+        setIsLoadingMedia(false);
+      }
+    }
+  }, [isModalOpen, searchTerm]);
 
   useEffect(() => {
     fetchLibrary();
   }, [fetchLibrary]);
 
-  const handleSelectMedia = (mediaItem: Media) => {
-    const previewPath = resolveMediaPreviewPath(mediaItem);
-    const imageUrl = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
-    if (editor && mediaItem.file_type?.startsWith("image/") && imageUrl) {
-      editor.chain().focus().insertContent(`<img src="${imageUrl}" alt="${mediaItem.description || mediaItem.file_name}" />`).run();
-    }
-    setIsModalOpen(false);
-  };
+  const handleSelectMedia = (mediaItem: Media) => {
+    const previewPath = resolveMediaPreviewPath(mediaItem);
+    const imageUrl = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
+    if (editor && mediaItem.file_type?.startsWith("image/") && imageUrl) {
+      editor.chain().focus().insertContent(`<img src="${imageUrl}" alt="${mediaItem.description || mediaItem.file_name}" />`).run();
+    }
+    setIsModalOpen(false);
+  };
 
   return (
     <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
@@ -143,54 +143,54 @@ export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
           />
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         </div>
-        {isLoadingMedia ? (
-          <div className="flex-grow flex items-center justify-center"><p>Loading media...</p></div>
-        ) : loadError ? (
-          <div className="flex-grow flex flex-col items-center justify-center gap-3 text-center">
-            <p className="max-w-sm text-sm text-muted-foreground">{loadError}</p>
-            <Button type="button" variant="outline" size="sm" onClick={() => void fetchLibrary()}>
-              Retry
-            </Button>
-          </div>
-        ) : mediaLibrary.length === 0 ? (
-          <div className="flex-grow flex items-center justify-center"><p>No media found.</p></div>
-        ) : (
-          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-y-auto flex-grow pr-2">
-            {mediaLibrary.filter(m => m.file_type?.startsWith("image/")).map((media) => {
-              const previewPath = resolveMediaPreviewPath(media);
-              const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
-
-              return (
-                <button
-                  key={media.id}
-                  type="button"
-                  className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
-                  onClick={() => handleSelectMedia(media)}
-                >
-                  {previewSrc ? (
-                    <Image
-                      src={previewSrc}
-                      alt={media.description || media.file_name}
-                      width={200}
-                      height={200}
-                      className="h-full w-full object-cover"
-                    />
-                  ) : (
-                    <div className="flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground">
-                      Preview unavailable
-                    </div>
-                  )}
-                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
-                    <CheckCircle className="h-8 w-8 text-white" />
-                  </div>
-                   <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
-                      {media.file_name}
-                  </p>
-                </button>
-              );
-            })}
-          </div>
-        )}
+        {isLoadingMedia ? (
+          <div className="flex-grow flex items-center justify-center"><p>Loading media...</p></div>
+        ) : loadError ? (
+          <div className="flex-grow flex flex-col items-center justify-center gap-3 text-center">
+            <p className="max-w-sm text-sm text-muted-foreground">{loadError}</p>
+            <Button type="button" variant="outline" size="sm" onClick={() => void fetchLibrary()}>
+              Retry
+            </Button>
+          </div>
+        ) : mediaLibrary.length === 0 ? (
+          <div className="flex-grow flex items-center justify-center"><p>No media found.</p></div>
+        ) : (
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 overflow-y-auto flex-grow pr-2">
+            {mediaLibrary.filter(m => m.file_type?.startsWith("image/")).map((media) => {
+              const previewPath = resolveMediaPreviewPath(media);
+              const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
+
+              return (
+                <button
+                  key={media.id}
+                  type="button"
+                  className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+                  onClick={() => handleSelectMedia(media)}
+                >
+                  {previewSrc ? (
+                    <Image
+                      src={previewSrc}
+                      alt={media.description || media.file_name}
+                      width={200}
+                      height={200}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground">
+                      Preview unavailable
+                    </div>
+                  )}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
+                    <CheckCircle className="h-8 w-8 text-white" />
+                  </div>
+                   <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
+                      {media.file_name}
+                  </p>
+                </button>
+              );
+            })}
+          </div>
+        )}
         <DialogFooter className="mt-4">
           <DialogClose asChild>
             <Button type="button" variant="outline">Cancel</Button>
@@ -199,4 +199,4 @@ export const MediaLibraryModal = ({ editor }: MediaLibraryModalProps) => {
       </DialogContent>
     </Dialog>
   );
-};
+};

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