@jhits/plugin-blog 0.0.18 → 0.0.20

package/src/views/CanvasEditor/BlockWrapper.tsx

@@ -1,522 +1,192 @@
 /**
  * Block Wrapper Component
  * Provides hover controls (Delete, Move, Settings) for each block
+ * Simplified to allow LayoutWrapper/Prose to control styling
  */
 
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
-import { Plus, Trash2, ChevronUp, ChevronDown, Settings2, GripVertical, Copy } from 'lucide-react';
-import { Block } from '../../types/block';
+import React, { useState, useRef, useCallback } from 'react';
+import { Plus, Trash2, ChevronUp, ChevronDown, Copy } from 'lucide-react';
+import { Block, BlockEditProps } from '../../types/block';
 import { blockRegistry } from '../../registry/BlockRegistry';
-import { getChildBlocks, isContainerBlock } from '../../lib/utils/blockHelpers';
 import { useEditor } from '../../state/EditorContext';
 
-export interface BlockWrapperProps {
+export interface BlockWrapperProps extends Partial<Omit<BlockEditProps, 'block' | 'onUpdate'>> {
     block: Block;
     onUpdate: (data: Partial<Block['data']>) => void;
-    onDelete: () => void;
     onMoveUp?: () => void;
     onMoveDown?: () => void;
-    /** All blocks in the editor (for resolving child block IDs) */
-    allBlocks?: Block[];
+    onDuplicate?: () => void;
 }
 
 export function BlockWrapper({
     block,
     onUpdate,
     onDelete,
+    onDuplicate,
     onMoveUp,
     onMoveDown,
-    allBlocks = [],
+    isSelected: isSelectedProp,
+    childBlocks,
+    onChildBlockAdd,
+    onChildBlockUpdate,
+    onChildBlockDelete,
+    onChildBlockMove,
 }: BlockWrapperProps) {
-    const [isHovered, setIsHovered] = useState(false);
-    const [isControlsHovered, setIsControlsHovered] = useState(false);
-    const [showControls, setShowControls] = useState(false);
-    const [isSelectingText, setIsSelectingText] = useState(false);
-    const [showSettingsMenu, setShowSettingsMenu] = useState(false);
-    const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const settingsMenuRef = useRef<HTMLDivElement>(null);
-    const { helpers, state, dispatch } = useEditor();
-    const blockDefinition = blockRegistry.get(block.type);
+    const { state, dispatch, translations } = useEditor();
+    const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const definition = blockRegistry.get(block.type);
 
-    // Check if this is a container block
-    const isContainer = isContainerBlock(block, blockRegistry);
-    // Get child blocks - if children are Block objects, use them directly
-    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
-        ? (typeof block.children[0] === 'object'
-            ? block.children as Block[]
-            : getChildBlocks(block, state.blocks))
-        : [];
+    // Hero block is permanent and cannot be deleted, moved, or duplicated
+    const isHero = block.type === 'hero';
 
-    // Handle delayed hide with timeout
-    useEffect(() => {
-        const shouldShow = isHovered || isControlsHovered;
+    // Controls are visible if this block is "selected" (hovered or clicked) AND it's not a hero block
+    const isSelected = !isHero && (isSelectedProp || state.selectedBlockId === block.id);
 
-        if (shouldShow) {
-            // Clear any pending hide timeout
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-                hideTimeoutRef.current = null;
-            }
-            // Show immediately
-            setShowControls(true);
-        } else {
-            // Delay hiding by 500ms
-            hideTimeoutRef.current = setTimeout(() => {
-                setShowControls(false);
-            }, 500);
+    const handleMouseEnter = useCallback(() => {
+        if (isHero) return; // No hover effects for hero
+
+        if (hideTimeoutRef.current) {
+            clearTimeout(hideTimeoutRef.current);
+            hideTimeoutRef.current = null;
         }
+        // Immediately select this block on hover, which hides any previous selection
+        dispatch({ type: 'SELECT_BLOCK', payload: block.id });
+    }, [block.id, dispatch, isHero]);
 
-        return () => {
-            if (hideTimeoutRef.current) {
-                clearTimeout(hideTimeoutRef.current);
-            }
-        };
-    }, [isHovered, isControlsHovered]);
+    const handleMouseLeave = useCallback(() => {
+        if (isHero) return;
 
-    if (!blockDefinition) {
-        return (
-            <div className="p-4 border border-red-300 dark:border-red-700 rounded-2xl bg-red-50 dark:bg-red-900/20">
-                <p className="text-sm text-red-600 dark:text-red-400">
-                    Unknown block type: {block.type}
-                </p>
-            </div>
-        );
-    }
+        // Delay hiding to allow the user to reach the buttons
+        hideTimeoutRef.current = setTimeout(() => {
+            // Only clear if we are still the selected block (handled by reducer now)
+            dispatch({ type: 'DESELECT_BLOCK', payload: block.id });
+        }, 400);
+    }, [block.id, dispatch, isHero]);
 
-    const EditComponent = blockDefinition.components.Edit;
+    const [isDraggingLocal, setIsDraggingLocal] = useState(false);
 
     const handleDragStart = (e: React.DragEvent) => {
-        // Check if user is selecting text - if so, prevent dragging
-        const selection = window.getSelection();
-        if (selection && selection.toString().length > 0) {
-            e.preventDefault();
-            return;
-        }
-
-        // Prevent dragging if user was selecting text
-        if (isSelectingText) {
-            e.preventDefault();
-            return;
-        }
-
-        // Only allow dragging when the block is focused/selected (hovered)
-        if (!isHovered && !showControls) {
+        if (isHero) {
             e.preventDefault();
             return;
         }
-
-        // Stop propagation to prevent parent containers from also handling the drag
-        e.stopPropagation();
-
-        console.log('[BlockWrapper] Drag Start:', {
-            blockId: block.id,
-            blockType: block.type,
-            blockData: block.data,
-            isContainer,
-            hasChildren: isContainer && childBlocks.length > 0,
-        });
-
-        e.dataTransfer.setData('block-id', block.id);
-        e.dataTransfer.setData('block-type', block.type);
+        
+        e.stopPropagation(); // VERY IMPORTANT: Prevent parent containers from also dragging
+        
+        e.dataTransfer.setData('blockId', block.id);
+        e.dataTransfer.setData('blockType', block.type);
+        // Also set standard text/plain for better cross-browser support
+        e.dataTransfer.setData('text/plain', block.id);
         e.dataTransfer.effectAllowed = 'move';
-        e.dataTransfer.setData('text/plain', ''); // Required for Firefox
-
-        // Store in a way that persists across components
+        
+        // Also set a global flag for easier access in LayoutContainer
         if (typeof window !== 'undefined') {
             (window as any).__DRAGGED_BLOCK_ID__ = block.id;
-            console.log('[BlockWrapper] Stored global dragged block ID:', block.id);
-        }
-    };
-
-    // Track text selection
-    const handleMouseDown = (e: React.MouseEvent) => {
-        // Check if clicking on an input, textarea, or contentEditable element
-        const target = e.target as HTMLElement;
-        const isEditableElement = target.tagName === 'INPUT' ||
-            target.tagName === 'TEXTAREA' ||
-            target.isContentEditable ||
-            target.closest('input, textarea, [contenteditable="true"]');
-
-        if (isEditableElement) {
-            setIsSelectingText(true);
-            // Reset after mouse up
-            const handleMouseUp = () => {
-                setTimeout(() => {
-                    const selection = window.getSelection();
-                    if (!selection || selection.toString().length === 0) {
-                        setIsSelectingText(false);
-                    }
-                }, 100);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-            document.addEventListener('mouseup', handleMouseUp);
-        }
-    };
-
-    // For hero blocks, only show controls when hovering over the image container
-    const isHeroBlock = block.type === 'hero';
-    const wrapperRef = useRef<HTMLDivElement>(null);
-
-    const handleMouseMove = (e: React.MouseEvent) => {
-        if (isHeroBlock) {
-            // For hero blocks, check if mouse is actually over the image container element
-            const target = e.target as HTMLElement;
-            // Check if we're over the image container (using data attribute for more reliable detection)
-            const imageContainer = target.closest('[data-hero-image-container]');
-            // Check if we're over an Image component (from plugin-images)
-            const imageElement = target.closest('[data-image-id]');
-            // Check if we're directly over an img tag
-            const isImgTag = target.tagName === 'IMG';
-
-            const isOverImage = !!(imageContainer || imageElement || isImgTag);
-            setIsHovered(isOverImage);
-        } else if (!isHeroBlock) {
-            setIsHovered(true);
-        }
-    };
-
-    const handleMouseEnter = (e: React.MouseEvent) => {
-        if (!isHeroBlock) {
-            setIsHovered(true);
-        } else {
-            // For hero blocks, check position on enter
-            handleMouseMove(e);
-        }
-    };
-
-    const handleMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    // Close settings menu when clicking outside
-    useEffect(() => {
-        function handleClickOutside(event: MouseEvent) {
-            if (settingsMenuRef.current && !settingsMenuRef.current.contains(event.target as Node)) {
-                setShowSettingsMenu(false);
-            }
-        }
-
-        if (showSettingsMenu) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [showSettingsMenu]);
-
-    // Generate a unique block ID
-    const generateBlockId = (): string => {
-        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-            return crypto.randomUUID();
         }
-        return `block-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        
+        // Visual feedback using state instead of direct DOM manipulation
+        setIsDraggingLocal(true);
     };
 
-    // Clone a block with new IDs (recursive for nested blocks)
-    const cloneBlock = (blockToClone: Block): Block => {
-        const cloned: Block = {
-            ...blockToClone,
-            id: generateBlockId(),
-            data: { ...blockToClone.data },
-            meta: blockToClone.meta ? { ...blockToClone.meta } : undefined,
-        };
-
-        // Handle children if they exist
-        if (blockToClone.children) {
-            if (Array.isArray(blockToClone.children) && blockToClone.children.length > 0) {
-                // Check if children are Block objects or IDs
-                if (typeof blockToClone.children[0] === 'object') {
-                    cloned.children = (blockToClone.children as Block[]).map(cloneBlock);
-                } else {
-                    // If children are IDs, we need to find and clone the actual blocks
-                    const childBlocks = getChildBlocks(blockToClone, allBlocks.length > 0 ? allBlocks : state.blocks);
-                    cloned.children = childBlocks.map(cloneBlock);
-                }
-            }
-        }
-
-        return cloned;
-    };
-
-    const handleCopy = () => {
-        const clonedBlock = cloneBlock(block);
-        // Store in localStorage for persistence across components
+    const handleDragEnd = (e: React.DragEvent) => {
+        setIsDraggingLocal(false);
+        
         if (typeof window !== 'undefined') {
-            localStorage.setItem('__BLOG_EDITOR_COPIED_BLOCK__', JSON.stringify(clonedBlock));
+            (window as any).__DRAGGED_BLOCK_ID__ = null;
         }
-        setShowSettingsMenu(false);
     };
 
-    // Store block ID when hovering for paste context
-    useEffect(() => {
-        if (isHovered || showControls) {
-            if (typeof window !== 'undefined') {
-                (window as any).__BLOG_EDITOR_HOVERED_BLOCK_ID__ = block.id;
-            }
-        }
-    }, [isHovered, showControls, block.id]);
+    if (!definition) return null;
+
+    const EditComponent = definition.components.Edit;
 
     return (
         <div
-            ref={wrapperRef}
-            className="group relative"
+            className={`relative group/block transition-all duration-200 ${
+                isHero ? '' : 'mb-4 cursor-grab active:cursor-grabbing'
+            } ${isDraggingLocal ? 'opacity-20 scale-[0.98] grayscale-50 ring-2 ring-primary/20 rounded-2xl shadow-2xl' : ''}`}
             onMouseEnter={handleMouseEnter}
-            onMouseMove={isHeroBlock ? handleMouseMove : undefined}
             onMouseLeave={handleMouseLeave}
-            onMouseDown={handleMouseDown}
-            draggable={isHovered || showControls}
+            draggable={!isHero}
             onDragStart={handleDragStart}
-            data-block-wrapper
+            onDragEnd={handleDragEnd}
+            data-block-wrapper="true"
             data-block-id={block.id}
+            data-block-type={block.type}
         >
-            {/* Left Margin Controls - Visible on Hover */}
-            <div
-                className={`absolute -left-16 top-1/2 -translate-y-1/2 flex flex-col gap-2 transition-all duration-200 ${showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'
-                    }`}
-                onMouseEnter={() => setIsControlsHovered(true)}
-                onMouseLeave={() => setIsControlsHovered(false)}
-            >
-                {/* Add Block Above */}
-                <button
-                    className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-primary dark:hover:text-primary bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-primary dark:hover:border-primary/50 transition-colors"
-                    title="Add block above"
-                >
-                    <Plus size={14} />
-                </button>
-
-                {/* Move Up */}
-                {onMoveUp && (
-                    <button
-                        onClick={onMoveUp}
-                        className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors"
-                        title="Move up"
-                    >
-                        <ChevronUp size={14} />
-                    </button>
-                )}
-
-                {/* Move Down */}
-                {onMoveDown && (
-                    <button
-                        onClick={onMoveDown}
-                        className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 transition-colors"
-                        title="Move down"
-                    >
-                        <ChevronDown size={14} />
-                    </button>
-                )}
-
-                {/* Delete */}
-                <button
-                    onClick={onDelete}
-                    className="p-2 text-neutral-500 dark:text-neutral-400 hover:text-red-500 dark:hover:text-red-400 bg-white dark:bg-neutral-800 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700 hover:border-red-500 dark:hover:border-red-500/50 transition-colors"
-                    title="Delete block"
+            {/* Hover Controls - Hidden for Hero Block */}
+            {!isHero && (
+                <div
+                    className={`absolute -left-20 top-0 flex flex-col gap-2 transition-all duration-300 z-30 ${isSelected ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+                    onMouseEnter={() => {
+                        // Prevent hiding when mouse is over the controls themselves
+                        if (hideTimeoutRef.current) {
+                            clearTimeout(hideTimeoutRef.current);
+                            hideTimeoutRef.current = null;
+                        }
+                    }}
                 >
-                    <Trash2 size={14} />
-                </button>
-            </div>
-
-            {/* Block Header - Positioned above the component */}
-            <div
-                className={`mb-2 transition-all relative ${isHovered || showControls || showSettingsMenu
-                    ? 'opacity-100 translate-y-0'
-                    : 'opacity-0 -translate-y-2 pointer-events-none'
-                    }`}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}
-            >
-                <div className="flex items-center justify-between px-2 py-1.5 rounded-lg backdrop-blur-sm border bg-neutral-50/95 dark:bg-neutral-800/95 border-neutral-200 dark:border-neutral-800">
-                    <div className="flex items-center gap-2 flex-1 min-w-0">
-                        <GripVertical
-                            size={12}
-                            className="cursor-grab active:cursor-grabbing shrink-0 text-neutral-400 dark:text-neutral-500"
-                        />
-                        <span className="text-[10px] font-black uppercase tracking-wider shrink-0 text-neutral-500 dark:text-neutral-400">
-                            {blockDefinition.name}
-                        </span>
-
-                        {/* Layout Block Settings - Inline in header */}
-                        {/* {block.type === 'section' && (
-                            <div className="flex items-center gap-2 ml-4 flex-1 min-w-0">
-                                <select
-                                    value={(block.data.padding as string) || 'md'}
-                                    onChange={(e) => onUpdate({ padding: e.target.value })}
-                                    onClick={(e) => e.stopPropagation()}
-                                    className="text-[10px] font-bold border px-2 py-1 rounded outline-none focus:border-primary transition-all bg-white dark:bg-neutral-900/50 border-neutral-300 dark:border-neutral-700 dark:text-neutral-100"
-                                >
-                                    <option value="sm">Small</option>
-                                    <option value="md">Medium</option>
-                                    <option value="lg">Large</option>
-                                </select>
-                                <select
-                                    value={(block.data.background as string) || 'DEFAULT'}
-                                    onChange={(e) => onUpdate({ background: e.target.value })}
-                                    onClick={(e) => e.stopPropagation()}
-                                    className="text-[10px] font-bold border px-2 py-1 rounded outline-none focus:border-primary transition-all bg-white dark:bg-neutral-900/50 border-neutral-300 dark:border-neutral-700 dark:text-neutral-100"
-                                >
-                                    <option value="DEFAULT">Default</option>
-                                    <option value="NEUTRAL">Neutral</option>
-                                    <option value="SAGE">Sage</option>
-                                    <option value="CREAM">Cream</option>
-                                </select>
-                            </div>
-                        )} */}
-
-                        {block.type === 'columns' && (() => {
-                            const columnCount = block.data.columnCount as number | undefined;
-                            const layout = block.data.layout as string | undefined;
-                            
-                            // Determine number of columns
-                            let numColumns: number;
-                            if (columnCount !== undefined && columnCount > 0) {
-                                numColumns = columnCount;
-                            } else if (layout) {
-                                // Legacy layout system
-                                const layoutMap: Record<string, number> = {
-                                    '50-50': 2,
-                                    '33-66': 2,
-                                    '66-33': 2,
-                                    '25-25-25-25': 4,
-                                    '25-75': 2,
-                                    '75-25': 2,
-                                };
-                                numColumns = layoutMap[layout] || 2;
-                            } else {
-                                numColumns = 2;
-                            }
-                            
-                            // Get column widths
-                            const storedWidths = block.data.columnWidths as number[] | undefined;
-                            const columnWidths = storedWidths && storedWidths.length === numColumns
-                                ? storedWidths
-                                : Array(numColumns).fill(Math.floor(100 / numColumns));
-                            
-                            return (
-                                <div className="flex items-center gap-1.5 ml-4 flex-1 min-w-0">
-                                    {Array.from({ length: numColumns }).map((_, colIndex) => (
-                                        <div key={colIndex} className="flex items-center gap-1">
-                                            <input
-                                                type="number"
-                                                min="10"
-                                                max="90"
-                                                step="1"
-                                                value={columnWidths[colIndex] || 50}
-                                                onChange={(e) => {
-                                                    const newWidth = parseInt(e.target.value) || 50;
-                                                    const newWidths = [...columnWidths];
-                                                    newWidths[colIndex] = Math.max(10, Math.min(90, newWidth));
-                                                    
-                                                    // Normalize remaining columns to sum to 100
-                                                    const remainingTotal = newWidths.reduce((sum, w, i) => i === colIndex ? sum : sum + w, 0);
-                                                    const remainingTarget = 100 - newWidths[colIndex];
-                                                    if (remainingTotal > 0 && remainingTarget > 0) {
-                                                        const scale = remainingTarget / remainingTotal;
-                                                        newWidths.forEach((w, i) => {
-                                                            if (i !== colIndex) {
-                                                                newWidths[i] = Math.round(w * scale);
-                                                            }
-                                                        });
-                                                    }
-                                                    
-                                                    // Ensure sum is exactly 100
-                                                    const finalTotal = newWidths.reduce((sum, w) => sum + w, 0);
-                                                    if (finalTotal !== 100) {
-                                                        const diff = 100 - finalTotal;
-                                                        const lastIndex = newWidths.length - 1;
-                                                        newWidths[lastIndex] = Math.max(10, newWidths[lastIndex] + diff);
-                                                    }
-                                                    
-                                                    onUpdate({
-                                                        ...block.data,
-                                                        columnWidths: newWidths,
-                                                        layout: undefined, // Clear layout when using custom widths
-                                                    });
-                                                }}
-                                                onClick={(e) => e.stopPropagation()}
-                                                className="w-12 text-[10px] font-bold bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 px-1.5 py-0.5 rounded outline-none focus:border-primary transition-all dark:text-neutral-100 text-center"
-                                            />
-                                            <span className="text-[9px] text-neutral-400 dark:text-neutral-500">%</span>
-                                        </div>
-                                    ))}
-                                </div>
-                            );
-                        })()}
-                    </div>
-                    <div className="relative shrink-0 z-20" ref={settingsMenuRef}>
-                        <button
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                setShowSettingsMenu(!showSettingsMenu);
-                            }}
-                            className="p-1 rounded transition-colors text-neutral-400 dark:text-neutral-500 hover:text-neutral-950 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 relative z-20"
-                            title="Block settings"
+                    {onMoveUp && (
+                        <button 
+                            onClick={onMoveUp}
+                            className="p-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-400 hover:text-primary hover:border-primary shadow-xl transition-all hover:scale-110 active:scale-95"
+                            title="Move Up"
                         >
-                            <Settings2 size={12} />
+                            <ChevronUp size={18} strokeWidth={2.5} />
                         </button>
-
-                        {/* Settings Dropdown Menu */}
-                        {showSettingsMenu && (
-                            <div className="absolute right-0 top-full mt-1 w-40 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg shadow-xl z-20 overflow-hidden">
-                                <button
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleCopy();
-                                    }}
-                                    className="w-full flex items-center gap-2 px-3 py-2 text-xs font-bold text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
-                                >
-                                    <Copy size={14} />
-                                    <span>Copy</span>
-                                </button>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-
-            {/* Block Content Wrapper - Always visible border, minimal padding */}
-            <div
-                className={`relative rounded-xl border-2 transition-all ${showControls
-                    ? 'border-primary/60 dark:border-primary/40 bg-primary/5 dark:bg-primary/10'
-                    : 'border-neutral-200 dark:border-neutral-700 bg-transparent'
-                    }`}
-            >
-                {/* Edit Component - No padding, let the component control its own spacing */}
-                <div className="relative" style={{ userSelect: 'text' }}>
-                    {/* For container blocks, pass child blocks and handlers */}
-                    {isContainer && (block.type === 'section' || block.type === 'columns') ? (
-                        <EditComponent
-                            block={block}
-                            onUpdate={onUpdate}
-                            onDelete={onDelete}
-                            isSelected={isHovered}
-                            childBlocks={childBlocks}
-                            onChildBlockAdd={(type, index, containerId) => {
-                                helpers.addBlock(type, index, containerId || block.id);
-                            }}
-                            onChildBlockUpdate={(id, data, containerId) => {
-                                helpers.updateBlock(id, data);
-                            }}
-                            onChildBlockDelete={(id, containerId) => {
-                                helpers.deleteBlock(id);
-                            }}
-                            onChildBlockMove={(id, newIndex, containerId) => {
-                                helpers.moveBlock(id, newIndex, containerId || block.id);
-                            }}
-                        />
-                    ) : (
-                        <EditComponent
-                            block={block}
-                            onUpdate={onUpdate}
-                            onDelete={onDelete}
-                            isSelected={isHovered}
-                        />
                     )}
+                    {onMoveDown && (
+                        <button 
+                            onClick={onMoveDown}
+                            className="p-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-400 hover:text-primary hover:border-primary shadow-xl transition-all hover:scale-110 active:scale-95"
+                            title="Move Down"
+                        >
+                            <ChevronDown size={18} strokeWidth={2.5} />
+                        </button>
+                    )}
+                    {onDuplicate && (
+                        <button 
+                            onClick={onDuplicate}
+                            className="p-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-400 hover:text-primary hover:border-primary shadow-xl transition-all hover:scale-110 active:scale-95"
+                            title="Duplicate Block"
+                        >
+                            <Copy size={18} strokeWidth={2.5} />
+                        </button>
+                    )}
+                    <button 
+                        onClick={onDelete}
+                        className="p-2.5 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-400 hover:text-red-500 hover:border-red-500 shadow-xl transition-all hover:scale-110 active:scale-95"
+                        title="Delete Block"
+                    >
+                        <Trash2 size={18} strokeWidth={2.5} />
+                    </button>
                 </div>
+            )}
+
+            {/* The Actual Editable Block Content */}
+            <div className="relative">
+                <EditComponent 
+                    block={block} 
+                    onUpdate={onUpdate} 
+                    isSelected={isSelected}
+                    context={{
+                        locale: state.currentLanguage || undefined,
+                        translations
+                    }}
+                    childBlocks={childBlocks}
+                    onChildBlockAdd={onChildBlockAdd}
+                    onChildBlockUpdate={onChildBlockUpdate}
+                    onChildBlockDelete={onChildBlockDelete}
+                    onChildBlockMove={onChildBlockMove}
+                />
+                
+                {/* Visual indicator of the block bounds when hovered - also hidden for Hero */}
+                {!isHero && (
+                    <div className={`absolute -inset-x-4 -inset-y-2 border-2 border-primary/0 rounded-2xl pointer-events-none transition-all duration-300 ${isSelected ? 'border-primary/10' : ''}`} />
+                )}
             </div>
         </div>
     );
 }
-