66b3b9fa03
## ✅ 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! 🚀
59 lines
1.3 KiB
Markdown
59 lines
1.3 KiB
Markdown
# Required Dependencies for Email Builder
|
|
|
|
## Install These Packages:
|
|
|
|
### TipTap Extensions (for RichTextEditor)
|
|
```bash
|
|
npm install @tiptap/extension-text-align @tiptap/extension-image
|
|
```
|
|
|
|
### CodeMirror (for Code Mode)
|
|
```bash
|
|
npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark
|
|
```
|
|
|
|
### Radix UI (for UI Components)
|
|
```bash
|
|
npm install @radix-ui/react-radio-group
|
|
```
|
|
|
|
## Or Install All at Once:
|
|
```bash
|
|
npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/theme-one-dark @radix-ui/react-radio-group
|
|
```
|
|
|
|
## What Each Package Does:
|
|
|
|
### @tiptap/extension-text-align
|
|
- Adds text alignment support (left, center, right)
|
|
- Used in RichTextEditor toolbar
|
|
|
|
### @tiptap/extension-image
|
|
- Adds image insertion support
|
|
- Allows users to add images via URL
|
|
|
|
### codemirror
|
|
- Core CodeMirror editor
|
|
- Professional code editing experience
|
|
|
|
### @codemirror/lang-html
|
|
- HTML syntax highlighting
|
|
- Auto-completion for HTML tags
|
|
|
|
### @codemirror/theme-one-dark
|
|
- One Dark color theme
|
|
- Professional dark theme for code editor
|
|
|
|
### @radix-ui/react-radio-group
|
|
- Radio button component
|
|
- Used in button style selection dialog
|
|
|
|
## After Installation:
|
|
|
|
Run the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
All features will work correctly!
|