@moontra/moonui-pro 2.8.11 → 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';
@@ -50471,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) {
@@ -50492,6 +50496,48 @@ function RichTextEditor({
       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",
@@ -50629,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",
@@ -50772,36 +50826,14 @@ function RichTextEditor({
     const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     processingToast.dismiss();
     if (result) {
-      setIsTyping(true);
-      isTypingRef.current = 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 && isTypingRef.current) {
-          const nextChar = result[currentIndex];
-          setTypingText((prev) => prev + nextChar);
-          editor.chain().focus().insertContent(nextChar).run();
-          currentIndex++;
-          setRemainingText(result.substring(currentIndex));
-          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
-        } else {
-          setIsTyping(false);
-          isTypingRef.current = false;
-          setTypingText("");
-          setRemainingText("");
-          if (currentIndex >= result.length) {
-            toast({
-              title: "AI action completed",
-              description: "Your text has been updated successfully."
-            });
-          }
-        }
-      };
-      typeNextChar();
     }
   };
   const getActionDescription = (action, targetLanguage) => {
@@ -51887,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.11",
+  "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

@@ -74,7 +74,8 @@ import {
   GraduationCap,
   Zap,
   Lightbulb,
-  X
+  X,
+  Copy
 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -442,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 () => {
@@ -466,6 +473,61 @@ export function RichTextEditor({
       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[] = [
@@ -606,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",
@@ -764,45 +838,17 @@ export function RichTextEditor({
     processingToast.dismiss();
     
     if (result) {
-      // Start typewriter effect
-      setIsTyping(true);
-      isTypingRef.current = 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 && isTypingRef.current) {
-          const nextChar = result[currentIndex];
-          setTypingText(prev => prev + nextChar);
-          editor.chain().focus().insertContent(nextChar).run();
-          currentIndex++;
-          setRemainingText(result.substring(currentIndex));
-          typingIntervalRef.current = setTimeout(typeNextChar, typeSpeed);
-        } else {
-          // Typing complete or stopped
-          setIsTyping(false);
-          isTypingRef.current = false;
-          setTypingText('');
-          setRemainingText('');
-          
-          if (currentIndex >= result.length) {
-            // Success toast only if completed
-            toast({
-              title: "AI action completed",
-              description: "Your text has been updated successfully.",
-            });
-          }
-        }
-      };
-      
-      // Start typing
-      typeNextChar();
     }
   };
 
@@ -1970,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"