bcd2ede595
Added detailed documentation:
1. EMAIL_BUILDER_IMPROVEMENTS.md
- Complete feature descriptions
- Implementation details
- User experience improvements
- Testing checklist
- WordPress integration details
2. Updated DEPENDENCIES.md
- Quick install command
- Individual package descriptions
- What's new section
- Verification checklist
- WordPress integration notes
All improvements documented and ready for production! 🎉
106 lines
2.8 KiB
Markdown
106 lines
2.8 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/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/theme-one-dark
|
|
```
|
|
|
|
**What they do:**
|
|
- **codemirror**: Core editor with professional features
|
|
- **@codemirror/lang-html**: HTML 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! 🎉
|