dwindown
|
4471cd600f
|
feat: Complete markdown syntax refinement and variable protection
✅ New cleaner syntax implemented:
- [card:type] instead of [card type='type']
- [button:style](url)Text[/button] instead of [button url='...' style='...']
- Standard markdown images: 
✅ Variable protection from markdown parsing:
- Variables with underscores (e.g., {order_items_table}) now protected
- HTML comment placeholders prevent italic/bold parsing
- All variables render correctly in preview
✅ Button rendering fixes:
- Buttons work in Visual mode inside cards
- Buttons work in Preview mode
- Button clicks prevented in visual editor
- Proper styling for solid and outline buttons
✅ Backward compatibility:
- Old syntax still supported
- No breaking changes
✅ Bug fixes:
- Fixed order_item_table → order_items_table naming
- Fixed button regex to match across newlines
- Added button/image parsing to parseMarkdownBasics
- Prevented button clicks on .button and .button-outline classes
📚 Documentation:
- NEW_MARKDOWN_SYNTAX.md - Complete user guide
- MARKDOWN_SYNTAX_AND_VARIABLES.md - Technical analysis
|
2025-11-15 20:05:50 +07:00 |
|
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 |
|