@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/EditorBody.tsx

@@ -35,19 +35,19 @@ export function EditorBody({
     darkMode = true,
     backgroundColors,
 }: EditorBodyProps) {
-    // Debug: Log darkMode value
-    useEffect(() => {
-        console.log('[EditorBody] darkMode:', darkMode);
-    }, [darkMode]);
-
+    // --- 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 containerRef = React.useRef<HTMLDivElement>(null);
+    const [calculatedInsertIndex, setCalculatedInsertIndex] = useState<number | null>(null);
+
+    // --- Refs ---
+    const containerRef = useRef<HTMLDivElement>(null);
+    const blockRefs = useRef<Map<string, HTMLDivElement>>(new Map());
 
-    // Listen for clear-drop-indicator events from nested containers
-    React.useEffect(() => {
+    // --- Cleanup & Event Listeners ---
+    useEffect(() => {
         const handleClearIndicator = () => {
             setDropIndicatorPosition(null);
             setDragOverIndex(null);
@@ -62,13 +62,13 @@ export function EditorBody({
         }
     }, []);
 
-    // Global drag end handler - clear all indicators when drag ends
-    React.useEffect(() => {
+    useEffect(() => {
         const handleGlobalDragEnd = () => {
             setDropIndicatorPosition(null);
             setDragOverIndex(null);
             setIsDragging(false);
             setDraggedBlockId(null);
+            setCalculatedInsertIndex(null);
         };
 
         document.addEventListener('dragend', handleGlobalDragEnd);
@@ -76,9 +76,8 @@ export function EditorBody({
             document.removeEventListener('dragend', handleGlobalDragEnd);
         };
     }, []);
-    // Store refs for all blocks - use callback refs to avoid hook violations
-    const blockRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
 
+    // --- Helper Functions ---
     const setBlockRef = (blockId: string) => (el: HTMLDivElement | null) => {
         if (el) {
             blockRefs.current.set(blockId, el);
@@ -87,6 +86,8 @@ export function EditorBody({
         }
     };
 
+    // --- 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
@@ -109,37 +110,67 @@ export function EditorBody({
 
         setDragOverIndex(index);
 
-        // Calculate position for absolute drop indicator using mouse position
+        // Calculate position for absolute drop indicator - always show between blocks
         const container = containerRef.current;
-        if (container) {
+        if (container && element) {
             requestAnimationFrame(() => {
                 // Double-check refs are still valid inside RAF callback
                 if (!containerRef.current) return;
 
                 const containerRect = containerRef.current.getBoundingClientRect();
-                // Use mouse Y position relative to container for accurate positioning
+                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
-                let finalTop = relativeTop;
-                if (element) {
-                    const elementRect = element.getBoundingClientRect();
-                    const elementTop = elementRect.top - containerRect.top;
-                    const elementCenter = elementTop + elementRect.height / 2;
-
-                    // If mouse is in upper half of element, show above; otherwise show below
-                    if (relativeTop < elementCenter) {
-                        finalTop = elementTop;
+                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 {
-                        finalTop = elementTop + elementRect.height;
+                        // 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;
+                        }
                     }
                 }
 
-                // Calculate width - use container width minus padding (32px on each side)
-                const padding = 32;
-                const width = containerRect.width - (padding * 2);
-
                 setDropIndicatorPosition({
                     top: finalTop,
                     left: padding,
@@ -159,6 +190,8 @@ export function EditorBody({
             if (!isMovingToNested) {
                 setDragOverIndex(null);
                 setDropIndicatorPosition(null);
+                setCalculatedInsertIndex(null);
+                setIsDragging(false);
             }
         }
     };
@@ -231,6 +264,7 @@ export function EditorBody({
         setIsDragging(false);
         setDraggedBlockId(null);
         setDropIndicatorPosition(null);
+        setCalculatedInsertIndex(null);
     };
 
     const handleBodyDragOver = (e: React.DragEvent) => {
@@ -244,26 +278,109 @@ export function EditorBody({
             // We're over a nested container, clear our indicator
             setDropIndicatorPosition(null);
             setDragOverIndex(null);
+            setCalculatedInsertIndex(null);
             setIsDragging(false);
             return;
         }
 
         setIsDragging(true);
 
-        // Calculate drop indicator position for body drop zone (at the end)
+        // Calculate drop indicator position based on mouse Y position relative to blocks
         const container = containerRef.current;
-        if (container) {
+        if (container && blocks.length > 0) {
             requestAnimationFrame(() => {
                 if (!containerRef.current) return;
 
                 const containerRect = containerRef.current.getBoundingClientRect();
-                // Position at the bottom of the container
-                const relativeTop = containerRect.height;
+                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: relativeTop,
+                    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,
                 });
@@ -280,11 +397,40 @@ export function EditorBody({
         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;
+        
+        // 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),
         });
@@ -295,28 +441,32 @@ export function EditorBody({
         }
 
         if (blockId) {
-            // Moving existing block to end of root level
+            // 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: blocks.length,
+                targetIndex,
             });
 
             if (currentIndex !== -1) {
-                // Already in root, move to end
-                console.log('[EditorBody] Moving within root to end:', { blockId, targetIndex: blocks.length - 1 });
-                onBlockMove(blockId, blocks.length - 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 the end
-                console.log('[EditorBody] Moving nested block to root end:', { blockId, targetIndex: blocks.length });
-                onBlockMove(blockId, blocks.length, undefined);
+                // 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);
             }
         } else if (blockType) {
-            // Adding new block to end
-            console.log('[EditorBody] Adding new block to end:', { blockType, index: blocks.length });
-            onBlockAdd(blockType, blocks.length);
+            // 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!');
         }
@@ -325,6 +475,7 @@ export function EditorBody({
         setDragOverIndex(null);
         setDraggedBlockId(null);
         setDropIndicatorPosition(null);
+        setCalculatedInsertIndex(null);
     };
 
     return (
@@ -343,94 +494,41 @@ export function EditorBody({
                 setDragOverIndex(null);
                 setIsDragging(false);
                 setDraggedBlockId(null);
+                setCalculatedInsertIndex(null);
             }}
         >
-            {/* Enhanced Drop Indicator - Visual drop zone */}
-            {dropIndicatorPosition && (
-                <div
-                    className="absolute z-50 pointer-events-none"
-                    style={{
-                        top: `${dropIndicatorPosition.top - 12}px`,
-                        left: `${dropIndicatorPosition.left}px`,
-                        width: `${dropIndicatorPosition.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>
-                    </div>
-                </div>
+            {/* 1. Visual Indicator Overlay */}
+            {dropIndicatorPosition && isDragging && (
+                <DropIndicator position={dropIndicatorPosition} darkMode={darkMode} />
             )}
 
-            <div className="flex flex-col p-8">
+            <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 ? (
-                    /* Empty State - Drop Zone */
-                    <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
-                        </p>
-                    </div>
+                    <EmptyState isDragging={isDragging} darkMode={darkMode} />
                 ) : (
-                    /* Blocks with visual drop zones between them */
                     blocks.map((block, index) => (
                         <Fragment key={block.id}>
                             {/* Visual Drop Zone - appears between blocks when dragging */}
@@ -473,3 +571,95 @@ export function EditorBody({
     );
 }
 
+/**
+ * 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>
+            </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
+            </p>
+        </div>
+    );
+}