create-nextblock 0.2.31 → 0.2.34

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

@@ -129,13 +129,13 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
     debouncedSave(updatedBlock);
   };
 
-  const DynamicTextBlockEditor = dynamic(() => import('../editors/TextBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicHeadingBlockEditor = dynamic(() => import('../editors/HeadingBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicImageBlockEditor = dynamic(() => import('../editors/ImageBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicButtonBlockEditor = dynamic(() => import('../editors/ButtonBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicPostsGridBlockEditor = dynamic(() => import('../editors/PostsGridBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicVideoEmbedBlockEditor = dynamic(() => import('../editors/VideoEmbedBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
-  const DynamicSectionBlockEditor = dynamic(() => import('../editors/SectionBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicTextBlockEditor = dynamic(() => import('../editors/TextBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicHeadingBlockEditor = dynamic(() => import('../editors/HeadingBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicImageBlockEditor = dynamic(() => import('../editors/ImageBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicButtonBlockEditor = dynamic(() => import('../editors/ButtonBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicPostsGridBlockEditor = dynamic(() => import('../editors/PostsGridBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicVideoEmbedBlockEditor = dynamic(() => import('../editors/VideoEmbedBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
+  const DynamicSectionBlockEditor = dynamic(() => import('../editors/SectionBlockEditor').then(mod => mod.default), { loading: () => <p>Loading editor...</p> });
 
   useEffect(() => {
     if (editingNestedBlockInfo) {
@@ -444,7 +444,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
                   onContentChange={handleContentChange}
                   onDelete={async (blockIdToDelete) => {
                     startTransition(async () => {
-                      const result = await import("../actions").then(({ deleteBlock }) =>
+                      const result = await import("../actions").then(({ deleteBlock }) =>
                         deleteBlock(
                           blockIdToDelete,
                           parentType === "page" ? parentId : null,

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

@@ -22,16 +22,16 @@ export interface EditableBlockProps {
   className?: string;
 }
 
-export default function EditableBlock({
-  block,
-  onDelete,
-  onContentChange,
-  dragHandleProps,
-  onEditNestedBlock,
-  className,
-}: EditableBlockProps) {
-  void onEditNestedBlock;
-  // Move all hooks to the top before any conditional returns
+export default function EditableBlock({
+  block,
+  onDelete,
+  onContentChange,
+  dragHandleProps,
+  onEditNestedBlock,
+  className,
+}: EditableBlockProps) {
+  void onEditNestedBlock;
+  // Move all hooks to the top before any conditional returns
   const [isConfigPanelOpen, setIsConfigPanelOpen] = useState(false);
   const [editingBlock, setEditingBlock] = useState<Block | null>(null);
   const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | null>(null);

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

@@ -1,81 +1,81 @@
-// app/cms/blocks/editors/TextBlockEditor.tsx
-'use client';
-
-import React, { useId, useState, useRef, useCallback } from 'react';
-import dynamic from 'next/dynamic';
-import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog';
-import { Label } from '@nextblock-cms/ui';
-import { BlockEditorProps } from '../components/BlockEditorModal';
-
-// 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>;
-};
-
-// Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
-const NotionEditor = dynamic<NotionEditorProps>(
-  () => import('@nextblock-cms/editor').then((m) => m.NotionEditor),
-  { ssr: false }
-);
-
-export type TextBlockContent = {
-  html_content?: string;
-};
-
-export default function TextBlockEditor({
-  content,
-  onChange,
-}: BlockEditorProps<Partial<TextBlockContent>>) {
-  const labelId = useId();
-  const [pickerOpen, setPickerOpen] = useState(false);
-  const resolverRef = useRef<null | ((v: any) => void)>(null);
-  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
-  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;
-    });
-  }, []);
-
-  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">
-        <NotionEditor
-          content={content?.html_content ?? ''}
-          onChange={(html) => onChange({ html_content: html })}
-          openImagePicker={openImagePicker}
-        />
-
-        {/* Hidden controlled MediaPickerDialog for image selection */}
-        <div className="sr-only" aria-hidden>
-          <MediaPickerDialog
-            hideTrigger
-            open={pickerOpen}
-            onOpenChange={setPickerOpen}
-            title="Select or Upload Image"
-            accept={(m) => !!m.file_type?.startsWith('image/')}
-            onSelect={(media) => {
-              const src = `${R2_BASE_URL}/${media.object_key}`;
-              resolverRef.current?.({
-                src,
-                alt: media.description || media.file_name || undefined,
-                width: media.width ?? null,
-                height: media.height ?? null,
-                blurDataURL: media.blur_data_url ?? null,
-              });
-              resolverRef.current = null;
-              setPickerOpen(false);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
+// app/cms/blocks/editors/TextBlockEditor.tsx
+'use client';
+
+import React, { useId, useState, useRef, useCallback } from 'react';
+import dynamic from 'next/dynamic';
+import MediaPickerDialog from '@/app/cms/media/components/MediaPickerDialog';
+import { Label } from '@nextblock-cms/ui';
+import { BlockEditorProps } from '../components/BlockEditorModal';
+
+// 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>;
+};
+
+// Use the alias that resolves in your repo; if you mapped @nextblock-cms/editor, swap it here.
+const NotionEditor = dynamic<NotionEditorProps>(
+  () => import('@nextblock-cms/editor').then((m) => m.NotionEditor),
+  { ssr: false }
+);
+
+export type TextBlockContent = {
+  html_content?: string;
+};
+
+export default function TextBlockEditor({
+  content,
+  onChange,
+}: BlockEditorProps<Partial<TextBlockContent>>) {
+  const labelId = useId();
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const resolverRef = useRef<null | ((v: any) => void)>(null);
+  const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+  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;
+    });
+  }, []);
+
+  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">
+        <NotionEditor
+          content={content?.html_content ?? ''}
+          onChange={(html) => onChange({ html_content: html })}
+          openImagePicker={openImagePicker}
+        />
+
+        {/* Hidden controlled MediaPickerDialog for image selection */}
+        <div className="sr-only" aria-hidden>
+          <MediaPickerDialog
+            hideTrigger
+            open={pickerOpen}
+            onOpenChange={setPickerOpen}
+            title="Select or Upload Image"
+            accept={(m) => !!m.file_type?.startsWith('image/')}
+            onSelect={(media) => {
+              const src = `${R2_BASE_URL}/${media.object_key}`;
+              resolverRef.current?.({
+                src,
+                alt: media.description || media.file_name || undefined,
+                width: media.width ?? null,
+                height: media.height ?? null,
+                blurDataURL: media.blur_data_url ?? null,
+              });
+              resolverRef.current = null;
+              setPickerOpen(false);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/templates/nextblock-template/app/cms/media/actions.ts

@@ -201,24 +201,24 @@ export async function deleteMediaItem(mediaId: string, objectKey: string) {
         return encodedRedirect("error", "/cms/media", "Forbidden: Insufficient permissions.");
     }
 
-    const { DeleteObjectCommand } = await import("@aws-sdk/client-s3");
-    const { getS3Client } = await import("@nextblock-cms/utils/server");
-    const s3Client = await getS3Client();
-    const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
-
-    if (!R2_BUCKET_NAME) {
-      return encodedRedirect("error", "/cms/media", "R2 Bucket not configured for deletion.");
-    }
-    if (!s3Client) {
-      return encodedRedirect("error", "/cms/media", "R2 client is not configured for deletion.");
-    }
+    const { DeleteObjectCommand } = await import("@aws-sdk/client-s3");
+    const { getS3Client } = await import("@nextblock-cms/utils/server");
+    const s3Client = await getS3Client();
+    const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+
+    if (!R2_BUCKET_NAME) {
+      return encodedRedirect("error", "/cms/media", "R2 Bucket not configured for deletion.");
+    }
+    if (!s3Client) {
+      return encodedRedirect("error", "/cms/media", "R2 client is not configured for deletion.");
+    }
 
     try {
         const deleteCommand = new DeleteObjectCommand({
             Bucket: R2_BUCKET_NAME,
             Key: objectKey,
         });
-        await s3Client.send(deleteCommand);
+        await s3Client.send(deleteCommand);
     } catch (r2Error: unknown) {
         console.error("Error deleting from R2:", r2Error);
         // Decide if you want to proceed with DB deletion if R2 deletion fails
@@ -255,17 +255,17 @@ export async function deleteMultipleMediaItems(items: Array<{ id: string; object
     return { error: "No items selected for deletion." };
   }
 
-  const { DeleteObjectsCommand } = await import("@aws-sdk/client-s3"); // Use DeleteObjects for batch
-  const { getS3Client } = await import("@nextblock-cms/utils/server");
-  const s3Client = await getS3Client();
-  const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
-
-  if (!R2_BUCKET_NAME) {
-    return { error: "R2 Bucket not configured for deletion." };
-  }
-  if (!s3Client) {
-    return { error: "R2 client is not configured for deletion." };
-  }
+  const { DeleteObjectsCommand } = await import("@aws-sdk/client-s3"); // Use DeleteObjects for batch
+  const { getS3Client } = await import("@nextblock-cms/utils/server");
+  const s3Client = await getS3Client();
+  const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+
+  if (!R2_BUCKET_NAME) {
+    return { error: "R2 Bucket not configured for deletion." };
+  }
+  if (!s3Client) {
+    return { error: "R2 client is not configured for deletion." };
+  }
 
   const r2ObjectsToDelete = items.map(item => ({ Key: item.objectKey }));
   const itemIdsToDelete = items.map(item => item.id);
@@ -345,18 +345,18 @@ export async function moveMultipleMediaItems(
   };
   const folder = sanitizeFolder(destinationFolder);
 
-  const { CopyObjectCommand, DeleteObjectCommand, ListObjectsV2Command, HeadObjectCommand } = await import("@aws-sdk/client-s3");
-  const { getS3Client } = await import("@nextblock-cms/utils/server");
-  const s3Client = await getS3Client();
-  const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
-  const R2_PUBLIC_URL_BASE = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
-
-  if (!R2_BUCKET_NAME) {
-    return { error: "R2 Bucket not configured for move." };
-  }
-  if (!s3Client) {
-    return { error: "R2 client is not configured for move." };
-  }
+  const { CopyObjectCommand, DeleteObjectCommand, ListObjectsV2Command, HeadObjectCommand } = await import("@aws-sdk/client-s3");
+  const { getS3Client } = await import("@nextblock-cms/utils/server");
+  const s3Client = await getS3Client();
+  const R2_BUCKET_NAME = process.env.R2_BUCKET_NAME;
+  const R2_PUBLIC_URL_BASE = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+
+  if (!R2_BUCKET_NAME) {
+    return { error: "R2 Bucket not configured for move." };
+  }
+  if (!s3Client) {
+    return { error: "R2 client is not configured for move." };
+  }
 
   if (!items || items.length === 0) {
     return { error: "No items selected for move." };

package/templates/nextblock-template/app/cms/media/page.tsx

@@ -1,120 +1,120 @@
-// app/cms/media/page.tsx
-import React from 'react';
-import { createClient } from "@nextblock-cms/db/server";
-// import Link from "next/link"; // Unused, MediaGridClient handles item links
-import type { Database } from "@nextblock-cms/db";
-// DropdownMenu related imports are now handled within MediaGridClient or its sub-components if needed individually.
-
-type Media = Database['public']['Tables']['media']['Row'];
-// If page.tsx itself doesn't directly use DropdownMenu, these can be removed from here.
-// For now, assuming MediaGridClient handles its own dropdowns.
-import MediaUploadForm from "./components/MediaUploadForm";
-// MediaImage and DeleteMediaButtonClient are used by MediaGridClient, not directly here anymore.
-import MediaGridClient from "./components/MediaGridClient"; // Import the new client component
-import FolderNavigator from "./components/FolderNavigator";
-
-async function getMediaItems(folder?: string, folderPrefix?: string, search?: string): Promise<Media[]> {
-  const supabase = createClient();
-  let query = supabase
-    .from("media")
-    .select("*")
-    .order("created_at", { ascending: false });
-
-  if (folder && folder.trim()) {
-    query = query.eq('folder', folder);
-  } else if (folderPrefix && folderPrefix.trim()) {
-    query = query.ilike('folder', `${folderPrefix}%`);
-  }
-
-  if (search && search.trim()) {
-    const term = search.trim();
-    query = query.or(`file_name.ilike.%${term}%,description.ilike.%${term}%`);
-  }
-
-  const { data, error } = await query;
-
-  if (error) {
-    console.error("Error fetching media items:", error);
-    return [];
-  }
-  return data || [];
-}
-
-async function getDistinctFolders(search?: string): Promise<string[]> {
-  const supabase = createClient();
-  const { data, error } = await supabase
-    .from("media")
-    .select("folder")
-    .order("folder", { ascending: true });
-  if (error) {
-    console.error("Error fetching folders:", error);
-    return [];
-  }
-  let folders = (data || [])
-    .map((r: any) => r.folder)
-    .filter((f: any) => typeof f === 'string' && f.length > 0);
-  if (search && search.trim()) {
-    const t = search.trim().toLowerCase();
-    folders = folders.filter((f: string) => f.toLowerCase().includes(t));
-  }
-  // Ensure trailing slash for consistency
-  return Array.from(new Set(folders.map((f: string) => (f.endsWith('/') ? f : f + '/'))));
-}
-
-async function getFolderCounts(): Promise<Record<string, number>> {
-  const supabase = createClient();
-  const { data, error } = await supabase
-    .from("media")
-    .select("folder");
-  if (error) {
-    console.error("Error fetching folder counts:", error);
-    return {};
-  }
-  const counts: Record<string, number> = {};
-  (data || []).forEach((row: any) => {
-    const f: string | null = row.folder;
-    if (!f || typeof f !== 'string' || f.length === 0) return;
-    const norm = f.endsWith('/') ? f : `${f}/`;
-    // accumulate counts for each prefix in the path
-    const parts = norm.replace(/^\/+/, '').split('/').filter(Boolean);
-    let prefix = '';
-    for (let i = 0; i < parts.length; i++) {
-      prefix += (i === 0 ? '' : '/') + parts[i];
-      const key = `${prefix}/`;
-      counts[key] = (counts[key] || 0) + 1;
-    }
-  });
-  return counts;
-}
-
-const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
-
-export default async function CmsMediaLibraryPage(props: { searchParams?: Promise<{ folder?: string; folderPrefix?: string; q?: string }> }) {
-  const searchParams = (await props.searchParams) || {};
-  const selectedFolder = searchParams.folder;
-  const selectedFolderPrefix = searchParams.folderPrefix;
-  const searchQuery = searchParams.q;
-  const [mediaItems, folders, folderCounts] = await Promise.all([
-    getMediaItems(selectedFolder, selectedFolderPrefix, searchQuery),
-    getDistinctFolders(searchQuery),
-    getFolderCounts(),
-  ]);
-
-  return (
-    <div className="w-full max-w-screen-2xl mx-auto px-4 overflow-x-hidden space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-semibold">Media Library</h1>
-      </div>
-
-      <MediaUploadForm />
-
-      {/* Compact folder navigator with top tabs and subfolder pills */}
-      <div className="mt-2">
-        <FolderNavigator basePath="/cms/media" folders={folders} selectedFolder={selectedFolder || ''} selectedPrefix={selectedFolderPrefix || ''} counts={folderCounts} searchTerm={searchQuery || ''} />
-      </div>
-
-      {/* The media grid and empty state are now handled by MediaGridClient */}
-      <MediaGridClient initialMediaItems={mediaItems} r2BaseUrl={R2_BASE_URL} />
-    </div>
-  );
-}
+// app/cms/media/page.tsx
+import React from 'react';
+import { createClient } from "@nextblock-cms/db/server";
+// import Link from "next/link"; // Unused, MediaGridClient handles item links
+import type { Database } from "@nextblock-cms/db";
+// DropdownMenu related imports are now handled within MediaGridClient or its sub-components if needed individually.
+
+type Media = Database['public']['Tables']['media']['Row'];
+// If page.tsx itself doesn't directly use DropdownMenu, these can be removed from here.
+// For now, assuming MediaGridClient handles its own dropdowns.
+import MediaUploadForm from "./components/MediaUploadForm";
+// MediaImage and DeleteMediaButtonClient are used by MediaGridClient, not directly here anymore.
+import MediaGridClient from "./components/MediaGridClient"; // Import the new client component
+import FolderNavigator from "./components/FolderNavigator";
+
+async function getMediaItems(folder?: string, folderPrefix?: string, search?: string): Promise<Media[]> {
+  const supabase = createClient();
+  let query = supabase
+    .from("media")
+    .select("*")
+    .order("created_at", { ascending: false });
+
+  if (folder && folder.trim()) {
+    query = query.eq('folder', folder);
+  } else if (folderPrefix && folderPrefix.trim()) {
+    query = query.ilike('folder', `${folderPrefix}%`);
+  }
+
+  if (search && search.trim()) {
+    const term = search.trim();
+    query = query.or(`file_name.ilike.%${term}%,description.ilike.%${term}%`);
+  }
+
+  const { data, error } = await query;
+
+  if (error) {
+    console.error("Error fetching media items:", error);
+    return [];
+  }
+  return data || [];
+}
+
+async function getDistinctFolders(search?: string): Promise<string[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("media")
+    .select("folder")
+    .order("folder", { ascending: true });
+  if (error) {
+    console.error("Error fetching folders:", error);
+    return [];
+  }
+  let folders = (data || [])
+    .map((r: any) => r.folder)
+    .filter((f: any) => typeof f === 'string' && f.length > 0);
+  if (search && search.trim()) {
+    const t = search.trim().toLowerCase();
+    folders = folders.filter((f: string) => f.toLowerCase().includes(t));
+  }
+  // Ensure trailing slash for consistency
+  return Array.from(new Set(folders.map((f: string) => (f.endsWith('/') ? f : f + '/'))));
+}
+
+async function getFolderCounts(): Promise<Record<string, number>> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("media")
+    .select("folder");
+  if (error) {
+    console.error("Error fetching folder counts:", error);
+    return {};
+  }
+  const counts: Record<string, number> = {};
+  (data || []).forEach((row: any) => {
+    const f: string | null = row.folder;
+    if (!f || typeof f !== 'string' || f.length === 0) return;
+    const norm = f.endsWith('/') ? f : `${f}/`;
+    // accumulate counts for each prefix in the path
+    const parts = norm.replace(/^\/+/, '').split('/').filter(Boolean);
+    let prefix = '';
+    for (let i = 0; i < parts.length; i++) {
+      prefix += (i === 0 ? '' : '/') + parts[i];
+      const key = `${prefix}/`;
+      counts[key] = (counts[key] || 0) + 1;
+    }
+  });
+  return counts;
+}
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+export default async function CmsMediaLibraryPage(props: { searchParams?: Promise<{ folder?: string; folderPrefix?: string; q?: string }> }) {
+  const searchParams = (await props.searchParams) || {};
+  const selectedFolder = searchParams.folder;
+  const selectedFolderPrefix = searchParams.folderPrefix;
+  const searchQuery = searchParams.q;
+  const [mediaItems, folders, folderCounts] = await Promise.all([
+    getMediaItems(selectedFolder, selectedFolderPrefix, searchQuery),
+    getDistinctFolders(searchQuery),
+    getFolderCounts(),
+  ]);
+
+  return (
+    <div className="w-full max-w-screen-2xl mx-auto px-4 overflow-x-hidden space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-semibold">Media Library</h1>
+      </div>
+
+      <MediaUploadForm />
+
+      {/* Compact folder navigator with top tabs and subfolder pills */}
+      <div className="mt-2">
+        <FolderNavigator basePath="/cms/media" folders={folders} selectedFolder={selectedFolder || ''} selectedPrefix={selectedFolderPrefix || ''} counts={folderCounts} searchTerm={searchQuery || ''} />
+      </div>
+
+      {/* The media grid and empty state are now handled by MediaGridClient */}
+      <MediaGridClient initialMediaItems={mediaItems} r2BaseUrl={R2_BASE_URL} />
+    </div>
+  );
+}