WooNooW

Files

dwindown 4ec0f3f890 feat: Replace TipTap with Visual Email Builder 🎨

## 🚀 MAJOR FEATURE: Visual Email Content Builder!

### What Changed:

**Before:**
- TipTap rich text editor
- Manual [card] syntax typing
- Hard to visualize final result
- Not beginner-friendly

**After:**
- Visual drag-and-drop builder
- Live preview as you build
- No code needed
- Professional UX

### New Components:

**1. EmailBuilder** (`/components/EmailBuilder/`)
- Main builder component
- Block-based editing
- Drag to reorder (via up/down buttons)
- Click to edit
- Live preview

**2. Block Types:**
- **Header** - Large title text
- **Text** - Paragraph content
- **Card** - Styled content box (5 types: default, success, info, warning, hero)
- **Button** - CTA with solid/outline styles
- **Divider** - Horizontal line
- **Spacer** - Vertical spacing

**3. Features:**
- ✅ **Add Block Toolbar** - One-click block insertion
- ✅ **Hover Controls** - Edit, Delete, Move Up/Down
- ✅ **Edit Dialog** - Full editor for each block
- ✅ **Variable Helper** - Click to insert variables
- ✅ **Code Mode Toggle** - Switch between visual/code
- ✅ **Auto-sync** - Converts blocks ↔ [card] syntax

### How It Works:

**Visual Mode:**
```
[Add Block: Header | Text | Card | Button | Divider | Spacer]

┌─────────────────────────────┐
│ Header Block          [↑ ↓ ✎ ×] │
│ New Order Received           │
└─────────────────────────────┘

┌─────────────────────────────┐
│ Card Block (Success)  [↑ ↓ ✎ ×] │
│ ✅ Order Confirmed!          │
└─────────────────────────────┘

┌─────────────────────────────┐
│ Button Block          [↑ ↓ ✎ ×] │
│    [View Order Details]      │
└─────────────────────────────┘
```

**Code Mode:**
```html
[card]
<h1>New Order Received</h1>
[/card]

[card type="success"]
<h2>✅ Order Confirmed!</h2>
[/card]

[card]
<p style="text-align: center;">
  <a href="{order_url}" class="button">View Order Details</a>
</p>
[/card]
```

### Benefits:

1. **No Learning Curve**
   - Visual interface, no syntax to learn
   - Click, edit, done!

2. **Live Preview**
   - See exactly how email will look
   - WYSIWYG editing

3. **Flexible**
   - Switch to code mode anytime
   - Full HTML control when needed

4. **Professional**
   - Pre-designed block types
   - Consistent styling
   - Best practices built-in

5. **Variable Support**
   - Click to insert variables
   - Works in all block types
   - Helpful dropdown

### Technical Details:

**Converter Functions:**
- `blocksToHTML()` - Converts blocks to [card] syntax
- `htmlToBlocks()` - Parses [card] syntax to blocks
- Seamless sync between visual/code modes

**State Management:**
- Blocks stored as structured data
- Auto-converts to HTML on save
- Preserves all [card] attributes

### Next Steps:
- Install @radix-ui/react-radio-group for radio buttons
- Test email rendering end-to-end
- Polish and final review

This is a GAME CHANGER for email template editing! 🎉

2025-11-13 06:40:23 +07:00