create-nextblock 0.2.45 → 0.2.46

package/package.json

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

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

@@ -143,33 +143,51 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
       let SelectedEditor: React.ComponentType<any> | null = null;
 
       try {
-        switch (blockType) {
-          case 'text':
-            SelectedEditor = DynamicTextBlockEditor;
-            break;
-          case 'heading':
-            SelectedEditor = DynamicHeadingBlockEditor;
-            break;
-          case 'image':
-            SelectedEditor = DynamicImageBlockEditor;
-            break;
-          case 'button':
-            SelectedEditor = DynamicButtonBlockEditor;
-            break;
-          case 'posts_grid':
-            SelectedEditor = DynamicPostsGridBlockEditor;
-            break;
-          case 'video_embed':
-            SelectedEditor = DynamicVideoEmbedBlockEditor;
-            break;
-          case 'section':
-            SelectedEditor = DynamicSectionBlockEditor;
-            break;
-          default:
-            console.warn(`No dynamic editor configured for nested block type: ${blockType}`);
-            alert(`Error: Editor not configured for ${blockType}.`);
-            setEditingNestedBlockInfo(null);
-            return;
+        // Check block registry for editor component
+        const blockDef = getBlockDefinition(blockType);
+        
+        if (blockDef?.EditorComponent) {
+           SelectedEditor = blockDef.EditorComponent;
+        } else if (blockDef?.editorComponentFilename) {
+           // We can't easily do dynamic imports with variable paths inside this useEffect 
+           // without potentially breaking webpack analysis or needing a different strategy.
+           // However, for the core blocks, we have the pre-defined dynamic imports below.
+           
+           switch (blockType) {
+            case 'text':
+              SelectedEditor = DynamicTextBlockEditor;
+              break;
+            case 'heading':
+              SelectedEditor = DynamicHeadingBlockEditor;
+              break;
+            case 'image':
+              SelectedEditor = DynamicImageBlockEditor;
+              break;
+            case 'button':
+              SelectedEditor = DynamicButtonBlockEditor;
+              break;
+            case 'posts_grid':
+              SelectedEditor = DynamicPostsGridBlockEditor;
+              break;
+            case 'video_embed':
+              SelectedEditor = DynamicVideoEmbedBlockEditor;
+              break;
+            case 'section':
+              SelectedEditor = DynamicSectionBlockEditor;
+              break;
+            default:
+               // Fallback for custom blocks that might use file-based routing but aren't in the switch
+               // This might still fail if webpack hasn't bundled them, but it's worth a try or we need to explicitly add them.
+               // For the PoC Testimonial block, it has EditorComponent so it hits the first if.
+               console.warn(`No dynamic editor configured for nested block type: ${blockType}`);
+               alert(`Error: Editor not configured for ${blockType}.`);
+               setEditingNestedBlockInfo(null);
+               return;
+          }
+        } else {
+             console.warn(`No definition found for nested block type: ${blockType}`);
+             setEditingNestedBlockInfo(null);
+             return;
         }
         setNestedBlockEditorComponent(() => SelectedEditor);
         setTempNestedBlockContent(JSON.parse(JSON.stringify(editingNestedBlockInfo.blockData.content)));

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<BlockEditorProps<unknown>>> | ComponentType<BlockEditorProps<unknown>>;
 };
 
 export function BlockEditorModal({

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

@@ -121,7 +121,7 @@ type EditingBlock = ColumnBlock & { index: number };
 export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, blockType }: ColumnEditorProps) {
   const [editingBlock, setEditingBlock] = useState<EditingBlock | null>(null);
   const [isBlockSelectorOpen, setIsBlockSelectorOpen] = useState(false);
-  const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | null>(null);
+  const [LazyEditor, setLazyEditor] = useState<React.LazyExoticComponent<React.ComponentType<any>> | React.ComponentType<any> | null>(null);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [blockToDeleteIndex, setBlockToDeleteIndex] = useState<number | null>(null);
 
@@ -169,8 +169,18 @@ export default function ColumnEditor({ columnIndex, blocks, onBlocksChange, bloc
 
   const handleStartEdit = (block: ColumnBlock, index: number) => {
     const blockDef = getBlockDefinition(block.block_type);
-    if (blockDef && blockDef.editorComponentFilename) {
-      const Editor = lazy(() => import(`../editors/${blockDef.editorComponentFilename.replace(/\.tsx$/, '')}`));
+    if (!blockDef) {
+      console.error(`No definition found for block type: ${block.block_type}`);
+      return;
+    }
+
+    if (blockDef.EditorComponent) {
+      const Component = blockDef.EditorComponent;
+      setLazyEditor(() => Component);
+      setEditingBlock({ ...block, index });
+    } else if (blockDef.editorComponentFilename) {
+      const filename = blockDef.editorComponentFilename;
+      const Editor = lazy(() => import(`../editors/${filename.replace(/\.tsx$/, '')}`));
       setLazyEditor(Editor);
       setEditingBlock({ ...block, index });
     } else {

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

@@ -34,7 +34,7 @@ export default function EditableBlock({
   // 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);
+  const [LazyEditor, setLazyEditor] = useState<LazyExoticComponent<ComponentType<any>> | ComponentType<any> | null>(null);
 
   const SectionEditor = useMemo(() => {
     if (block?.block_type === 'section' || block?.block_type === 'hero') {
@@ -58,14 +58,21 @@ export default function EditableBlock({
     if (block.block_type === 'section' || block.block_type === 'hero') {
       setIsConfigPanelOpen(prev => !prev);
     } else {
-      const editorFilename = blockRegistry[block.block_type as BlockType]?.editorComponentFilename;
+      const blockDef = getBlockDefinition(block.block_type as BlockType);
+      
       if (block.block_type === 'posts_grid') {
         const LazifiedPostsGridEditor = lazy(() => Promise.resolve({ default: PostsGridBlockEditor }));
         setLazyEditor(LazifiedPostsGridEditor);
         setEditingBlock(block);
       }
-      else if (editorFilename) {
-        const Editor = lazy(() => import(`../editors/${editorFilename}`));
+      else if (blockDef?.EditorComponent) {
+        const Component = blockDef.EditorComponent;
+        setLazyEditor(() => Component);
+        setEditingBlock(block);
+      }
+      else if (blockDef?.editorComponentFilename) {
+        const filename = blockDef.editorComponentFilename;
+        const Editor = lazy(() => import(`../editors/${filename.replace(/\.tsx$/, '')}`));
         setLazyEditor(Editor);
         setEditingBlock(block);
       }

package/templates/nextblock-template/components/BlockRenderer.tsx

@@ -1,4 +1,4 @@
-// components/BlockRenderer.tsx
+ // components/BlockRenderer.tsx
 import React from "react";
 import dynamic from "next/dynamic";
 import type { Database } from "@nextblock-cms/db";
@@ -46,6 +46,19 @@ const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
     return <ClientTextBlockRenderer content={block.content as any} languageId={languageId} />;
   }
 
+  // Check if the block definition provides a direct component (e.g., from SDK plugins)
+  if (blockDefinition.RendererComponent) {
+    const RendererComponent = blockDefinition.RendererComponent;
+    return (
+      <RendererComponent
+        content={block.content}
+        languageId={languageId}
+        isInEditor={false} // Assuming public view
+        className="my-4"
+      />
+    );
+  }
+
   // Create dynamic component with proper SSR handling for other blocks
   const RendererComponent = dynamic(
     () => import(`./blocks/renderers/${blockDefinition.rendererComponentFilename}`),

package/templates/nextblock-template/components/blocks/TestimonialBlock.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { z } from 'zod';
+import { BlockConfig, BlockProps, BlockEditorProps } from '@nextblock-cms/sdk';
+import { Card, CardContent, Avatar, AvatarImage, AvatarFallback, Input, Label, Textarea } from '@nextblock-cms/ui';
+import { MessageSquareQuote } from 'lucide-react';
+
+// 1. Define the Schema
+export const TestimonialSchema = z.object({
+  quote: z.string().min(1).describe('The testimonial text'),
+  author_name: z.string().min(1).describe('The person who gave the testimonial'),
+  author_title: z.string().optional().describe('Job title or company'),
+  image_url: z.string().url().optional().or(z.literal('')).describe('Author profile image URL'),
+});
+
+// 2. Derive the Content Type
+export type TestimonialBlockContent = z.infer<typeof TestimonialSchema>;
+
+// 3. Create the Renderer Component
+const TestimonialBlockRenderer: React.FC<BlockProps<typeof TestimonialSchema>> = ({ content }) => {
+  return (
+    <div className="container m-8">
+    <Card className="h-full">
+      <CardContent className="pt-6 flex flex-col gap-4 h-full">
+        <MessageSquareQuote className="w-8 h-8 text-primary/40" />
+        
+        <blockquote className="flex-grow text-lg italic text-muted-foreground">
+          "{content.quote}"
+        </blockquote>
+
+        <div className="flex items-center gap-3 mt-4">
+          <Avatar>
+            {content.image_url && <AvatarImage src={content.image_url} alt={content.author_name} />}
+            <AvatarFallback>{content.author_name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          
+          <div>
+            <div className="font-semibold">{content.author_name}</div>
+            {content.author_title && (
+              <div className="text-sm text-muted-foreground">{content.author_title}</div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+    </div>
+  );
+};
+
+// 4. Create the Editor Component
+const TestimonialBlockEditor: React.FC<BlockEditorProps<typeof TestimonialSchema>> = ({ content, onChange }) => {
+  const handleChange = (key: keyof TestimonialBlockContent, value: string) => {
+    onChange({
+      ...content,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-1">
+      <div className="space-y-2">
+        <Label htmlFor="quote">Quote</Label>
+        <Textarea
+          id="quote"
+          value={content.quote}
+          onChange={(e) => handleChange('quote', e.target.value)}
+          placeholder="Enter the testimonial quote..."
+          rows={4}
+        />
+      </div>
+      
+      <div className="space-y-2">
+        <Label htmlFor="author_name">Author Name</Label>
+        <Input
+          id="author_name"
+          value={content.author_name}
+          onChange={(e) => handleChange('author_name', e.target.value)}
+          placeholder="John Doe"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="author_title">Author Title (Optional)</Label>
+        <Input
+          id="author_title"
+          value={content.author_title || ''}
+          onChange={(e) => handleChange('author_title', e.target.value)}
+          placeholder="CEO, Company Inc."
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="image_url">Author Image URL (Optional)</Label>
+        <div className="flex gap-2">
+            <Input
+            id="image_url"
+            value={content.image_url || ''}
+            onChange={(e) => handleChange('image_url', e.target.value)}
+            placeholder="https://example.com/image.jpg"
+            />
+        </div>
+        {content.image_url && (
+            <div className="mt-2 w-16 h-16 relative rounded-full overflow-hidden border">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={content.image_url} alt="Preview" className="w-full h-full object-cover" />
+            </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// 5. Export the Block Configuration
+export const TestimonialBlockConfig: BlockConfig<typeof TestimonialSchema> = {
+  type: 'testimonial',
+  label: 'Testimonial',
+  icon: MessageSquareQuote,
+  schema: TestimonialSchema,
+  initialContent: {
+    quote: "This product changed my life! The workflow is so much smoother now.",
+    author_name: "Jane Doe",
+    author_title: "CEO, TechCorp",
+    image_url: "",
+  },
+  RendererComponent: TestimonialBlockRenderer,
+  EditorComponent: TestimonialBlockEditor,
+};

package/templates/nextblock-template/docs/How to Create a Custom Block.md

@@ -0,0 +1,149 @@
+# How to Create a Custom Block with the NextBlock SDK
+
+Custom blocks allow you to extend the functionality of NextBlock CMS while ensuring type safety and seamless integration. The `@nextblock-cms/sdk` package provides the necessary tools and interfaces.
+
+## Step 1: Define the Schema (Zod)
+
+The schema defines the structure of your block's content. It is used for validation and to generate TypeScript types.
+
+```typescript
+import { z } from 'zod';
+
+export const MyBlockSchema = z.object({
+  title: z.string().min(1).describe('The main title'),
+  description: z.string().optional().describe('Optional description'),
+  isActive: z.boolean().default(true),
+});
+
+// Derive the content type from the schema
+export type MyBlockContent = z.infer<typeof MyBlockSchema>;
+```
+
+## Step 2: Define the Components (React/TS)
+
+Create the components that will render your block. Use the `BlockProps` interface to ensure your component receives the correct data.
+
+```typescript
+import React from 'react';
+import { BlockProps } from '@nextblock-cms/sdk';
+
+// The Renderer Component (Public View)
+const MyBlockRenderer: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
+  return (
+    <div className="my-block">
+      <h2>{content.title}</h2>
+      {content.description && <p>{content.description}</p>}
+    </div>
+  );
+};
+
+// The Editor Component (CMS View)
+// Currently, the CMS uses auto-generated forms based on the schema,
+// but you can provide a custom preview or editor here.
+const MyBlockEditor: React.FC<BlockProps<typeof MyBlockSchema>> = ({ content }) => {
+  return (
+    <div className="p-4 border">
+      Preview: {content.title}
+    </div>
+  );
+};
+```
+
+## Step 3: Create the Configuration
+
+Combine everything into a `BlockConfig` object. This object tells the CMS how to handle your block.
+
+```typescript
+import { BlockConfig } from '@nextblock-cms/sdk';
+import { Star } from 'lucide-react'; // Choose an icon
+
+export const MyBlockConfig: BlockConfig<typeof MyBlockSchema> = {
+  type: 'my_block', // Unique identifier
+  label: 'My Custom Block',
+  icon: Star,
+  schema: MyBlockSchema,
+  initialContent: {
+    title: 'Default Title',
+    isActive: true,
+  },
+  RendererComponent: MyBlockRenderer,
+  EditorComponent: MyBlockEditor,
+};
+```
+
+## Step 4: Building the Editor Component
+
+The Editor Component is responsible for the editing experience within the CMS. It receives `BlockEditorProps`, which includes the current content and an `onChange` handler.
+
+You should use the shared UI components from `@nextblock-cms/ui` (like `Input`, `Textarea`, `Button`, `Label`) to ensure a consistent look and feel with the rest of the Admin UI.
+
+```typescript
+import React from 'react';
+import { BlockEditorProps } from '@nextblock-cms/sdk';
+import { Input, Label, Textarea } from '@nextblock-cms/ui';
+
+const MyBlockEditor: React.FC<BlockEditorProps<typeof MyBlockSchema>> = ({ content, onChange }) => {
+
+  const handleChange = (key: keyof typeof content, value: any) => {
+    onChange({
+      ...content,
+      [key]: value,
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          value={content.title}
+          onChange={(e) => handleChange('title', e.target.value)}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          value={content.description || ''}
+          onChange={(e) => handleChange('description', e.target.value)}
+        />
+      </div>
+    </div>
+  );
+};
+```
+
+## Step 5: Register the Block
+
+To make your block available in the CMS, import it into the main registry file: `apps/nextblock/lib/blocks/blockRegistry.ts`.
+
+```typescript
+// apps/nextblock/lib/blocks/blockRegistry.ts
+import { MyBlockConfig } from '../../components/blocks/MyBlock';
+
+export const blockRegistry: Record<BlockType, BlockDefinition> = {
+  // ... existing blocks
+  [MyBlockConfig.type]: {
+    ...MyBlockConfig,
+    // ... any additional internal config if needed
+  } as BlockDefinition<MyBlockContent>,
+};
+```
+
+Once registered, your block will appear in the CMS block picker and render on the frontend.
+
+## Advanced Topic: Schema Evolution and Versioning
+
+Modifying a Zod schema after a block is in production can be dangerous. If you change the shape of the data (e.g., rename a field, remove a required field), existing blocks in the database may fail to validate or render, causing runtime errors.
+
+### Recommended Strategy: Versioning
+
+Instead of modifying the existing schema, create a new version of the block.
+
+1.  **Duplicate the Block**: Create a new block type, e.g., `my_block_v2`, with the updated schema and renderer.
+2.  **Register the New Block**: Add it to the registry. You can hide the old `my_block` from the picker if you want to prevent new usage, but keep the definition so existing blocks continue to work.
+3.  **Migration (Optional)**: You can write a utility to transform `my_block` data to `my_block_v2` format if you want to migrate content programmatically.
+
+While V1 of the SDK does not enforce a strict versioning system, treating your block schemas as immutable contracts is a best practice for stability.