@moontra/moonui-pro 2.20.2 → 2.20.4

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

@@ -1,2322 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useEffect } 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, type SlashCommand } from './slash-commands-extension';
-import { motion } from 'framer-motion';
-
-// 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,
-  Briefcase,
-  MessageSquare,
-  Heart,
-  GraduationCap,
-  Zap,
-  Lightbulb,
-  X,
-  Copy
-} from 'lucide-react';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} 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 { MoonUIColorPickerPro as ColorPicker } from '../ui/color-picker';
-import { Slider } from '../ui/slider';
-import { toast } from '../ui/toast';
-import { Checkbox } from '../ui/checkbox';
-import { createAIProvider, type AIProvider as AIProviderInterface } from '../../lib/ai-providers';
-
-// Type definitions for AI functionality
-type AIProvider = 'openai' | 'anthropic' | 'gemini' | 'claude' | 'cohere'
-
-interface AISettingsType {
-  provider: 'openai' | 'claude' | 'gemini' | 'cohere'
-  apiKey: string
-  model: string
-  temperature: number
-  maxTokens: number
-}
-
-// Supported languages for translation
-const SUPPORTED_LANGUAGES = [
-  { code: 'en', name: 'English', nativeName: 'English' },
-  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
-  { code: 'es', name: 'Spanish', nativeName: 'Español' },
-  { code: 'fr', name: 'French', nativeName: 'Français' },
-  { code: 'de', name: 'German', nativeName: 'Deutsch' },
-  { code: 'it', name: 'Italian', nativeName: 'Italiano' },
-  { code: 'pt', name: 'Portuguese', nativeName: 'Português' },
-  { code: 'ru', name: 'Russian', nativeName: 'Русский' },
-  { code: 'zh', name: 'Chinese', nativeName: '中文' },
-  { code: 'ja', name: 'Japanese', nativeName: '日本語' },
-  { code: 'ko', name: 'Korean', nativeName: '한국어' },
-  { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
-  { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
-  { code: 'nl', name: 'Dutch', nativeName: 'Nederlands' },
-];
-
-// Use SlashCommand from slash-commands-extension.ts
-
-// Get AI provider instance
-const getAIProvider = (settings: AISettingsType): AIProviderInterface | null => {
-  if (!settings.apiKey) return null;
-  
-  try {
-    // Map provider names to supported ones
-    const providerMap: Record<string, 'openai' | 'gemini' | 'claude'> = {
-      'openai': 'openai',
-      'gemini': 'gemini',
-      'claude': 'claude',
-      'anthropic': 'claude', // Map anthropic to claude
-      'cohere': 'openai' // Use OpenAI as fallback for unsupported providers
-    };
-    
-    const mappedProvider = providerMap[settings.provider] || 'openai';
-    
-    return createAIProvider(mappedProvider, {
-      apiKey: settings.apiKey,
-      model: settings.model,
-      temperature: settings.temperature,
-      maxTokens: settings.maxTokens
-    });
-  } catch (error) {
-    console.error('Failed to create AI provider:', error);
-    return null;
-  }
-}
-import './slash-commands.css';
-import './table-styles.css';
-
-export interface EditorAIConfig {
-  provider?: 'openai' | 'claude' | 'gemini' | 'cohere';
-  apiKey?: string;
-  model?: string;
-  temperature?: number;
-  maxTokens?: number;
-  endpoint?: string; // For server-side proxy
-}
-
-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?: EditorAIConfig;
-  persistAISettings?: boolean;
-}
-
-
-const EditorColorPicker = ({ 
-  onColorSelect, 
-  currentColor = "#000000"
-}: { 
-  onColorSelect: (color: string) => void;
-  currentColor?: string;
-}) => {
-  const [showAdvanced, setShowAdvanced] = React.useState(false);
-  
-  // Quick colors - 3x3 grid of 8 colors + 1 advanced button
-  const quickColors = [
-    '#000000', // Black
-    '#ef4444', // Red
-    '#f59e0b', // Orange
-    '#10b981', // Green  
-    '#3b82f6', // Blue
-    '#8b5cf6', // Purple
-    '#6b7280', // Gray
-    '#ec4899', // Pink
-  ];
-  
-  if (showAdvanced) {
-    return (
-      <div className="p-4 w-64">
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-sm font-medium">Choose Color</span>
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => setShowAdvanced(false)}
-          >
-            Back
-          </Button>
-        </div>
-        <ColorPicker
-          value={currentColor}
-          onChange={(color) => {
-            onColorSelect(color);
-            setShowAdvanced(false);
-          }}
-          showInput={true}
-          showPresets={false}
-          size="sm"
-        />
-      </div>
-    );
-  }
-  
-  return (
-    <div className="p-3 w-36">
-      <div className="grid grid-cols-3 gap-2">
-        {quickColors.map((color) => (
-          <button
-            key={color}
-            onClick={() => onColorSelect(color)}
-            className={cn(
-              "w-10 h-10 rounded-md border-2 hover:scale-110 transition-transform",
-              currentColor === color ? "border-primary" : "border-transparent"
-            )}
-            style={{ backgroundColor: color }}
-            title={color}
-          />
-        ))}
-        <button
-          onClick={() => setShowAdvanced(true)}
-          className="w-10 h-10 rounded-md border-2 border-dashed border-muted-foreground/50 hover:border-primary transition-colors flex items-center justify-center"
-          title="More colors"
-        >
-          <Palette className="w-5 h-5 text-muted-foreground" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-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-accent transition-colors",
-        active && "bg-accent",
-        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 = {},
-  persistAISettings = true,
-}: RichTextEditorProps) {
-  // Pro access kontrolü
-  const { hasProAccess, isLoading } = useSubscription();
-  
-  // In docs mode, always show the component
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!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>(() => {
-    // Öncelik sırası: Props > LocalStorage > Varsayılan
-    if (persistAISettings && typeof window !== 'undefined') {
-      try {
-        const stored = localStorage.getItem('moonui-ai-settings');
-        if (stored) {
-          const parsed = JSON.parse(stored);
-          // Props'tan gelen değerler her zaman öncelikli
-          const settings = {
-            provider: (aiConfig.provider !== undefined ? aiConfig.provider : parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
-            apiKey: aiConfig.apiKey !== undefined ? aiConfig.apiKey : parsed.apiKey || '',
-            model: aiConfig.model !== undefined ? aiConfig.model : parsed.model || 'gpt-3.5-turbo',
-            temperature: aiConfig.temperature !== undefined ? aiConfig.temperature : parsed.temperature ?? 0.7,
-            maxTokens: aiConfig.maxTokens !== undefined ? aiConfig.maxTokens : parsed.maxTokens ?? 1000,
-          };
-          return settings;
-        }
-      } catch (e) {
-        console.error('Failed to load AI settings from localStorage:', e);
-      }
-    }
-    
-    // LocalStorage yoksa veya persist kapalıysa props/varsayılan değerleri kullan
-    const defaultSettings = {
-      provider: (aiConfig.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
-      apiKey: aiConfig.apiKey || '',
-      model: aiConfig.model || 'gpt-3.5-turbo',
-      temperature: aiConfig.temperature ?? 0.7,
-      maxTokens: aiConfig.maxTokens ?? 1000,
-    };
-    return defaultSettings;
-  });
-  const [isAiSettingsOpen, setIsAiSettingsOpen] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [typingText, setTypingText] = useState('');
-  const [isTyping, setIsTyping] = useState(false);
-  const typingIntervalRef = useRef<NodeJS.Timeout | null>(null);
-  const [currentAction, setCurrentAction] = useState('');
-  const [remainingText, setRemainingText] = useState(''); // To store remaining text when stopped
-  const isTypingRef = useRef(false); // Ref to track typing state in closure
-  const [isSourceView, setIsSourceView] = useState(false);
-  const [sourceContent, setSourceContent] = useState('');
-  const [currentTextColor, setCurrentTextColor] = useState('#000000');
-  const [currentBgColor, setCurrentBgColor] = useState('#ffffff');
-  const [lastTranslateLanguage, setLastTranslateLanguage] = useState<string>(() => {
-    // Son kullanılan dili localStorage'dan al
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('moonui-last-translate-language') || 'en';
-    }
-    return 'en';
-  });
-  
-  // AI Preview Modal states
-  const [isAiPreviewOpen, setIsAiPreviewOpen] = useState(false);
-  const [previewContent, setPreviewContent] = useState('');
-  const [previewAction, setPreviewAction] = useState('');
-  const [previewOriginalText, setPreviewOriginalText] = useState('');
-  
-  // Statistics states
-  const [wordCount, setWordCount] = useState(0);
-  const [characterCount, setCharacterCount] = useState(0);
-  const [tokensUsed, setTokensUsed] = useState(0);
-  const [lastAIResponse, setLastAIResponse] = useState<{
-    action: string;
-    tokens: number;
-    model: string;
-    timestamp: Date;
-  } | null>(null);
-  
-  // Clean up typewriter effect on unmount
-  useEffect(() => {
-    return () => {
-      if (typingIntervalRef.current) {
-        clearTimeout(typingIntervalRef.current);
-      }
-    };
-  }, []);
-  
-  // Stop typing function
-  const stopTyping = () => {
-    if (typingIntervalRef.current) {
-      clearTimeout(typingIntervalRef.current);
-      typingIntervalRef.current = null;
-    }
-    setIsTyping(false);
-    isTypingRef.current = false;
-    setTypingText('');
-    setRemainingText('');
-    toast({
-      title: "AI typing stopped",
-      description: "The AI response was interrupted.",
-    });
-  };
-  
-  // Check if action should use modal preview
-  const shouldUseModal = (action: string): boolean => {
-    const modalActions = ['expand', 'summarize', 'ideas', 'continue'];
-    return modalActions.includes(action);
-  };
-  
-  // Utility functions for statistics
-  const countWords = (text: string): number => {
-    return text.trim().split(/\s+/).filter(word => word.length > 0).length;
-  };
-  
-  const countCharacters = (text: string): number => {
-    return text.length;
-  };
-  
-  // Approximate token count (rough estimation: 1 token ≈ 4 characters)
-  const estimateTokens = (text: string): number => {
-    return Math.ceil(text.length / 4);
-  };
-  
-  // Optimize text for token efficiency
-  const optimizeTextForAI = (text: string, action: string): string => {
-    const maxTokens = 2000; // Safe limit for most providers
-    const estimatedTokens = estimateTokens(text);
-    
-    if (estimatedTokens <= maxTokens) {
-      return text;
-    }
-    
-    // For summarize, we can use more text since output will be shorter
-    if (action === 'summarize') {
-      const maxChars = maxTokens * 4;
-      return text.substring(0, maxChars) + '...';
-    }
-    
-    // For other actions, limit to smaller chunks
-    const maxChars = (maxTokens * 4) / 2;
-    return text.substring(0, maxChars) + '...';
-  };
-  
-  
-  // Apply AI content to editor with typewriter effect
-  const applyAIContentToEditor = (content: string, replaceSelection: boolean = true) => {
-    if (!editor) return;
-    
-    // Start typewriter effect
-    setIsTyping(true);
-    isTypingRef.current = true;
-    setTypingText('');
-    
-    if (replaceSelection) {
-      const selection = editor.state.selection;
-      const selectedText = editor.state.doc.textBetween(selection.from, selection.to, ' ');
-      if (selectedText) {
-        editor.chain().focus().deleteSelection().run();
-      }
-    }
-    
-    let currentIndex = 0;
-    const typeSpeed = 5; // ms per character - much faster for better UX
-    
-    const typeNextChar = () => {
-      if (currentIndex < content.length && isTypingRef.current) {
-        const nextChar = content[currentIndex];
-        setTypingText(prev => prev + nextChar);
-        editor.chain().focus().insertContent(nextChar).run();
-        currentIndex++;
-        setRemainingText(content.substring(currentIndex));
-        typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
-      } else {
-        // Typing complete or stopped
-        setIsTyping(false);
-        isTypingRef.current = false;
-        setTypingText('');
-        setRemainingText('');
-        
-        if (currentIndex >= content.length) {
-          // Success toast only if completed
-          toast({
-            title: "AI action completed",
-            description: "Your text has been updated successfully.",
-          });
-        }
-      }
-    };
-    
-    // Start typing
-    typeNextChar();
-  };
-
-  // 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);
-          setCurrentAction(command.id || '');
-          
-          try {
-            const response = command.action ? await command.action(selectedText || editor.getText()) : { text: '', error: 'No action defined' };
-            if (response.text) {
-              // Check if this command should use modal preview
-              if (shouldUseModal(command.id || '')) {
-                // Open preview modal
-                setPreviewContent(response.text);
-                setPreviewAction(command.id || '');
-                setPreviewOriginalText(selectedText || editor.getText());
-                setIsAiPreviewOpen(true);
-              } else {
-                // Apply directly with typewriter effect
-                applyAIContentToEditor(response.text, !!selectedText);
-              }
-            } 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-border [&_table_td]:p-2',
-          '[&_table_th]:border [&_table_th]:border-border [&_table_th]:p-2 [&_table_th]:bg-muted [&_table_th]:font-semibold',
-          // Other styles
-          '[&_blockquote]:border-l-4 [&_blockquote]:border-muted-foreground/30 [&_blockquote]:pl-4 [&_blockquote]:italic',
-          '[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto'
-        ),
-      },
-    },
-    immediatelyRender: false,
-  });
-
-  // Update statistics when editor content changes
-  useEffect(() => {
-    if (editor) {
-      const text = editor.getText();
-      setWordCount(countWords(text));
-      setCharacterCount(countCharacters(text));
-    }
-  }, [editor?.state.doc.content]);
-  
-  // Listen to editor updates
-  useEffect(() => {
-    if (editor) {
-      const updateStats = () => {
-        const text = editor.getText();
-        setWordCount(countWords(text));
-        setCharacterCount(countCharacters(text));
-      };
-      
-      editor.on('update', updateStats);
-      return () => {
-        editor.off('update', updateStats);
-      };
-    }
-  }, [editor]);
-
-  // AI işlevleri
-  const callAI = async (action: string, text: string, targetLanguage?: string) => {
-    if (!aiSettings.apiKey) {
-      toast({
-        title: "API Key Required",
-        description: "Please configure your AI settings first.",
-        variant: "destructive",
-      });
-      setIsAiSettingsOpen(true);
-      return null;
-    }
-
-    setIsProcessing(true);
-    const startTime = Date.now();
-    
-    try {
-      const provider = getAIProvider(aiSettings);
-      if (!provider) {
-        throw new Error('Failed to initialize AI provider');
-      }
-      
-      // Optimize text for better token efficiency
-      const optimizedText = optimizeTextForAI(text, action);
-      const inputTokens = estimateTokens(optimizedText);
-      
-      // Show warning if text was truncated
-      if (optimizedText !== text) {
-        toast({
-          title: "Text optimized",
-          description: `Long text was shortened to ${inputTokens} tokens for better efficiency.`,
-        });
-      }
-      
-      let response: string;
-      
-      switch (action) {
-        case 'rewrite':
-          response = await provider.rewrite(optimizedText);
-          break;
-        case 'expand':
-          response = await provider.expand(optimizedText);
-          break;
-        case 'summarize':
-          response = await provider.summarize(optimizedText);
-          break;
-        case 'fix':
-          response = await provider.fixGrammar(optimizedText);
-          break;
-        case 'translate':
-          response = await provider.translate(optimizedText, targetLanguage || 'English');
-          break;
-        case 'tone_professional':
-          response = await provider.changeTone(optimizedText, 'professional');
-          break;
-        case 'tone_casual':
-          response = await provider.changeTone(optimizedText, 'casual');
-          break;
-        case 'tone_friendly':
-          response = await provider.changeTone(optimizedText, 'friendly');
-          break;
-        case 'tone_formal':
-          response = await provider.changeTone(optimizedText, 'formal');
-          break;
-        case 'continue':
-          response = await provider.continueWriting(optimizedText);
-          break;
-        case 'improve':
-          response = await provider.improveWriting(optimizedText);
-          break;
-        case 'ideas':
-          response = await provider.generateIdeas(optimizedText);
-          break;
-        default:
-          response = await provider.complete(optimizedText);
-      }
-      
-      // Estimate output tokens and total usage
-      const outputTokens = estimateTokens(response);
-      const totalTokens = inputTokens + outputTokens;
-      
-      // Update token usage statistics
-      setTokensUsed(prev => prev + totalTokens);
-      setLastAIResponse({
-        action,
-        tokens: totalTokens,
-        model: aiSettings.model,
-        timestamp: new Date()
-      });
-      
-      return response;
-    } catch (error) {
-      toast({
-        title: "AI Error",
-        description: error instanceof Error ? error.message : "Failed to process with AI",
-        variant: "destructive",
-      });
-      return null;
-    } finally {
-      setIsProcessing(false);
-    }
-  };
-
-  const handleAIAction = async (action: string, targetLanguage?: string) => {
-    if (!editor) return;
-    
-    const selection = editor.state.selection;
-    const selectedText = editor.state.doc.textBetween(selection.from, selection.to, ' ');
-    const fullText = editor.getText();
-    
-    // If no text is selected, use the full editor content as prompt
-    const textToProcess = selectedText || fullText;
-    
-    if (!textToProcess && action !== 'complete') {
-      toast({
-        title: "No content available",
-        description: "Please write some text first.",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    // Set current action for UI
-    setCurrentAction(action);
-
-    // Show processing toast
-    const processingToast = toast({
-      title: "Processing with AI...",
-      description: getActionDescription(action, targetLanguage),
-      duration: 60000, // Long duration
-    });
-
-    const result = await callAI(action, textToProcess, targetLanguage);
-    
-    // Dismiss processing toast
-    processingToast.dismiss();
-    
-    if (result) {
-      // Check if this action should use modal preview
-      if (shouldUseModal(action)) {
-        // Open preview modal instead of directly applying
-        setPreviewContent(result);
-        setPreviewAction(action);
-        setPreviewOriginalText(textToProcess);
-        setIsAiPreviewOpen(true);
-      } else {
-        // Apply directly with typewriter effect (for rewrite, fix grammar, tone changes, etc.)
-        applyAIContentToEditor(result, !!selectedText);
-      }
-    }
-  };
-
-  const getActionDescription = (action: string, targetLanguage?: string): string => {
-    const descriptions: Record<string, string> = {
-      rewrite: "Rewriting your text...",
-      improve: "Improving your writing...",
-      expand: "Expanding your text...",
-      summarize: "Creating a summary...",
-      fix: "Fixing grammar and spelling...",
-      translate: targetLanguage ? `Translating to ${SUPPORTED_LANGUAGES.find(l => l.name === targetLanguage)?.nativeName || targetLanguage}...` : "Translating...",
-      tone_professional: "Making text professional...",
-      tone_casual: "Making text casual...",
-      tone_friendly: "Making text friendly...",
-      tone_formal: "Making text formal...",
-      continue: "Continuing your writing...",
-      ideas: "Generating ideas...",
-      complete: "Completing your text..."
-    };
-    return descriptions[action] || "Processing...";
-  };
-
-  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-background", className)}>
-      {/* Toolbar */}
-      <TooltipProvider>
-        <div className="border-b bg-muted/50 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')}
-                    onClick={() => {
-                      const previousUrl = editor.getAttributes('link').href
-                      const url = window.prompt('URL', previousUrl)
-                      if (url === null) return
-                      if (url === '') {
-                        editor.chain().focus().extendMarkRange('link').unsetLink().run()
-                      } else {
-                        editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
-                      }
-                    }}
-                    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
-                    onClick={() => {
-                      const url = window.prompt('Image URL')
-                      if (url) {
-                        editor.chain().focus().setImage({ src: url }).run()
-                      }
-                    }}
-                    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
-                      onClick={() => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
-                      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-input"
-                        />
-                        <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 transition-colors"
-                    disabled={isProcessing || isTyping}
-                  >
-                    {isProcessing || isTyping ? (
-                      <RefreshCw className="w-4 h-4 mr-1 animate-spin" />
-                    ) : (
-                      <Wand2 className="w-4 h-4 mr-1" />
-                    )}
-                    {isTyping ? 'Typing...' : 'AI Tools'}
-                  </Button>
-                </DropdownMenuTrigger>
-                {isTyping && (
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    className="h-8 px-2"
-                    onClick={stopTyping}
-                    title="Stop AI typing"
-                  >
-                    <X className="w-4 h-4" />
-                  </Button>
-                )}
-                <DropdownMenuContent className="w-64">
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
-                    <Wand2 className="w-3 h-3" />
-                    Writing Improvements
-                  </div>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('rewrite')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <RefreshCw className="w-4 h-4 mr-2" />
-                    Rewrite Selection
-                    <span className="ml-auto text-xs text-muted-foreground">Alt+R</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('improve')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Sparkles className="w-4 h-4 mr-2" />
-                    Improve Writing
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('expand')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Maximize className="w-4 h-4 mr-2" />
-                    Expand Text
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('summarize')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <FileText className="w-4 h-4 mr-2" />
-                    Summarize
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('continue')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Plus className="w-4 h-4 mr-2" />
-                    Continue Writing
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuSeparator />
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
-                    <Palette className="w-3 h-3" />
-                    Tone Adjustments
-                  </div>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('tone_professional')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Briefcase className="w-4 h-4 mr-2" />
-                    Make Professional
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('tone_casual')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <MessageSquare className="w-4 h-4 mr-2" />
-                    Make Casual
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('tone_friendly')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Heart className="w-4 h-4 mr-2" />
-                    Make Friendly
-                  </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('tone_formal')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <GraduationCap className="w-4 h-4 mr-2" />
-                    Make Formal
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuSeparator />
-                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2">
-                    <Zap className="w-3 h-3" />
-                    Other Actions
-                  </div>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('fix')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Check className="w-4 h-4 mr-2" />
-                    Fix Grammar & Spelling
-                    <span className="ml-auto text-xs text-muted-foreground">F7</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger disabled={isProcessing || isTyping}>
-                      <Languages className="w-4 h-4 mr-2" />
-                      Translate
-                      {lastTranslateLanguage && (
-                        <span className="ml-auto text-xs text-muted-foreground">
-                          {SUPPORTED_LANGUAGES.find(l => l.code === lastTranslateLanguage)?.nativeName || 'English'}
-                        </span>
-                      )}
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent className="w-56">
-                      {SUPPORTED_LANGUAGES.map((language) => (
-                        <DropdownMenuItem
-                          key={language.code}
-                          onClick={() => {
-                            // Dili kaydet
-                            setLastTranslateLanguage(language.code);
-                            localStorage.setItem('moonui-last-translate-language', language.code);
-                            // Çeviriyi yap
-                            handleAIAction('translate', language.name);
-                          }}
-                          disabled={isProcessing || isTyping}
-                        >
-                          <span className="text-sm">{language.nativeName}</span>
-                          <span className="ml-auto text-xs text-muted-foreground">{language.name}</span>
-                          {lastTranslateLanguage === language.code && (
-                            <Check className="w-4 h-4 ml-2 text-primary" />
-                          )}
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('ideas')}
-                    disabled={isProcessing || isTyping}
-                  >
-                    <Lightbulb className="w-4 h-4 mr-2" />
-                    Generate Ideas
-                  </DropdownMenuItem>
-                  
-                  {!aiSettings.apiKey && (
-                    <>
-                      <DropdownMenuSeparator />
-                      <div className="px-2 py-2">
-                        <motion.div 
-                          initial={{ opacity: 0, y: -10 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          className="text-xs text-muted-foreground bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3"
-                        >
-                          <div className="flex items-start gap-2">
-                            <Settings className="w-3 h-3 mt-0.5 text-yellow-600 dark:text-yellow-400" />
-                            <div>
-                              <div className="font-medium text-yellow-900 dark:text-yellow-200 mb-1">
-                                API Key Required
-                              </div>
-                              <div className="text-yellow-800 dark:text-yellow-300">
-                                Click the settings icon to configure your AI provider and API key.
-                              </div>
-                            </div>
-                          </div>
-                        </motion.div>
-                      </div>
-                    </>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-
-              <Dialog open={isAiSettingsOpen} onOpenChange={setIsAiSettingsOpen}>
-                <DialogTrigger asChild>
-                  <ToolbarButton
-                    onClick={() => setIsAiSettingsOpen(true)}
-                    tooltip="AI Settings - Configure your API keys here"
-                    disabled={isSourceView}
-                  >
-                    <Settings className="w-4 h-4" />
-                  </ToolbarButton>
-                </DialogTrigger>
-                <DialogContent className="sm:max-w-[425px] overflow-visible" style={{ zIndex: 9998 }}>
-                  <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') => {
-                          console.log('Provider changed to:', value);
-                          // Update model when provider changes
-                          const defaultModels = {
-                            openai: 'gpt-3.5-turbo',
-                            claude: 'claude-3-sonnet-20240229',
-                            gemini: 'gemini-2.0-flash-exp',
-                            cohere: 'command'
-                          };
-                          const newSettings = { 
-                            ...aiSettings, 
-                            provider: value,
-                            model: defaultModels[value] || 'gpt-3.5-turbo'
-                          };
-                          setAiSettings(newSettings);
-                          // LocalStorage'a hemen kaydet
-                          if (persistAISettings) {
-                            localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
-                          }
-                        }}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="z-[9999]" sideOffset={5}>
-                          <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) => {
-                          const newSettings = { ...aiSettings, apiKey: e.target.value };
-                          setAiSettings(newSettings);
-                          // Save to localStorage immediately  
-                          if (persistAISettings) {
-                            localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
-                          }
-                        }}
-                        placeholder="sk-..."
-                      />
-                    </div>
-                    <div className="grid gap-2">
-                      <Label htmlFor="model">Model</Label>
-                      <Select 
-                        value={aiSettings.model} 
-                        onValueChange={(value) => {
-                          const newSettings = { ...aiSettings, model: value };
-                          setAiSettings(newSettings);
-                          // Save to localStorage immediately
-                          if (persistAISettings) {
-                            localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
-                          }
-                        }}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="z-[9999]" sideOffset={5}>
-                          {aiSettings.provider === 'openai' && (
-                            <>
-                              <SelectItem value="gpt-4-turbo-preview">GPT-4 Turbo</SelectItem>
-                              <SelectItem value="gpt-4">GPT-4</SelectItem>
-                              <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
-                              <SelectItem value="gpt-3.5-turbo-16k">GPT-3.5 Turbo 16K</SelectItem>
-                            </>
-                          )}
-                          {aiSettings.provider === 'claude' && (
-                            <>
-                              <SelectItem value="claude-3-opus-20240229">Claude 3 Opus</SelectItem>
-                              <SelectItem value="claude-3-sonnet-20240229">Claude 3 Sonnet</SelectItem>
-                              <SelectItem value="claude-3-haiku-20240307">Claude 3 Haiku</SelectItem>
-                              <SelectItem value="claude-2.1">Claude 2.1</SelectItem>
-                              <SelectItem value="claude-2.0">Claude 2.0</SelectItem>
-                            </>
-                          )}
-                          {aiSettings.provider === 'gemini' && (
-                            <>
-                              <SelectItem value="gemini-2.0-flash-exp">Gemini 2.0 Flash (Experimental)</SelectItem>
-                              <SelectItem value="gemini-2.0-flash-thinking-exp">Gemini 2.0 Flash Thinking (Experimental)</SelectItem>
-                              <SelectItem value="gemini-1.5-pro">Gemini 1.5 Pro</SelectItem>
-                              <SelectItem value="gemini-1.5-flash">Gemini 1.5 Flash</SelectItem>
-                              <SelectItem value="gemini-1.5-flash-8b">Gemini 1.5 Flash 8B</SelectItem>
-                              <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) => {
-                            const newSettings = { ...aiSettings, temperature: parseFloat(e.target.value) };
-                            setAiSettings(newSettings);
-                            // Save to localStorage immediately
-                            if (persistAISettings) {
-                              localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
-                            }
-                          }}
-                        />
-                      </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) => {
-                            const newSettings = { ...aiSettings, maxTokens: parseInt(e.target.value) };
-                            setAiSettings(newSettings);
-                            // Save to localStorage immediately
-                            if (persistAISettings) {
-                              localStorage.setItem('moonui-ai-settings', JSON.stringify(newSettings));
-                            }
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  {persistAISettings && (
-                    <div className="space-y-4">
-                      <div className="flex items-start space-x-2">
-                        <Checkbox 
-                          id="rememberSettings"
-                          defaultChecked
-                          onCheckedChange={(checked) => {
-                            if (!checked) {
-                              localStorage.removeItem('moonui-ai-settings');
-                            }
-                          }}
-                        />
-                        <div className="grid gap-1.5 leading-none">
-                          <Label
-                            htmlFor="rememberSettings"
-                            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                          >
-                            Remember my settings
-                          </Label>
-                          <p className="text-xs text-muted-foreground">
-                            Save settings locally for future sessions
-                          </p>
-                        </div>
-                      </div>
-                      
-                      {aiSettings.apiKey && (
-                        <div className="rounded-md bg-yellow-50 dark:bg-yellow-900/10 p-3">
-                          <div className="flex">
-                            <div className="flex-shrink-0">
-                              <Settings className="h-4 w-4 text-yellow-400" />
-                            </div>
-                            <div className="ml-3">
-                              <p className="text-xs text-yellow-800 dark:text-yellow-200">
-                                <strong>Security Notice:</strong> API keys will be stored in your browser's local storage. 
-                                For production use, consider using a server-side proxy.
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      onClick={() => setIsAiSettingsOpen(false)}
-                    >
-                      Cancel
-                    </Button>
-                    <Button onClick={() => {
-                      // LocalStorage'a kaydet
-                      if (persistAISettings) {
-                        const toStore = { ...aiSettings };
-                        // Güvenlik için API key'i opsiyonel olarak kaydet
-                        localStorage.setItem('moonui-ai-settings', JSON.stringify(toStore));
-                      }
-                      
-                      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-muted 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>
-
-      {/* AI Preview Modal */}
-      <Dialog open={isAiPreviewOpen} onOpenChange={setIsAiPreviewOpen}>
-        <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Wand2 className="w-5 h-5 text-purple-600 dark:text-purple-400" />
-              AI Preview - {getActionDescription(previewAction).replace('...', '')}
-            </DialogTitle>
-            <DialogDescription>
-              Review the AI-generated content before applying it to your editor.
-            </DialogDescription>
-          </DialogHeader>
-          
-          <div className="flex-1 overflow-hidden flex flex-col gap-4">
-            {/* Original Text Section */}
-            <div className="flex-shrink-0">
-              <div className="text-sm font-medium text-muted-foreground mb-2">Original Text:</div>
-              <div className="p-3 bg-muted/50 rounded-md border max-h-32 overflow-auto">
-                <p className="text-sm whitespace-pre-wrap">{previewOriginalText}</p>
-              </div>
-            </div>
-            
-            {/* AI Generated Content */}
-            <div className="flex-1 overflow-hidden flex flex-col">
-              <div className="text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2">
-                <Sparkles className="w-4 h-4" />
-                AI Generated Content:
-              </div>
-              <div className="flex-1 p-4 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-950/50 dark:to-blue-950/50 rounded-md border-2 border-purple-200 dark:border-purple-800 overflow-auto">
-                <div className="prose prose-sm max-w-none dark:prose-invert">
-                  <div className="whitespace-pre-wrap text-sm leading-relaxed">
-                    {previewContent}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          {/* Action Buttons */}
-          <div className="flex-shrink-0 flex justify-between items-center pt-4 border-t">
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  navigator.clipboard.writeText(previewContent);
-                  toast({
-                    title: "Copied to clipboard",
-                    description: "The AI-generated content has been copied.",
-                  });
-                }}
-              >
-                <Copy className="w-4 h-4 mr-2" />
-                Copy
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => {
-                  // Regenerate content
-                  setIsAiPreviewOpen(false);
-                  handleAIAction(previewAction);
-                }}
-              >
-                <RefreshCw className="w-4 h-4 mr-2" />
-                Regenerate
-              </Button>
-            </div>
-            
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setIsAiPreviewOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={() => {
-                  setIsAiPreviewOpen(false);
-                  // Apply with typewriter effect
-                  const replaceSelection = previewOriginalText !== editor?.getText();
-                  applyAIContentToEditor(previewContent, replaceSelection);
-                }}
-                className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
-              >
-                <Check className="w-4 h-4 mr-2" />
-                Apply to Editor
-              </Button>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Editor */}
-      <div 
-        className="overflow-auto relative"
-        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-muted"
-            placeholder="HTML source code..."
-          />
-        ) : (
-          <>
-            <EditorContent editor={editor} />
-            {/* AI Processing Overlay */}
-            {isProcessing && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50"
-              >
-                <div className="bg-card border rounded-lg p-6 shadow-lg max-w-sm w-full mx-4">
-                  <div className="flex flex-col items-center space-y-4">
-                    <div className="relative">
-                      <div className="w-16 h-16 border-4 border-purple-200 dark:border-purple-800 rounded-full animate-pulse"></div>
-                      <div className="absolute inset-0 flex items-center justify-center">
-                        <Wand2 className="w-8 h-8 text-purple-600 dark:text-purple-400 animate-bounce" />
-                      </div>
-                    </div>
-                    <div className="text-center space-y-2">
-                      <h3 className="font-semibold text-lg">AI is thinking...</h3>
-                      <p className="text-sm text-muted-foreground">
-                        {getActionDescription(
-                          currentAction, 
-                          lastTranslateLanguage
-                        )}
-                      </p>
-                    </div>
-                    <div className="flex space-x-1">
-                      <motion.div
-                        animate={{ scale: [1, 1.5, 1] }}
-                        transition={{ duration: 0.6, repeat: Infinity, delay: 0 }}
-                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
-                      />
-                      <motion.div
-                        animate={{ scale: [1, 1.5, 1] }}
-                        transition={{ duration: 0.6, repeat: Infinity, delay: 0.2 }}
-                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
-                      />
-                      <motion.div
-                        animate={{ scale: [1, 1.5, 1] }}
-                        transition={{ duration: 0.6, repeat: Infinity, delay: 0.4 }}
-                        className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </motion.div>
-            )}
-          </>
-        )}
-      </div>
-      
-      {/* Statistics Bar */}
-      <div className="border-t bg-muted/50 px-4 py-2">
-        <div className="flex items-center justify-between text-xs text-muted-foreground">
-          <div className="flex items-center gap-6">
-            <div className="flex items-center gap-1">
-              <FileText className="w-3 h-3" />
-              <span>{wordCount} words, {characterCount} characters</span>
-            </div>
-            
-            {lastAIResponse && (
-              <div className="flex items-center gap-1">
-                <Wand2 className="w-3 h-3 text-purple-600 dark:text-purple-400" />
-                <span>
-                  Last: {lastAIResponse.action} | {lastAIResponse.tokens} tokens | {lastAIResponse.model}
-                </span>
-              </div>
-            )}
-          </div>
-          
-          <div className="flex items-center gap-4">
-            {tokensUsed > 0 && (
-              <div className="flex items-center gap-1">
-                <Zap className="w-3 h-3 text-orange-500" />
-                <span className="font-medium">
-                  {tokensUsed.toLocaleString()} tokens used
-                </span>
-              </div>
-            )}
-            
-            <div className="flex items-center gap-1">
-              <div className={cn(
-                "w-2 h-2 rounded-full",
-                aiSettings.apiKey ? "bg-green-500" : "bg-red-500"
-              )} />
-              <span className="capitalize">
-                {aiSettings.provider} {aiSettings.apiKey ? "connected" : "disconnected"}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default RichTextEditor;