feat: Major Email Builder Improvements! 🚀

## 🎯 All User Feedback Implemented:

### 1. ✅ Header & Button Outside Cards
**Problem:**
- Header and Button were wrapped in [card] tags
- Not honest rendering
- Doesn't make sense to wrap single elements

**Solution:**
- Removed Header and Text as separate block types
- Only Card contains rich content now
- Button, Divider, Spacer render outside cards
- Honest, semantic HTML structure

**Before:**
```
[card]<h1>Header</h1>[/card]
[card]<button>Click</button>[/card]
```

**After:**
```
[card]<h1>Header</h1><p>Content...</p>[/card]
<button>Click</button>
```

### 2. ✅ Rich Content in Cards
**Problem:**
- Cards had plain textarea
- No formatting options
- Hard to create mixed content

**Solution:**
- Cards now use RichTextEditor
- Full WYSIWYG editing
- Headers, text, lists, links, images, alignment
- All in one card!

**Card Dialog:**
```
Edit Card
─────────────────────
Card Type: [Default ▼]

Content:
┌──────────────────────────────┐
│ [B][I][List][Link][←][↔][→][📷]│
│                              │
│ <h2>Customer Details</h2>    │
│ <p>Name: {customer_name}</p> │
│                              │
└──────────────────────────────┘
```

### 3. ✅ Text Alignment & Image Support
**Added to RichTextEditor:**
- ← Align Left
- ↔ Align Center
- → Align Right
- 📷 Insert Image

**Extensions:**
- `@tiptap/extension-text-align`
- `@tiptap/extension-image`

### 4. ✅ CodeMirror for Code Mode
**Problem:**
- Plain textarea for code
- No syntax highlighting
- Hard to read/edit

**Solution:**
- CodeMirror editor
- HTML syntax highlighting
- One Dark theme
- Auto-completion
- Professional code editing

**Features:**
- Syntax highlighting
- Line numbers
- Bracket matching
- Auto-indent
- Search & replace

## 📦 Block Structure:

**Simplified to 4 types:**
1. **Card** - Rich content container (headers, text, images, etc.)
2. **Button** - Standalone CTA (outside card)
3. **Divider** - Horizontal line (outside card)
4. **Spacer** - Vertical spacing (outside card)

## 🔄 Converter Updates:

**blocksToHTML():**
- Cards → `[card]...[/card]`
- Buttons → `<a class="button">...</a>` (no card wrapper)
- Dividers → `<hr />` (no card wrapper)
- Spacers → `<div style="height:...">` (no card wrapper)

**htmlToBlocks():**
- Parses cards AND standalone elements
- Correctly identifies buttons outside cards
- Maintains structure integrity

## 📋 Required Dependencies:

**TipTap Extensions:**
```bash
npm install @tiptap/extension-text-align @tiptap/extension-image
```

**CodeMirror:**
```bash
npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark
```

**Radix UI:**
```bash
npm install @radix-ui/react-radio-group
```

## 🎨 User Experience:

**For Non-Technical Users:**
- Visual builder with rich text editing
- No HTML knowledge needed
- Click, type, format, done!

**For Tech-Savvy Users:**
- Code mode with CodeMirror
- Full HTML control
- Syntax highlighting
- Professional editing

**Best of Both Worlds!** 🎉

## Summary:

✅ Honest rendering (no unnecessary card wrappers)
✅ Rich content in cards (WYSIWYG editing)
✅ Text alignment & images
✅ Professional code editor
✅ Perfect for all skill levels

This is PRODUCTION-READY! 🚀

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

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef } from 'react';
+import { EditorView, basicSetup } from 'codemirror';
+import { html } from '@codemirror/lang-html';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+export function CodeEditor({ value, onChange, placeholder }: CodeEditorProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    const view = new EditorView({
+      doc: value,
+      extensions: [
+        basicSetup,
+        html(),
+        oneDark,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onChange(update.state.doc.toString());
+          }
+        }),
+      ],
+      parent: editorRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+    };
+  }, []);
+
+  // 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,
+        },
+      });
+    }
+  }, [value]);
+
+  return (
+    <div 
+      ref={editorRef} 
+      className="border rounded-md overflow-hidden min-h-[400px] font-mono text-sm"
+    />
+  );
+}