WooNooW/NEW_MARKDOWN_SYNTAX.md

# ✨ New Markdown Syntax - Implemented!

## 🎉 What's New

### Cleaner, More Intuitive Syntax

**Before (Old Syntax):**
```markdown
[card type="hero"]
Content here
[/card]

[button url="https://example.com" style="solid"]Click me[/button]
```

**After (New Syntax):**
```markdown
[card:hero]
Content here
[/card]

[button:solid](https://example.com)Click me[/button]
```

## 📝 Complete Syntax Guide

### Cards

**Basic Card:**
```markdown
[card]
Your content here
[/card]
```

**Styled Cards:**
```markdown
[card:hero]
Large header with gradient
[/card]

[card:success]
Success message
[/card]

[card:warning]
Warning message
[/card]

[card:info]
Information card
[/card]

[card:basic]
Minimal styling
[/card]
```

### Buttons

**Solid Button:**
```markdown
[button:solid](https://example.com)Click me[/button]
```

**Outline Button:**
```markdown
[button:outline](https://example.com)Click me[/button]
```

### Images

**Standard Markdown:**
```markdown
![Image description](https://example.com/image.jpg)
```

### Text Formatting

```markdown
**Bold text**
*Italic text*
# Heading 1
## Heading 2
### Heading 3

- Bullet list
- Another item

1. Numbered list
2. Another item

[Link text](https://example.com)

---
Horizontal rule
```

## 🔧 Markdown Toolbar

The toolbar now includes:
- **Card** button - Insert cards with type selector
- **Button** button - Insert buttons with style selector
- **Image** button - Insert image template
- All standard formatting tools (Bold, Italic, Headings, etc.)

## 🔄 Backward Compatibility

The old syntax still works! Both formats are supported:

**Old Format (Still Works):**
```markdown
[card type="hero"]...[/card]
[button url="..." style="solid"]...[/button]
```

**New Format (Recommended):**
```markdown
[card:hero]...[/card]
[button:solid](url)...[/button]
```

## 📊 All Available Variables

### Order Variables
- `{order_number}` - Order ID
- `{order_date}` - Order date
- `{order_total}` - Total amount
- `{order_status}` - Current status
- `{order_url}` - Link to view order
- `{order_items_list}` - Items as formatted list
- `{order_items_table}` - Items as formatted table ✅ FIXED

### Customer Variables
- `{customer_name}` - Customer full name
- `{customer_email}` - Customer email
- `{customer_phone}` - Phone number
- `{customer_username}` - Username
- `{customer_password}` - Temporary password

### Store Variables
- `{store_name}` - Store name
- `{store_url}` - Store URL
- `{store_email}` - Store contact email
- `{support_email}` - Support email

### Payment Variables
- `{payment_method}` - Payment method used
- `{payment_status}` - Payment status
- `{payment_url}` - Payment link
- `{payment_date}` - Payment date
- `{transaction_id}` - Transaction ID
- `{refund_amount}` - Refund amount

### Shipping Variables
- `{shipping_address}` - Full shipping address
- `{billing_address}` - Full billing address
- `{tracking_number}` - Shipment tracking number
- `{tracking_url}` - Tracking link
- `{shipping_carrier}` - Shipping carrier
- `{shipping_method}` - Shipping method

### Date Variables
- `{completion_date}` - Order completion date
- `{cancellation_date}` - Order cancellation date
- `{current_year}` - Current year

### URL Variables
- `{review_url}` - Product review link
- `{shop_url}` - Shop homepage
- `{my_account_url}` - Customer account
- `{payment_retry_url}` - Retry payment
- `{vip_dashboard_url}` - VIP dashboard

## ✅ What's Fixed

1. ✅ **Newline rendering** - `<br>` tags now generated correctly
2. ✅ **Variable mismatch** - `order_items_table` fixed
3. ✅ **Cleaner syntax** - New `[card:type]` and `[button:style](url)` format
4. ✅ **Toolbar enhancements** - Added Image and Button insert buttons
5. ✅ **Backward compatibility** - Old syntax still works

## 🚀 Usage Examples

### Order Confirmation Email

```markdown
[card:hero]

## Thank you for your order, {customer_name}!

We've received your order and will begin processing it right away.

[/card]

[card]

**Order Number:** #{order_number}
**Order Date:** {order_date}
**Order Total:** {order_total}

[/card]

[card]

{order_items_table}

[/card]

[button:solid]({order_url})View Order Details[/button]

[card:basic]

Questions? Contact us at {support_email}

[/card]
```

### Shipping Notification

```markdown
[card:info]

## Your order is on the way! 📦

Tracking Number: **{tracking_number}**

[/card]

[button:solid]({tracking_url})Track Your Package[/button]
```

## 💡 Tips

1. **Use card types** to highlight important information
2. **Variables** are automatically replaced with real data
3. **Newlines work!** Just press Enter to create line breaks
4. **Use the toolbar** for quick formatting
5. **Preview** your changes before saving

## 🎨 Card Types

- **default** - Standard white card
- **hero** - Large gradient header (perfect for main message)
- **success** - Green (order confirmed, payment received)
- **warning** - Yellow (action required, pending)
- **info** - Blue (shipping updates, information)
- **basic** - Minimal (footer, contact info)

---

**Enjoy the new syntax! 🎉**