create-nextblock 0.2.30 → 0.2.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextblock",
-  "version": "0.2.30",
+  "version": "0.2.33",
   "description": "",
   "main": "index.js",
   "bin": {

package/scripts/sync-template.js

@@ -36,16 +36,17 @@ const UI_PROXY_MODULES = [
   'ui',
 ];
 
-const IGNORED_SEGMENTS = new Set([
-  'node_modules',
-  '.git',
-  '.next',
-  'dist',
-  'tmp',
-  'coverage',
-  'backup',
-  'backups',
-]);
+const IGNORED_SEGMENTS = new Set([
+  'node_modules',
+  '.git',
+  '.next',
+  'dist',
+  'tmp',
+  'coverage',
+  'backup',
+  'backups',
+]);
+
 
 async function ensureTemplateSync() {
   const sourceExists = await fs.pathExists(SOURCE_DIR);
@@ -64,7 +65,7 @@ async function ensureTemplateSync() {
   );
 
   await fs.ensureDir(TARGET_DIR);
-  await fs.emptyDir(TARGET_DIR);
+  await emptyDirWithRetry(TARGET_DIR);
 
   await fs.copy(SOURCE_DIR, TARGET_DIR, {
     dereference: true,
@@ -79,10 +80,10 @@ async function ensureTemplateSync() {
     },
   });
 
-  await ensureEnvExample();
-  await ensureTemplateGitignore();
-  await ensureGlobalStyles();
-  await ensureClientTranslations();
+  await ensureEnvExample();
+  await ensureTemplateGitignore();
+  await ensureGlobalStyles();
+  await ensureClientTranslations();
   await sanitizeBlockEditorImports();
   await sanitizeUiImports();
   await ensureUiProxies();
@@ -92,7 +93,7 @@ async function ensureTemplateSync() {
   console.log(chalk.green('Template sync complete.'));
 }
 
-async function ensureEnvExample() {
+async function ensureEnvExample() {
   const envTargets = [
     resolve(REPO_ROOT, '.env.example'),
     resolve(REPO_ROOT, '.env.exemple'),
@@ -118,42 +119,42 @@ NEXT_PUBLIC_URL=http://localhost:3000
 `;
 
   await fs.writeFile(destination, placeholder);
-}
-
-async function ensureTemplateGitignore() {
-  const destination = resolve(TARGET_DIR, '.gitignore');
-  const content = `.DS_Store
-node_modules
-dist
-.next
-out
-build
-coverage
-*.log
-logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-.env
-.env.*
-.env.local
-.env.development.local
-.env.production.local
-.env.test.local
-
-.vscode
-.idea
-.swp
-*.sw?
-
-supabase/.temp
-supabase/.branches
-`;
-  await fs.outputFile(destination, content);
-}
-
+}
+
+async function ensureTemplateGitignore() {
+  const destination = resolve(TARGET_DIR, '.gitignore');
+  const content = `.DS_Store
+node_modules
+dist
+.next
+out
+build
+coverage
+*.log
+logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+.env
+.env.*
+.env.local
+.env.development.local
+.env.production.local
+.env.test.local
+
+.vscode
+.idea
+.swp
+*.sw?
+
+supabase/.temp
+supabase/.branches
+`;
+  await fs.outputFile(destination, content);
+}
+
 async function ensureGlobalStyles() {
   const destination = resolve(TARGET_DIR, 'app/globals.css');
 
@@ -312,3 +313,20 @@ ensureTemplateSync().catch((error) => {
   console.error(chalk.red(error instanceof Error ? error.message : String(error)));
   process.exit(1);
 });
+
+async function emptyDirWithRetry(dir, retries = 5, delay = 1000) {
+  for (let i = 0; i < retries; i++) {
+    try {
+      await fs.emptyDir(dir);
+      return;
+    } catch (err) {
+      if (i === retries - 1) throw err;
+      if (err.code === 'EBUSY' || err.code === 'EPERM') {
+        console.log(chalk.yellow(`Locked file encountered. Retrying in ${delay}ms... (${i + 1}/${retries})`));
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      } else {
+        throw err;
+      }
+    }
+  }
+}

package/templates/nextblock-template/app/[slug]/page.tsx

@@ -1,18 +1,18 @@
 // app/[slug]/page.tsx
 import React from 'react';
 import { getSsgSupabaseClient } from "@nextblock-cms/db/server";
-import { notFound } from "next/navigation";
-import type { Metadata } from 'next';
+import { notFound } from "next/navigation";
+import type { Metadata } from 'next';
 import PageClientContent from "./PageClientContent";
-import { getPageDataBySlug } from "./page.utils";
-import BlockRenderer from "../../components/BlockRenderer";
-import type { HeroBlockContent } from '../../lib/blocks/blockRegistry';
-import { cookies, headers } from "next/headers";
+import { getPageDataBySlug } from "./page.utils";
+import BlockRenderer from "../../components/BlockRenderer";
+import type { HeroBlockContent } from '../../lib/blocks/blockRegistry';
+import { cookies, headers } from "next/headers";
 
-export const dynamicParams = true;
-export const revalidate = 360;
-export const dynamic = 'force-dynamic'; // keeps per-request locale; paired with short revalidate
-export const fetchCache = 'force-no-store';
+export const dynamicParams = true;
+export const revalidate = 360;
+export const dynamic = 'force-dynamic'; // keeps per-request locale; paired with short revalidate
+export const fetchCache = 'force-no-store';
 
 interface ResolvedPageParams {
   slug: string;
@@ -40,30 +40,30 @@ export async function generateStaticParams(): Promise<ResolvedPageParams[]> {
     console.error("SSG: Error fetching page slugs for static params:", error);
     return [];
   }
-  return pages.map((page) => ({ slug: page.slug }));
+  return pages.map((page: { slug: string }) => ({ slug: page.slug }));
 }
 
-export async function generateMetadata(
-  { params: paramsPromise }: PageProps,
-): Promise<Metadata> {
-  const params = await paramsPromise;
-  let preferredLocale: string | undefined;
-  try {
-    const store = await cookies();
-    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
-  } catch {
-    preferredLocale = undefined;
-  }
-  if (!preferredLocale) {
-    try {
-      const hdrs = await headers();
-      const al = hdrs.get("accept-language");
-      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
-    } catch {
-      // ignore header lookup errors
-    }
-  }
-  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
+export async function generateMetadata(
+  { params: paramsPromise }: PageProps,
+): Promise<Metadata> {
+  const params = await paramsPromise;
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore header lookup errors
+    }
+  }
+  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
 
   if (!pageData) {
     return { title: "Page Not Found" };
@@ -87,8 +87,8 @@ export async function generateMetadata(
 
   const alternates: { [key: string]: string } = {};
   if (languages && pageTranslations) {
-    pageTranslations.forEach(pt => {
-      const langInfo = languages.find(l => l.id === pt.language_id);
+    pageTranslations.forEach((pt: { language_id: string; slug: string }) => {
+      const langInfo = languages.find((l: { id: string; code: string }) => l.id === pt.language_id);
       if (langInfo) {
         alternates[langInfo.code] = `${siteUrl}/${pt.slug}`;
       }
@@ -105,25 +105,25 @@ export async function generateMetadata(
   };
 }
 
-export default async function DynamicPage({ params: paramsPromise }: PageProps) {
-  const params = await paramsPromise;
-  let preferredLocale: string | undefined;
-  try {
-    const store = await cookies();
-    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
-  } catch {
-    preferredLocale = undefined;
-  }
-  if (!preferredLocale) {
-    try {
-      const hdrs = await headers();
-      const al = hdrs.get("accept-language");
-      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
-    } catch {
-      // ignore header lookup errors
-    }
-  }
-  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
+export default async function DynamicPage({ params: paramsPromise }: PageProps) {
+  const params = await paramsPromise;
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore header lookup errors
+    }
+  }
+  const pageData = await getPageDataBySlug(params.slug, preferredLocale);
 
   if (!pageData) {
     notFound();
@@ -151,7 +151,7 @@ export default async function DynamicPage({ params: paramsPromise }: PageProps)
   const r2BaseUrl = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
 
   if (pageData && pageData.blocks && r2BaseUrl) {
-    const heroBlock = pageData.blocks.find(block => block.block_type === 'hero');
+    const heroBlock = pageData.blocks.find((block: { block_type: string; content: unknown }) => block.block_type === 'hero');
     if (heroBlock) {
       const heroContent = heroBlock.content as unknown as HeroBlockContent;
       if (
@@ -177,4 +177,4 @@ export default async function DynamicPage({ params: paramsPromise }: PageProps)
       </PageClientContent>
     </>
   );
-}
+}

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

@@ -5,22 +5,22 @@ import { createClient } from "@nextblock-cms/db/server";
 import { revalidatePath } from "next/cache";
 import type { Database, Json } from "@nextblock-cms/db";
 import { getInitialContent, isValidBlockType } from "../../../lib/blocks/blockRegistry";
-import { getFullPageContent, getFullPostContent } from "../revisions/utils";
+import { getFullPageContent, getFullPostContent, type FullPageContent, type FullPostContent } from "../revisions/utils";
 import { createPageRevision, createPostRevision } from "../revisions/service";
 
 type Block = Database['public']['Tables']['blocks']['Row'];
 type BlockType = Database['public']['Tables']['blocks']['Row']['block_type'];
 
 // Helper to verify user can edit the parent (page/post)
-async function canEditParent(
-  supabase: ReturnType<typeof createClient>,
-  userId: string,
-  pageId?: number | null,
-  postId?: number | null
-): Promise<boolean> {
-  void pageId;
-  void postId;
-  const { data: profile } = await supabase
+async function canEditParent(
+  supabase: ReturnType<typeof createClient>,
+  userId: string,
+  pageId?: number | null,
+  postId?: number | null
+): Promise<boolean> {
+  void pageId;
+  void postId;
+  const { data: profile } = await supabase
     .from("profiles")
     .select("role")
     .eq("id", userId)
@@ -160,7 +160,7 @@ export async function updateBlock(blockId: number, newContent: unknown, pageId?:
     return { error: "Block not found." };
   }
 
-  let prevContentAggregate: Awaited<ReturnType<typeof getFullPageContent>> | Awaited<ReturnType<typeof getFullPostContent>> | null = null;
+  let prevContentAggregate: FullPageContent | FullPostContent | null = null;
   if (existingBlock.page_id) {
     prevContentAggregate = await getFullPageContent(existingBlock.page_id);
   } else if (existingBlock.post_id) {
@@ -189,7 +189,7 @@ export async function updateBlock(blockId: number, newContent: unknown, pageId?:
     } else if (existingBlock.post_id) {
       const nextContentAggregate = await getFullPostContent(existingBlock.post_id, { overrideBlockId: blockId, overrideBlockContent: newContent });
       if (nextContentAggregate) {
-        await createPostRevision(existingBlock.post_id, user.id, prevContentAggregate as any, nextContentAggregate as any);
+        await createPostRevision(existingBlock.post_id, user.id, prevContentAggregate as FullPostContent, nextContentAggregate as FullPostContent);
       }
     }
   }
@@ -250,7 +250,7 @@ export async function deleteBlock(blockId: number, pageId?: number | null, postI
     return { error: "Block not found." };
   }
 
-  let previousAggregate: Awaited<ReturnType<typeof getFullPageContent>> | Awaited<ReturnType<typeof getFullPostContent>> | null = null;
+  let previousAggregate: FullPageContent | FullPostContent | null = null;
   if (existingBlock.page_id) {
     previousAggregate = await getFullPageContent(existingBlock.page_id);
   } else if (existingBlock.post_id) {
@@ -274,7 +274,7 @@ export async function deleteBlock(blockId: number, pageId?: number | null, postI
     } else if (existingBlock.post_id) {
       const nextAggregate = await getFullPostContent(existingBlock.post_id, { excludeDeletedBlockId: blockId });
       if (nextAggregate) {
-        await createPostRevision(existingBlock.post_id, user.id, previousAggregate as any, nextAggregate as any);
+        await createPostRevision(existingBlock.post_id, user.id, previousAggregate as FullPostContent, nextAggregate as FullPostContent);
       }
     }
   }
@@ -418,7 +418,7 @@ export async function copyBlocksFromLanguage(
             console.warn("Could not fetch target post slug for revalidation:", postError);
         } else {
             targetSlug = postData.slug;
-            if (targetSlug) revalidatePath(`/article/${targetSlug}`);
+            if (targetSlug) revalidatePath(`/article/${targetSlug}`);
         }
         revalidatePath(`/cms/posts/${parentId}/edit`); // Revalidate edit page
     }

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

@@ -21,6 +21,8 @@ interface BackgroundSelectorProps {
   onChange: (newBackground: SectionBlockContent["background"]) => void;
 }
 
+type ChangeEventLike = { target: { name: string; value: string } };
+
 export default function BackgroundSelector({ background, onChange }: BackgroundSelectorProps) {
 
   const backgroundType = background?.type || "none";
@@ -127,12 +129,12 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
     }
   };
 
-  const handleBackgroundPropertyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleBackgroundPropertyChange = (e: ChangeEventLike) => {
     const { name, value } = e.target;
     onChange({ ...background, [name]: value });
   };
 
-  const handleOverlayGradientChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleOverlayGradientChange = (e: ChangeEventLike) => {
     const { name, value } = e.target;
     if (background?.type === "image" && background.image) {
       const { image } = background;
@@ -170,7 +172,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
       <div className="space-y-4">
         <div className="grid gap-2">
           <Label>Background Type</Label>
-          <Select value={backgroundType} onValueChange={(v) => handleTypeChange(v as any)}>
+          <Select value={backgroundType} onValueChange={(v) => handleTypeChange(v as SectionBlockContent["background"]["type"])}>
             <SelectTrigger className="w-full max-w-[250px]"><SelectValue placeholder="Select type" /></SelectTrigger>
             <SelectContent>
               <SelectItem value="none">None</SelectItem>
@@ -184,7 +186,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
           <Label htmlFor="min_height">Minimum Height (e.g., 250px)</Label>
           <div className="flex items-center gap-2">
             <Input id="min_height" name="min_height" value={minHeight} onChange={(e) => setMinHeight(e.target.value)} placeholder="e.g., 250px" className="max-w-[200px]" />
-            <Button type="button" variant="ghost" size="icon" onClick={() => handleBackgroundPropertyChange({ target: { name: "min_height", value: minHeight } } as any)} disabled={!hasMinHeightChanged} title="Save Minimum Height">
+            <Button type="button" variant="ghost" size="icon" onClick={() => handleBackgroundPropertyChange({ target: { name: "min_height", value: minHeight } })} disabled={!hasMinHeightChanged} title="Save Minimum Height">
               <Save className={cn("h-5 w-5", hasMinHeightChanged && "text-green-600")} />
             </Button>
           </div>
@@ -272,7 +274,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
                       ]}
                     />
                   </div>
-                  <Button size="icon" variant="ghost" onClick={() => handleOverlayGradientChange({ target: { name: "direction", value: overlayDirection } } as any)} disabled={!hasOverlayDirectionChanged} title="Save Overlay Direction">
+                  <Button size="icon" variant="ghost" onClick={() => handleOverlayGradientChange({ target: { name: "direction", value: overlayDirection } })} disabled={!hasOverlayDirectionChanged} title="Save Overlay Direction">
                     <Save className={cn("h-5 w-5 mt-[1.3rem]", hasOverlayDirectionChanged && "text-green-600")} />
                   </Button>
                 </div>
@@ -280,12 +282,12 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
                   <ColorPicker
                     label="Start Color"
                     color={selectedImage.overlay.gradient?.stops?.[0]?.color || "rgba(0,0,0,0.5)"}
-                    onChange={(color) => handleOverlayGradientChange({ target: { name: "startColor", value: color } } as any)}
+                    onChange={(color) => handleOverlayGradientChange({ target: { name: "startColor", value: color } })}
                   />
                   <ColorPicker
                     label="End Color"
                     color={selectedImage.overlay.gradient?.stops?.[1]?.color || "rgba(0,0,0,0)"}
-                    onChange={(color) => handleOverlayGradientChange({ target: { name: "endColor", value: color } } as any)}
+                    onChange={(color) => handleOverlayGradientChange({ target: { name: "endColor", value: color } })}
                   />
                 </div>
               </div>
@@ -300,7 +302,7 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
                 label="Direction"
                 tooltipContent="Select a preset or enter a custom angle like '45deg' or 'to top left'. See MDN's linear-gradient docs for more options."
                 value={background.gradient?.direction || "to right"}
-                onChange={(value: string) => handleBackgroundGradientChange({ target: { name: "direction", value } } as any)}
+                onChange={(value: string) => handleBackgroundGradientChange({ target: { name: "direction", value } })}
                 options={[
                   { value: "to right", label: "To Right" },
                   { value: "to left", label: "To Left" },
@@ -315,12 +317,12 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
               <ColorPicker
                 label="Start Color"
                 color={background.gradient?.stops?.[0]?.color || "#3b82f6"}
-                onChange={(color) => handleBackgroundGradientChange({ target: { name: "startColor", value: color } } as any)}
+                onChange={(color) => handleBackgroundGradientChange({ target: { name: "startColor", value: color } })}
               />
               <ColorPicker
                 label="End Color"
                 color={background.gradient?.stops?.[1]?.color || "#8b5cf6"}
-                onChange={(color) => handleBackgroundGradientChange({ target: { name: "endColor", value: color } } as any)}
+                onChange={(color) => handleBackgroundGradientChange({ target: { name: "endColor", value: color } })}
               />
             </div>
           </div>
@@ -328,8 +330,8 @@ export default function BackgroundSelector({ background, onChange }: BackgroundS
       </div>
     </TooltipProvider>
   );
-  const handleBackgroundGradientChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target as any;
+  const handleBackgroundGradientChange = (e: ChangeEventLike) => {
+    const { name, value } = e.target;
     if (backgroundType !== 'gradient') return;
     const current = background.gradient || { type: 'linear' as const, direction: 'to right', stops: [ { color: '#3b82f6', position: 0 }, { color: '#8b5cf6', position: 100 } ] };
     if (name === 'direction') {

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

@@ -82,7 +82,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
   const [activeBlock, setActiveBlock] = useState<Block | null>(null);
   const [insertionIndex, setInsertionIndex] = useState<number | null>(null);
   const [editingNestedBlockInfo, setEditingNestedBlockInfo] = useState<EditingNestedBlockInfo | null>(null);
-  const [NestedBlockEditorComponent, setNestedBlockEditorComponent] = useState<ComponentType<any> | null>(null);
+  const [NestedBlockEditorComponent, setNestedBlockEditorComponent] = useState<ComponentType<Record<string, unknown>> | null>(null);
   const [tempNestedBlockContent, setTempNestedBlockContent] = useState<Json | null>(null);
 
   useEffect(() => {
@@ -129,41 +129,41 @@ 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) {
       const blockType = editingNestedBlockInfo.blockData.block_type;
-      let SelectedEditor: React.ComponentType<any> | null = null;
+      let SelectedEditor: React.ComponentType<Record<string, unknown>> | null = null;
 
       try {
         switch (blockType) {
           case 'text':
-            SelectedEditor = DynamicTextBlockEditor;
+            SelectedEditor = DynamicTextBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'heading':
-            SelectedEditor = DynamicHeadingBlockEditor;
+            SelectedEditor = DynamicHeadingBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'image':
-            SelectedEditor = DynamicImageBlockEditor;
+            SelectedEditor = DynamicImageBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'button':
-            SelectedEditor = DynamicButtonBlockEditor;
+            SelectedEditor = DynamicButtonBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'posts_grid':
-            SelectedEditor = DynamicPostsGridBlockEditor;
+            SelectedEditor = DynamicPostsGridBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'video_embed':
-            SelectedEditor = DynamicVideoEmbedBlockEditor;
+            SelectedEditor = DynamicVideoEmbedBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           case 'section':
-            SelectedEditor = DynamicSectionBlockEditor;
+            SelectedEditor = DynamicSectionBlockEditor as unknown as ComponentType<Record<string, unknown>>;
             break;
           default:
             console.warn(`No dynamic editor configured for nested block type: ${blockType}`);
@@ -389,7 +389,10 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
           parentBlockId: parentBlockIdStr,
           columnIndex,
           blockIndexInColumn,
-          blockData: nestedBlockData,
+          blockData: {
+            ...nestedBlockData,
+            content: nestedBlockData.content as unknown as Json
+          },
         });
       } else {
         console.error("Nested block not found at specified indices:", { parentBlockIdStr, columnIndex, blockIndexInColumn });
@@ -444,7 +447,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,
@@ -472,8 +475,8 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
               <EditableBlock
                 block={activeBlock}
                 className="h-full"
-                onDelete={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
-                onContentChange={() => {}} // eslint-disable-line @typescript-eslint/no-empty-function
+                onDelete={() => {}}
+                onContentChange={() => {}}
               />
             </div>
           ) : null}
@@ -522,7 +525,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
                   if (blockType === "posts_grid") {
                     const fullBlockForEditor: Block = {
                       block_type: editingNestedBlockInfo.blockData.block_type,
-                      content: tempNestedBlockContent,
+                      content: tempNestedBlockContent as Json,
                       id: 0, // Temporary ID for nested blocks
                       language_id: languageId,
                       order: 0, // Temporary order for nested blocks

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

@@ -33,7 +33,7 @@ type BlockEditorModalProps = {
   isOpen: boolean;
   onClose: () => void;
   onSave: (updatedContent: unknown) => void;
-  EditorComponent: LazyExoticComponent<ComponentType<BlockEditorProps<unknown>>>;
+  EditorComponent: LazyExoticComponent<ComponentType<any>>;
 };
 
 export function BlockEditorModal({