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
|
1211430011
|
feat: Code Mode Button Position & Markdown Support! 📝
## ✅ 3. Code Mode Button Moved to Left
**Problem:** Inconsistent layout, tabs on right should be Editor/Preview only
**Solution:**
- Moved Code Mode button next to "Message Body" label
- Editor/Preview tabs stay on the right
- Consistent, logical layout
**Before:**
```
Message Body [Editor|Preview] [Code Mode]
```
**After:**
```
Message Body [Code Mode] [Editor|Preview]
```
## ✅ 4. Markdown Support in Code Mode! 🎉
**Problem:** HTML is verbose, not user-friendly for tech-savvy users
**Solution:**
- Added Markdown parser with ::: syntax for cards
- Toggle between HTML and Markdown modes
- Full bidirectional conversion
**Markdown Syntax:**
```markdown
:::card
# Heading
Your content here
:::
:::card[success]
✅ Success message
:::
[button](https://example.com){Click Here}
[button style="outline"](url){Secondary Button}
```
**Features:**
- Standard Markdown: headings, bold, italic, lists, links
- Card blocks: :::card or :::card[type]
- Button blocks: [button](url){text}
- Variables: {order_url}, {customer_name}
- Bidirectional conversion (HTML ↔ Markdown)
**Files:**
- `lib/markdown-parser.ts` - Parser implementation
- `components/ui/code-editor.tsx` - Mode toggle
- `routes/Settings/Notifications/EditTemplate.tsx` - Enable support
- `DEPENDENCIES.md` - Add @codemirror/lang-markdown
**Note:** Requires `npm install @codemirror/lang-markdown`
Ready for remaining improvements (5-6)!
|
2025-11-13 11:50:38 +07:00 |
|
dwindown
|
fde198c09f
|
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! 🚀
|
2025-11-13 07:52:16 +07:00 |
|