feat: Implement MDXEditor theming and image upload

src/components/admin/MarkdownEditor.tsx

@@ -27,7 +27,10 @@ import {
   type MDXEditorMethods
 } from '@mdxeditor/editor';
 import '@mdxeditor/editor/style.css';
+import '@/styles/mdx-editor-theme.css';
 import { useTheme } from '@/components/theme/ThemeProvider';
+import { supabase } from '@/integrations/supabase/client';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 import { useAutoSave } from '@/hooks/useAutoSave';
 import { CheckCircle2, Loader2, AlertCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -115,7 +118,7 @@ export function MarkdownEditor({
       <div 
         className={cn(
           'border border-input rounded-lg overflow-hidden',
-          resolvedTheme === 'dark' && 'dark'
+          resolvedTheme === 'dark' && 'dark-theme'
         )}
         style={{ minHeight: height }}
       >
@@ -124,7 +127,7 @@ export function MarkdownEditor({
           markdown={value}
           onChange={onChange}
           placeholder={placeholder}
-          contentEditableClassName="prose dark:prose-invert max-w-none p-4 min-h-[500px]"
+          contentEditableClassName="prose dark:prose-invert max-w-none p-4 min-h-[500px] mdx-content-area"
           plugins={[
             headingsPlugin(),
             listsPlugin(),
@@ -134,8 +137,26 @@ export function MarkdownEditor({
             linkPlugin(),
             linkDialogPlugin(),
             imagePlugin({
-              imageUploadHandler: async () => {
-                return Promise.resolve('https://placeholder.com/image.jpg');
+              imageUploadHandler: async (file: File) => {
+                try {
+                  const formData = new FormData();
+                  formData.append('file', file);
+                  
+                  const { data, error } = await supabase.functions.invoke('upload-image', {
+                    body: formData
+                  });
+                  
+                  if (error) throw error;
+                  
+                  // Return CloudFlare imagedelivery.net URL
+                  const imageUrl = getCloudflareImageUrl(data.id, 'public');
+                  if (!imageUrl) throw new Error('Failed to generate image URL');
+                  
+                  return imageUrl;
+                } catch (error) {
+                  console.error('Image upload failed:', error);
+                  throw new Error(error instanceof Error ? error.message : 'Failed to upload image');
+                }
               }
             }),
             tablePlugin(),