# 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! 🎉