@startsimpli/ui 0.4.7 → 0.4.8

package/src/components/email-editor/email-editor.tsx

@@ -1,44 +1,23 @@
 'use client'
 
 import * as React from 'react'
-import { useState, useCallback, useRef, useEffect } from 'react'
+import { useState, useCallback } from 'react'
 import {
   Section,
   Block,
-  BlockType,
   ColumnLayout,
   GlobalStyles,
   MergeFieldDefinition,
+  EditorSelection,
   DEFAULT_GLOBAL_STYLES,
-  createBlock,
-  createRow,
-  createSection,
-  getColumnCount,
   getColumnWidths,
 } from './types'
-import {
-  TextBlockEditor,
-  MetricsBlockEditor,
-  DividerBlockEditor,
-  ButtonBlockEditor,
-  ImageBlockEditor,
-  SpacerBlockEditor,
-  SocialBlockEditor,
-  HeaderBlockEditor,
-  FooterBlockEditor,
-} from './blocks'
+import { useDragDrop } from './hooks/useDragDrop'
+import { useEmailEditorState } from './hooks/useEmailEditorState'
+import { BlockRenderer } from './BlockRenderer'
 import { BlockToolbar } from './block-toolbar'
 import { AddBlockMenu } from './add-block-menu'
 import { EditorSidebar } from './editor-sidebar'
