@jhits/plugin-blog 0.0.19 → 0.0.20

package/src/views/CanvasEditor/EditorBody.tsx

@@ -10,655 +10,143 @@ import React, { useState, useRef, Fragment, useEffect } from 'react';
 import { Plus } from 'lucide-react';
 import { Block } from '../../types/block';
 import { BlockWrapper } from './BlockWrapper';
+import { blockRegistry } from '../../registry/BlockRegistry';
+import { useEditor } from '../../state/EditorContext';
 
 export interface EditorBodyProps {
     blocks: Block[];
-    onBlockAdd: (type: string, index: number, containerId?: string) => void;
-    onBlockUpdate: (id: string, data: Partial<Block['data']>) => void;
-    onBlockDelete: (id: string) => void;
+    darkMode: boolean;
+    backgroundColors?: { light: string; dark?: string };
+    onBlockUpdate: (id: string, data: Partial<Block['data']>, containerId?: string) => void;
+    onBlockDelete: (id: string, containerId?: string) => void;
     onBlockMove: (id: string, newIndex: number, containerId?: string) => void;
-    /** Enable dark mode for content area and wrappers (default: true) */
-    darkMode?: boolean;
-    /** Background colors for the editor */
-    backgroundColors?: {
-        light: string;
-        dark?: string;
-    };
+    onBlockAdd: (type: string, index: number, containerId?: string) => void;
 }
 
 export function EditorBody({
     blocks,
-    onBlockAdd,
+    darkMode,
+    backgroundColors,
     onBlockUpdate,
     onBlockDelete,
     onBlockMove,
-    darkMode = true,
-    backgroundColors,
+    onBlockAdd,
 }: EditorBodyProps) {
-    // --- State ---
-    const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
-    const [dropIndicatorPosition, setDropIndicatorPosition] = useState<{ top: number; left: number; width: number } | null>(null);
-    const [calculatedInsertIndex, setCalculatedInsertIndex] = useState<number | null>(null);
-
-    // --- Refs ---
-    const containerRef = useRef<HTMLDivElement>(null);
-    const blockRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-
-    // --- Cleanup & Event Listeners ---
-    useEffect(() => {
-        const handleClearIndicator = () => {
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-        };
-
-        const container = containerRef.current;
-        if (container) {
-            container.addEventListener('clear-drop-indicator', handleClearIndicator);
-            return () => {
-                container.removeEventListener('clear-drop-indicator', handleClearIndicator);
-            };
-        }
-    }, []);
-
-    useEffect(() => {
-        const handleGlobalDragEnd = () => {
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            setIsDragging(false);
-            setDraggedBlockId(null);
-            setCalculatedInsertIndex(null);
-        };
-
-        document.addEventListener('dragend', handleGlobalDragEnd);
-        return () => {
-            document.removeEventListener('dragend', handleGlobalDragEnd);
-        };
-    }, []);
-
-    // --- Helper Functions ---
-    const setBlockRef = (blockId: string) => (el: HTMLDivElement | null) => {
-        if (el) {
-            blockRefs.current.set(blockId, el);
-        } else {
-            blockRefs.current.delete(blockId);
-        }
-    };
-
-    // --- Drag & Drop Logic ---
-
-    const handleDragStart = (e: React.DragEvent) => {
-        // This is called when dragging starts from the container
-        // The actual block drag start is handled in BlockWrapper
-        setIsDragging(true);
-    };
-
-    const handleDragOver = (e: React.DragEvent, index: number, element?: HTMLElement) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        // Check if we're dragging over a nested container - if so, clear our indicator
-        const target = e.target as HTMLElement;
-        const nestedContainer = target.closest('[data-layout-container]');
-        if (nestedContainer && nestedContainer !== containerRef.current) {
-            // We're over a nested container, clear our indicator
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            return;
-        }
-
-        setDragOverIndex(index);
-
-        // Calculate position for absolute drop indicator - always show between blocks
-        const container = containerRef.current;
-        if (container && element) {
-            requestAnimationFrame(() => {
-                // Double-check refs are still valid inside RAF callback
-                if (!containerRef.current) return;
-
-                const containerRect = containerRef.current.getBoundingClientRect();
-                const elementRect = element.getBoundingClientRect();
-                const mouseY = e.clientY;
-                const relativeTop = mouseY - containerRect.top;
-                
-                const elementTop = elementRect.top - containerRect.top;
-                const elementBottom = elementRect.bottom - containerRect.top;
-                const elementCenter = elementTop + elementRect.height / 2;
-
-                // Calculate width - use container width minus padding (32px on each side)
-                const padding = 32;
-                const width = containerRect.width - (padding * 2);
-
-                let finalTop: number;
-
-                // Determine if we should show above or below the element
-                if (relativeTop < elementCenter) {
-                    // Show above this block - position between previous block and current block
-                    if (index === 0) {
-                        // First block - show at top of container (before first block)
-                        finalTop = 0;
-                    } else {
-                        // Get previous block to find the gap
-                        const prevBlock = blocks[index - 1];
-                        const prevBlockEl = blockRefs.current.get(prevBlock.id);
-                        if (prevBlockEl) {
-                            const prevBlockRect = prevBlockEl.getBoundingClientRect();
-                            const prevBlockBottom = prevBlockRect.bottom - containerRect.top;
-                            // Position in the middle of the gap (mb-6 = 24px margin)
-                            finalTop = prevBlockBottom + 12; // Half of the 24px gap
-                        } else {
-                            finalTop = elementTop;
-                        }
-                    }
-                } else {
-                    // Show below this block - position between current block and next block
-                    if (index === blocks.length - 1) {
-                        // Last block - show after it
-                        finalTop = elementBottom;
-                    } else {
-                        // Get next block to find the gap
-                        const nextBlock = blocks[index + 1];
-                        const nextBlockEl = blockRefs.current.get(nextBlock.id);
-                        if (nextBlockEl) {
-                            const nextBlockRect = nextBlockEl.getBoundingClientRect();
-                            const nextBlockTop = nextBlockRect.top - containerRect.top;
-                            // Position in the middle of the gap
-                            finalTop = elementBottom + (nextBlockTop - elementBottom) / 2;
-                        } else {
-                            finalTop = elementBottom;
-                        }
-                    }
-                }
-
-                setDropIndicatorPosition({
-                    top: finalTop,
-                    left: padding,
-                    width: width,
-                });
-            });
-        }
-    };
-
-    const handleDragLeave = (e: React.DragEvent) => {
-        // Only clear if we're actually leaving the container
-        // Check if we're moving to a child element (nested container)
-        const relatedTarget = e.relatedTarget as Node;
-        if (!e.currentTarget.contains(relatedTarget)) {
-            // Check if relatedTarget is inside a nested LayoutContainer
-            const isMovingToNested = relatedTarget && (relatedTarget as HTMLElement).closest('[data-layout-container]');
-            if (!isMovingToNested) {
-                setDragOverIndex(null);
-                setDropIndicatorPosition(null);
-                setCalculatedInsertIndex(null);
-                setIsDragging(false);
-            }
-        }
-    };
-
-    const handleDrop = (e: React.DragEvent, index: number, containerId?: string) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const dataTransferBlockId = e.dataTransfer.getData('block-id');
-        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
-        const blockId = dataTransferBlockId || globalBlockId;
-        const blockType = e.dataTransfer.getData('block-type');
-
-        console.log('[EditorBody] Drop Event:', {
-            index,
-            containerId,
-            dataTransferBlockId,
-            globalBlockId,
-            resolvedBlockId: blockId,
-            blockType,
-            currentBlocks: blocks.map(b => ({ id: b.id, type: b.type })),
-            rootBlockIds: blocks.map(b => b.id),
-        });
-
-        // Clear the global dragged block ID
-        if (typeof window !== 'undefined') {
-            (window as any).__DRAGGED_BLOCK_ID__ = null;
-        }
-
-        if (blockId) {
-            // Moving existing block - check if it's in root or nested
-            const currentIndex = blocks.findIndex(b => b.id === blockId);
-            console.log('[EditorBody] Block location check:', {
-                blockId,
-                currentIndex,
-                isInRoot: currentIndex !== -1,
-                targetIndex: index,
-                containerId,
-            });
-
-            if (currentIndex !== -1) {
-                // Block is in root level - move to container or within root
-                if (containerId) {
-                    // Moving from root to container
-                    console.log('[EditorBody] Moving from root to container:', { blockId, index, containerId });
-                    onBlockMove(blockId, index, containerId);
-                } else if (currentIndex !== index) {
-                    // Moving within root level
-                    const targetIndex = currentIndex < index ? index - 1 : index;
-                    console.log('[EditorBody] Moving within root:', { blockId, currentIndex, targetIndex });
-                    onBlockMove(blockId, targetIndex);
-                } else {
-                    console.log('[EditorBody] Block already at target position, no move needed');
-                }
-            } else {
-                // Block is nested somewhere - need to move it to this location
-                console.log('[EditorBody] Moving nested block to root:', { blockId, index, containerId: containerId || 'root' });
-                // Pass undefined containerId to move to root
-                onBlockMove(blockId, index, undefined);
-            }
-        } else if (blockType) {
-            // Adding new block from library
-            console.log('[EditorBody] Adding new block from library:', { blockType, index, containerId });
-            onBlockAdd(blockType, index, containerId);
-        } else {
-            console.warn('[EditorBody] Drop event with no block ID or type!');
-        }
+    const { helpers } = useEditor();
+    const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+    const bodyRef = useRef<HTMLDivElement>(null);
 
