@moontra/moonui-pro 2.8.6 → 2.8.8

package/dist/index.mjs

@@ -50238,6 +50238,22 @@ styleInject(".slash-commands-menu {\n  border-radius: var(--radius);\n  border-w
 // src/components/rich-text-editor/table-styles.css
 styleInject('.ProseMirror table {\n  border-collapse: collapse;\n  margin: 0;\n  overflow: hidden;\n  table-layout: fixed;\n  width: 100%;\n  border: 1px solid #d1d5db;\n}\n.ProseMirror table td,\n.ProseMirror table th {\n  border: 1px solid #d1d5db;\n  box-sizing: border-box;\n  min-width: 1em;\n  padding: 6px 8px;\n  position: relative;\n  vertical-align: top;\n}\n.ProseMirror table th {\n  background-color: #f9fafb;\n  font-weight: 600;\n  text-align: left;\n}\n.ProseMirror table .selectedCell:after {\n  background-color: rgba(59, 130, 246, 0.1);\n  content: "";\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n  position: absolute;\n  z-index: 2;\n}\n.ProseMirror table .column-resize-handle {\n  background-color: #3b82f6;\n  bottom: -2px;\n  position: absolute;\n  right: -2px;\n  top: 0;\n  width: 4px;\n  pointer-events: none;\n}\n.dark .ProseMirror table {\n  border: 1px solid #374151;\n}\n.dark .ProseMirror table td,\n.dark .ProseMirror table th {\n  border: 1px solid #374151;\n}\n.dark .ProseMirror table th {\n  background-color: #111827;\n}\n.dark .ProseMirror table .selectedCell:after {\n  background-color: rgba(59, 130, 246, 0.2);\n}\n');
 var lowlight = createLowlight(grammars);
+var SUPPORTED_LANGUAGES = [
+  { code: "en", name: "English", nativeName: "English" },
+  { code: "tr", name: "Turkish", nativeName: "T\xFCrk\xE7e" },
+  { code: "es", name: "Spanish", nativeName: "Espa\xF1ol" },
+  { code: "fr", name: "French", nativeName: "Fran\xE7ais" },
+  { code: "de", name: "German", nativeName: "Deutsch" },
+  { code: "it", name: "Italian", nativeName: "Italiano" },
+  { code: "pt", name: "Portuguese", nativeName: "Portugu\xEAs" },
+  { code: "ru", name: "Russian", nativeName: "\u0420\u0443\u0441\u0441\u043A\u0438\u0439" },
+  { code: "zh", name: "Chinese", nativeName: "\u4E2D\u6587" },
+  { code: "ja", name: "Japanese", nativeName: "\u65E5\u672C\u8A9E" },
+  { code: "ko", name: "Korean", nativeName: "\uD55C\uAD6D\uC5B4" },
+  { code: "ar", name: "Arabic", nativeName: "\u0627\u0644\u0639\u0631\u0628\u064A\u0629" },
+  { code: "hi", name: "Hindi", nativeName: "\u0939\u093F\u0928\u094D\u0926\u0940" },
+  { code: "nl", name: "Dutch", nativeName: "Nederlands" }
+];
 var getAIProvider = (settings) => {
   if (!settings.apiKey)
     return null;
@@ -50387,7 +50403,7 @@ function RichTextEditor({
     ] }) }) });
   }
   const [aiSettings, setAiSettings] = useState(() => {
-    if (persistAISettings) {
+    if (persistAISettings && typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("moonui-ai-settings");
         if (stored) {
@@ -50418,6 +50434,12 @@ function RichTextEditor({
   const [sourceContent, setSourceContent] = useState("");
   const [currentTextColor, setCurrentTextColor] = useState("#000000");
   const [currentBgColor, setCurrentBgColor] = useState("#ffffff");
+  const [lastTranslateLanguage, setLastTranslateLanguage] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("moonui-last-translate-language") || "en";
+    }
+    return "en";
+  });
   const slashCommands = [
     {
       id: "rewrite",
@@ -50606,7 +50628,7 @@ function RichTextEditor({
     },
     immediatelyRender: false
   });
-  const callAI = async (action, text) => {
+  const callAI = async (action, text, targetLanguage) => {
     if (!aiSettings.apiKey) {
       toast({
         title: "API Key Required",
@@ -50637,7 +50659,7 @@ function RichTextEditor({
           response = await provider.fixGrammar(text);
           break;
         case "translate":
-          response = await provider.translate(text, "Turkish");
+          response = await provider.translate(text, targetLanguage || "English");
           break;
         case "tone_professional":
           response = await provider.changeTone(text, "professional");
@@ -50675,7 +50697,7 @@ function RichTextEditor({
       setIsProcessing(false);
     }
   };
-  const handleAIAction = async (action) => {
+  const handleAIAction = async (action, targetLanguage) => {
     if (!editor)
       return;
     const selection = editor.state.selection;
@@ -50690,11 +50712,11 @@ function RichTextEditor({
     }
     const processingToast = toast({
       title: "Processing with AI...",
-      description: getActionDescription(action),
+      description: getActionDescription(action, targetLanguage),
       duration: 6e4
       // Long duration
     });
-    const result = await callAI(action, selectedText || editor.getText());
+    const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     processingToast.dismiss();
     if (result) {
       if (selectedText) {
@@ -50708,14 +50730,14 @@ function RichTextEditor({
       });
     }
   };
-  const getActionDescription = (action) => {
+  const getActionDescription = (action, targetLanguage) => {
     const descriptions = {
       rewrite: "Rewriting your text...",
       improve: "Improving your writing...",
       expand: "Expanding your text...",
       summarize: "Creating a summary...",
       fix: "Fixing grammar and spelling...",
-      translate: "Translating to Turkish...",
+      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...",
@@ -51379,17 +51401,30 @@ function RichTextEditor({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                MoonUIDropdownMenuItemPro,
-                {
-                  onClick: () => handleAIAction("translate"),
-                  disabled: isProcessing,
-                  children: [
-                    /* @__PURE__ */ jsx(Languages, { className: "w-4 h-4 mr-2" }),
-                    "Translate to Turkish"
-                  ]
-                }
-              ),
+              /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubPro, { children: [
+                /* @__PURE__ */ jsxs(MoonUIDropdownMenuSubTriggerPro, { disabled: isProcessing, children: [
+                  /* @__PURE__ */ jsx(Languages, { className: "w-4 h-4 mr-2" }),
+                  "Translate",
+                  lastTranslateLanguage && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: SUPPORTED_LANGUAGES.find((l) => l.code === lastTranslateLanguage)?.nativeName || "English" })
+                ] }),
+                /* @__PURE__ */ jsx(MoonUIDropdownMenuSubContentPro, { className: "w-56", children: SUPPORTED_LANGUAGES.map((language) => /* @__PURE__ */ jsxs(
+                  MoonUIDropdownMenuItemPro,
+                  {
+                    onClick: () => {
+                      setLastTranslateLanguage(language.code);
+                      localStorage.setItem("moonui-last-translate-language", language.code);
+                      handleAIAction("translate", language.name);
+                    },
+                    disabled: isProcessing,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm", children: language.nativeName }),
+                      /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: language.name }),
+                      lastTranslateLanguage === language.code && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 ml-2 text-primary" })
+                    ]
+                  },
+                  language.code
+                )) })
+              ] }),
               /* @__PURE__ */ jsxs(
                 MoonUIDropdownMenuItemPro,
                 {
@@ -51450,11 +51485,15 @@ function RichTextEditor({
                           gemini: "gemini-2.0-flash",
                           cohere: "command"
                         };
-                        setAiSettings({
+                        const newSettings = {
                           ...aiSettings,
                           provider: value,
                           model: defaultModels[value] || "gpt-3.5-turbo"
-                        });
+                        };
+                        setAiSettings(newSettings);
+                        if (persistAISettings) {
+                          localStorage.setItem("moonui-ai-settings", JSON.stringify(newSettings));
+                        }
                       },
                       children: [
                         /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
@@ -51476,7 +51515,10 @@ function RichTextEditor({
                       id: "apiKey",
                       type: "password",
                       value: aiSettings.apiKey,
-                      onChange: (e) => setAiSettings({ ...aiSettings, apiKey: e.target.value }),
+                      onChange: (e) => {
+                        const newSettings = { ...aiSettings, apiKey: e.target.value };
+                        setAiSettings(newSettings);
+                      },
                       placeholder: "sk-..."
                     }
                   )
@@ -51487,7 +51529,10 @@ function RichTextEditor({
                     MoonUISelectPro,
                     {
                       value: aiSettings.model,
-                      onValueChange: (value) => setAiSettings({ ...aiSettings, model: value }),
+                      onValueChange: (value) => {
+                        const newSettings = { ...aiSettings, model: value };
+                        setAiSettings(newSettings);
+                      },
                       children: [
                         /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
                         /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
@@ -51526,7 +51571,10 @@ function RichTextEditor({
                         max: "2",
                         step: "0.1",
                         value: aiSettings.temperature,
-                        onChange: (e) => setAiSettings({ ...aiSettings, temperature: parseFloat(e.target.value) })
+                        onChange: (e) => {
+                          const newSettings = { ...aiSettings, temperature: parseFloat(e.target.value) };
+                          setAiSettings(newSettings);
+                        }
                       }
                     )
                   ] }),
@@ -51540,7 +51588,10 @@ function RichTextEditor({
                         min: "1",
                         max: "4000",
                         value: aiSettings.maxTokens,
-                        onChange: (e) => setAiSettings({ ...aiSettings, maxTokens: parseInt(e.target.value) })
+                        onChange: (e) => {
+                          const newSettings = { ...aiSettings, maxTokens: parseInt(e.target.value) };
+                          setAiSettings(newSettings);
+                        }
                       }
                     )
                   ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "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

@@ -83,6 +83,9 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
 } from '../ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
 import {
@@ -108,13 +111,31 @@ import { createAIProvider, type AIProvider as AIProviderInterface } from '../../
 type AIProvider = 'openai' | 'anthropic' | 'gemini' | 'claude' | 'cohere'
 
 interface AISettingsType {
-  provider: AIProvider
-  apiKey?: string
-  model?: string
-  temperature?: number
-  maxTokens?: number
+  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' },
+];
+
 interface SlashCommand {
   id?: string
   title?: string
@@ -324,14 +345,14 @@ export function RichTextEditor({
 
   const [aiSettings, setAiSettings] = useState<AISettingsType>(() => {
     // Öncelik sırası: Props > LocalStorage > Varsayılan
-    if (persistAISettings) {
+    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
           return {
-            provider: aiConfig.provider || parsed.provider || 'openai',
+            provider: (aiConfig.provider || parsed.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
             apiKey: aiConfig.apiKey || parsed.apiKey || '',
             model: aiConfig.model || parsed.model || 'gpt-3.5-turbo',
             temperature: aiConfig.temperature ?? parsed.temperature ?? 0.7,
@@ -345,7 +366,7 @@ export function RichTextEditor({
     
     // LocalStorage yoksa veya persist kapalıysa props/varsayılan değerleri kullan
     return {
-      provider: aiConfig.provider || 'openai',
+      provider: (aiConfig.provider || 'openai') as 'openai' | 'claude' | 'gemini' | 'cohere',
       apiKey: aiConfig.apiKey || '',
       model: aiConfig.model || 'gpt-3.5-turbo',
       temperature: aiConfig.temperature ?? 0.7,
@@ -358,6 +379,13 @@ export function RichTextEditor({
   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';
+  });
 
   // Slash commands tanımları
   const slashCommands: SlashCommand[] = [
@@ -551,7 +579,7 @@ export function RichTextEditor({
   });
 
   // AI işlevleri
-  const callAI = async (action: string, text: string) => {
+  const callAI = async (action: string, text: string, targetLanguage?: string) => {
     if (!aiSettings.apiKey) {
       toast({
         title: "API Key Required",
@@ -585,7 +613,7 @@ export function RichTextEditor({
           response = await provider.fixGrammar(text);
           break;
         case 'translate':
-          response = await provider.translate(text, 'Turkish');
+          response = await provider.translate(text, targetLanguage || 'English');
           break;
         case 'tone_professional':
           response = await provider.changeTone(text, 'professional');
@@ -625,7 +653,7 @@ export function RichTextEditor({
     }
   };
 
-  const handleAIAction = async (action: string) => {
+  const handleAIAction = async (action: string, targetLanguage?: string) => {
     if (!editor) return;
     
     const selection = editor.state.selection;
@@ -643,11 +671,11 @@ export function RichTextEditor({
     // Show processing toast
     const processingToast = toast({
       title: "Processing with AI...",
-      description: getActionDescription(action),
+      description: getActionDescription(action, targetLanguage),
       duration: 60000, // Long duration
     });
 
-    const result = await callAI(action, selectedText || editor.getText());
+    const result = await callAI(action, selectedText || editor.getText(), targetLanguage);
     
     // Dismiss processing toast
     processingToast.dismiss();
@@ -667,14 +695,14 @@ export function RichTextEditor({
     }
   };
 
-  const getActionDescription = (action: string): string => {
+  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: "Translating to Turkish...",
+      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...",
@@ -1387,13 +1415,38 @@ export function RichTextEditor({
                     Fix Grammar & Spelling
                     <span className="ml-auto text-xs text-muted-foreground">F7</span>
                   </DropdownMenuItem>
-                  <DropdownMenuItem 
-                    onClick={() => handleAIAction('translate')}
-                    disabled={isProcessing}
-                  >
-                    <Languages className="w-4 h-4 mr-2" />
-                    Translate to Turkish
-                  </DropdownMenuItem>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger disabled={isProcessing}>
+                      <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}
+                        >
+                          <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}
@@ -1459,11 +1512,16 @@ export function RichTextEditor({
                             gemini: 'gemini-2.0-flash',
                             cohere: 'command'
                           };
-                          setAiSettings({ 
+                          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>
@@ -1483,7 +1541,10 @@ export function RichTextEditor({
                         id="apiKey"
                         type="password"
                         value={aiSettings.apiKey}
-                        onChange={(e) => setAiSettings({ ...aiSettings, apiKey: e.target.value })}
+                        onChange={(e) => {
+                          const newSettings = { ...aiSettings, apiKey: e.target.value };
+                          setAiSettings(newSettings);
+                        }}
                         placeholder="sk-..."
                       />
                     </div>
@@ -1491,7 +1552,10 @@ export function RichTextEditor({
                       <Label htmlFor="model">Model</Label>
                       <Select 
                         value={aiSettings.model} 
-                        onValueChange={(value) => setAiSettings({ ...aiSettings, model: value })}
+                        onValueChange={(value) => {
+                          const newSettings = { ...aiSettings, model: value };
+                          setAiSettings(newSettings);
+                        }}
                       >
                         <SelectTrigger>
                           <SelectValue />
@@ -1536,7 +1600,10 @@ export function RichTextEditor({
                           max="2"
                           step="0.1"
                           value={aiSettings.temperature}
-                          onChange={(e) => setAiSettings({ ...aiSettings, temperature: parseFloat(e.target.value) })}
+                          onChange={(e) => {
+                            const newSettings = { ...aiSettings, temperature: parseFloat(e.target.value) };
+                            setAiSettings(newSettings);
+                          }}
                         />
                       </div>
                       <div className="grid gap-2">
@@ -1547,7 +1614,10 @@ export function RichTextEditor({
                           min="1"
                           max="4000"
                           value={aiSettings.maxTokens}
-                          onChange={(e) => setAiSettings({ ...aiSettings, maxTokens: parseInt(e.target.value) })}
+                          onChange={(e) => {
+                            const newSettings = { ...aiSettings, maxTokens: parseInt(e.target.value) };
+                            setAiSettings(newSettings);
+                          }}
                         />
                       </div>
                     </div>