WooNooW

Files

dwindown f8538c4cf7 feat: Add card insert buttons toolbar

## ✨ New Feature: Card Insert Buttons!

### What's Added:

**Card Insert Toolbar** above the rich text editor with 6 quick-insert buttons:

1. **Basic Card** - Plain card with default content
2. **Success Card** - Green checkmark, success message
3. **Info Card** - Blue info icon, informational content
4. **Warning Card** - Orange alert icon, warning message
5. **Hero Card** - Large text, background image support
6. **Button** - Call-to-action button with link

### Features:

**Visual Toolbar:**
```
Insert Card: [Basic] [✓ Success] [ℹ Info] [⚠ Warning] [🖼 Hero] | [+ Button]
```

**One-Click Insert:**
- Click button → Card inserted at end of content
- Pre-filled with sample content
- Proper [card] syntax
- Toast notification confirms insertion

**Smart Behavior:**
- Only shows in Visual Editor mode (hidden in Code Mode)
- Styled toolbar with icons and colors
- Responsive layout (wraps on mobile)
- Separator between cards and button

### Card Types:

**Basic:**
```html
[card]
<h2>Card Title</h2>
<p>Card content goes here...</p>
[/card]
```

**Success:**
```html
[card type="success"]
<h2>✅ Success!</h2>
<p>Your action was successful.</p>
[/card]
```

**Info, Warning, Hero** - Similar structure with different types

**Button:**
```html
<p style="text-align: center;">
  <a href="{order_url}" class="button">Button Text</a>
</p>
```

### Benefits:

- ✅ **No manual typing** of [card] tags
- ✅ **Consistent formatting** every time
- ✅ **Visual feedback** with toast notifications
- ✅ **Beginner-friendly** - just click and edit
- ✅ **Professional templates** with pre-filled content

### Next: Email Appearance Settings 🎨

2025-11-13 05:33:28 +07:00