@moontra/moonui-pro 2.8.10 → 2.8.11

package/dist/index.mjs

@@ -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");
@@ -50451,6 +50478,20 @@ 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 slashCommands = [
     {
       id: "rewrite",
@@ -50732,6 +50773,7 @@ function RichTextEditor({
     processingToast.dismiss();
     if (result) {
       setIsTyping(true);
+      isTypingRef.current = true;
       setTypingText("");
       if (selectedText) {
         editor.chain().focus().deleteSelection().run();
@@ -50739,19 +50781,24 @@ function RichTextEditor({
       let currentIndex = 0;
       const typeSpeed = 30;
       const typeNextChar = () => {
-        if (currentIndex < result.length) {
+        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("");
-          toast({
-            title: "AI action completed",
-            description: "Your text has been updated successfully."
-          });
+          setRemainingText("");
+          if (currentIndex >= result.length) {
+            toast({
+              title: "AI action completed",
+              description: "Your text has been updated successfully."
+            });
+          }
         }
       };
       typeNextChar();
@@ -51301,6 +51348,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" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.10",
+  "version": "2.8.11",
   "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,8 @@ import {
   Heart,
   GraduationCap,
   Zap,
-  Lightbulb
+  Lightbulb,
+  X
 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from '../ui/button';
@@ -218,23 +219,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 +428,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');
@@ -399,6 +450,22 @@ 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.",
+    });
+  };
 
   // Slash commands tanımları
   const slashCommands: SlashCommand[] = [
@@ -699,6 +766,7 @@ export function RichTextEditor({
     if (result) {
       // Start typewriter effect
       setIsTyping(true);
+      isTypingRef.current = true;
       setTypingText('');
       
       if (selectedText) {
@@ -709,22 +777,27 @@ export function RichTextEditor({
       const typeSpeed = 30; // ms per character
       
       const typeNextChar = () => {
-        if (currentIndex < result.length) {
+        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
+          // Typing complete or stopped
           setIsTyping(false);
+          isTypingRef.current = false;
           setTypingText('');
+          setRemainingText('');
           
-          // Success toast
-          toast({
-            title: "AI action completed",
-            description: "Your text has been updated successfully.",
-          });
+          if (currentIndex >= result.length) {
+            // Success toast only if completed
+            toast({
+              title: "AI action completed",
+              description: "Your text has been updated successfully.",
+            });
+          }
         }
       };
       
@@ -1364,6 +1437,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" />