Files

dwindown bcd2ede595 docs: Comprehensive Documentation for All Improvements! 📚

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

2025-11-13 09:50:33 +07:00

2.8 KiB

Raw Blame History

Required Dependencies for Email Builder

🚀 Quick Install (Recommended)

Install all dependencies at once:

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)

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)

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)

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

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:

Heading Selector - H1-H4 and Paragraph dropdown
Styled Buttons in Cards - Custom TipTap extension
Variable Pills - Click to insert variables
WordPress Media for Images - Native WP Media Modal
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! 🎉

2.8 KiB Raw Blame History