feat: Code Mode Button Position & Markdown Support! 📝

## ✅ 3. Code Mode Button Moved to Left
**Problem:** Inconsistent layout, tabs on right should be Editor/Preview only
**Solution:**
- Moved Code Mode button next to "Message Body" label
- Editor/Preview tabs stay on the right
- Consistent, logical layout

**Before:**
```
Message Body                [Editor|Preview] [Code Mode]
```

**After:**
```
Message Body [Code Mode]                [Editor|Preview]
```

## ✅ 4. Markdown Support in Code Mode! 🎉
**Problem:** HTML is verbose, not user-friendly for tech-savvy users
**Solution:**
- Added Markdown parser with ::: syntax for cards
- Toggle between HTML and Markdown modes
- Full bidirectional conversion

**Markdown Syntax:**
```markdown
:::card
# Heading
Your content here
:::

:::card[success]
✅ Success message
:::

[button](https://example.com){Click Here}
[button style="outline"](url){Secondary Button}
```

**Features:**
- Standard Markdown: headings, bold, italic, lists, links
- Card blocks: :::card or :::card[type]
- Button blocks: [button](url){text}
- Variables: {order_url}, {customer_name}
- Bidirectional conversion (HTML ↔ Markdown)

**Files:**
- `lib/markdown-parser.ts` - Parser implementation
- `components/ui/code-editor.tsx` - Mode toggle
- `routes/Settings/Notifications/EditTemplate.tsx` - Enable support
- `DEPENDENCIES.md` - Add @codemirror/lang-markdown

**Note:** Requires `npm install @codemirror/lang-markdown`

Ready for remaining improvements (5-6)!

admin-spa/src/components/ui/code-editor.tsx

@@ -1,15 +1,20 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EditorView, basicSetup } from 'codemirror';
 import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
 import { oneDark } from '@codemirror/theme-one-dark';
+import { Button } from './button';
+import { parseMarkdownToEmail, parseEmailToMarkdown } from '@/lib/markdown-parser';
 
 interface CodeEditorProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  supportMarkdown?: boolean;
 }
 
-export function CodeEditor({ value, onChange, placeholder }: CodeEditorProps) {
+export function CodeEditor({ value, onChange, placeholder, supportMarkdown = false }: CodeEditorProps) {
+  const [mode, setMode] = useState<'html' | 'markdown'>('html');
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
 
@@ -17,14 +22,15 @@ export function CodeEditor({ value, onChange, placeholder }: CodeEditorProps) {
     if (!editorRef.current) return;
 
     const view = new EditorView({
-      doc: value,
+      doc: mode === 'markdown' ? parseEmailToMarkdown(value) : value,
       extensions: [
         basicSetup,
-        html(),
+        mode === 'markdown' ? markdown() : html(),
         oneDark,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
-            onChange(update.state.doc.toString());
+            const content = update.state.doc.toString();
+            onChange(mode === 'markdown' ? parseMarkdownToEmail(content) : content);
           }
         }),
       ],
@@ -36,25 +42,52 @@ export function CodeEditor({ value, onChange, placeholder }: CodeEditorProps) {
     return () => {
       view.destroy();
     };
-  }, []);
+  }, [mode]);
 
   // Update editor when value prop changes
   useEffect(() => {
-    if (viewRef.current && value !== viewRef.current.state.doc.toString()) {
-      viewRef.current.dispatch({
-        changes: {
-          from: 0,
-          to: viewRef.current.state.doc.length,
-          insert: value,
-        },
-      });
+    if (viewRef.current) {
+      const displayValue = mode === 'markdown' ? parseEmailToMarkdown(value) : value;
+      if (displayValue !== viewRef.current.state.doc.toString()) {
+        viewRef.current.dispatch({
+          changes: {
+            from: 0,
+            to: viewRef.current.state.doc.length,
+            insert: displayValue,
+          },
+        });
+      }
     }
-  }, [value]);
+  }, [value, mode]);
+
+  const toggleMode = () => {
+    setMode(mode === 'html' ? 'markdown' : 'html');
+  };
 
   return (
-    <div 
-      ref={editorRef} 
-      className="border rounded-md overflow-hidden min-h-[400px] font-mono text-sm"
-    />
+    <div className="space-y-2">
+      {supportMarkdown && (
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={toggleMode}
+            className="text-xs"
+          >
+            {mode === 'html' ? '📝 Switch to Markdown' : '🔧 Switch to HTML'}
+          </Button>
+        </div>
+      )}
+      <div 
+        ref={editorRef} 
+        className="border rounded-md overflow-hidden min-h-[400px] font-mono text-sm"
+      />
+      {supportMarkdown && mode === 'markdown' && (
+        <p className="text-xs text-muted-foreground">
+          💡 Markdown syntax: Use <code>:::</code> for cards, <code>[button](url)&#123;text&#125;</code> for buttons
+        </p>
+      )}
+    </div>
   );
 }