dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
493f363dd2adae9c5b0e1225a5c3245967cc85a8
WooNooW/admin-spa/DEPENDENCIES.md
dwindown 66b3b9fa03 feat: Add Heading Selector, Styled Buttons & Variable Pills! 🎯 
## ✅ 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! 🚀
2025-11-13 08:03:35 +07:00

1.3 KiB
Raw Blame History

Required Dependencies for Email Builder

Install These Packages:

TipTap Extensions (for RichTextEditor)

npm install @tiptap/extension-text-align @tiptap/extension-image

CodeMirror (for Code Mode)

npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark

Radix UI (for UI Components)

npm install @radix-ui/react-radio-group

Or Install All at Once:

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:

npm run dev

All features will work correctly!