create-nextblock 0.13.9 → 0.13.11

package/templates/nextblock-template/app/auth/callback/route.ts

@@ -1,31 +1,31 @@
-import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
-import { NextResponse } from "next/server";
-import { resolvePostAuthRedirect } from "../../../lib/auth-redirects";
-
-export async function GET(request: Request) {
-  const requestUrl = new URL(request.url);
-  const code = requestUrl.searchParams.get("code");
-  const origin = requestUrl.origin;
-  const initialRedirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
-
-  if (code) {
-    const supabase = await createClient();
-    const { data: { user } , error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
-
-    if (exchangeError) {
-      console.error("Auth callback: Error exchanging code for session:", exchangeError.message);
-      return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
-    }
-
-    if (user) {
-      const profile = await getProfileWithRoleServerSide(user.id);
-      const targetPath = resolvePostAuthRedirect(profile, initialRedirectTo);
-      return NextResponse.redirect(`${origin}${targetPath}`);
-    }
-
-    console.warn("Auth callback: User object is null after code exchange.");
-    return NextResponse.redirect(`${origin}/`);
-  }
-
-  return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
-}
+import { createClient, getProfileWithRoleServerSide } from "@nextblock-cms/db/server";
+import { NextResponse } from "next/server";
+import { resolvePostAuthRedirect } from "../../../lib/auth-redirects";
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const origin = requestUrl.origin;
+  const initialRedirectTo = requestUrl.searchParams.get("redirect_to")?.toString();
+
+  if (code) {
+    const supabase = await createClient();
+    const { data: { user } , error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (exchangeError) {
+      console.error("Auth callback: Error exchanging code for session:", exchangeError.message);
+      return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
+    }
+
+    if (user) {
+      const profile = await getProfileWithRoleServerSide(user.id);
+      const targetPath = resolvePostAuthRedirect(profile, initialRedirectTo);
+      return NextResponse.redirect(`${origin}${targetPath}`);
+    }
+
+    console.warn("Auth callback: User object is null after code exchange.");
+    return NextResponse.redirect(`${origin}/`);
+  }
+
+  return NextResponse.redirect(`${origin}${initialRedirectTo || '/'}`);
+}

package/templates/nextblock-template/app/cart/page.tsx

@@ -1,7 +1,7 @@
-'use client';
-
-import { Cart } from '@nextblock-cms/ecommerce';
-
-export default function CartPage() {
-  return <Cart />;
-}
+'use client';
+
+import { Cart } from '@nextblock-cms/ecommerce';
+
+export default function CartPage() {
+  return <Cart />;
+}

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

@@ -9,7 +9,7 @@ import type { Database, Json } from "@nextblock-cms/db";
 import { BlockType } from '../../../../lib/blocks/blockRegistry';
 
 type Block = Database["public"]["Tables"]["blocks"]["Row"];
-import { getBlockDefinition, SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
+import { blockHasEditableContent, getBlockDefinition, SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
 import { Button } from "@nextblock-cms/ui";
 import { PlusCircle } from "lucide-react";
 import {
@@ -113,6 +113,8 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
   const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
   const [activeBlock, setActiveBlock] = useState<Block | null>(null);
   const [insertionIndex, setInsertionIndex] = useState<number | null>(null);
+  // Id of the block that was just added, so its editor can open on its own.
+  const [autoEditBlockId, setAutoEditBlockId] = useState<number | null>(null);
   const [editingNestedBlockInfo, setEditingNestedBlockInfo] = useState<EditingNestedBlockInfo | null>(null);
   const [NestedBlockEditorComponent, setNestedBlockEditorComponent] = useState<ComponentType<any> | null>(null);
   const [tempNestedBlockContent, setTempNestedBlockContent] = useState<Json | null>(null);
@@ -377,6 +379,11 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
 
         setBlocks(finalBlocks);
         lastSavedBlocks.current = finalBlocks;
+        // Context-driven blocks (cart, checkout, …) have nothing to configure,
+        // so only jump into the editor when there is something to edit.
+        if (blockHasEditableContent(blockType)) {
+          setAutoEditBlockId(newBlock.id);
+        }
         router.refresh();
       } else {
         alert(`Error adding block: ${createResult?.error}`);
@@ -506,6 +513,8 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
                 </div>
                 <SortableBlockItem
                   block={block}
+                  autoOpenEditor={block.id === autoEditBlockId}
+                  onAutoOpenHandled={() => setAutoEditBlockId(null)}
                   onContentChange={handleContentChange}
                   onDelete={async (blockIdToDelete) => {
                     startTransition(async () => {

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

@@ -5,7 +5,7 @@ import { cn } from '@nextblock-cms/utils';
 import { Button } from '@nextblock-cms/ui';
 import { PlusCircle, Trash2, Edit2, GripVertical, Image as ImageIcon } from "lucide-react";
 import { SectionBlockContent } from '../../../../lib/blocks/blockRegistry';
-import { availableBlockTypes, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { availableBlockTypes, blockHasEditableContent, getBlockDefinition, getInitialContent, BlockType } from '../../../../lib/blocks/blockRegistry';
 import { useDroppable } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -415,6 +415,10 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
       temp_id: `temp-${Date.now()}-${Math.random()}`
     };
     onBlocksChange([...blocks, newBlock]);
+    // Open the new block's editor straight away, matching the top-level editor.
+    if (blockHasEditableContent(selectedBlockType)) {
+      handleStartEdit(newBlock, blocks.length);
+    }
   };
 
   const handleSelectBlockType = (selectedBlockType: BlockType) => {

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

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

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

@@ -1,14 +1,14 @@
 // app/cms/blocks/components/EditableBlock.tsx
 "use client";
 
-import React, { useState, Suspense, useMemo, lazy, LazyExoticComponent, ComponentType } from 'react';
+import React, { useState, useEffect, useRef, Suspense, useMemo, lazy, LazyExoticComponent, ComponentType } from 'react';
 import type { Database } from "@nextblock-cms/db";
 import PostsGridBlockEditor from '../editors/PostsGridBlockEditor';
 
 type Block = Database['public']['Tables']['blocks']['Row'];
 import { Button, Card, CardContent, Avatar, AvatarImage, AvatarFallback } from "@nextblock-cms/ui";
 import { GripVertical, Edit2, Image as ImageIcon, MessageSquareQuote } from "lucide-react";
-import { getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
+import { blockHasEditableContent, getBlockDefinition, blockRegistry, BlockType } from '../../../../lib/blocks/blockRegistry';
 import { BlockEditorModal } from './BlockEditorModal';
 import { DeleteBlockButtonClient } from './DeleteBlockButtonClient';
 import { cn } from '@nextblock-cms/utils';
@@ -23,6 +23,10 @@ export interface EditableBlockProps {
   dragHandleProps?: Record<string, any>;
   onEditNestedBlock?: (parentBlockId: string, columnIndex: number, blockIndexInColumn: number) => void;
   className?: string;
+  /** Open this block's editor as soon as it mounts — set for a just-added block. */
+  autoOpenEditor?: boolean;
+  /** Called once the auto-open has fired, so the parent can clear the flag. */
+  onAutoOpenHandled?: () => void;
 }
 
 export default function EditableBlock({
@@ -32,12 +36,15 @@ export default function EditableBlock({
   dragHandleProps,
   onEditNestedBlock,
   className,
+  autoOpenEditor,
+  onAutoOpenHandled,
 }: 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>> | ComponentType<any> | null>(null);
+  const autoOpenedRef = useRef<number | null>(null);
 
   const SectionEditor = useMemo(() => {
     if (block?.block_type === 'section') {
@@ -49,15 +56,12 @@ export default function EditableBlock({
     return null;
   }, [block?.block_type]);
 
-  // Add a guard for undefined block prop after hooks
-  if (!block) {
-    // Or some other placeholder/error display
-    return <div className="p-4 border rounded-lg bg-card shadow text-red-500">Error: Block data is missing in EditableBlock.</div>;
-  }
-
-
-
   const handleEditClick = () => {
+    // cart / checkout / product_details are context-driven: empty schema, and the
+    // editor file their registry entry names does not exist. Opening one throws.
+    if (!blockHasEditableContent(block.block_type)) {
+      return;
+    }
     if (block.block_type === 'section') {
       setIsConfigPanelOpen(prev => !prev);
     } else {
@@ -87,6 +91,22 @@ export default function EditableBlock({
     }
   };
 
+  // A block the author just added opens straight into its editor — adding a
+  // heading is always followed by wanting to type one. The ref keeps it to once
+  // per block, so closing the editor (or a router refresh) does not reopen it.
+  useEffect(() => {
+    if (!autoOpenEditor || !block || autoOpenedRef.current === block.id) return;
+    autoOpenedRef.current = block.id;
+    handleEditClick();
+    onAutoOpenHandled?.();
+  }, [autoOpenEditor, block, handleEditClick, onAutoOpenHandled]);
+
+  // Add a guard for undefined block prop after hooks
+  if (!block) {
+    // Or some other placeholder/error display
+    return <div className="p-4 border rounded-lg bg-card shadow text-red-500">Error: Block data is missing in EditableBlock.</div>;
+  }
+
   const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // If the element that was clicked, or any of its parents up to the card, is a button,
     // then we should ignore the click on the card. This lets the button's own onClick handle the event.
@@ -279,14 +299,22 @@ export default function EditableBlock({
        default: {
         const blockDefinition = getBlockDefinition(currentBlockType as BlockType);
         const blockLabel = blockDefinition?.label || currentBlockType;
+        const hasEditableContent = blockHasEditableContent(currentBlockType);
         const placeholder = (
           <div
-            className="py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20 cursor-pointer hover:border-primary"
+            className={cn(
+              "py-4 flex flex-col items-center justify-center space-y-2 min-h-[80px] border border-dashed rounded-md bg-muted/20",
+              hasEditableContent && "cursor-pointer hover:border-primary"
+            )}
             onClick={handleCardClick}
           >
             <div className="text-center">
               <p className="text-sm font-medium text-muted-foreground">{blockLabel}</p>
-              <p className="text-xs text-muted-foreground">Click edit to modify content</p>
+              <p className="text-xs text-muted-foreground">
+                {hasEditableContent
+                  ? 'Click edit to modify content'
+                  : 'Renders from the current page context — nothing to configure'}
+              </p>
             </div>
           </div>
         );
@@ -304,13 +332,14 @@ export default function EditableBlock({
 
   const isSection = block?.block_type === 'section';
   const blockDefinition = getBlockDefinition(block.block_type as BlockType);
+  const isEditable = blockHasEditableContent(block.block_type);
 
   return (
     <div
       onClick={handleCardClick}
       className={cn(
         "p-4 border rounded-lg bg-card shadow",
-        !isSection && "cursor-pointer hover:border-primary transition-colors",
+        !isSection && isEditable && "cursor-pointer hover:border-primary transition-colors",
         className
       )}
     >
@@ -322,17 +351,19 @@ export default function EditableBlock({
           <h4 className="font-semibold p-0 m-0 mb-1">{blockDefinition?.label || block.block_type}</h4>
         </div>
         <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                handleEditClick();
-              }}
-              aria-label={isSection ? "Toggle Section Config" : "Edit block"}
-            >
-              <Edit2 className="h-4 w-4 text-muted-foreground" />
-            </Button>
+            {isEditable && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleEditClick();
+                }}
+                aria-label={isSection ? "Toggle Section Config" : "Edit block"}
+              >
+                <Edit2 className="h-4 w-4 text-muted-foreground" />
+              </Button>
+            )}
           <DeleteBlockButtonClient
             blockId={block.id}
             blockTitle={blockDefinition?.label || block.block_type}