feat: Major Email Builder Improvements! 🚀
## 🎯 All User Feedback Implemented:
### 1. ✅ Header & Button Outside Cards
**Problem:**
- Header and Button were wrapped in [card] tags
- Not honest rendering
- Doesn't make sense to wrap single elements
**Solution:**
- Removed Header and Text as separate block types
- Only Card contains rich content now
- Button, Divider, Spacer render outside cards
- Honest, semantic HTML structure
**Before:**
```
[card]<h1>Header</h1>[/card]
[card]<button>Click</button>[/card]
```
**After:**
```
[card]<h1>Header</h1><p>Content...</p>[/card]
<button>Click</button>
```
### 2. ✅ Rich Content in Cards
**Problem:**
- Cards had plain textarea
- No formatting options
- Hard to create mixed content
**Solution:**
- Cards now use RichTextEditor
- Full WYSIWYG editing
- Headers, text, lists, links, images, alignment
- All in one card!
**Card Dialog:**
```
Edit Card
─────────────────────
Card Type: [Default ▼]
Content:
┌──────────────────────────────┐
│ [B][I][List][Link][←][↔][→][📷]│
│ │
│ <h2>Customer Details</h2> │
│ <p>Name: {customer_name}</p> │
│ │
└──────────────────────────────┘
```
### 3. ✅ Text Alignment & Image Support
**Added to RichTextEditor:**
- ← Align Left
- ↔ Align Center
- → Align Right
- 📷 Insert Image
**Extensions:**
- `@tiptap/extension-text-align`
- `@tiptap/extension-image`
### 4. ✅ CodeMirror for Code Mode
**Problem:**
- Plain textarea for code
- No syntax highlighting
- Hard to read/edit
**Solution:**
- CodeMirror editor
- HTML syntax highlighting
- One Dark theme
- Auto-completion
- Professional code editing
**Features:**
- Syntax highlighting
- Line numbers
- Bracket matching
- Auto-indent
- Search & replace
## 📦 Block Structure:
**Simplified to 4 types:**
1. **Card** - Rich content container (headers, text, images, etc.)
2. **Button** - Standalone CTA (outside card)
3. **Divider** - Horizontal line (outside card)
4. **Spacer** - Vertical spacing (outside card)
## 🔄 Converter Updates:
**blocksToHTML():**
- Cards → `[card]...[/card]`
- Buttons → `<a class="button">...</a>` (no card wrapper)
- Dividers → `<hr />` (no card wrapper)
- Spacers → `<div style="height:...">` (no card wrapper)
**htmlToBlocks():**
- Parses cards AND standalone elements
- Correctly identifies buttons outside cards
- Maintains structure integrity
## 📋 Required Dependencies:
**TipTap Extensions:**
```bash
npm install @tiptap/extension-text-align @tiptap/extension-image
```
**CodeMirror:**
```bash
npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark
```
**Radix UI:**
```bash
npm install @radix-ui/react-radio-group
```
## 🎨 User Experience:
**For Non-Technical Users:**
- Visual builder with rich text editing
- No HTML knowledge needed
- Click, type, format, done!
**For Tech-Savvy Users:**
- Code mode with CodeMirror
- Full HTML control
- Syntax highlighting
- Professional editing
**Best of Both Worlds!** 🎉
## Summary:
✅ Honest rendering (no unnecessary card wrappers)
✅ Rich content in cards (WYSIWYG editing)
✅ Text alignment & images
✅ Professional code editor
✅ Perfect for all skill levels
This is PRODUCTION-READY! 🚀
fde198c09f