WooNooW/NEW_MARKDOWN_SYNTAX.md

✨ New Markdown Syntax - Implemented!

🎉 What's New

Cleaner, More Intuitive Syntax

Before (Old Syntax):

[card type="hero"]
Content here
[/card]

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

After (New Syntax):

[card:hero]
Content here
[/card]

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

📝 Complete Syntax Guide

Cards

Basic Card:

[card]
Your content here
[/card]

Styled Cards:

[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:

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

Outline Button:

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

Images

Standard Markdown:

![Image description](https://example.com/image.jpg)

Text Formatting

**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):

[card type="hero"]...[/card]
[button url="..." style="solid"]...[/button]

New Format (Recommended):

[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

[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

[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! 🎉