Merge pull request #11 from BenoitPrmt/feature/duplicate-block

(Issue #9) feat: added block duplicating by button or shortcut (ctrl+d)

Author: yoanbernabeu

components/Block.tsx

@@ -1,14 +1,20 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { BlockData, BlockType } from '../types';
-import { Youtube, MoveVertical, Play, Loader2, Pencil, Move, Check, X, Trash2 } from 'lucide-react';
+import {
+  Youtube,
+  MoveVertical,
+  Play,
+  Loader2,
+  Pencil,
+  Move,
+  Check,
+  X,
+  Trash2,
+  CopyPlus,
+} from 'lucide-react';
 import { motion } from 'framer-motion';
 import { getSocialPlatformOption, inferSocialPlatformFromUrl } from '../socialPlatforms';
-import {
-  openSafeUrl,
-  isValidYouTubeChannelId,
-  isValidLocationString,
-  sanitizeUrl,
-} from '../utils/security';
+import { openSafeUrl, isValidYouTubeChannelId, isValidLocationString } from '../utils/security';
 
 // Apple TV style 3D tilt effect hook
 const useTiltEffect = (isEnabled: boolean = true) => {
@@ -78,6 +84,7 @@ interface BlockProps {
   onDragEnter: (id: string) => void;
   onDragEnd: () => void;
   onDrop: (id: string) => void;
+  onDuplicate?: (id: string) => void;
   enableResize?: boolean;
   isResizing?: boolean;
   onResizeStart?: (block: BlockData, e: React.PointerEvent<HTMLButtonElement>) => void;
@@ -97,6 +104,7 @@ const Block: React.FC<BlockProps> = ({
   onDragEnter,
   onDragEnd,
   onDrop,
+  onDuplicate,
   enableResize,
   isResizing,
   onResizeStart,
@@ -402,6 +410,9 @@ const Block: React.FC<BlockProps> = ({
       </button>
     ) : null;
 
+  const showActionButtons = !previewMode && (!!onDuplicate || !!onDelete);
+  const repositionButtonOffsetClass = showActionButtons ? 'top-12' : 'top-2';
+
   // Explicit grid positioning (if defined)
   const gridPositionStyle: React.CSSProperties = {};
   if (block.gridColumn !== undefined) {
@@ -550,19 +561,34 @@ const Block: React.FC<BlockProps> = ({
           </span>
         ) : null}
 
-        {/* Delete button - appears on hover (not in preview mode) */}
-        {!previewMode && (
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onDelete(block.id);
-            }}
-            className="absolute top-1 left-1 p-1 bg-red-500/80 hover:bg-red-600 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity z-20"
-            title="Delete"
-          >
-            <Trash2 size={12} />
-          </button>
+        {/* Action buttons */}
+        {showActionButtons && (
+          <div className="absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-20">
+            {onDuplicate && (
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onDuplicate(block.id);
+                }}
+                className="p-1 bg-white/90 text-gray-800 rounded-md shadow-sm hover:bg-white"
+                title="Duplicate block"
+              >
+                <CopyPlus size={12} />
+              </button>
+            )}
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(block.id);
+              }}
+              className="p-1 bg-red-500/80 hover:bg-red-600 text-white rounded-md shadow-sm"
+              title="Delete block"
+            >
+              <Trash2 size={12} />
+            </button>
+          </div>
         )}
 
         {resizeHandle}
@@ -608,24 +634,13 @@ const Block: React.FC<BlockProps> = ({
   // ===== YOUTUBE GRID/LIST LAYOUT (ADAPTIVE) =====
   if (isYoutubeGrid || isYoutubeList) {
     // Adaptive layout based on block size
-    const isLargeBlock = block.colSpan >= 2 && block.rowSpan >= 2; // 2x2 or larger
     const isWideBlock = block.colSpan >= 2 && block.rowSpan === 1; // 2x1
-    const isTallBlock = block.colSpan === 1 && block.rowSpan >= 2; // 1x2
     const isSmallBlock = block.colSpan === 1 && block.rowSpan === 1; // 1x1
 
     // Determine display mode based on size
-    const showTitles = isLargeBlock || isTallBlock;
     const videosToShow = isSmallBlock ? 2 : isWideBlock ? 2 : 4;
     const displayVideos = activeVideos.slice(0, videosToShow);
 
-    // Grid configuration
-    const getGridClass = () => {
-      if (isSmallBlock) return 'grid grid-cols-2 gap-1.5';
-      if (isWideBlock) return 'grid grid-cols-2 gap-2';
-      if (isTallBlock) return 'flex flex-col gap-2';
-      return 'grid grid-cols-2 gap-2'; // Large block
-    };
-
     return (
       <motion.div
         layoutId={block.id}
@@ -824,19 +839,34 @@ const Block: React.FC<BlockProps> = ({
             }}
           />
         )}
-        {/* Delete button - appears on hover (not in preview mode) */}
-        {!previewMode && (
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onDelete(block.id);
-            }}
-            className="absolute top-2 left-2 p-1.5 bg-red-500/80 hover:bg-red-600 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity z-20 backdrop-blur-sm"
-            title="Delete block"
-          >
-            <Trash2 size={14} />
-          </button>
+        {/* Action buttons */}
+        {showActionButtons && (
+          <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-30 pointer-events-auto">
+            {onDuplicate && (
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onDuplicate(block.id);
+                }}
+                className="p-2 bg-white/80 hover:bg-white text-gray-800 rounded-lg shadow-sm backdrop-blur-sm"
+                title="Duplicate block"
+              >
+                <CopyPlus size={14} />
+              </button>
+            )}
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(block.id);
+              }}
+              className="p-2 bg-red-500/80 hover:bg-red-600 text-white rounded-lg backdrop-blur-sm shadow-sm"
+              title="Delete block"
+            >
+              <Trash2 size={14} />
+            </button>
+          </div>
         )}
 
         {resizeHandle}
@@ -859,7 +889,7 @@ const Block: React.FC<BlockProps> = ({
                   e.stopPropagation();
                   setIsRepositioning(true);
                 }}
-                className="absolute top-2 right-2 p-2 bg-black/60 hover:bg-black/80 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity z-20 backdrop-blur-sm"
+                className={`absolute ${repositionButtonOffsetClass} right-2 p-2 bg-black/60 hover:bg-black/80 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity z-20 backdrop-blur-sm`}
                 title="Reposition image"
               >
                 <Move size={16} />
@@ -945,7 +975,7 @@ const Block: React.FC<BlockProps> = ({
                     e.stopPropagation();
                     setIsRepositioning(true);
                   }}
-                  className="absolute top-2 right-2 p-2 bg-black/60 hover:bg-black/80 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-20 backdrop-blur-sm"
+                  className={`absolute ${repositionButtonOffsetClass} right-2 p-2 bg-black/60 hover:bg-black/80 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-auto z-20 backdrop-blur-sm`}
                   title="Reposition media"
                 >
                   <Move size={16} />

components/Builder.tsx

@@ -1,17 +1,16 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { SiteData, UserProfile, BlockData, BlockType, SavedBento, AvatarStyle } from '../types';
+import { UserProfile, BlockData, BlockType, SavedBento, AvatarStyle } from '../types';
 import Block from './Block';
 import EditorSidebar from './EditorSidebar';
 import ProfileDropdown from './ProfileDropdown';
 import SettingsModal from './SettingsModal';
 import ImageCropModal from './ImageCropModal';
 import AvatarStyleModal from './AvatarStyleModal';
-import { exportSite, type ExportDeploymentTarget } from '../services/export';
+import { exportSite, type ExportDeploymentTarget } from '@/services/export';
 import {
   initializeApp,
   updateBentoData,
   setActiveBentoId,
-  getBento,
   downloadBentoJSON,
   loadBentoFromFile,
   renameBento,
@@ -653,6 +652,81 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
     if (editingBlockId === id) setEditingBlockId(null);
   };
 
+  const duplicateBlock = useCallback(
+    (id: string) => {
+      let duplicated: BlockData | null = null;
+
+      handleSetBlocks((prev) => {
+        const source = prev.find((b) => b.id === id);
+        if (!source) return prev;
+
+        const generateId = () => {
+          if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+            return crypto.randomUUID();
+          }
+          return Math.random().toString(36).slice(2, 11);
+        };
+
+        const clone: BlockData = {
+          ...source,
+          id: generateId(),
+          gridColumn: undefined,
+          gridRow: undefined,
+          zIndex: undefined,
+          mediaPosition: source.mediaPosition ? { ...source.mediaPosition } : undefined,
+          youtubeVideos: source.youtubeVideos
+            ? source.youtubeVideos.map((vid) => ({ ...vid }))
+            : undefined,
+        };
+
+        const occupiedCells = getOccupiedCells(prev);
+        const startRow = source.gridRow ?? 1;
+        const position = findNextAvailablePosition(clone, occupiedCells, startRow);
+
+        clone.gridColumn = position.col;
+        clone.gridRow = position.row;
+
+        duplicated = clone;
+        return [...prev, clone];
+      });
+
+      if (duplicated) {
+        setEditingBlockId(duplicated.id);
+        if (!isSidebarOpen) setIsSidebarOpen(true);
+      }
+    },
+    [handleSetBlocks, isSidebarOpen]
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (!(event.metaKey || event.ctrlKey)) return;
+      if (event.key.toLowerCase() !== 'd') return;
+      if (!editingBlockId) return;
+
+      const activeElement = (document.activeElement as HTMLElement) || null;
+      const targetElement = (event.target as HTMLElement) || null;
+      const shouldSkip =
+        (activeElement &&
+          (activeElement.tagName === 'INPUT' ||
+            activeElement.tagName === 'TEXTAREA' ||
+            activeElement.isContentEditable)) ||
+        (targetElement &&
+          (targetElement.tagName === 'INPUT' ||
+            targetElement.tagName === 'TEXTAREA' ||
+            targetElement.isContentEditable));
+
+      if (shouldSkip) return;
+
+      event.preventDefault();
+      duplicateBlock(editingBlockId);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [duplicateBlock, editingBlockId]);
+
   const handleExport = () => {
     setHasDownloadedExport(false);
     setExportError(null);
@@ -1884,6 +1958,7 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
                               onDragEnter={handleDragEnter}
                               onDragEnd={handleDragEnd}
                               onDrop={handleDrop}
+                              onDuplicate={duplicateBlock}
                               onInlineUpdate={updateBlock}
                             />
                           ))}