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
|
66b3b9fa03
|
feat: Add Heading Selector, Styled Buttons & Variable Pills! 🎯
## ✅ Improvements 1-3 Complete:
### 1. Heading/Tag Selector in RichTextEditor
**Before:**
- No way to set heading levels
- Users had to type HTML manually
**After:**
- Dropdown selector in toolbar
- Options: Paragraph, H1, H2, H3, H4
- One-click heading changes
- User controls document structure
**UI:**
```
[Paragraph ▼] [B] [I] [List] ...
```
### 2. Styled Buttons in Cards
**Problem:**
- Buttons in TipTap looked raw
- Different from standalone buttons
- Not editable (couldn't change text/URL)
**Solution:**
- Custom TipTap ButtonExtension
- Same inline styles as standalone buttons
- Solid & Outline styles
- Fully editable via dialog
**Features:**
- Click button icon in toolbar
- Dialog opens for text, link, style
- Button renders with proper styling
- Matches email rendering exactly
**Extension:**
- `tiptap-button-extension.ts`
- Renders with inline styles
- `data-` attributes for editing
- Non-editable (atomic node)
### 3. Variable Pills for Button Links
**Before:**
- Users had to type {variable_name}
- Easy to make typos
- No suggestions
**After:**
- Variable pills under Button Link input
- Click to insert
- Works in both:
- RichTextEditor button dialog
- EmailBuilder button dialog
**UI:**
```
Button Link
[input field: {order_url}]
{order_number} {order_total} {customer_name} ...
↑ Click any pill to insert
```
## 📦 New Files:
**tiptap-button-extension.ts:**
- Custom TipTap node for buttons
- Inline styles matching email
- Atomic (non-editable in editor)
- Dialog-based editing
## �� User Experience:
**Heading Control:**
- Professional document structure
- No HTML knowledge needed
- Visual feedback (active state)
**Button Styling:**
- Consistent across editor/preview
- Professional appearance
- Easy to configure
**Variable Insertion:**
- No typing errors
- Visual discovery
- One-click insertion
## Next Steps:
4. WordPress Media Modal for images
5. WordPress Media Modal for Store logos/favicon
All improvements working perfectly! 🚀
|
2025-11-13 08:03:35 +07:00 |
|