@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,497 @@
+'use client'
+
+import * as React from 'react'
+import { useState, useCallback } from 'react'
+import {
+  Section,
+  Block,
+  ColumnLayout,
+  GlobalStyles,
+  MergeFieldDefinition,
+  EditorSelection,
+  DEFAULT_GLOBAL_STYLES,
+  getColumnWidths,
+} from './types'
+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 { Button } from '../ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import {
+  Undo,
+  Redo,
+  Plus,
+  Settings,
+  Columns2,
+  Columns3,
+  RectangleHorizontal,
+  Trash2,
+} from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+interface EmailEditorProps {
+  sections: Section[]
+  onChange: (sections: Section[]) => void
+  globalStyles?: GlobalStyles
+  onGlobalStylesChange?: (styles: GlobalStyles) => void
+  mergeFields?: MergeFieldDefinition[]
+  readOnly?: boolean
+  /** Optional custom rich text editor for the text block. */
+  renderTextEditor?: (props: {
+    content: string
+    onChange: (html: string) => void
+    placeholder?: string
+    className?: string
+  }) => React.ReactNode
+}
+
+// --- Main Editor ---
+export function EmailEditor({
+  sections: sectionsProp,
+  onChange,
+  globalStyles = DEFAULT_GLOBAL_STYLES,
+  onGlobalStylesChange,
+  mergeFields,
+  readOnly = false,
+  renderTextEditor,
+}: EmailEditorProps) {
+  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 [showSidebar, setShowSidebar] = useState(false)
+
+  const {
+    dragState,
+    dragOverTarget,
+    setDragOverTarget,
+    handleDragStart,
+    handleDragOver,
+    handleDrop,
+    handleDragEnd,
+  } = useDragDrop({ sections, commitChange, setSelection })
+
+  // Get selected block
+  const selectedBlock = selection
+    ? sections[selection.sectionIndex]?.rows[selection.rowIndex]?.columns[selection.columnIndex]?.[
+        selection.blockIndex
+      ] ?? null
+    : null
+
+  // --- 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, updateBlock]
+  )
+
+  // --- Read-only mode ---
+  if (readOnly) {
+    return (
+      <div
+        className="mx-auto"
+        style={{
+          maxWidth: globalStyles.contentWidth,
+          backgroundColor: globalStyles.backgroundColor,
+          fontFamily: globalStyles.fontFamily,
+        }}
+      >
+        {sections.map((section, si) => (
+          <div
+            key={section.id}
+            style={{
+              backgroundColor: section.backgroundColor || '#ffffff',
+              paddingTop: section.paddingTop,
+              paddingBottom: section.paddingBottom,
+              paddingLeft: section.paddingLeft,
+              paddingRight: section.paddingRight,
+              borderRadius: 8,
+              marginBottom: 4,
+            }}
+          >
+            {section.rows.map((row, ri) => {
+              const widths = getColumnWidths(row.layout)
+              return (
+                <div key={row.id} className="flex gap-2">
+                  {row.columns.map((col, ci) => (
+                    <div key={ci} style={{ width: `${widths[ci]}%` }}>
+                      {col.map((block, bi) => (
+                        <div key={block.id}>
+                          <BlockRenderer
+                            block={block}
+                            editing={!readOnly}
+                            onChange={(updates) =>
+                              handleBlockUpdate(
+                                { sectionIndex: si, rowIndex: ri, columnIndex: ci, blockIndex: bi },
+                                updates
+                              )
+                            }
+                            mergeFields={mergeFields ?? []}
+                            renderTextEditor={renderTextEditor}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  // --- Editor mode ---
+  return (
+    <div className="flex h-full">
+      {/* Main canvas */}
+      <div className="flex-1 overflow-y-auto">
+        {/* Toolbar */}
+        <div className="sticky top-0 z-30 bg-background border-b px-4 py-2 flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleUndo}
+            disabled={!canUndoVal}
+            title="Undo (Cmd+Z)"
+          >
+            <Undo className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleRedo}
+            disabled={!canRedoVal}
+            title="Redo (Cmd+Shift+Z)"
+          >
+            <Redo className="h-4 w-4" />
+          </Button>
+          <div className="w-px h-6 bg-border mx-1" />
+          <Button
+            variant={showSidebar ? 'secondary' : 'ghost'}
+            size="sm"
+            className="h-8 gap-1 text-xs"
+            onClick={() => setShowSidebar(!showSidebar)}
+          >
+            <Settings className="h-3.5 w-3.5" />
+            Settings
+          </Button>
+        </div>
+
+        {/* Canvas area */}
+        <div
+          className="p-6"
+          style={{ backgroundColor: globalStyles.backgroundColor }}
+          onClick={() => setSelection(null)}
+        >
+          <div
+            className="mx-auto"
+            style={{ maxWidth: globalStyles.contentWidth }}
+          >
+            {sections.map((section, si) => (
+              <div key={section.id} className="mb-2">
+                {/* Section wrapper */}
+                <div
+                  className="relative group/section rounded-lg"
+                  style={{
+                    backgroundColor: section.backgroundColor || '#ffffff',
+                    paddingTop: section.paddingTop,
+                    paddingBottom: section.paddingBottom,
+                    paddingLeft: section.paddingLeft,
+                    paddingRight: section.paddingRight,
+                  }}
+                >
+                  {/* Section controls */}
+                  <div className="absolute -right-10 top-2 flex flex-col gap-1 opacity-0 group-hover/section:opacity-100 transition-opacity z-20">
+                    {sections.length > 1 && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 text-destructive hover:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          removeSection(si)
+                        }}
+                        title="Remove section"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* Rows */}
+                  {section.rows.map((row, ri) => {
+                    const widths = getColumnWidths(row.layout)
+                    return (
+                      <div key={row.id} className="relative group/row mb-1">
+                        {/* Row layout controls */}
+                        <div className="absolute -right-10 top-0 opacity-0 group-hover/row:opacity-100 transition-opacity z-10">
+                          <Select
+                            value={row.layout}
+                            onValueChange={(v) =>
+                              changeRowLayout(si, ri, v as ColumnLayout)
+                            }
+                          >
+                            <SelectTrigger className="h-6 w-6 p-0 border-0 bg-transparent [&>svg]:hidden">
+                              {row.layout === '1' ? (
+                                <RectangleHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
+                              ) : row.layout === '3' ? (
+                                <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
+                              ) : (
+                                <Columns2 className="h-3.5 w-3.5 text-muted-foreground" />
+                              )}
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="1">1 Column</SelectItem>
+                              <SelectItem value="2">2 Equal</SelectItem>
+                              <SelectItem value="3">3 Equal</SelectItem>
+                              <SelectItem value="2-1">2/3 + 1/3</SelectItem>
+                              <SelectItem value="1-2">1/3 + 2/3</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* Columns */}
+                        <div className="flex gap-2">
+                          {row.columns.map((col, ci) => (
+                            <div
+                              key={ci}
+                              style={{ width: `${widths[ci]}%` }}
+                              className={cn(
+                                'min-h-[40px] rounded transition-colors',
+                                col.length === 0 && 'border-2 border-dashed border-gray-200'
+                              )}
+                              onDragOver={(e) => {
+                                e.preventDefault()
+                                if (col.length === 0) {
+                                  setDragOverTarget({
+                                    sectionIndex: si,
+                                    rowIndex: ri,
+                                    colIndex: ci,
+                                    blockIndex: 0,
+                                  })
+                                }
+                              }}
+                              onDrop={(e) => {
+                                if (col.length === 0) {
+                                  handleDrop(e, si, ri, ci, 0)
+                                }
+                              }}
+                            >
+                              {col.length === 0 && (
+                                <div className="flex items-center justify-center h-full p-2">
+                                  <AddBlockMenu
+                                    onAdd={(type) => addBlock(si, ri, ci, type)}
+                                    variant="inline"
+                                  />
+                                </div>
+                              )}
+
+                              {col.map((block, bi) => {
+                                const blockSel: EditorSelection = {
+                                  sectionIndex: si,
+                                  rowIndex: ri,
+                                  columnIndex: ci,
+                                  blockIndex: bi,
+                                }
+                                const isSelected =
+                                  selection?.sectionIndex === si &&
+                                  selection?.rowIndex === ri &&
+                                  selection?.columnIndex === ci &&
+                                  selection?.blockIndex === bi
+                                const isDragOver =
+                                  dragOverTarget?.sectionIndex === si &&
+                                  dragOverTarget?.rowIndex === ri &&
+                                  dragOverTarget?.colIndex === ci &&
+                                  dragOverTarget?.blockIndex === bi
+
+                                return (
+                                  <div key={block.id}>
+                                    {/* Drop zone indicator */}
+                                    {isDragOver && dragState && (
+                                      <div className="h-0.5 bg-primary rounded-full mx-2 my-1" />
+                                    )}
+                                    <div
+                                      className={cn(
+                                        'group relative rounded transition-all cursor-pointer',
+                                        isSelected
+                                          ? 'ring-2 ring-foreground ring-offset-1'
+                                          : 'hover:ring-1 hover:ring-muted-foreground/30'
+                                      )}
+                                      onClick={(e) => {
+                                        e.stopPropagation()
+                                        setSelection(blockSel)
+                                      }}
+                                      draggable
+                                      onDragStart={(e) => {
+                                        e.stopPropagation()
+                                        handleDragStart(si, ri, ci, bi)
+                                      }}
+                                      onDragOver={(e) =>
+                                        handleDragOver(e, si, ri, ci, bi)
+                                      }
+                                      onDrop={(e) =>
+                                        handleDrop(e, si, ri, ci, bi)
+                                      }
+                                      onDragEnd={handleDragEnd}
+                                    >
+                                      {/* Block toolbar (on hover when selected) */}
+                                      {isSelected && (
+                                        <BlockToolbar
+                                          onDelete={() => removeBlock(si, ri, ci, bi)}
+                                          onDuplicate={() => duplicateBlock(si, ri, ci, bi)}
+                                          onMoveUp={() =>
+                                            moveBlock(si, ri, ci, bi, 'up')
+                                          }
+                                          onMoveDown={() =>
+                                            moveBlock(si, ri, ci, bi, 'down')
+                                          }
+                                          canMoveUp={bi > 0}
+                                          canMoveDown={bi < col.length - 1}
+                                        />
+                                      )}
+
+                                      {/* Block content */}
+                                      <div className="p-1">
+                                        <BlockRenderer
+                                          block={block}
+                                          editing={!readOnly}
+                                          onChange={(updates) =>
+                                            handleBlockUpdate(blockSel, updates)
+                                          }
+                                          mergeFields={mergeFields ?? []}
+                                          renderTextEditor={renderTextEditor}
+                                        />
+                                      </div>
+                                    </div>
+
+                                    {/* Add block between items */}
+                                    {isSelected && (
+                                      <div className="flex justify-center py-1 opacity-0 group-hover:opacity-100 hover:!opacity-100 transition-opacity">
+                                        <AddBlockMenu
+                                          onAdd={(type) =>
+                                            addBlock(si, ri, ci, type, bi)
+                                          }
+                                          variant="small"
+                                        />
+                                      </div>
+                                    )}
+                                  </div>
+                                )
+                              })}
+
+                              {/* Add block at end of column */}
+                              {col.length > 0 && (
+                                <div className="flex justify-center py-1 opacity-0 hover:opacity-100 transition-opacity">
+                                  <AddBlockMenu
+                                    onAdd={(type) =>
+                                      addBlock(
+                                        si,
+                                        ri,
+                                        ci,
+                                        type,
+                                        col.length - 1
+                                      )
+                                    }
+                                    variant="small"
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+
+                        {/* Add row button */}
+                        {ri === section.rows.length - 1 && (
+                          <div className="flex justify-center py-2 opacity-0 group-hover/section:opacity-100 transition-opacity">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 text-xs gap-1 text-muted-foreground"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                addRow(si)
+                              }}
+                            >
+                              <Plus className="h-3 w-3" />
+                              Add Row
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+
+                {/* Add section between */}
+                <div className="flex justify-center py-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs gap-1 text-muted-foreground opacity-0 hover:opacity-100 transition-opacity"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      addSection(si)
+                    }}
+                  >
+                    <Plus className="h-3 w-3" />
+                    Add Section
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      {showSidebar && (
+        <EditorSidebar
+          selectedBlock={selectedBlock}
+          onBlockChange={(block) => {
+            if (selection) updateBlock(selection.sectionIndex, selection.rowIndex, selection.columnIndex, selection.blockIndex, block)
+          }}
+          globalStyles={globalStyles}
+          onGlobalStylesChange={onGlobalStylesChange || (() => {})}
+          onClose={() => setShowSidebar(false)}
+        />
+      )}
+    </div>
+  )
+}