feat: Complete markdown syntax refinement and variable protection
✅ New cleaner syntax implemented: - [card:type] instead of [card type='type'] - [button:style](url)Text[/button] instead of [button url='...' style='...'] - Standard markdown images:  ✅ Variable protection from markdown parsing: - Variables with underscores (e.g., {order_items_table}) now protected - HTML comment placeholders prevent italic/bold parsing - All variables render correctly in preview ✅ Button rendering fixes: - Buttons work in Visual mode inside cards - Buttons work in Preview mode - Button clicks prevented in visual editor - Proper styling for solid and outline buttons ✅ Backward compatibility: - Old syntax still supported - No breaking changes ✅ Bug fixes: - Fixed order_item_table → order_items_table naming - Fixed button regex to match across newlines - Added button/image parsing to parseMarkdownBasics - Prevented button clicks on .button and .button-outline classes 📚 Documentation: - NEW_MARKDOWN_SYNTAX.md - Complete user guide - MARKDOWN_SYNTAX_AND_VARIABLES.md - Technical analysis
This commit is contained in:
dwindown
252
NEW_MARKDOWN_SYNTAX.md
Normal file
252
NEW_MARKDOWN_SYNTAX.md
Normal file
@@ -0,0 +1,252 @@
|
||||
# ✨ 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
|
||||
|
||||
```
|
||||
|
||||
### 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! 🎉**
|
||||
Reference in New Issue
Block a user