-        setDragOverIndex(null);
-        setIsDragging(false);
-        setDraggedBlockId(null);
-        setDropIndicatorPosition(null);
-        setCalculatedInsertIndex(null);
-    };
+    // Filter out hero block from the main body list - it's handled by EditorCanvas header slot
+    const mainBlocks = blocks.filter(b => b.type !== 'hero');
 
-    const handleBodyDragOver = (e: React.DragEvent) => {
+    const handleDragOver = (e: React.DragEvent, index: number) => {
         e.preventDefault();
-        e.stopPropagation();
-
-        // Check if we're dragging over a nested container - if so, clear our indicator
-        const target = e.target as HTMLElement;
-        const nestedContainer = target.closest('[data-layout-container]');
-        if (nestedContainer && nestedContainer !== containerRef.current) {
-            // We're over a nested container, clear our indicator
-            setDropIndicatorPosition(null);
-            setDragOverIndex(null);
-            setCalculatedInsertIndex(null);
-            setIsDragging(false);
-            return;
-        }
-
-        setIsDragging(true);
-
-        // Calculate drop indicator position based on mouse Y position relative to blocks
-        const container = containerRef.current;
-        if (container && blocks.length > 0) {
-            requestAnimationFrame(() => {
-                if (!containerRef.current) return;
-
-                const containerRect = containerRef.current.getBoundingClientRect();
-                const mouseY = e.clientY;
-                const relativeTop = mouseY - containerRect.top;
-                const padding = 32;
-                const width = containerRect.width - (padding * 2);
-
-                // Find the closest insertion point based on block positions - always between blocks
-                let insertIndex = blocks.length; // Default to end
-                let indicatorTop = containerRect.height; // Default to bottom
-
-                // Check each block to find where to insert
-                for (let i = 0; i < blocks.length; i++) {
-                    const blockEl = blockRefs.current.get(blocks[i].id);
-                    if (blockEl) {
-                        const blockRect = blockEl.getBoundingClientRect();
-                        const blockTop = blockRect.top - containerRect.top;
-                        const blockBottom = blockRect.bottom - containerRect.top;
-                        const blockCenter = blockTop + blockRect.height / 2;
-
-                        // If mouse is above this block's center, insert before it
-                        if (relativeTop < blockCenter) {
-                            insertIndex = i;
-                            if (i === 0) {
-                                // First block - show at top
-                                indicatorTop = 0;
-                            } else {
-                                // Get previous block to find the gap
-                                const prevBlock = blocks[i - 1];
-                                const prevBlockEl = blockRefs.current.get(prevBlock.id);
-                                if (prevBlockEl) {
-                                    const prevBlockRect = prevBlockEl.getBoundingClientRect();
-                                    const prevBlockBottom = prevBlockRect.bottom - containerRect.top;
-                                    // Position in the middle of the gap
-                                    indicatorTop = prevBlockBottom + (blockTop - prevBlockBottom) / 2;
-                                } else {
-                                    indicatorTop = blockTop;
-                                }
-                            }
-                            break;
-                        }
-                        // If mouse is below this block's center, check if we should insert after it
-                        else if (i === blocks.length - 1 || relativeTop < blockBottom) {
-                            insertIndex = i + 1;
-                            if (i === blocks.length - 1) {
-                                // Last block - show after it
-                                indicatorTop = blockBottom;
-                            } else {
-                                // Get next block to find the gap
-                                const nextBlock = blocks[i + 1];
-                                const nextBlockEl = blockRefs.current.get(nextBlock.id);
-                                if (nextBlockEl) {
-                                    const nextBlockRect = nextBlockEl.getBoundingClientRect();
-                                    const nextBlockTop = nextBlockRect.top - containerRect.top;
-                                    // Position in the middle of the gap
-                                    indicatorTop = blockBottom + (nextBlockTop - blockBottom) / 2;
-                                } else {
-                                    indicatorTop = blockBottom;
-                                }
-                            }
-                            break;
-                        }
-                    }
-                }
-
-                // If we didn't find a position, use the last block's bottom
-                if (insertIndex === blocks.length) {
-                    const lastBlockEl = blockRefs.current.get(blocks[blocks.length - 1].id);
-                    if (lastBlockEl) {
-                        const lastBlockRect = lastBlockEl.getBoundingClientRect();
-                        indicatorTop = lastBlockRect.bottom - containerRect.top;
-                    }
-                }
-
-                setCalculatedInsertIndex(insertIndex);
-                setDropIndicatorPosition({
-                    top: indicatorTop,
-                    left: padding,
-                    width: width,
-                });
-            });
-        } else if (container) {
-            // No blocks, show indicator at top
-            requestAnimationFrame(() => {
-                if (!containerRef.current) return;
-                const containerRect = containerRef.current.getBoundingClientRect();
-                const padding = 32;
-                const width = containerRect.width - (padding * 2);
-                setCalculatedInsertIndex(0);
-                setDropIndicatorPosition({
-                    top: 0,
-                    left: padding,
-                    width: width,
-                });
-            });
-        }
+        setHoverIndex(index);
     };
 
-    const handleBodyDrop = (e: React.DragEvent) => {
+    const handleDrop = (e: React.DragEvent, index: number) => {
         e.preventDefault();
-        e.stopPropagation();
-
-        const dataTransferBlockId = e.dataTransfer.getData('block-id');
-        const globalBlockId = typeof window !== 'undefined' ? (window as any).__DRAGGED_BLOCK_ID__ : null;
-        const blockId = dataTransferBlockId || globalBlockId;
-        const blockType = e.dataTransfer.getData('block-type');
-
-        // Use the calculated insert index if available, otherwise calculate it now
-        let targetIndex = calculatedInsertIndex !== null ? calculatedInsertIndex : blocks.length;
+        setHoverIndex(null);
         
-        // If we don't have a calculated index, calculate it based on mouse position
-        if (calculatedInsertIndex === null && containerRef.current && blocks.length > 0) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const mouseY = e.clientY;
-            const relativeTop = mouseY - containerRect.top;
-
-            for (let i = 0; i < blocks.length; i++) {
-                const blockEl = blockRefs.current.get(blocks[i].id);
-                if (blockEl) {
-                    const blockRect = blockEl.getBoundingClientRect();
-                    const blockTop = blockRect.top - containerRect.top;
-                    const blockCenter = blockTop + blockRect.height / 2;
-
-                    if (relativeTop < blockCenter) {
-                        targetIndex = i;
-                        break;
-                    } else if (i === blocks.length - 1) {
-                        targetIndex = blocks.length;
-                        break;
-                    }
-                }
-            }
-        }
-
-        console.log('[EditorBody] Body Drop Event:', {
-            dataTransferBlockId,
-            globalBlockId,
-            resolvedBlockId: blockId,
-            blockType,
-            calculatedInsertIndex,
-            targetIndex,
-            currentBlocksCount: blocks.length,
-            rootBlockIds: blocks.map(b => b.id),
-        });
+        // SUPPORT BOTH: Adding new blocks and Moving existing blocks
+        const blockId = e.dataTransfer.getData('blockId') || (window as any).__DRAGGED_BLOCK_ID__;
+        const blockType = e.dataTransfer.getData('blockType');
 
-        // Clear the global dragged block ID
+        // Clear global flag
         if (typeof window !== 'undefined') {
             (window as any).__DRAGGED_BLOCK_ID__ = null;
         }
 
         if (blockId) {
-            // Moving existing block to calculated position
-            const currentIndex = blocks.findIndex(b => b.id === blockId);
-            console.log('[EditorBody] Body drop - block location:', {
-                blockId,
-                currentIndex,
-                isInRoot: currentIndex !== -1,
-                targetIndex,
-            });
-
-            if (currentIndex !== -1) {
-                // Already in root, move to target position
-                if (currentIndex !== targetIndex) {
-                    // Adjust for removal if moving forward
-                    const adjustedIndex = currentIndex < targetIndex ? targetIndex - 1 : targetIndex;
-                    console.log('[EditorBody] Moving within root:', { blockId, currentIndex, adjustedIndex });
-                    onBlockMove(blockId, Math.max(0, adjustedIndex));
-                }
-            } else {
-                // Block is nested - move it to root level at target position
-                console.log('[EditorBody] Moving nested block to root:', { blockId, targetIndex });
-                onBlockMove(blockId, targetIndex, undefined);
+            // Moving existing block
+            const currentIndex = mainBlocks.findIndex(b => b.id === blockId);
+            let targetIndex = index;
+            
+            if (currentIndex !== -1 && currentIndex < targetIndex) {
+                // Adjust for removal if moving forward in the same container
+                targetIndex = targetIndex - 1;
             }
+            
+            onBlockMove(blockId, Math.max(0, targetIndex));
         } else if (blockType) {
-            // Adding new block at calculated position
-            console.log('[EditorBody] Adding new block:', { blockType, index: targetIndex });
-            onBlockAdd(blockType, targetIndex);
-        } else {
-            console.warn('[EditorBody] Body drop with no block ID or type!');
+            // Adding new block from sidebar
+            onBlockAdd(blockType, index);
         }
-
-        setIsDragging(false);
-        setDragOverIndex(null);
-        setDraggedBlockId(null);
-        setDropIndicatorPosition(null);
-        setCalculatedInsertIndex(null);
     };
 
-    return (
+    const renderAddButton = (index: number) => (
         <div
-            ref={containerRef}
-            className={`relative w-full rounded-[2.5rem] border shadow-lg min-h-[400px] transition-all bg-transparent ${darkMode
-                ? 'border-neutral-200 dark:border-neutral-800 shadow-neutral-200/50 dark:shadow-neutral-900/50'
-                : 'border-neutral-200 shadow-neutral-200/50'
-                }`}
-            onDragOver={handleBodyDragOver}
-            onDrop={handleBodyDrop}
-            onDragLeave={handleDragLeave}
-            onDragStart={handleDragStart}
-            onDragEnd={() => {
-                setDropIndicatorPosition(null);
-                setDragOverIndex(null);
-                setIsDragging(false);
-                setDraggedBlockId(null);
-                setCalculatedInsertIndex(null);
-            }}
+            className={`relative h-4 group/add transition-all duration-300 ${
+                hoverIndex === index ? 'h-12' : 'h-4 opacity-0 hover:opacity-100'
+            }`}
+            onDragOver={(e) => handleDragOver(e, index)}
+            onDragLeave={() => setHoverIndex(null)}
+            onDrop={(e) => handleDrop(e, index)}
         >
-            {/* 1. Visual Indicator Overlay */}
-            {dropIndicatorPosition && isDragging && (
-                <DropIndicator position={dropIndicatorPosition} darkMode={darkMode} />
-            )}
-
-            <div 
-                className="flex flex-col p-8"
-                onDragOver={(e) => {
-                    // Only handle if not over a block or nested container
-                    const target = e.target as HTMLElement;
-                    const isOverBlock = target.closest('[data-block-wrapper]');
-                    const isOverNestedContainer = target.closest('[data-layout-container]') && target.closest('[data-layout-container]') !== containerRef.current;
-                    
-                    if (!isOverBlock && !isOverNestedContainer) {
-                        handleBodyDragOver(e);
-                    }
-                }}
-                onDrop={(e) => {
-                    // Only handle if not over a block or nested container
-                    const target = e.target as HTMLElement;
-                    const isOverBlock = target.closest('[data-block-wrapper]');
-                    const isOverNestedContainer = target.closest('[data-layout-container]') && target.closest('[data-layout-container]') !== containerRef.current;
-                    
-                    if (!isOverBlock && !isOverNestedContainer) {
-                        handleBodyDrop(e);
-                    }
-                }}
-            >
-                {/* 2. Content Area */}
-                {blocks.length === 0 ? (
-                    <EmptyState isDragging={isDragging} darkMode={darkMode} />
-                ) : (
-                    blocks.map((block, index) => (
-                        <Fragment key={block.id}>
-                            {/* Visual Drop Zone - appears between blocks when dragging */}
-                            {index > 0 && (
-                                <div
-                                    className={`h-6 transition-all duration-200 ${isDragging && dragOverIndex === index
-                                        ? 'bg-primary/5 border-y border-dashed border-primary/20 rounded-lg'
-                                        : 'bg-transparent'
-                                        }`}
-                                />
-                            )}
-
-                            {/* Block Container */}
-                            <div
-                                ref={setBlockRef(block.id)}
-                                onDragOver={(e) => {
-                                    const blockEl = blockRefs.current.get(block.id);
-                                    if (blockEl) {
-                                        handleDragOver(e, index, blockEl);
-                                    }
-                                }}
-                                onDragLeave={handleDragLeave}
-                                onDrop={(e) => handleDrop(e, index)}
-                                className="relative mb-6 last:mb-0"
-                            >
-                                <BlockWrapper
-                                    block={block}
-                                    onUpdate={(data) => onBlockUpdate(block.id, data)}
-                                    onDelete={() => onBlockDelete(block.id)}
-                                    onMoveUp={index > 0 ? () => onBlockMove(block.id, index - 1) : undefined}
-                                    onMoveDown={index < blocks.length - 1 ? () => onBlockMove(block.id, index + 1) : undefined}
-                                    allBlocks={blocks}
-                                />
-                            </div>
-                        </Fragment>
-                    ))
-                )}
+            <div className="absolute inset-0 flex items-center justify-center">
+                <div className={`w-full h-px ${darkMode ? 'bg-neutral-800' : 'bg-neutral-200'} absolute top-1/2 -translate-y-1/2`} />
+                <button
+                    onClick={() => {
+                        // Default to paragraph for quick add
+                        onBlockAdd('paragraph', index);
+                    }}
+                    className="relative z-10 size-8 rounded-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 flex items-center justify-center text-neutral-400 hover:text-primary hover:border-primary hover:scale-110 transition-all shadow-sm"
+                >
+                    <Plus size={16} />
+                </button>
             </div>
         </div>
     );
-}
-
-/**
- * Visual Line that shows where the block will land
- */
-function DropIndicator({ position, darkMode }: { position: { top: number; left: number; width: number }; darkMode: boolean }) {
-    return (
-        <div
-            className="absolute z-50 pointer-events-none"
-            style={{
-                top: `${position.top - 12}px`,
-                left: `${position.left}px`,
-                width: `${position.width}px`,
-                height: '24px',
-            }}
-        >
-            {/* Drop zone background */}
-            <div className={`absolute inset-0 rounded-lg border border-dashed backdrop-blur-sm ${darkMode
-                ? 'bg-primary/10 dark:bg-primary/20 border-primary dark:border-primary/60'
-                : 'bg-primary/10 border-primary'
-                }`} />
-
-            {/* Center line indicator */}
-            <div className={`absolute top-1/2 left-0 right-0 h-0.5 rounded-full transform -translate-y-1/2 ${darkMode ? 'bg-primary dark:bg-primary/80' : 'bg-primary'
-                }`} />
 
-            {/* Drop icon indicator */}
-            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <div className={`w-6 h-6 rounded-full flex items-center justify-center shadow-lg shadow-primary/30 ${darkMode ? 'bg-primary dark:bg-primary/90' : 'bg-primary'
-                    }`}>
-                    <div className={`w-2 h-2 rounded-full ${darkMode ? 'bg-white dark:bg-neutral-900' : 'bg-white'
-                        }`} />
-                </div>
+    const renderBlocks = (blocksToRender: Block[], containerId?: string) => {
+        return (
+            <div className="space-y-4">
+                {renderAddButton(0)}
+                {blocksToRender.map((block, index) => (
+                    <Fragment key={block.id}>
+                        <BlockWrapper
+                            block={block}
+                            onUpdate={(data) => onBlockUpdate(block.id, data, containerId)}
+                            onDelete={() => onBlockDelete(block.id, containerId)}
+                            onDuplicate={() => helpers.duplicateBlock(block.id)}
+                            onMoveUp={() => index > 0 && onBlockMove(block.id, index - 1, containerId)}
+                            onMoveDown={() => index < blocksToRender.length - 1 && onBlockMove(block.id, index + 1, containerId)}
+                            
+                            // Essential for nested rendering
+                            childBlocks={Array.isArray(block.children) && typeof block.children[0] === 'object' ? (block.children as Block[]) : []}
+                            onChildBlockAdd={(type, idx, cid) => onBlockAdd(type, idx ?? 0, cid)}
+                            onChildBlockUpdate={onBlockUpdate}
+                            onChildBlockDelete={onBlockDelete}
+                            onChildBlockMove={onBlockMove}
+                        />
+                        {renderAddButton(index + 1)}
+                    </Fragment>
+                ))}
             </div>
-        </div>
-    );
-}
+        );
+    };
 
-/**
- * Placeholder when the editor is empty
- */
-function EmptyState({ isDragging, darkMode }: { isDragging: boolean; darkMode: boolean }) {
     return (
-        <div
-            className={`flex flex-col items-center justify-center py-20 px-8 rounded-2xl border border-dashed transition-all ${darkMode
-                ? isDragging
-                    ? 'border-primary/30 bg-primary/5 dark:bg-primary/10'
-                    : 'border-gray-200/50 dark:border-neutral-700/50 bg-neutral-50/50 dark:bg-neutral-800/30'
-                : isDragging
-                    ? 'border-primary/30 bg-primary/5'
-                    : 'border-gray-200/50 bg-neutral-50/50'
-                }`}
-        >
-            <div
-                className={`p-4 rounded-full mb-4 transition-colors ${darkMode
-                    ? isDragging
-                        ? 'bg-primary/10 dark:bg-primary/20'
-                        : 'bg-neutral-100 dark:bg-neutral-800'
-                    : isDragging
-                        ? 'bg-primary/10'
-                        : 'bg-neutral-100'
-                    }`}
-            >
-                <Plus
-                    size={24}
-                    className={`transition-colors ${darkMode
-                        ? isDragging
-                            ? 'text-primary'
-                            : 'text-neutral-400 dark:text-neutral-500'
-                        : isDragging
-                            ? 'text-primary'
-                            : 'text-neutral-400'
-                        }`}
-                />
-            </div>
-            <p
-                className={`text-sm font-black uppercase tracking-wider transition-colors ${darkMode
-                    ? isDragging
-                        ? 'text-primary'
-                        : 'text-neutral-500 dark:text-neutral-400'
-                    : isDragging
-                        ? 'text-primary'
-                        : 'text-neutral-500'
-                    }`}
-            >
-                {isDragging ? 'Drop Block Here' : 'Drop a component here'}
-            </p>
-            <p className={`text-xs mt-2 ${darkMode ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-400'
-                }`}>
-                Drag blocks from the library to get started
+        <div ref={bodyRef} className="relative min-h-[400px]">
+            {mainBlocks.length === 0 ? (
+                <div 
+                    className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-[2rem] text-neutral-400 hover:text-primary hover:border-primary transition-all cursor-pointer group"
+                    onClick={() => onBlockAdd('paragraph', 0)}
+                    onDragOver={(e) => e.preventDefault()}
+                    onDrop={(e) => handleDrop(e, 0)}
+                >
+                    <Plus size={48} strokeWidth={1} className="mb-4 opacity-20 group-hover:opacity-100 transition-opacity" />
+                    <span className="text-sm font-bold uppercase tracking-widest">Add your first block</span>
+                </div>
+            ) : (
+                renderBlocks(mainBlocks)
+            )}
+            
+            {/* Bottom spacer to allow dragging after last block */}
+            <div className="h-20" />
+            
+            <p className={`text-xs mt-2 text-center ${darkMode ? 'text-neutral-500' : 'text-neutral-400'}`}>
+                Drag blocks from the library to build your story
             </p>
         </div>
     );