@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/rich-text-editor/index.tsx

@@ -0,0 +1,1537 @@
+"use client";
+
+import React, { useState } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import TextAlign from '@tiptap/extension-text-align';
+import Highlight from '@tiptap/extension-highlight';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+import TableCell from '@tiptap/extension-table-cell';
+import TableHeader from '@tiptap/extension-table-header';
+import Color from '@tiptap/extension-color';
+import { TextStyle } from '@tiptap/extension-text-style';
+import UnderlineExtension from '@tiptap/extension-underline';
+import Gapcursor from '@tiptap/extension-gapcursor';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
+import Typography from '@tiptap/extension-typography';
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
+import { common, createLowlight } from 'lowlight';
+import { SlashCommandsExtension } from './slash-commands-extension';
+
+// Import pro access hooks
+// Note: DocsProAccess should be handled by consuming application
+import { useSubscription } from '../../hooks/use-subscription';
+import { Card, CardContent } from '../ui/card';
+
+const lowlight = createLowlight(common);
+import { 
+  Bold, 
+  Italic, 
+  Underline, 
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  Code,
+  Link2,
+  Image as ImageIcon,
+  Table as TableIcon,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  Highlighter,
+  Type,
+  Wand2,
+  Settings,
+  Sparkles,
+  ChevronDown,
+  Plus,
+  RefreshCw,
+  Maximize,
+  FileText,
+  Languages,
+  Check,
+  CheckSquare,
+  Undo,
+  Redo,
+  Palette,
+  Eye,
+  Edit,
+  Lock
+} from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { Separator } from '../ui/separator';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { ColorPicker } from '../ui/color-picker';
+import { Slider } from '../ui/slider';
+import { toast } from '../ui/toast';
+// Note: AI providers should be handled by consuming application
+
+// Type definitions for AI functionality
+type AIProvider = 'openai' | 'anthropic' | 'gemini'
+
+interface AISettingsType {
+  provider: AIProvider
+  apiKey?: string
+  model?: string
+  maxTokens?: number
+}
+
+interface SlashCommand {
+  title: string
+  description: string
+  command: string
+  action: () => void
+}
+
+// Mock AI provider function
+const getAIProvider = (settings: AISettingsType) => {
+  return {
+    generateText: async (prompt: string) => {
+      // Mock implementation - consuming app should provide real AI integration
+      return 'AI functionality requires proper API configuration'
+    }
+  }
+}
+import './slash-commands.css';
+import './table-styles.css';
+
+interface RichTextEditorProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  height?: number | string;
+  features?: {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strike?: boolean;
+    heading?: boolean;
+    lists?: boolean;
+    blockquote?: boolean;
+    code?: boolean;
+    link?: boolean;
+    image?: boolean;
+    table?: boolean;
+    align?: boolean;
+    color?: boolean;
+    ai?: boolean;
+  };
+  aiConfig?: {
+    provider?: 'openai' | 'claude' | 'gemini' | 'cohere';
+    apiKey?: string;
+    model?: string;
+    temperature?: number;
+    maxTokens?: number;
+  };
+}
+
+
+const EditorColorPicker = ({ 
+  onColorSelect, 
+  currentColor = "#000000"
+}: { 
+  onColorSelect: (color: string) => void;
+  currentColor?: string;
+}) => {
+  return (
+    <ColorPicker
+      value={currentColor}
+      onChange={onColorSelect}
+      showInput={true}
+      showPresets={true}
+      size="sm"
+      presets={[
+        '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
+        '#ffff00', '#ff00ff', '#00ffff', '#ff8800', '#8800ff',
+        '#88ff00', '#0088ff', '#ff0088', '#00ff88', '#888888',
+        '#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635',
+        '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8',
+        '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9',
+        '#f472b6', '#fb7185', '#f43f5e', '#ef4444', '#dc2626',
+      ]}
+    />
+  );
+};
+
+const ToolbarButton = ({ 
+  active, 
+  disabled, 
+  onClick, 
+  children, 
+  tooltip 
+}: { 
+  active?: boolean; 
+  disabled?: boolean; 
+  onClick: () => void; 
+  children: React.ReactNode;
+  tooltip?: string;
+}) => {
+  const button = (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+        active && "bg-gray-100 dark:bg-gray-800",
+        disabled && "opacity-50 cursor-not-allowed"
+      )}
+    >
+      {children}
+    </button>
+  );
+
+  if (!tooltip) return button;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {button}
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export function RichTextEditor({
+  placeholder = 'Start writing...',
+  className,
+  height = 300,
+  features = {
+    bold: true,
+    italic: true,
+    underline: true,
+    strike: true,
+    heading: true,
+    lists: true,
+    blockquote: true,
+    code: true,
+    link: true,
+    image: true,
+    table: true,
+    align: true,
+    color: true,
+    ai: true,
+  },
+  aiConfig = {
+    provider: 'openai',
+    apiKey: '',
+    model: 'gpt-4',
+    temperature: 0.7,
+    maxTokens: 1000,
+  },
+}: RichTextEditorProps) {
+  // Pro access kontrolü
+  const docsProAccess = { hasAccess: true }; // Pro access assumed in package
+  const { hasProAccess, isLoading } = useSubscription();
+  
+  // In docs mode, always show the component
+  const canShowComponent = docsProAccess.isDocsMode || hasProAccess;
+  
+  // If not in docs mode and no pro access, show upgrade prompt
+  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="py-12 text-center">
+          <div className="max-w-md mx-auto space-y-4">
+            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
+              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
+              <p className="text-muted-foreground text-sm mb-4">
+                Advanced Rich Text Editor is available exclusively to MoonUI Pro subscribers.
+              </p>
+              <div className="flex gap-3 justify-center">
+                <a href="/pricing">
+                  <Button size="sm">
+                    <Sparkles className="mr-2 h-4 w-4" />
+                    Upgrade to Pro
+                  </Button>
+                </a>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const [aiSettings, setAiSettings] = useState<AISettingsType>({
+    provider: aiConfig.provider || 'openai',
+    apiKey: aiConfig.apiKey || '',
+    model: aiConfig.model || 'gpt-4',
+    temperature: aiConfig.temperature || 0.7,
+    maxTokens: aiConfig.maxTokens || 1000,
+  });
+  const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isSourceView, setIsSourceView] = useState(false);
+  const [sourceContent, setSourceContent] = useState('');
+  const [currentTextColor, setCurrentTextColor] = useState('#000000');
+  const [currentBgColor, setCurrentBgColor] = useState('#ffffff');
+
+  // Slash commands tanımları
+  const slashCommands: SlashCommand[] = [
+    {
+      id: 'rewrite',
+      command: 'rewrite',
+      description: 'Rewrite selected text',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.3"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('rewrite', text);
+        return { text: result || '', error: result ? undefined : 'Failed to rewrite' };
+      }
+    },
+    {
+      id: 'expand',
+      command: 'expand',
+      description: 'Expand text with more details',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8"/><path d="M3 16.2V21m0 0h4.8M3 21l6-6"/><path d="M21 7.8V3m0 0h-4.8M21 3l-6 6"/><path d="M3 7.8V3m0 0h4.8M3 3l6 6"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('expand', text);
+        return { text: result || '', error: result ? undefined : 'Failed to expand' };
+      }
+    },
+    {
+      id: 'summarize',
+      command: 'summarize', 
+      description: 'Summarize text',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11H3"/><path d="M9 7H3"/><path d="M9 15H3"/><path d="M16 10V3"/><path d="M16 10l3-3"/><path d="M13 10l3 3"/><path d="M9 19h12"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('summarize', text);
+        return { text: result || '', error: result ? undefined : 'Failed to summarize' };
+      }
+    },
+    {
+      id: 'continue',
+      command: 'continue',
+      description: 'Continue writing from here',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('continue', text);
+        return { text: result || '', error: result ? undefined : 'Failed to continue' };
+      }
+    },
+    {
+      id: 'improve',
+      command: 'improve',
+      description: 'Improve writing quality',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('improve', text);
+        return { text: result || '', error: result ? undefined : 'Failed to improve' };
+      }
+    },
+    {
+      id: 'fix',
+      command: 'fix',
+      description: 'Fix grammar and spelling',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('fix', text);
+        return { text: result || '', error: result ? undefined : 'Failed to fix' };
+      }
+    },
+    {
+      id: 'translate',
+      command: 'translate',
+      description: 'Translate to Turkish',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2v3"/><path d="m22 22-5-10-5 10"/><path d="m14 18 6 0"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('translate', text);
+        return { text: result || '', error: result ? undefined : 'Failed to translate' };
+      }
+    },
+    {
+      id: 'ideas',
+      command: 'ideas',
+      description: 'Generate writing ideas',
+      icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>',
+      action: async (text: string) => {
+        const result = await callAI('ideas', text);
+        return { text: result || '', error: result ? undefined : 'Failed to generate ideas' };
+      }
+    }
+  ];
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3],
+        },
+        codeBlock: false, // We'll use CodeBlockLowlight instead
+      }),
+      Placeholder.configure({
+        placeholder,
+      }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      Highlight.configure({
+        multicolor: true,
+      }),
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        },
+      }),
+      Image.configure({
+        inline: true,
+        allowBase64: true,
+      }),
+      Table.configure({
+        resizable: true,
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      TextStyle,
+      Color,
+      UnderlineExtension,
+      Gapcursor,
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
+      Typography,
+      CodeBlockLowlight.configure({
+        lowlight,
+      }),
+      SlashCommandsExtension.configure({
+        commands: slashCommands,
+        onSelectCommand: async (command) => {
+          if (!editor) return;
+          
+          const { from, to } = editor.state.selection;
+          const selectedText = editor.state.doc.textBetween(from, to, ' ');
+          
+          setIsProcessing(true);
+          try {
+            const response = await command.action(selectedText || editor.getText());
+            if (response.text) {
+              editor.chain().focus().insertContent(response.text).run();
+            } else if (response.error) {
+              toast({
+                title: "AI Error",
+                description: response.error,
+                variant: "destructive",
+              });
+            }
+          } catch {
+            toast({
+              title: "Error",
+              description: "Failed to execute command",
+              variant: "destructive",
+            });
+          } finally {
+            setIsProcessing(false);
+          }
+        },
+      }),
+    ],
+    content: '',
+    editorProps: {
+      attributes: {
+        class: cn(
+          'prose prose-sm sm:prose lg:prose-lg xl:prose-xl focus:outline-none min-h-[200px] p-4 max-w-none',
+          // Ensure headings show different sizes
+          '[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mb-4',
+          '[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mb-3',
+          '[&_h3]:text-xl [&_h3]:font-bold [&_h3]:mb-2',
+          '[&_h4]:text-lg [&_h4]:font-bold [&_h4]:mb-2',
+          '[&_h5]:text-base [&_h5]:font-bold [&_h5]:mb-1',
+          '[&_h6]:text-sm [&_h6]:font-bold [&_h6]:mb-1',
+          // Ensure lists show proper styling
+          '[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-4',
+          '[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-4',
+          '[&_li]:mb-1',
+          // Table styles
+          '[&_table]:border-collapse-collapse [&_table]:w-full [&_table]:mb-4',
+          '[&_table_td]:border [&_table_td]:border-gray-300 [&_table_td]:p-2',
+          '[&_table_th]:border [&_table_th]:border-gray-300 [&_table_th]:p-2 [&_table_th]:bg-gray-50 [&_table_th]:font-semibold',
+          // Other styles
+          '[&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-4 [&_blockquote]:italic',
+          '[&_pre]:bg-gray-100 [&_pre]:dark:bg-gray-800 [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto'
+        ),
+      },
+    },
+    immediatelyRender: false,
+  });
+
+  // AI işlevleri
+  const callAI = async (action: string, text: string) => {
+    if (!aiSettings.apiKey) {
+      toast({
+        title: "API Key Required",
+        description: "Please configure your AI settings first.",
+        variant: "destructive",
+      });
+      setIsAiSettingsOpen(true);
+      return null;
+    }
+
+    setIsProcessing(true);
+    try {
+      const provider = getAIProvider(aiSettings);
+      let response;
+      
+      switch (action) {
+        case 'rewrite':
+          response = await provider.rewrite(text);
+          break;
+        case 'expand':
+          response = await provider.expand(text);
+          break;
+        case 'summarize':
+          response = await provider.summarize(text);
+          break;
+        case 'fix':
+          response = await provider.fixGrammar(text);
+          break;
+        case 'translate':
+          // TODO: Kullanıcıdan hedef dil seçmesini iste
+          response = await provider.translate(text, 'Turkish');
+          break;
+        case 'tone_professional':
+          response = await provider.changeTone(text, 'professional');
+          break;
+        case 'tone_casual':
+          response = await provider.changeTone(text, 'casual');
+          break;
+        case 'tone_friendly':
+          response = await provider.changeTone(text, 'friendly');
+          break;
+        case 'tone_formal':
+          response = await provider.changeTone(text, 'formal');
+          break;
+        case 'continue':
+          response = await provider.continueWriting(text);
+          break;
+        case 'improve':
+          response = await provider.improveWriting(text);
+          break;
+        case 'ideas':
+          response = await provider.generateIdeas(text, 5);
+          break;
+        default:
+          response = await provider.complete(action, text);
+      }
+      
+      if (response.error) {
+        toast({
+          title: "AI Error",
+          description: response.error,
+          variant: "destructive",
+        });
+        return null;
+      }
+      
+      return response.text;
+    } catch {
+      toast({
+        title: "AI Error",
+        description: "Failed to process with AI. Please check your settings.",
+        variant: "destructive",
+      });
+      return null;
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleAIAction = async (action: string) => {
+    if (!editor) return;
+    
+    const selection = editor.state.selection;
+    const selectedText = editor.state.doc.textBetween(selection.from, selection.to, ' ');
+    
+    if (!selectedText && action !== 'complete') {
+      toast({
+        title: "No text selected",
+        description: "Please select some text first.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const result = await callAI(action, selectedText || editor.getText());
+    
+    if (result) {
+      if (selectedText) {
+        editor.chain().focus().deleteSelection().insertContent(result).run();
+      } else {
+        editor.chain().focus().insertContent(result).run();
+      }
+    }
+  };
+
+  const [linkUrl, setLinkUrl] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  const [isLinkDialogOpen, setIsLinkDialogOpen] = useState(false);
+  const [isImageDialogOpen, setIsImageDialogOpen] = useState(false);
+  const [isTableDialogOpen, setIsTableDialogOpen] = useState(false);
+  const [tableRows, setTableRows] = useState(3);
+  const [tableCols, setTableCols] = useState(3);
+  const [isTableBorderDialogOpen, setIsTableBorderDialogOpen] = useState(false);
+  const [tableBorderWidth, setTableBorderWidth] = useState(1);
+  const [tableBorderColor, setTableBorderColor] = useState('#000000');
+  const [tableBorderStyle, setTableBorderStyle] = useState('solid');
+
+  const addImage = () => {
+    if (imageUrl && editor) {
+      editor.chain().focus().setImage({ src: imageUrl }).run();
+      setImageUrl('');
+      setIsImageDialogOpen(false);
+    }
+  };
+
+  const addLink = () => {
+    if (linkUrl && editor) {
+      if (editor.state.selection.empty) {
+        // Eğer seçim yoksa, link'i text olarak ekle
+        editor.chain().focus().insertContent(`<a href="${linkUrl}">${linkUrl}</a>`).run();
+      } else {
+        // Seçili metne link ekle
+        editor.chain().focus().extendMarkRange('link').setLink({ href: linkUrl }).run();
+      }
+      setLinkUrl('');
+      setIsLinkDialogOpen(false);
+    }
+  };
+
+  const removeLink = () => {
+    editor?.chain().focus().unsetLink().run();
+  };
+
+  const createTable = () => {
+    if (editor && tableRows > 0 && tableCols > 0) {
+      editor.chain().focus().insertTable({ 
+        rows: tableRows, 
+        cols: tableCols, 
+        withHeaderRow: true 
+      }).run();
+      // Apply default border styles to the newly created table
+      setTimeout(() => {
+        applyTableBorders(tableBorderWidth, tableBorderColor, tableBorderStyle);
+      }, 100);
+      setIsTableDialogOpen(false);
+    }
+  };
+
+  const applyTableBorders = (width: number, color: string, style: string) => {
+    if (!editor) return;
+    
+    const borderStyle = `${width}px ${style} ${color}`;
+    
+    // Apply borders to the selected table
+    editor.view.dom.querySelectorAll('.ProseMirror table').forEach((table) => {
+      if (table instanceof HTMLElement) {
+        table.style.borderCollapse = 'collapse';
+        table.style.border = borderStyle;
+        
+        // Apply borders to all cells
+        table.querySelectorAll('td, th').forEach((cell) => {
+          if (cell instanceof HTMLElement) {
+            cell.style.border = borderStyle;
+            cell.style.padding = '8px';
+          }
+        });
+      }
+    });
+  };
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className={cn("border rounded-lg overflow-hidden bg-white dark:bg-gray-950", className)}>
+      {/* Toolbar */}
+      <TooltipProvider>
+        <div className="border-b bg-gray-50 dark:bg-gray-900 p-3">
+          <div className="flex items-center flex-wrap gap-1">
+            {/* Format Group */}
+            {(features.bold || features.italic || features.underline || features.strike || features.code) && (
+              <div className="flex items-center gap-1 shrink-0">
+                {features.bold && (
+                  <ToolbarButton
+                    active={editor.isActive('bold')}
+                    onClick={() => editor.chain().focus().toggleBold().run()}
+                    tooltip="Bold (Cmd+B)"
+                    disabled={isSourceView}
+                  >
+                    <Bold className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+                {features.italic && (
+                  <ToolbarButton
+                    active={editor.isActive('italic')}
+                    onClick={() => editor.chain().focus().toggleItalic().run()}
+                    tooltip="Italic (Cmd+I)"
+                    disabled={isSourceView}
+                  >
+                    <Italic className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+                {features.underline && (
+                  <ToolbarButton
+                    active={editor.isActive('underline')}
+                    onClick={() => editor.chain().focus().toggleUnderline().run()}
+                    tooltip="Underline (Cmd+U)"
+                    disabled={isSourceView}
+                  >
+                    <Underline className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+                {features.strike && (
+                  <ToolbarButton
+                    active={editor.isActive('strike')}
+                    onClick={() => editor.chain().focus().toggleStrike().run()}
+                    tooltip="Strikethrough"
+                    disabled={isSourceView}
+                  >
+                    <Strikethrough className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+                {features.code && (
+                  <ToolbarButton
+                    active={editor.isActive('code')}
+                    onClick={() => editor.chain().focus().toggleCode().run()}
+                    tooltip="Inline code"
+                    disabled={isSourceView}
+                  >
+                    <Code className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+              </div>
+            )}
+
+            {/* Separator */}
+            {(features.bold || features.italic || features.underline || features.strike || features.code) && 
+             (features.heading || features.align) && (
+              <div className="w-px h-6 bg-border mx-1 shrink-0"></div>
+            )}
+
+            {/* Typography Group */}
+            {(features.heading || features.align) && (
+              <div className="flex items-center gap-1 shrink-0">
+                {features.heading && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm" className="h-8 px-2" disabled={isSourceView}>
+                        <Type className="w-4 h-4 mr-1" />
+                        <ChevronDown className="w-3 h-3" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem onClick={() => editor.chain().focus().setParagraph().run()}>
+                        Paragraph
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>
+                        <Heading1 className="w-4 h-4 mr-2" /> Heading 1
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>
+                        <Heading2 className="w-4 h-4 mr-2" /> Heading 2
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>
+                        <Heading3 className="w-4 h-4 mr-2" /> Heading 3
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+
+                {features.align && (
+                  <>
+                    <ToolbarButton
+                      active={editor.isActive({ textAlign: 'left' })}
+                      onClick={() => editor.chain().focus().setTextAlign('left').run()}
+                      tooltip="Align left"
+                      disabled={isSourceView}
+                    >
+                      <AlignLeft className="w-4 h-4" />
+                    </ToolbarButton>
+                    <ToolbarButton
+                      active={editor.isActive({ textAlign: 'center' })}
+                      onClick={() => editor.chain().focus().setTextAlign('center').run()}
+                      tooltip="Align center"
+                      disabled={isSourceView}
+                    >
+                      <AlignCenter className="w-4 h-4" />
+                    </ToolbarButton>
+                    <ToolbarButton
+                      active={editor.isActive({ textAlign: 'right' })}
+                      onClick={() => editor.chain().focus().setTextAlign('right').run()}
+                      tooltip="Align right"
+                      disabled={isSourceView}
+                    >
+                      <AlignRight className="w-4 h-4" />
+                    </ToolbarButton>
+                    <ToolbarButton
+                      active={editor.isActive({ textAlign: 'justify' })}
+                      onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+                      tooltip="Justify"
+                      disabled={isSourceView}
+                    >
+                      <AlignJustify className="w-4 h-4" />
+                    </ToolbarButton>
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* Separator */}
+            {(features.heading || features.align) && 
+             (features.lists || features.blockquote) && (
+              <div className="w-px h-6 bg-border mx-1 shrink-0"></div>
+            )}
+
+            {/* Lists & Structure Group */}
+            {(features.lists || features.blockquote) && (
+              <div className="flex items-center gap-1 shrink-0">
+                {features.lists && (
+                  <>
+                    <ToolbarButton
+                      active={editor.isActive('bulletList')}
+                      onClick={() => editor.chain().focus().toggleBulletList().run()}
+                      tooltip="Bullet list"
+                      disabled={isSourceView}
+                    >
+                      <List className="w-4 h-4" />
+                    </ToolbarButton>
+                    <ToolbarButton
+                      active={editor.isActive('orderedList')}
+                      onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                      tooltip="Numbered list"
+                      disabled={isSourceView}
+                    >
+                      <ListOrdered className="w-4 h-4" />
+                    </ToolbarButton>
+                    <ToolbarButton
+                      active={editor.isActive('taskList')}
+                      onClick={() => editor.chain().focus().toggleTaskList().run()}
+                      tooltip="Task list"
+                      disabled={isSourceView}
+                    >
+                      <CheckSquare className="w-4 h-4" />
+                    </ToolbarButton>
+                  </>
+                )}
+
+                {features.blockquote && (
+                  <ToolbarButton
+                    active={editor.isActive('blockquote')}
+                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
+                    tooltip="Quote"
+                    disabled={isSourceView}
+                  >
+                    <Quote className="w-4 h-4" />
+                  </ToolbarButton>
+                )}
+              </div>
+            )}
+
+            {/* Separator */}
+            {(features.lists || features.blockquote) && 
+             (features.color) && (
+              <div className="w-px h-6 bg-border mx-1 shrink-0"></div>
+            )}
+
+            {/* Colors Group */}
+            {features.color && (
+              <div className="flex items-center gap-1 shrink-0">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button 
+                      variant="ghost" 
+                      size="sm" 
+                      className="h-8 px-2" 
+                      disabled={isSourceView}
+                      title="Text Color"
+                    >
+                      <Palette className="w-4 h-4" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <EditorColorPicker 
+                      currentColor={currentTextColor}
+                      onColorSelect={(color) => {
+                        setCurrentTextColor(color);
+                        editor.chain().focus().setColor(color).run();
+                      }} 
+                    />
+                  </PopoverContent>
+                </Popover>
+                
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button 
+                      variant="ghost" 
+                      size="sm" 
+                      className="h-8 px-2" 
+                      disabled={isSourceView}
+                      title="Background Color"
+                    >
+                      <Highlighter className="w-4 h-4" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <EditorColorPicker 
+                      currentColor={currentBgColor}
+                      onColorSelect={(color) => {
+                        setCurrentBgColor(color);
+                        editor.chain().focus().toggleHighlight({ color }).run();
+                      }} 
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+
+            {/* Separator */}
+            {(features.color) && 
+             (features.link || features.image || features.table) && (
+              <div className="w-px h-6 bg-border mx-1 shrink-0"></div>
+            )}
+
+            {/* Media & Links Group */}
+            {(features.link || features.image || features.table) && (
+              <div className="flex items-center gap-1 shrink-0">
+                {features.link && (
+                  <Dialog open={isLinkDialogOpen} onOpenChange={setIsLinkDialogOpen}>
+                <DialogTrigger asChild>
+                  <ToolbarButton
+                    active={editor.isActive('link')}
+                    tooltip="Add link"
+                    disabled={isSourceView}
+                  >
+                    <Link2 className="w-4 h-4" />
+                  </ToolbarButton>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>Add Link</DialogTitle>
+                    <DialogDescription>
+                      Enter the URL for the link.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                      <Label htmlFor="url">URL</Label>
+                      <Input
+                        id="url"
+                        value={linkUrl}
+                        onChange={(e) => setLinkUrl(e.target.value)}
+                        placeholder="https://example.com"
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addLink();
+                          }
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex justify-between">
+                    {editor.isActive('link') && (
+                      <Button
+                        variant="destructive"
+                        onClick={() => {
+                          removeLink();
+                          setIsLinkDialogOpen(false);
+                        }}
+                      >
+                        Remove Link
+                      </Button>
+                    )}
+                    <div className="ml-auto flex gap-2">
+                      <Button variant="outline" onClick={() => setIsLinkDialogOpen(false)}>
+                        Cancel
+                      </Button>
+                      <Button onClick={addLink}>Add Link</Button>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            )}
+            {features.image && (
+              <Dialog open={isImageDialogOpen} onOpenChange={setIsImageDialogOpen}>
+                <DialogTrigger asChild>
+                  <ToolbarButton
+                    tooltip="Add image"
+                    disabled={isSourceView}
+                  >
+                    <ImageIcon className="w-4 h-4" />
+                  </ToolbarButton>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>Add Image</DialogTitle>
+                    <DialogDescription>
+                      Enter the URL for the image.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                      <Label htmlFor="image-url">Image URL</Label>
+                      <Input
+                        id="image-url"
+                        value={imageUrl}
+                        onChange={(e) => setImageUrl(e.target.value)}
+                        placeholder="https://example.com/image.jpg"
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault();
+                            addImage();
+                          }
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => setIsImageDialogOpen(false)}>
+                      Cancel
+                    </Button>
+                    <Button onClick={addImage}>Add Image</Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            )}
+            {features.table && (
+              <>
+                <Dialog open={isTableDialogOpen} onOpenChange={setIsTableDialogOpen}>
+                  <DialogTrigger asChild>
+                    <ToolbarButton
+                      tooltip="Create table"
+                      disabled={isSourceView}
+                    >
+                      <TableIcon className="w-4 h-4" />
+                    </ToolbarButton>
+                  </DialogTrigger>
+                  <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                      <DialogTitle>Create Table</DialogTitle>
+                      <DialogDescription>
+                        Choose the size for your new table.
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4 py-4">
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="grid gap-2">
+                          <Label htmlFor="rows">Rows</Label>
+                          <Input
+                            id="rows"
+                            type="number"
+                            min="1"
+                            max="20"
+                            value={tableRows}
+                            onChange={(e) => setTableRows(parseInt(e.target.value) || 3)}
+                          />
+                        </div>
+                        <div className="grid gap-2">
+                          <Label htmlFor="cols">Columns</Label>
+                          <Input
+                            id="cols"
+                            type="number"
+                            min="1"
+                            max="10"
+                            value={tableCols}
+                            onChange={(e) => setTableCols(parseInt(e.target.value) || 3)}
+                          />
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <input
+                          type="checkbox"
+                          id="headerRow"
+                          defaultChecked
+                          className="rounded border-gray-300"
+                        />
+                        <Label htmlFor="headerRow" className="text-sm font-normal">
+                          Include header row
+                        </Label>
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" onClick={() => setIsTableDialogOpen(false)}>
+                        Cancel
+                      </Button>
+                      <Button onClick={createTable}>Create Table</Button>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm" className="h-8 px-1">
+                      <ChevronDown className="w-3 h-3" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem onClick={() => editor.chain().focus().addColumnBefore().run()}>
+                      Add column before
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => editor.chain().focus().addColumnAfter().run()}>
+                      Add column after
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => editor.chain().focus().deleteColumn().run()}>
+                      Delete column
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={() => editor.chain().focus().addRowBefore().run()}>
+                      Add row before
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => editor.chain().focus().addRowAfter().run()}>
+                      Add row after
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => editor.chain().focus().deleteRow().run()}>
+                      Delete row
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={() => setIsTableBorderDialogOpen(true)}>
+                      <Settings className="w-4 h-4 mr-2" />
+                      Table Borders
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={() => editor.chain().focus().deleteTable().run()}>
+                      Delete table
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+                )}
+              </div>
+            )}
+
+            {/* Separator */}
+            {(features.link || features.image || features.table) && 
+             (true) && (
+              <div className="w-px h-6 bg-border mx-1 shrink-0"></div>
+            )}
+
+            {/* Tools Group */}
+            <div className="flex items-center gap-1 shrink-0">
+              <ToolbarButton
+                onClick={() => editor.chain().focus().undo().run()}
+                disabled={!editor.can().undo() || isSourceView}
+                tooltip="Undo (Cmd+Z)"
+              >
+                <Undo className="w-4 h-4" />
+              </ToolbarButton>
+              <ToolbarButton
+                onClick={() => editor.chain().focus().redo().run()}
+                disabled={!editor.can().redo() || isSourceView}
+                tooltip="Redo (Cmd+Shift+Z)"
+              >
+                <Redo className="w-4 h-4" />
+              </ToolbarButton>
+
+              <ToolbarButton
+                active={isSourceView}
+                onClick={() => {
+                  if (isSourceView) {
+                    // Apply source changes when switching back to visual mode
+                    editor.commands.setContent(sourceContent);
+                  } else {
+                    // Update source content when switching to source view
+                    setSourceContent(editor.getHTML());
+                  }
+                  setIsSourceView(!isSourceView);
+                }}
+                tooltip={isSourceView ? "Visual Mode" : "Source Code"}
+              >
+                {isSourceView ? <Edit className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+              </ToolbarButton>
+
+              {/* AI Tools */}
+              {features.ai && (
+              <>
+                <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    className="h-8 px-3 bg-purple-100 hover:bg-purple-200 dark:bg-purple-900 dark:hover:bg-purple-800"
+                    disabled={isProcessing}
+                  >
+                    {isProcessing ? (
+                      <RefreshCw className="w-4 h-4 mr-1 animate-spin" />
+                    ) : (
+                      <Wand2 className="w-4 h-4 mr-1" />
+                    )}
+                    AI Tools
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56">
+                  <DropdownMenuItem onClick={() => handleAIAction('rewrite')}>
+                    <RefreshCw className="w-4 h-4 mr-2" />
+                    Rewrite Selection
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('improve')}>
+                    <Wand2 className="w-4 h-4 mr-2" />
+                    Improve Writing
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('expand')}>
+                    <Maximize className="w-4 h-4 mr-2" />
+                    Expand Text
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('summarize')}>
+                    <FileText className="w-4 h-4 mr-2" />
+                    Summarize
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('continue')}>
+                    <Plus className="w-4 h-4 mr-2" />
+                    Continue Writing
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => handleAIAction('fix')}>
+                    <Check className="w-4 h-4 mr-2" />
+                    Fix Grammar & Spelling
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => handleAIAction('tone_professional')}>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Make Professional
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('tone_casual')}>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Make Casual
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('tone_friendly')}>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Make Friendly
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('tone_formal')}>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Make Formal
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => handleAIAction('translate')}>
+                    <Languages className="w-4 h-4 mr-2" />
+                    Translate to Turkish
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleAIAction('ideas')}>
+                    <Sparkles className="w-4 h-4 mr-2" />
+                    Generate Ideas
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <Dialog open={isAiSettingsOpen} onOpenChange={setIsAiSettingsOpen}>
+                <DialogTrigger asChild>
+                  <ToolbarButton
+                    tooltip="AI Settings - Configure your API keys here"
+                    disabled={isSourceView}
+                  >
+                    <Settings className="w-4 h-4" />
+                  </ToolbarButton>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[425px]">
+                  <DialogHeader>
+                    <DialogTitle>AI Settings</DialogTitle>
+                    <DialogDescription>
+                      Configure your AI provider and API settings.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                      <Label htmlFor="provider">Provider</Label>
+                      <Select 
+                        value={aiSettings.provider} 
+                        onValueChange={(value: 'openai' | 'claude' | 'gemini' | 'cohere') => setAiSettings({ ...aiSettings, provider: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="openai">OpenAI</SelectItem>
+                          <SelectItem value="claude">Claude (Anthropic)</SelectItem>
+                          <SelectItem value="gemini">Gemini (Google)</SelectItem>
+                          <SelectItem value="cohere">Cohere</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="grid gap-2">
+                      <Label htmlFor="apiKey">API Key</Label>
+                      <Input
+                        id="apiKey"
+                        type="password"
+                        value={aiSettings.apiKey}
+                        onChange={(e) => setAiSettings({ ...aiSettings, apiKey: e.target.value })}
+                        placeholder="sk-..."
+                      />
+                    </div>
+                    <div className="grid gap-2">
+                      <Label htmlFor="model">Model</Label>
+                      <Select 
+                        value={aiSettings.model} 
+                        onValueChange={(value) => setAiSettings({ ...aiSettings, model: value })}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {aiSettings.provider === 'openai' && (
+                            <>
+                              <SelectItem value="gpt-4">GPT-4</SelectItem>
+                              <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
+                            </>
+                          )}
+                          {aiSettings.provider === 'claude' && (
+                            <>
+                              <SelectItem value="claude-3-opus">Claude 3 Opus</SelectItem>
+                              <SelectItem value="claude-3-sonnet">Claude 3 Sonnet</SelectItem>
+                              <SelectItem value="claude-3-haiku">Claude 3 Haiku</SelectItem>
+                            </>
+                          )}
+                          {aiSettings.provider === 'gemini' && (
+                            <>
+                              <SelectItem value="gemini-pro">Gemini Pro</SelectItem>
+                              <SelectItem value="gemini-pro-vision">Gemini Pro Vision</SelectItem>
+                            </>
+                          )}
+                          {aiSettings.provider === 'cohere' && (
+                            <>
+                              <SelectItem value="command">Command</SelectItem>
+                              <SelectItem value="command-light">Command Light</SelectItem>
+                            </>
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="grid gap-2">
+                        <Label htmlFor="temperature">Temperature</Label>
+                        <Input
+                          id="temperature"
+                          type="number"
+                          min="0"
+                          max="2"
+                          step="0.1"
+                          value={aiSettings.temperature}
+                          onChange={(e) => setAiSettings({ ...aiSettings, temperature: parseFloat(e.target.value) })}
+                        />
+                      </div>
+                      <div className="grid gap-2">
+                        <Label htmlFor="maxTokens">Max Tokens</Label>
+                        <Input
+                          id="maxTokens"
+                          type="number"
+                          min="1"
+                          max="4000"
+                          value={aiSettings.maxTokens}
+                          onChange={(e) => setAiSettings({ ...aiSettings, maxTokens: parseInt(e.target.value) })}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex justify-end">
+                    <Button onClick={() => {
+                      setIsAiSettingsOpen(false);
+                      toast({
+                        title: "Settings saved",
+                        description: "Your AI settings have been updated.",
+                      });
+                    }}>
+                      Save Settings
+                    </Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+              </>
+              )}
+            </div>
+          </div>
+        </div>
+      </TooltipProvider>
+
+      {/* Table Border Settings Dialog */}
+      <Dialog open={isTableBorderDialogOpen} onOpenChange={setIsTableBorderDialogOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Table Border Settings</DialogTitle>
+            <DialogDescription>
+              Customize the appearance of table borders.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-6 py-4">
+            <div className="grid gap-3">
+              <Label htmlFor="border-width">Border Width</Label>
+              <div className="flex items-center gap-4">
+                <Slider
+                  id="border-width"
+                  min={0}
+                  max={5}
+                  step={1}
+                  value={[tableBorderWidth]}
+                  onValueChange={(value) => setTableBorderWidth(value[0])}
+                  className="flex-1"
+                />
+                <span className="text-sm font-medium w-8">{tableBorderWidth}px</span>
+              </div>
+            </div>
+            
+            <div className="grid gap-3">
+              <Label htmlFor="border-color">Border Color</Label>
+              <div className="flex items-center gap-2">
+                <ColorPicker
+                  value={tableBorderColor}
+                  onChange={setTableBorderColor}
+                  showInput={true}
+                  showPresets={false}
+                  size="sm"
+                />
+                <span className="text-sm text-muted-foreground">{tableBorderColor}</span>
+              </div>
+            </div>
+            
+            <div className="grid gap-3">
+              <Label htmlFor="border-style">Border Style</Label>
+              <Select value={tableBorderStyle} onValueChange={setTableBorderStyle}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="solid">Solid</SelectItem>
+                  <SelectItem value="dashed">Dashed</SelectItem>
+                  <SelectItem value="dotted">Dotted</SelectItem>
+                  <SelectItem value="double">Double</SelectItem>
+                  <SelectItem value="groove">Groove</SelectItem>
+                  <SelectItem value="ridge">Ridge</SelectItem>
+                  <SelectItem value="inset">Inset</SelectItem>
+                  <SelectItem value="outset">Outset</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            
+            {/* Preview */}
+            <div className="grid gap-3">
+              <Label>Preview</Label>
+              <div className="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                <table 
+                  className="w-full text-sm"
+                  style={{
+                    borderCollapse: 'collapse',
+                    border: `${tableBorderWidth}px ${tableBorderStyle} ${tableBorderColor}`
+                  }}
+                >
+                  <thead>
+                    <tr>
+                      <th 
+                        style={{
+                          border: `${tableBorderWidth}px ${tableBorderStyle} ${tableBorderColor}`,
+                          padding: '8px',
+                          textAlign: 'left'
+                        }}
+                      >
+                        Header 1
+                      </th>
+                      <th 
+                        style={{
+                          border: `${tableBorderWidth}px ${tableBorderStyle} ${tableBorderColor}`,
+                          padding: '8px',
+                          textAlign: 'left'
+                        }}
+                      >
+                        Header 2
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td 
+                        style={{
+                          border: `${tableBorderWidth}px ${tableBorderStyle} ${tableBorderColor}`,
+                          padding: '8px'
+                        }}
+                      >
+                        Cell 1
+                      </td>
+                      <td 
+                        style={{
+                          border: `${tableBorderWidth}px ${tableBorderStyle} ${tableBorderColor}`,
+                          padding: '8px'
+                        }}
+                      >
+                        Cell 2
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setIsTableBorderDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => {
+              applyTableBorders(tableBorderWidth, tableBorderColor, tableBorderStyle);
+              setIsTableBorderDialogOpen(false);
+              toast({
+                title: "Borders applied",
+                description: "Table borders have been updated.",
+              });
+            }}>
+              Apply Borders
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Editor */}
+      <div 
+        className="overflow-auto"
+        style={{ height: typeof height === 'number' ? `${height}px` : height }}
+      >
+        {isSourceView ? (
+          <textarea
+            value={sourceContent}
+            onChange={(e) => setSourceContent(e.target.value)}
+            className="w-full h-full p-4 font-mono text-sm resize-none focus:outline-none bg-gray-50 dark:bg-gray-900"
+            placeholder="HTML source code..."
+          />
+        ) : (
+          <EditorContent editor={editor} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RichTextEditor;