-import {
-  UndoRedoState,
-  createUndoRedoState,
-  pushState,
-  undo as undoState,
-  redo as redoState,
-  canUndo,
-  canRedo,
-} from './utils/undo-redo'
 import { Button } from '../ui/button'
 import {
   Select,
@@ -59,14 +38,6 @@ import {
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 
-// --- Types ---
-interface EditorSelection {
-  sectionIndex: number
-  rowIndex: number
-  columnIndex: number
-  blockIndex: number
-}
-
 interface EmailEditorProps {
   sections: Section[]
   onChange: (sections: Section[]) => void
@@ -85,7 +56,7 @@ interface EmailEditorProps {
 
 // --- Main Editor ---
 export function EmailEditor({
-  sections,
+  sections: sectionsProp,
   onChange,
   globalStyles = DEFAULT_GLOBAL_STYLES,
   onGlobalStylesChange,
@@ -93,64 +64,38 @@ export function EmailEditor({
   readOnly = false,
   renderTextEditor,
 }: EmailEditorProps) {
-  const [selection, setSelection] = useState<EditorSelection | null>(null)
-  const [showSidebar, setShowSidebar] = useState(false)
-  const [dragState, setDragState] = useState<{
-    sourceSection: number
-    sourceRow: number
-    sourceCol: number
-    sourceBlock: number
-  } | null>(null)
-  const [dragOverTarget, setDragOverTarget] = useState<{
-    sectionIndex: number
-    rowIndex: number
-    colIndex: number
-    blockIndex: number
-  } | null>(null)
-
-  const historyRef = useRef<UndoRedoState>(createUndoRedoState(sections))
-
-  // Sync history when sections change externally
-  useEffect(() => {
-    historyRef.current = { ...historyRef.current, present: sections }
-  }, [sections])
-
-  const commitChange = useCallback(
-    (newSections: Section[]) => {
-      historyRef.current = pushState(historyRef.current, newSections)
-      onChange(newSections)
-    },
-    [onChange]
-  )
+  const {
+    sections,
+    selection,
+    setSelection,
+    updateBlock,
+    addBlock,
+    removeBlock,
+    duplicateBlock,
+    moveBlock,
+    addSection,
+    removeSection,
+    addRow,
+    changeRowLayout,
+    removeRow,
+    undo: handleUndo,
+    redo: handleRedo,
+    canUndo: canUndoVal,
+    canRedo: canRedoVal,
+    commitChange,
+  } = useEmailEditorState({ initialSections: sectionsProp, onChange })
 
-  const handleUndo = useCallback(() => {
-    const newState = undoState(historyRef.current)
-    historyRef.current = newState
-    onChange(newState.present)
-  }, [onChange])
-
-  const handleRedo = useCallback(() => {
-    const newState = redoState(historyRef.current)
-    historyRef.current = newState
-    onChange(newState.present)
-  }, [onChange])
+  const [showSidebar, setShowSidebar] = useState(false)
 
-  // Keyboard shortcuts for undo/redo
-  useEffect(() => {
-    if (readOnly) return
-    const handler = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'z' && !e.shiftKey) {
-        e.preventDefault()
-        handleUndo()
-      }
-      if ((e.metaKey || e.ctrlKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
-        e.preventDefault()
-        handleRedo()
-      }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [readOnly, handleUndo, handleRedo])
+  const {
+    dragState,
+    dragOverTarget,
+    setDragOverTarget,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+  } = useDragDrop({ sections, commitChange, setSelection })
 
   // Get selected block
   const selectedBlock = selection
@@ -159,371 +104,18 @@ export function EmailEditor({
       ] ?? null
     : null
 
-  // --- Mutation helpers ---
-
-  const updateBlock = useCallback(
-    (sel: EditorSelection, updatedBlock: Block) => {
-      const newSections = sections.map((section, si) => {
-        if (si !== sel.sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== sel.rowIndex) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== sel.columnIndex) return col
-                return col.map((block, bi) => (bi === sel.blockIndex ? updatedBlock : block))
-              }),
-            }
-          }),
-        }
-      })
-      commitChange(newSections)
-    },
-    [sections, commitChange]
-  )
-
-  const addBlockToColumn = useCallback(
-    (
-      sectionIndex: number,
-      rowIndex: number,
-      colIndex: number,
-      blockType: BlockType,
-      afterBlockIndex?: number
-    ) => {
-      const newBlock = createBlock(blockType)
-      const newSections = sections.map((section, si) => {
-        if (si !== sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== rowIndex) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== colIndex) return col
-                const insertAt = afterBlockIndex !== undefined ? afterBlockIndex + 1 : col.length
-                return [...col.slice(0, insertAt), newBlock, ...col.slice(insertAt)]
-              }),
-            }
-          }),
-        }
-      })
-      commitChange(newSections)
-      // Select the new block
-      const insertAt = afterBlockIndex !== undefined ? afterBlockIndex + 1 : sections[sectionIndex].rows[rowIndex].columns[colIndex].length
-      setSelection({
-        sectionIndex,
-        rowIndex,
-        columnIndex: colIndex,
-        blockIndex: insertAt,
-      })
+  // --- Block update handler ---
+  const handleBlockUpdate = useCallback(
+    (sel: EditorSelection, updates: Partial<Block>) => {
+      const current =
+        sections[sel.sectionIndex]?.rows[sel.rowIndex]?.columns[sel.columnIndex]?.[sel.blockIndex]
+      if (!current) return
+      updateBlock(sel.sectionIndex, sel.rowIndex, sel.columnIndex, sel.blockIndex, {
+        ...current,
+        ...updates,
+      } as Block)
     },
-    [sections, commitChange]
-  )
-
-  const removeBlock = useCallback(
-    (sel: EditorSelection) => {
-      const newSections = sections.map((section, si) => {
-        if (si !== sel.sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== sel.rowIndex) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== sel.columnIndex) return col
-                return col.filter((_, bi) => bi !== sel.blockIndex)
-              }),
-            }
-          }),
-        }
-      })
-      commitChange(newSections)
-      setSelection(null)
-    },
-    [sections, commitChange]
-  )
-
-  const duplicateBlock = useCallback(
-    (sel: EditorSelection) => {
-      const block = sections[sel.sectionIndex].rows[sel.rowIndex].columns[sel.columnIndex][sel.blockIndex]
-      if (!block) return
-      const copy: Block = { ...JSON.parse(JSON.stringify(block)), id: `block-${Date.now()}-${Math.random().toString(36).substr(2, 6)}` }
-      const newSections = sections.map((section, si) => {
-        if (si !== sel.sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== sel.rowIndex) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== sel.columnIndex) return col
-                return [...col.slice(0, sel.blockIndex + 1), copy, ...col.slice(sel.blockIndex + 1)]
-              }),
-            }
-          }),
-        }
-      })
-      commitChange(newSections)
-      setSelection({ ...sel, blockIndex: sel.blockIndex + 1 })
-    },
-    [sections, commitChange]
-  )
-
-  const moveBlockInColumn = useCallback(
-    (sel: EditorSelection, direction: 'up' | 'down') => {
-      const col = sections[sel.sectionIndex].rows[sel.rowIndex].columns[sel.columnIndex]
-      const newIndex = direction === 'up' ? sel.blockIndex - 1 : sel.blockIndex + 1
-      if (newIndex < 0 || newIndex >= col.length) return
-      const newCol = [...col]
-      const [moved] = newCol.splice(sel.blockIndex, 1)
-      newCol.splice(newIndex, 0, moved)
-      const newSections = sections.map((section, si) => {
-        if (si !== sel.sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== sel.rowIndex) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) =>
-                ci === sel.columnIndex ? newCol : col
-              ),
-            }
-          }),
-        }
-      })
-      commitChange(newSections)
-      setSelection({ ...sel, blockIndex: newIndex })
-    },
-    [sections, commitChange]
-  )
-
-  // --- Section/Row operations ---
-  const addSection = useCallback(
-    (afterIndex: number) => {
-      const newSection = createSection()
-      const newSections = [
-        ...sections.slice(0, afterIndex + 1),
-        newSection,
-        ...sections.slice(afterIndex + 1),
-      ]
-      commitChange(newSections)
-    },
-    [sections, commitChange]
-  )
-
-  const removeSection = useCallback(
-    (index: number) => {
-      if (sections.length <= 1) return
-      commitChange(sections.filter((_, i) => i !== index))
-      setSelection(null)
-    },
-    [sections, commitChange]
-  )
-
-  const addRow = useCallback(
-    (sectionIndex: number, layout: ColumnLayout = '1') => {
-      const newRow = createRow(layout)
-      const newSections = sections.map((section, si) => {
-        if (si !== sectionIndex) return section
-        return { ...section, rows: [...section.rows, newRow] }
-      })
-      commitChange(newSections)
-    },
-    [sections, commitChange]
-  )
-
-  const changeRowLayout = useCallback(
-    (sectionIndex: number, rowIndex: number, layout: ColumnLayout) => {
-      const newColCount = getColumnCount(layout)
-      const newSections = sections.map((section, si) => {
-        if (si !== sectionIndex) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== rowIndex) return row
-            const columns = [...row.columns]
-            // Add or trim columns as needed
-            while (columns.length < newColCount) columns.push([])
-            // If reducing columns, merge extra columns into last
-            if (columns.length > newColCount) {
-              const extra = columns.splice(newColCount - 1)
-              columns[newColCount - 1] = extra.flat()
-            }
-            return { ...row, layout, columns }
-          }),
-        }
-      })
-      commitChange(newSections)
-    },
-    [sections, commitChange]
-  )
-
-  const removeRow = useCallback(
-    (sectionIndex: number, rowIndex: number) => {
-      const section = sections[sectionIndex]
-      if (section.rows.length <= 1) return
-      const newSections = sections.map((s, si) => {
-        if (si !== sectionIndex) return s
-        return { ...s, rows: s.rows.filter((_, ri) => ri !== rowIndex) }
-      })
-      commitChange(newSections)
-      setSelection(null)
-    },
-    [sections, commitChange]
-  )
-
-  // --- DnD handlers ---
-  const handleDragStart = useCallback(
-    (sectionIndex: number, rowIndex: number, colIndex: number, blockIndex: number) => {
-      setDragState({
-        sourceSection: sectionIndex,
-        sourceRow: rowIndex,
-        sourceCol: colIndex,
-        sourceBlock: blockIndex,
-      })
-    },
-    []
-  )
-
-  const handleDragOver = useCallback(
-    (
-      e: React.DragEvent,
-      sectionIndex: number,
-      rowIndex: number,
-      colIndex: number,
-      blockIndex: number
-    ) => {
-      e.preventDefault()
-      setDragOverTarget({ sectionIndex, rowIndex, colIndex, blockIndex })
-    },
-    []
-  )
-
-  const handleDrop = useCallback(
-    (
-      e: React.DragEvent,
-      targetSection: number,
-      targetRow: number,
-      targetCol: number,
-      targetBlock: number
-    ) => {
-      e.preventDefault()
-      if (!dragState) return
-
-      const { sourceSection, sourceRow, sourceCol, sourceBlock } = dragState
-
-      // Get the block being moved
-      const block =
-        sections[sourceSection]?.rows[sourceRow]?.columns[sourceCol]?.[sourceBlock]
-      if (!block) return
-
-      // Remove from source
-      let newSections = sections.map((section, si) => {
-        if (si !== sourceSection) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== sourceRow) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== sourceCol) return col
-                return col.filter((_, bi) => bi !== sourceBlock)
-              }),
-            }
-          }),
-        }
-      })
-
-      // Adjust target index if removing from same column before target
-      let adjustedTargetBlock = targetBlock
-      if (
-        sourceSection === targetSection &&
-        sourceRow === targetRow &&
-        sourceCol === targetCol &&
-        sourceBlock < targetBlock
-      ) {
-        adjustedTargetBlock -= 1
-      }
-
-      // Insert at target
-      newSections = newSections.map((section, si) => {
-        if (si !== targetSection) return section
-        return {
-          ...section,
-          rows: section.rows.map((row, ri) => {
-            if (ri !== targetRow) return row
-            return {
-              ...row,
-              columns: row.columns.map((col, ci) => {
-                if (ci !== targetCol) return col
-                return [
-                  ...col.slice(0, adjustedTargetBlock),
-                  block,
-                  ...col.slice(adjustedTargetBlock),
-                ]
-              }),
-            }
-          }),
-        }
-      })
-
-      commitChange(newSections)
-      setDragState(null)
-      setDragOverTarget(null)
-      setSelection({
-        sectionIndex: targetSection,
-        rowIndex: targetRow,
-        columnIndex: targetCol,
-        blockIndex: adjustedTargetBlock,
-      })
-    },
-    [dragState, sections, commitChange]
-  )
-
-  const handleDragEnd = useCallback(() => {
-    setDragState(null)
-    setDragOverTarget(null)
-  }, [])
-
-  // --- Render block by type ---
-  const renderBlock = useCallback(
-    (block: Block, sel: EditorSelection) => {
-      const commonProps = {
-        isEditing: !readOnly,
-        onChange: (updated: Block) => updateBlock(sel, updated),
-      }
-
-      switch (block.type) {
-        case 'text':
-          return <TextBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} renderEditor={renderTextEditor} />
-        case 'metrics':
-          return <MetricsBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'divider':
-          return <DividerBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'cta':
-          return <ButtonBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'image':
-          return <ImageBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'spacer':
-          return <SpacerBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'social':
-          return <SocialBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'header':
-          return <HeaderBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        case 'footer':
-          return <FooterBlockEditor block={block} {...commonProps} onChange={(b) => updateBlock(sel, b)} />
-        default:
-          return null
-      }
-    },
-    [readOnly, updateBlock, renderTextEditor]
+    [sections, updateBlock]
   )
 
   // --- Read-only mode ---
