dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
539 Commits 1 Branch 1 Tag
687a2318b005d1dda0b2af92e51af8af9018b140
Commit Graph

7 Commits

Author SHA1 Message Date
Dwindi Ramadhana
5f08c18ec7 fix: resolve container width issues, spa redirects, and appearance settings overwrite. feat: enhance order/sub details and newsletter layout 2026-02-05 00:09:40 +07:00
Dwindi Ramadhana
6d2136d3b5 Fix button roundtrip in editor, alignment persistence, and test email rendering 2026-01-17 13:10:50 +07:00
Dwindi Ramadhana
da6255dd0c fix: remove emoji from TipTap button, add subtle background 
- Removed 🔘 emoji prefix from button text
- Button now shows text with subtle purple background pill
- Added padding and border-radius to differentiate from regular links
- Hover tooltip still shows 'Button: text → url' for clarity
 2026-01-03 17:40:44 +07:00
Dwindi Ramadhana
b010a88619 feat: simplify TipTap button styling + add click-to-edit 
Button Styling:
- Buttons now render as simple links with 🔘 prefix in editor
- No more styled button appearance in TipTap (was inconsistent)
- Actual button styling still happens in email (EmailRenderer.php)

Click-to-Edit:
- Click any button in the editor to open edit dialog
- Edit button text, link URL, and style (solid/outline)
- Delete button option in edit mode
- Updates button in-place instead of requiring recreation

Dialog improvements:
- Shows 'Edit Button' title in edit mode
- Shows 'Update Button' vs 'Insert Button' based on mode
- Delete button (red) appears only in edit mode
 2026-01-03 17:22:34 +07:00
Dwindi Ramadhana
1ce99e2bb6 fix: TipTap button style extraction when parsing HTML 
Added getAttrs functions to parseHTML in tiptap-button-extension.ts.
Now properly extracts text/href/style from DOM elements:
- data-button: extracts from data-text, data-href, data-style
- a.button: extracts text/href, defaults to solid style
- a.button-outline: extracts text/href, defaults to outline style

This fixes the issue where buttons appeared unstyled (outline
instead of solid) when editing a card that contained buttons.
 2026-01-01 23:48:06 +07:00
Dwindi Ramadhana
2ce7c0b263 fix: button detection with text alignment 
Added data-button attribute selector to TipTap button parseHTML.
This ensures buttons are properly detected when text alignment is
applied, as alignment may affect CSS class detection.

Priority order:
1. a[data-button] - most reliable
2. a.button
3. a.button-outline
 2026-01-01 23:34:41 +07:00
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