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: ![alt](url)

✅ 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

admin-spa/src/components/EmailBuilder/BlockRenderer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EmailBlock } from './types';
 import { __ } from '@/lib/i18n';
+import { parseMarkdownBasics } from '@/lib/markdown-utils';
 
 interface BlockRendererProps {
   block: EmailBlock;
@@ -27,7 +28,16 @@ export function BlockRenderer({
   // Prevent navigation in builder
   const handleClick = (e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
-    if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.closest('a') || target.closest('button')) {
+    if (
+      target.tagName === 'A' || 
+      target.tagName === 'BUTTON' || 
+      target.closest('a') || 
+      target.closest('button') ||
+      target.classList.contains('button') ||
+      target.classList.contains('button-outline') ||
+      target.closest('.button') ||
+      target.closest('.button-outline')
+    ) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -73,17 +83,20 @@ export function BlockRenderer({
           }
         };
         
+        // Convert markdown to HTML for visual rendering
+        const htmlContent = parseMarkdownBasics(block.content);
+        
         return (
           <div style={cardStyles[block.cardType]}>
             <div 
-              className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-0 [&_h1]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-0 [&_h2]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-0 [&_h3]:mb-2 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-0 [&_h4]:mb-2"
+              className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-0 [&_h1]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-0 [&_h2]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-0 [&_h3]:mb-2 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-0 [&_h4]:mb-2 [&_.button]:inline-block [&_.button]:bg-purple-600 [&_.button]:text-white [&_.button]:px-7 [&_.button]:py-3.5 [&_.button]:rounded-md [&_.button]:no-underline [&_.button]:font-semibold [&_.button-outline]:inline-block [&_.button-outline]:bg-transparent [&_.button-outline]:text-purple-600 [&_.button-outline]:px-6 [&_.button-outline]:py-3 [&_.button-outline]:rounded-md [&_.button-outline]:no-underline [&_.button-outline]:font-semibold [&_.button-outline]:border-2 [&_.button-outline]:border-purple-600"
               style={block.cardType === 'hero' ? { color: '#fff' } : {}}
-              dangerouslySetInnerHTML={{ __html: block.content }} 
+              dangerouslySetInnerHTML={{ __html: htmlContent }} 
             />
           </div>
         );
       
-      case 'button':
+      case 'button': {
         const buttonStyle: React.CSSProperties = block.style === 'solid'
           ? {
               display: 'inline-block',
@@ -92,7 +105,7 @@ export function BlockRenderer({
               padding: '14px 28px',
               borderRadius: '6px',
               textDecoration: 'none',
-              fontWeight: 600
+              fontWeight: 600,
             }
           : {
               display: 'inline-block',
@@ -102,19 +115,57 @@ export function BlockRenderer({
               border: '2px solid #7f54b3',
               borderRadius: '6px',
               textDecoration: 'none',
-              fontWeight: 600
+              fontWeight: 600,
             };
+
+        const containerStyle: React.CSSProperties = {
+          textAlign: block.align || 'center',
+        };
+
+        if (block.widthMode === 'full') {
+          buttonStyle.display = 'block';
+          buttonStyle.width = '100%';
+          buttonStyle.textAlign = 'center';
+        } else if (block.widthMode === 'custom' && block.customMaxWidth) {
+          buttonStyle.maxWidth = `${block.customMaxWidth}px`;
+          buttonStyle.width = '100%';
+        }
         
         return (
-          <div style={{ textAlign: 'center' }}>
-            <a
-              href={block.link}
-              style={buttonStyle}
-            >
+          <div style={containerStyle}>
+            <a href={block.link} style={buttonStyle}>
               {block.text}
             </a>
           </div>
         );
+      }
+
+      case 'image': {
+        const containerStyle: React.CSSProperties = {
+          textAlign: block.align,
+          marginBottom: 24,
+        };
+
+        const imgStyle: React.CSSProperties = {
+          display: 'inline-block',
+        };
+
+        if (block.widthMode === 'full') {
+          imgStyle.display = 'block';
+          imgStyle.width = '100%';
+          imgStyle.height = 'auto';
+        } else if (block.widthMode === 'custom' && block.customMaxWidth) {
+          imgStyle.maxWidth = `${block.customMaxWidth}px`;
+          imgStyle.width = '100%';
+          imgStyle.height = 'auto';
+        }
+
+        return (
+          <div style={containerStyle}>
+            <img src={block.src} alt={block.alt || ''} style={imgStyle} />
+          </div>
+        );
+      }
       
       case 'divider':
         return <hr className="border-t border-gray-300 my-4" />;
@@ -154,8 +205,8 @@ export function BlockRenderer({
             ↓
           </button>
         )}
-        {/* Only show edit button for card and button blocks */}
-        {(block.type === 'card' || block.type === 'button') && (
+        {/* Only show edit button for card, button, and image blocks */}
+        {(block.type === 'card' || block.type === 'button' || block.type === 'image') && (
           <button
             onClick={onEdit}
             className="p-1 hover:bg-gray-100 rounded text-blue-600 text-xs"