1211430011
## ✅ 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)!
107 lines
2.9 KiB
Markdown
107 lines
2.9 KiB
Markdown
# Required Dependencies for Email Builder
|
|
|
|
## 🚀 Quick Install (Recommended)
|
|
|
|
Install all dependencies at once:
|
|
|
|
```bash
|
|
cd admin-spa
|
|
npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/lang-markdown @codemirror/theme-one-dark @radix-ui/react-radio-group
|
|
```
|
|
|
|
---
|
|
|
|
## 📦 Individual Packages
|
|
|
|
### TipTap Extensions (for RichTextEditor)
|
|
```bash
|
|
npm install @tiptap/extension-text-align @tiptap/extension-image
|
|
```
|
|
|
|
**What they do:**
|
|
- **@tiptap/extension-text-align**: Text alignment (left, center, right)
|
|
- **@tiptap/extension-image**: Image insertion with WordPress Media Modal
|
|
|
|
### CodeMirror (for Code Mode)
|
|
```bash
|
|
npm install codemirror @codemirror/lang-html @codemirror/lang-markdown @codemirror/theme-one-dark
|
|
```
|
|
|
|
**What they do:**
|
|
- **codemirror**: Core editor with professional features
|
|
- **@codemirror/lang-html**: HTML syntax highlighting & auto-completion
|
|
- **@codemirror/lang-markdown**: Markdown syntax highlighting & auto-completion
|
|
- **@codemirror/theme-one-dark**: Professional dark theme
|
|
|
|
### Radix UI (for UI Components)
|
|
```bash
|
|
npm install @radix-ui/react-radio-group
|
|
```
|
|
|
|
**What it does:**
|
|
- **@radix-ui/react-radio-group**: Radio button component for button style selection
|
|
|
|
---
|
|
|
|
## ✅ After Installation
|
|
|
|
### Start Development Server
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
### Verify Installation
|
|
All these features should work:
|
|
- ✅ Heading selector in RichTextEditor
|
|
- ✅ Text alignment buttons
|
|
- ✅ Image insertion via WordPress Media
|
|
- ✅ Styled buttons in cards
|
|
- ✅ Code mode with syntax highlighting
|
|
- ✅ Button style selection dialog
|
|
|
|
---
|
|
|
|
## 🎯 What's New
|
|
|
|
### All 5 User-Requested Improvements:
|
|
|
|
1. **Heading Selector** - H1-H4 and Paragraph dropdown
|
|
2. **Styled Buttons in Cards** - Custom TipTap extension
|
|
3. **Variable Pills** - Click to insert variables
|
|
4. **WordPress Media for Images** - Native WP Media Modal
|
|
5. **WordPress Media for Logos** - Store settings integration
|
|
|
|
### New Files Created:
|
|
- `lib/wp-media.ts` - WordPress Media Modal helper
|
|
- `components/ui/tiptap-button-extension.ts` - Custom button node
|
|
- `components/ui/code-editor.tsx` - CodeMirror wrapper
|
|
|
|
### Files Modified:
|
|
- `components/ui/rich-text-editor.tsx` - Added heading selector, alignment, buttons, WP Media
|
|
- `components/ui/image-upload.tsx` - Added WP Media Modal option
|
|
- `components/EmailBuilder/EmailBuilder.tsx` - Added variable pills
|
|
- `routes/Settings/Store.tsx` - Added mediaType props
|
|
|
|
---
|
|
|
|
## 📚 Documentation
|
|
|
|
See `EMAIL_BUILDER_IMPROVEMENTS.md` for:
|
|
- Detailed feature descriptions
|
|
- Implementation details
|
|
- User experience improvements
|
|
- Testing checklist
|
|
- Complete feature list
|
|
|
|
---
|
|
|
|
## 🙏 WordPress Integration
|
|
|
|
No additional WordPress plugins required! Uses native WordPress APIs:
|
|
- `window.wp.media` - Media Modal
|
|
- WordPress REST API - File uploads
|
|
- Built-in nonce handling
|
|
- Respects user permissions
|
|
|
|
All features work seamlessly with WordPress! 🎉
|