feat: Integrate Markdown editor

src/pages/AdminBlog.tsx

@@ -9,16 +9,17 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
 import { Card } from '@/components/ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 import { UppyPhotoUpload } from '@/components/upload/UppyPhotoUpload';
+import { MarkdownEditor } from '@/components/admin/MarkdownEditor';
 import { generateSlugFromName } from '@/lib/slugUtils';
 import { extractCloudflareImageId } from '@/lib/cloudflareImageUtils';
 import { Edit, Trash2, Eye, Plus } from 'lucide-react';
 import { toast } from 'sonner';
 import { formatDistanceToNow } from 'date-fns';
+import '@/styles/markdown-editor.css';
 
 interface BlogPost {
   id: string;
@@ -330,17 +331,21 @@ export default function AdminBlog() {
 
               <div className="space-y-2">
                 <Label htmlFor="content">Content (Markdown) *</Label>
-                <Textarea
-                  id="content"
+                <MarkdownEditor
                   value={content}
-                  onChange={(e) => setContent(e.target.value)}
-                  placeholder="Write your post in markdown..."
-                  rows={20}
-                  className="font-mono text-sm"
+                  onChange={setContent}
+                  onSave={async (value) => {
+                    if (editingPost) {
+                      await supabase
+                        .from('blog_posts')
+                        .update({ content: value, updated_at: new Date().toISOString() })
+                        .eq('id', editingPost.id);
+                    }
+                  }}
+                  autoSave={!!editingPost}
+                  height={600}
+                  placeholder="Write your blog post in markdown..."
                 />
-                <p className="text-xs text-muted-foreground">
-                  Supports markdown formatting: **bold**, *italic*, # Headings, [links](url), etc.
-                </p>
               </div>
 
               <div className="flex gap-3">