@@ -558,7 +150,18 @@ export function EmailEditor({
                     <div key={ci} style={{ width: `${widths[ci]}%` }}>
                       {col.map((block, bi) => (
                         <div key={block.id}>
-                          {renderBlock(block, { sectionIndex: si, rowIndex: ri, columnIndex: ci, blockIndex: bi })}
+                          <BlockRenderer
+                            block={block}
+                            editing={!readOnly}
+                            onChange={(updates) =>
+                              handleBlockUpdate(
+                                { sectionIndex: si, rowIndex: ri, columnIndex: ci, blockIndex: bi },
+                                updates
+                              )
+                            }
+                            mergeFields={mergeFields ?? []}
+                            renderTextEditor={renderTextEditor}
+                          />
                         </div>
                       ))}
                     </div>
@@ -584,7 +187,7 @@ export function EmailEditor({
             size="icon"
             className="h-8 w-8"
             onClick={handleUndo}
-            disabled={!canUndo(historyRef.current)}
+            disabled={!canUndoVal}
             title="Undo (Cmd+Z)"
           >
             <Undo className="h-4 w-4" />
@@ -594,7 +197,7 @@ export function EmailEditor({
             size="icon"
             className="h-8 w-8"
             onClick={handleRedo}
-            disabled={!canRedo(historyRef.current)}
+            disabled={!canRedoVal}
             title="Redo (Cmd+Shift+Z)"
           >
             <Redo className="h-4 w-4" />
@@ -714,7 +317,7 @@ export function EmailEditor({
                               {col.length === 0 && (
                                 <div className="flex items-center justify-center h-full p-2">
                                   <AddBlockMenu
-                                    onAdd={(type) => addBlockToColumn(si, ri, ci, type)}
+                                    onAdd={(type) => addBlock(si, ri, ci, type)}
                                     variant="inline"
                                   />
                                 </div>
@@ -771,13 +374,13 @@ export function EmailEditor({
                                       {/* Block toolbar (on hover when selected) */}
                                       {isSelected && (
                                         <BlockToolbar
-                                          onDelete={() => removeBlock(blockSel)}
-                                          onDuplicate={() => duplicateBlock(blockSel)}
+                                          onDelete={() => removeBlock(si, ri, ci, bi)}
+                                          onDuplicate={() => duplicateBlock(si, ri, ci, bi)}
                                           onMoveUp={() =>
-                                            moveBlockInColumn(blockSel, 'up')
+                                            moveBlock(si, ri, ci, bi, 'up')
                                           }
                                           onMoveDown={() =>
-                                            moveBlockInColumn(blockSel, 'down')
+                                            moveBlock(si, ri, ci, bi, 'down')
                                           }
                                           canMoveUp={bi > 0}
                                           canMoveDown={bi < col.length - 1}
@@ -786,7 +389,15 @@ export function EmailEditor({
 
                                       {/* Block content */}
                                       <div className="p-1">
-                                        {renderBlock(block, blockSel)}
+                                        <BlockRenderer
+                                          block={block}
+                                          editing={!readOnly}
+                                          onChange={(updates) =>
+                                            handleBlockUpdate(blockSel, updates)
+                                          }
+                                          mergeFields={mergeFields ?? []}
+                                          renderTextEditor={renderTextEditor}
+                                        />
                                       </div>
                                     </div>
 
@@ -795,7 +406,7 @@ export function EmailEditor({
                                       <div className="flex justify-center py-1 opacity-0 group-hover:opacity-100 hover:!opacity-100 transition-opacity">
                                         <AddBlockMenu
                                           onAdd={(type) =>
-                                            addBlockToColumn(si, ri, ci, type, bi)
+                                            addBlock(si, ri, ci, type, bi)
                                           }
                                           variant="small"
                                         />
@@ -810,7 +421,7 @@ export function EmailEditor({
                                 <div className="flex justify-center py-1 opacity-0 hover:opacity-100 transition-opacity">
                                   <AddBlockMenu
                                     onAdd={(type) =>
-                                      addBlockToColumn(
+                                      addBlock(
                                         si,
                                         ri,
                                         ci,
@@ -874,7 +485,7 @@ export function EmailEditor({
         <EditorSidebar
           selectedBlock={selectedBlock}
           onBlockChange={(block) => {
-            if (selection) updateBlock(selection, block)
+            if (selection) updateBlock(selection.sectionIndex, selection.rowIndex, selection.columnIndex, selection.blockIndex, block)
           }}
           globalStyles={globalStyles}
           onGlobalStylesChange={onGlobalStylesChange || (() => {})}