@moontra/moonui-pro 2.8.10 → 2.8.12

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useEffect, useContext, useMemo, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, CreditCard, Globe, CheckCircle2, XCircle, RotateCcw, Download, Clock, HelpCircle, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Zap, Languages, Lightbulb, TrendingUp, TrendingDown, ZoomOut, ZoomIn, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, Star, ExternalLink, CalendarIcon, DollarSign, Users, Github, GitFork, Activity, Server, EyeOff, RotateCw, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, CreditCard, Globe, CheckCircle2, XCircle, RotateCcw, Download, Clock, HelpCircle, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Zap, Languages, Lightbulb, Copy, TrendingUp, TrendingDown, ZoomOut, ZoomIn, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, Star, ExternalLink, CalendarIcon, DollarSign, Users, Github, GitFork, Activity, Server, EyeOff, RotateCw, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -4044,7 +4044,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X19(e) {
+  function X20(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -4059,10 +4059,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X19(V().length - 1), ie3 = (e) => {
+  let oe = () => X20(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X19(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X20(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -4089,7 +4089,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X19(0);
+          e.preventDefault(), X20(0);
           break;
         }
         case "End": {
@@ -50283,53 +50283,78 @@ var EditorColorPicker = ({
   onColorSelect,
   currentColor = "#000000"
 }) => {
-  return /* @__PURE__ */ jsx(
-    MoonUIColorPickerPro,
-    {
-      value: currentColor,
-      onChange: onColorSelect,
-      showInput: true,
-      showPresets: true,
-      size: "sm",
-      presets: [
-        "#000000",
-        "#ffffff",
-        "#ff0000",
-        "#00ff00",
-        "#0000ff",
-        "#ffff00",
-        "#ff00ff",
-        "#00ffff",
-        "#ff8800",
-        "#8800ff",
-        "#88ff00",
-        "#0088ff",
-        "#ff0088",
-        "#00ff88",
-        "#888888",
-        "#f87171",
-        "#fb923c",
-        "#fbbf24",
-        "#facc15",
-        "#a3e635",
-        "#4ade80",
-        "#34d399",
-        "#2dd4bf",
-        "#22d3ee",
-        "#38bdf8",
-        "#60a5fa",
-        "#818cf8",
-        "#a78bfa",
-        "#c084fc",
-        "#e879f9",
-        "#f472b6",
-        "#fb7185",
-        "#f43f5e",
-        "#ef4444",
-        "#dc2626"
-      ]
-    }
-  );
+  const [showAdvanced, setShowAdvanced] = t__default.useState(false);
+  const quickColors = [
+    "#000000",
+    // Black
+    "#ef4444",
+    // Red
+    "#f59e0b",
+    // Orange
+    "#10b981",
+    // Green  
+    "#3b82f6",
+    // Blue
+    "#8b5cf6",
+    // Purple
+    "#6b7280",
+    // Gray
+    "#ec4899"
+    // Pink
+  ];
+  if (showAdvanced) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 w-64", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Choose Color" }),
+        /* @__PURE__ */ jsx(
+          MoonUIButtonPro,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => setShowAdvanced(false),
+            children: "Back"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        MoonUIColorPickerPro,
+        {
+          value: currentColor,
+          onChange: (color) => {
+            onColorSelect(color);
+            setShowAdvanced(false);
+          },
+          showInput: true,
+          showPresets: false,
+          size: "sm"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "p-3 w-36", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    quickColors.map((color) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        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
+      },
+      color
+    )),
+    /* @__PURE__ */ jsx(
+      "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",
+        children: /* @__PURE__ */ jsx(Palette, { className: "w-5 h-5 text-muted-foreground" })
+      }
+    )
+  ] }) });
 };
 var ToolbarButton = ({
   active,
@@ -50434,6 +50459,8 @@ function RichTextEditor({
   const [isTyping, setIsTyping] = useState(false);
   const typingIntervalRef = useRef(null);
   const [currentAction, setCurrentAction] = useState("");
+  const [remainingText, setRemainingText] = useState("");
+  const isTypingRef = useRef(false);
   const [isSourceView, setIsSourceView] = useState(false);
   const [sourceContent, setSourceContent] = useState("");
   const [currentTextColor, setCurrentTextColor] = useState("#000000");
@@ -50444,6 +50471,10 @@ function RichTextEditor({
     }
     return "en";
   });
+  const [isAiPreviewOpen, setIsAiPreviewOpen] = useState(false);
+  const [previewContent, setPreviewContent] = useState("");
+  const [previewAction, setPreviewAction] = useState("");
+  const [previewOriginalText, setPreviewOriginalText] = useState("");
   useEffect(() => {
     return () => {
       if (typingIntervalRef.current) {
@@ -50451,6 +50482,62 @@ function RichTextEditor({
       }
     };
   }, []);
+  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."
+    });
+  };
+  const shouldUseModal = (action) => {
+    const modalActions = ["expand", "summarize", "ideas", "continue"];
+    return modalActions.includes(action);
+  };
+  const applyAIContentToEditor = (content, replaceSelection = true) => {
+    if (!editor)
+      return;
+    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 = 30;
+    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 {
+        setIsTyping(false);
+        isTypingRef.current = false;
+        setTypingText("");
+        setRemainingText("");
+        if (currentIndex >= content.length) {
+          toast({
+            title: "AI action completed",
+            description: "Your text has been updated successfully."
+          });
+        }
+      }
+    };
+    typeNextChar();
+  };
   const slashCommands = [
     {
       id: "rewrite",
@@ -50588,10 +50675,18 @@ function RichTextEditor({
           const { from: from2, to } = editor.state.selection;
           const selectedText = editor.state.doc.textBetween(from2, to, " ");
           setIsProcessing(true);
+          setCurrentAction(command2.id);
           try {
             const response = await command2.action(selectedText || editor.getText());
             if (response.text) {
-              editor.chain().focus().insertContent(response.text).run();
+              if (shouldUseModal(command2.id)) {
+                setPreviewContent(response.text);
+                setPreviewAction(command2.id);
+                setPreviewOriginalText(selectedText || editor.getText());
+                setIsAiPreviewOpen(true);
+              } else {
+                applyAIContentToEditor(response.text, !!selectedText);
+              }
             } else if (response.error) {
               toast({
                 title: "AI Error",
@@ -50731,30 +50826,14 @@ function RichTextEditor({
     const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     processingToast.dismiss();
     if (result) {
-      setIsTyping(true);
-      setTypingText("");
-      if (selectedText) {
-        editor.chain().focus().deleteSelection().run();
+      if (shouldUseModal(action)) {
+        setPreviewContent(result);
+        setPreviewAction(action);
+        setPreviewOriginalText(selectedText || editor.getText());
+        setIsAiPreviewOpen(true);
+      } else {
+        applyAIContentToEditor(result, !!selectedText);
       }
-      let currentIndex = 0;
-      const typeSpeed = 30;
-      const typeNextChar = () => {
-        if (currentIndex < result.length) {
-          const nextChar = result[currentIndex];
-          setTypingText((prev) => prev + nextChar);
-          editor.chain().focus().insertContent(nextChar).run();
-          currentIndex++;
-          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
-        } else {
-          setIsTyping(false);
-          setTypingText("");
-          toast({
-            title: "AI action completed",
-            description: "Your text has been updated successfully."
-          });
-        }
-      };
-      typeNextChar();
     }
   };
   const getActionDescription = (action, targetLanguage) => {
@@ -51301,6 +51380,17 @@ function RichTextEditor({
                 ]
               }
             ) }),
+            isTyping && /* @__PURE__ */ jsx(
+              MoonUIButtonPro,
+              {
+                variant: "destructive",
+                size: "sm",
+                className: "h-8 px-2",
+                onClick: stopTyping,
+                title: "Stop AI typing",
+                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+              }
+            ),
             /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { className: "w-64", children: [
               /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Wand2, { className: "w-3 h-3" }),
@@ -51829,6 +51919,91 @@ function RichTextEditor({
         }, children: "Apply Borders" })
       ] })
     ] }) }),
+    /* @__PURE__ */ jsx(MoonUIDialogPro, { open: isAiPreviewOpen, onOpenChange: setIsAiPreviewOpen, children: /* @__PURE__ */ jsxs(MoonUIDialogContentPro, { className: "max-w-4xl max-h-[80vh] overflow-hidden flex flex-col", children: [
+      /* @__PURE__ */ jsxs(MoonUIDialogHeaderPro, { children: [
+        /* @__PURE__ */ jsxs(MoonUIDialogTitlePro, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Wand2, { className: "w-5 h-5 text-purple-600 dark:text-purple-400" }),
+          "AI Preview - ",
+          getActionDescription(previewAction).replace("...", "")
+        ] }),
+        /* @__PURE__ */ jsx(MoonUIDialogDescriptionPro, { children: "Review the AI-generated content before applying it to your editor." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground mb-2", children: "Original Text:" }),
+          /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted/50 rounded-md border max-h-32 overflow-auto", children: /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap", children: previewOriginalText }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden flex flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-muted-foreground mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4" }),
+            "AI Generated Content:"
+          ] }),
+          /* @__PURE__ */ jsx("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", children: /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none dark:prose-invert", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: previewContent }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 flex justify-between items-center pt-4 border-t", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => {
+                navigator.clipboard.writeText(previewContent);
+                toast({
+                  title: "Copied to clipboard",
+                  description: "The AI-generated content has been copied."
+                });
+              },
+              children: [
+                /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 mr-2" }),
+                "Copy"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => {
+                setIsAiPreviewOpen(false);
+                handleAIAction(previewAction);
+              },
+              children: [
+                /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4 mr-2" }),
+                "Regenerate"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            MoonUIButtonPro,
+            {
+              variant: "outline",
+              onClick: () => setIsAiPreviewOpen(false),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              onClick: () => {
+                setIsAiPreviewOpen(false);
+                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",
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 mr-2" }),
+                "Apply to Editor"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsx(
       "div",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.10",
+  "version": "2.8.12",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

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

@@ -73,7 +73,9 @@ import {
   Heart,
   GraduationCap,
   Zap,
-  Lightbulb
+  Lightbulb,
+  X,
+  Copy
 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -218,23 +220,71 @@ const EditorColorPicker = ({
   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 (
-    <ColorPicker
-      value={currentColor}
-      onChange={onColorSelect}
-      showInput={true}
-      showPresets={true}
-      size="sm"
-      presets={[
-        '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
-        '#ffff00', '#ff00ff', '#00ffff', '#ff8800', '#8800ff',
-        '#88ff00', '#0088ff', '#ff0088', '#00ff88', '#888888',
-        '#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635',
-        '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8',
-        '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9',
-        '#f472b6', '#fb7185', '#f43f5e', '#ef4444', '#dc2626',
-      ]}
-    />
+    <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>
   );
 };
 
@@ -379,6 +429,8 @@ export function RichTextEditor({
   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');
@@ -391,6 +443,12 @@ export function RichTextEditor({
     return 'en';
   });
   
+  // AI Preview Modal states
+  const [isAiPreviewOpen, setIsAiPreviewOpen] = useState(false);
+  const [previewContent, setPreviewContent] = useState('');
+  const [previewAction, setPreviewAction] = useState('');
+  const [previewOriginalText, setPreviewOriginalText] = useState('');
+  
   // Clean up typewriter effect on unmount
   useEffect(() => {
     return () => {
@@ -399,6 +457,77 @@ export function RichTextEditor({
       }
     };
   }, []);
+  
+  // 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);
+  };
+  
+  // 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 = 30; // ms per character
+    
+    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[] = [
@@ -539,10 +668,22 @@ export function RichTextEditor({
           const selectedText = editor.state.doc.textBetween(from, to, ' ');
           
           setIsProcessing(true);
+          setCurrentAction(command.id);
+          
           try {
             const response = await command.action(selectedText || editor.getText());
             if (response.text) {
-              editor.chain().focus().insertContent(response.text).run();
+              // 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",
@@ -697,39 +838,17 @@ export function RichTextEditor({
     processingToast.dismiss();
     
     if (result) {
-      // Start typewriter effect
-      setIsTyping(true);
-      setTypingText('');
-      
-      if (selectedText) {
-        editor.chain().focus().deleteSelection().run();
+      // Check if this action should use modal preview
+      if (shouldUseModal(action)) {
+        // Open preview modal instead of directly applying
+        setPreviewContent(result);
+        setPreviewAction(action);
+        setPreviewOriginalText(selectedText || editor.getText());
+        setIsAiPreviewOpen(true);
+      } else {
+        // Apply directly with typewriter effect (for rewrite, fix grammar, tone changes, etc.)
+        applyAIContentToEditor(result, !!selectedText);
       }
-      
-      let currentIndex = 0;
-      const typeSpeed = 30; // ms per character
-      
-      const typeNextChar = () => {
-        if (currentIndex < result.length) {
-          const nextChar = result[currentIndex];
-          setTypingText(prev => prev + nextChar);
-          editor.chain().focus().insertContent(nextChar).run();
-          currentIndex++;
-          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
-        } else {
-          // Typing complete
-          setIsTyping(false);
-          setTypingText('');
-          
-          // Success toast
-          toast({
-            title: "AI action completed",
-            description: "Your text has been updated successfully.",
-          });
-        }
-      };
-      
-      // Start typing
-      typeNextChar();
     }
   };
 
@@ -1364,6 +1483,17 @@ export function RichTextEditor({
                     {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" />
@@ -1886,6 +2016,99 @@ export function RichTextEditor({
         </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"