WooNooW

dwindown/WooNooW

Fork 0

Commit Graph

Author	SHA1	Message	Date
dwindown	c3ab31e14d	fix: Template editor UX improvements ## ✅ All 5 Issues Fixed! ### 1. Default Value in RichTextEditor ✅ - Added `useEffect` to sync content prop with editor - Editor now properly displays default template content - Fixed: `editor.commands.setContent(content)` when prop changes ### 2. Removed Duplicate Variable Section ✅ - Removed "Variable Reference" section (was redundant) - Variables already available in rich text editor toolbar - Kept small badge list under editor for quick reference ### 3. User-Friendly Preview ✅ - Preview now renders HTML (not raw code) - Subject separated in dialog header - Complete email template preview (header + content + footer) - Variables highlighted in yellow for clarity - Uses iframe with full base.html styling ### 4. Fixed Dialog Scrolling ✅ New Structure: ``` [Header] ← Fixed (title + subject input) [Body] ← Scrollable (tabs: editor/preview) [Footer] ← Fixed (action buttons) ``` - No more annoying full-dialog scroll - Each section scrolls independently - Better UX with fixed header/footer ### 5. Editor/Preview Tabs ✅ Tabs Implementation: - [Editor] tab: Rich text editor + variable badges - [Preview] tab: Full email preview with styling - Clean separation of editing vs previewing - Preview shows complete email (not just content) - 500px iframe height for comfortable viewing --- Benefits: - ✨ Default content loads properly - 🎨 Beautiful HTML preview - 📱 Better scrolling UX - 👁️ See exactly how email looks - 🚀 Professional editing experience Next: Email appearance settings + card insert buttons	2025-11-12 23:26:18 +07:00
dwindown	a1a5dc90c6	feat: Rich text editor and email system integration ## ✅ Step 4-5: Rich Text Editor & Integration ### RichTextEditor Component (TipTap) - ✅ Modern WYSIWYG editor for React - ✅ Toolbar: Bold, Italic, Lists, Links, Undo/Redo - ✅ Variable insertion with buttons - ✅ Placeholder support - ✅ Clean, minimal UI ### TemplateEditor Updated - ✅ Replaced Textarea with RichTextEditor - ✅ Variables shown as clickable buttons - ✅ Better UX for content editing - ✅ HTML output for email templates ### Bootstrap Integration - ✅ EmailManager initialized on plugin load - ✅ Hooks into WooCommerce events automatically - ✅ Disables WC emails to prevent duplicates ### Plugin Constants - ✅ WOONOOW_PATH for template paths - ✅ WOONOOW_URL for assets - ✅ WOONOOW_VERSION for versioning ### Dependencies - ✅ @tiptap/react - ✅ @tiptap/starter-kit - ✅ @tiptap/extension-placeholder - ✅ @tiptap/extension-link --- Status: Core email system complete! Next: Test and create content templates 🚀	2025-11-12 18:53:20 +07:00

Author

SHA1

Message

Date

dwindown

c3ab31e14d

fix: Template editor UX improvements

## ✅ All 5 Issues Fixed!

### 1. Default Value in RichTextEditor ✅
- Added `useEffect` to sync content prop with editor
- Editor now properly displays default template content
- Fixed: `editor.commands.setContent(content)` when prop changes

### 2. Removed Duplicate Variable Section ✅
- Removed "Variable Reference" section (was redundant)
- Variables already available in rich text editor toolbar
- Kept small badge list under editor for quick reference

### 3. User-Friendly Preview ✅
- Preview now renders HTML (not raw code)
- Subject separated in dialog header
- Complete email template preview (header + content + footer)
- Variables highlighted in yellow for clarity
- Uses iframe with full base.html styling

### 4. Fixed Dialog Scrolling ✅
**New Structure:**
```
[Header] ← Fixed (title + subject input)
[Body]   ← Scrollable (tabs: editor/preview)
[Footer] ← Fixed (action buttons)
```
- No more annoying full-dialog scroll
- Each section scrolls independently
- Better UX with fixed header/footer

### 5. Editor/Preview Tabs ✅
**Tabs Implementation:**
- [Editor] tab: Rich text editor + variable badges
- [Preview] tab: Full email preview with styling
- Clean separation of editing vs previewing
- Preview shows complete email (not just content)
- 500px iframe height for comfortable viewing

---

**Benefits:**
- ✨ Default content loads properly
- 🎨 Beautiful HTML preview
- 📱 Better scrolling UX
- 👁️ See exactly how email looks
- 🚀 Professional editing experience

**Next:** Email appearance settings + card insert buttons

2025-11-12 23:26:18 +07:00

dwindown

a1a5dc90c6

feat: Rich text editor and email system integration

## ✅ Step 4-5: Rich Text Editor & Integration

### RichTextEditor Component (TipTap)
- ✅ Modern WYSIWYG editor for React
- ✅ Toolbar: Bold, Italic, Lists, Links, Undo/Redo
- ✅ Variable insertion with buttons
- ✅ Placeholder support
- ✅ Clean, minimal UI

### TemplateEditor Updated
- ✅ Replaced Textarea with RichTextEditor
- ✅ Variables shown as clickable buttons
- ✅ Better UX for content editing
- ✅ HTML output for email templates

### Bootstrap Integration
- ✅ EmailManager initialized on plugin load
- ✅ Hooks into WooCommerce events automatically
- ✅ Disables WC emails to prevent duplicates

### Plugin Constants
- ✅ WOONOOW_PATH for template paths
- ✅ WOONOOW_URL for assets
- ✅ WOONOOW_VERSION for versioning

### Dependencies
- ✅ @tiptap/react
- ✅ @tiptap/starter-kit
- ✅ @tiptap/extension-placeholder
- ✅ @tiptap/extension-link

---

**Status:** Core email system complete!
**Next:** Test and create content templates 🚀

2025-11-12 18:53:20 +07:00

2 Commits