@flozy/editor 9.1.7 → 9.1.8

package/dist/Editor/ChatEditor.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
+import React, { useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
 import { createEditor, Transforms, Editor } from 'slate';
 import withCommon from "./hooks/withCommon";
@@ -30,7 +30,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     onsubmit,
     onBlur = () => {},
     isMobile = false,
-    debounceTimeOut = 10
+    debounceTimeOut = 10,
+    translation
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
@@ -41,7 +42,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       }]
     }]
   });
-  const [value, setValue] = useState(convertedContent);
+  const [value] = useState(convertedContent);
   const debouncedValue = useRef(value);
   const debounced = useDebouncedCallback(
   // function
@@ -82,6 +83,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     // Focus enable
     enableFocus: () => {
       if (editor) {
+        if (editor.children.length === 0) {
+          Transforms.insertNodes(editor, {
+            type: "paragraph",
+            children: [{
+              text: ""
+            }]
+          });
+        }
         const position = {
           anchor: {
             path: [0],
@@ -136,15 +145,18 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const {
     CHARACTERS = [],
-    hideTools
+    hideTools,
+    translationMock
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
   const customProps = {
     ...(otherProps || {}),
+    hideTools: ["settings", "add_column", "drag", "resize"],
     readOnly: isReadOnly,
     editorPlaceholder: "Write Something",
-    page_id: 1
+    page_id: 1,
+    translation: translation || translationMock
   };
   const [mentions, setMentions] = useMentions({
     editor,
@@ -164,7 +176,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = type ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools
+    hideTools: hideTools,
+    translation: translation || translationMock
   }) : [];
   const Leaf = ({
     attributes,
@@ -178,6 +191,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     });
   };
   const handleEditorChange = newValue => {
+    if (editor.children.length === 0) {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      });
+    }
     debounced(newValue);
     debouncedValue.current = newValue;
   };
@@ -265,7 +286,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
       children: [toolBar && /*#__PURE__*/_jsx(MiniTextFormat, {
         classes: classes,
         editor: editor,
-        closeMainPopup: handleClose
+        closeMainPopup: handleClose,
+        customProps: customProps
       }), /*#__PURE__*/_jsx(Editable, {
         className: "chatEditorRoot",
         renderElement: renderElement,
@@ -275,7 +297,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         spellCheck: true,
         onBlur: handleBlur,
         onKeyDown: onKeyDown,
-        onPaste: handlePaste
+        onPaste: handlePaste,
+        customProps: customProps
       }), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,
@@ -285,7 +308,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         index: index,
         chars: chars,
         type: type,
-        theme: theme
+        theme: theme,
+        customProps: customProps
       }) : null]
     }, id)
   });

package/dist/Editor/CommonEditor.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
+import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle, createContext } from "react";
 import PropTypes from "prop-types";
 import { createEditor, Range, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
@@ -17,7 +17,7 @@ import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
 import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
-import { Box, Typography, useTheme } from "@mui/material";
+import { Box, Typography, useTheme, IconButton } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -26,9 +26,12 @@ import editorStyles from "./Styles/EditorStyles";
 import DragAndDrop from "./common/DnD";
 import Section from "./common/Section";
 import decorators from "./utils/Decorators";
-import { getBreakpointLineSpacing, getTRBLBreakPoints } from "./helper/theme";
-import { getInitialValue, handleInsertLastElement, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
+import { getTRBLBreakPoints, getVariableValue, getBreakpointLineSpacing } from "./helper/theme";
+import { getInitialValue, handleInsertLastElement, isEverythingSelected, isFreeGrid, isFreeGridFragment, isRestrictedNode, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
+import { getTheme } from "./theme";
+import ThemeSettings from "./themeSettings";
+import ThemeSettingsAI from "./themeSettingsAI";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import RnDCopy from "./common/RnD/RnDCopy";
 import SwitchViewport from "./common/RnD/SwitchViewport/SwitchViewport";
@@ -37,8 +40,11 @@ import "./font.css";
 import "./Editor.css";
 import "animate.css";
 import FontLoader from "./common/FontLoader/FontLoader";
+import { ThemeAIIcon, ThemePaintIcon } from "./assets/svg/ThemeIcons";
+import { CustomDialogComponent } from "./common/CustomDialog";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const ThemeContext = /*#__PURE__*/createContext(null);
 const Item = /*#__PURE__*/forwardRef(({
   children,
   ...props
@@ -75,10 +81,10 @@ const Leaf = /*#__PURE__*/React.memo(({
 });
 Leaf.displayName = "Leaf";
 const updateTopBanner = (content = [], setTopBanner) => {
-  setTopBanner(() => {
-    const firstNode = content ? content[0] : {};
-    return firstNode?.type === "topbanner" ? firstNode : null;
-  });
+  // setTopBanner(() => {
+  //   const firstNode = content ? content[0] : {};
+  //   return firstNode?.type === "topbanner" ? firstNode : null;
+  // });
 };
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -93,13 +99,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     otherProps,
     isIframe,
     theme,
+    showThemeButtons,
     showViewport = false,
-    overrideWrapperStyles = {}
+    overrideWrapperStyles = {},
+    translation
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
   const convertedContent = draftToSlate({
-    data: content
+    data: content,
+    needLayout: otherProps?.needLayout
   });
   const [value, setValue] = useState(convertedContent);
   const [isInteracted, setIsInteracted] = useState(false);
@@ -114,6 +123,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const [breakpoint, setBreakpoint] = useState("");
   const [topBanner, setTopBanner] = useState();
   const debouncedValue = useRef(value);
+  const dialogRef = useRef(null);
   const [size] = useWindowResize();
   const {
     needDotsBG,
@@ -123,12 +133,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     editorClass,
     fixedWidth = "60%",
     fullWidth = "80%",
-    hideTools = []
+    hideTools = [],
+    translationMock
   } = otherProps || {};
+  const translationFn = translation || translationMock;
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     const editor = createEditor();
     editor.needLayout = needLayout;
+    editor.translation = translationFn;
     return withCommon(editor, {
       needLayout
     });
@@ -139,10 +152,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     bannerSpacing,
     pageBgImage,
-    pageColor,
+    pageColor = "",
     color: pageTextColor,
     pageWidth,
     maxWidth: pageMaxWidth,
+    theme: selectedTheme,
     lineHeight
   } = pageSt?.pageProps || {
     bannerSpacing: {
@@ -154,10 +168,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 20,
-    placeHolderColor: invertColor(pageColor || "#FFF"),
+    placeHolderColor: invertColor(pageColor.startsWith("var") ? getVariableValue(pageColor) : pageColor || "#FFF"),
     theme,
     overrideWrapperStyles
   });
+  const [openTheme, setOpenTheme] = useState(false);
+  const [openAITheme, setOpenAITheme] = useState(false);
+  const [, setThemeUpdated] = useState(0);
+  const triggerRender = () => {
+    setThemeUpdated(prev => prev + 1); // Incrementing forces a re-render while updating theme
+  };
+
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   useEffect(() => {
     setValue(draftToSlate({
@@ -171,11 +192,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const debounced = useDebouncedCallback(
   // function
   value => {
+    debouncedValue.current = value;
     const {
       value: strVal,
       ...restVal
     } = getOnSaveData(value);
-    debouncedValue.current = value;
     onSave(strVal, restVal);
   },
   // delay in ms
@@ -186,20 +207,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serializeToText(title?.children) || "Untitled"
+      title: serializeToText(title?.children) || ""
     };
   };
-  const getTitleSaveData = title => {
-    const val = debouncedValue.current;
-    const data = {
-      text: serializeToText(val),
-      title: title
-    };
-    if (customProps.onSaveTitle) {
-      const isTitleChanged = true;
-      customProps.onSaveTitle(JSON.stringify(val), data, isTitleChanged);
-    }
-  };
   const getPreviewImage = async (needBackground = false, options = {}) => {
     ReactEditor.blur(editor);
     const dom = needBackground ? editorWrapper?.current : editorWrapper?.current.getElementsByClassName("innert-editor-textbox")[0];
@@ -296,6 +306,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     redo() {
       editor?.redo();
     },
+    toggleTheme() {
+      setOpenTheme(!openTheme);
+    },
+    toggleAITheme() {
+      setOpenAITheme(!openAITheme);
+    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
@@ -320,7 +336,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = type && !isFreeGrid(content) ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: updatedHideTools || []
+    hideTools: updatedHideTools || [],
+    translation: translation || translationFn
   }) : [];
   const handleEditorChange = newValue => {
     if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
@@ -345,7 +362,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isIframe: isIframe,
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com",
-    getTitleSaveData
+    translation: translationFn
   };
   const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
@@ -367,6 +384,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       ...partialState
     }));
   };
+  const handleDeleteAll = () => {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      editor.deleteFragment();
+      dialogRef.current?.handleClose();
+    }
+  };
   const onKeyDown = useCallback(event => {
     const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
     const isCtrlKey = event.ctrlKey || isMetaKey;
@@ -413,16 +439,27 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       const {
         selection
       } = editor;
+      const everythingSelect = isEverythingSelected(editor);
       event.preventDefault();
-      if (selection) {
-        if (!Range.isCollapsed(selection)) {
-          editor.deleteFragment();
-        } else {
-          editor.deleteBackward({
-            unit: "character"
-          });
+      if (everythingSelect) {
+        dialogRef.current?.handleOpen();
+      } else {
+        if (selection) {
+          if (!Range.isCollapsed(selection)) {
+            editor.deleteFragment();
+          } else {
+            editor.deleteBackward({
+              unit: "character"
+            });
+          }
         }
       }
+    } else if (event.key === "Delete") {
+      const everythingSelect = isEverythingSelected(editor);
+      if (everythingSelect) {
+        event.preventDefault();
+        dialogRef.current?.handleOpen();
+      }
     }
   }, [chars, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -472,6 +509,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return style;
   }, [pageBgImage, pageColor]);
+  const themeProps = getTheme(selectedTheme);
 
   // const handleContextMenu = (e) => {
   //   if (!readOnly) {
@@ -501,14 +539,30 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       console.log("handleCursorScroll", err);
     }
   };
-  return /*#__PURE__*/_jsx(EditorProvider, {
+  return /*#__PURE__*/_jsxs(EditorProvider, {
     theme: theme,
     editor: editor,
-    children: /*#__PURE__*/_jsx(DialogWrapper, {
+    openTheme: openTheme,
+    setOpenTheme: setOpenTheme,
+    triggerRender: triggerRender,
+    children: [showThemeButtons ? /*#__PURE__*/_jsxs("div", {
+      className: "theme-buttons",
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setOpenTheme(true),
+        children: /*#__PURE__*/_jsx(ThemePaintIcon, {})
+      }), /*#__PURE__*/_jsx(IconButton, {
+        onClick: () => setOpenAITheme(true),
+        style: {
+          marginTop: "4px"
+        },
+        children: /*#__PURE__*/_jsx(ThemeAIIcon, {})
+      })]
+    }) : null, /*#__PURE__*/_jsx(DialogWrapper, {
       classes: classes,
       ...props,
       fullScreen: fullScreen,
       footer: footer || "",
+      selectedTheme: selectedTheme,
       children: /*#__PURE__*/_jsxs(Box, {
         component: "div",
         className: `et-wrpr stimulate-${breakpoint} ${editorClass || ""} ${isIframe ? "iframe-editor" : ""}`,
@@ -538,6 +592,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
+                  sx: themeProps?.sxProps || {},
                   "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
@@ -582,7 +637,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme,
-                        otherProps: otherProps
+                        otherProps: otherProps,
+                        customProps: customProps
                       }) : null, /*#__PURE__*/_jsx(RnDCopy, {
                         readOnly: readOnly
                       })]
@@ -592,7 +648,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
                     otherProps: otherProps || {},
-                    editorWrapper: editorWrapper
+                    editorWrapper: editorWrapper,
+                    translation: translation || translationMock
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
@@ -604,6 +661,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     "data-info": outsideEditorClickLabel,
                     onClick: handleFooterClick,
                     children: footer
+                  }), openTheme ? /*#__PURE__*/_jsx(ThemeSettings, {
+                    open: openTheme,
+                    setOpen: setOpenTheme,
+                    editor: editor,
+                    services: otherProps?.services
+                  }) : null, /*#__PURE__*/_jsx(ThemeSettingsAI, {
+                    openAITheme: openAITheme,
+                    setOpenAITheme: setOpenAITheme,
+                    onSaveTheme: otherProps?.onSaveTheme
                   })]
                 })
               }), !readOnly ? /*#__PURE__*/_jsx(PopupTool, {
@@ -612,14 +678,17 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 setIsTextSelected: setIsTextSelected,
                 customProps: customProps,
                 editorWrapper: editorWrapper
-              }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
+              }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                onChange: b => onSwitchBreakpoint(b)
+                show: showViewport,
+                onChange: b => onSwitchBreakpoint(b),
+                translation: translation || translationMock
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
-            handleCodeToText: handleCodeToText
+            handleCodeToText: handleCodeToText,
+            translation: translation || translationMock
           })]
         }, id), /*#__PURE__*/_jsx(FontLoader, {
           otherProps: {
@@ -628,7 +697,16 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           readOnly: readOnly
         })]
       })
-    })
+    }), /*#__PURE__*/_jsx(CustomDialogComponent, {
+      ref: dialogRef,
+      content: "Are you sure you want to delete All the content?",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      onConfirm: () => {
+        handleDeleteAll();
+      },
+      translation: translation || translationMock
+    })]
   });
 });
 CommonEditor.displayName = "CommonEditor";

package/dist/Editor/DialogWrapper.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import ViewportStimulator from "./common/RnD/Theme/ViewportStimulator";
+import MainThemeProvider from "./common/RnD/Theme/MainThemeProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DialogWrapper = props => {
@@ -9,40 +10,45 @@ const DialogWrapper = props => {
     fullScreen,
     onClose,
     children,
-    classes
+    classes,
+    selectedTheme
   } = props;
-  return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
-    className: `dialogComp`,
-    open: fullScreen,
-    fullScreen: fullScreen,
-    onClose: onClose,
-    style: {
-      zIndex: 1000
-    },
-    sx: classes.fullScreenWrapper,
-    children: [/*#__PURE__*/_jsx(DialogTitle, {
+  return fullScreen ? /*#__PURE__*/_jsx(MainThemeProvider, {
+    userSelectedTheme: selectedTheme,
+    children: /*#__PURE__*/_jsxs(Dialog, {
+      className: `dialogComp`,
+      open: fullScreen,
+      fullScreen: fullScreen,
+      onClose: onClose,
       style: {
-        padding: "6px 8px"
+        zIndex: 1000
       },
-      children: /*#__PURE__*/_jsx(Grid, {
+      sx: classes.fullScreenWrapper,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        style: {
+          padding: "6px 8px"
+        },
         children: /*#__PURE__*/_jsx(Grid, {
-          style: {
-            display: "flex",
-            justifyContent: "end"
-          },
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: onClose,
+          children: /*#__PURE__*/_jsx(Grid, {
             style: {
-              background: "rgba(255,255,255,0.5)"
+              display: "flex",
+              justifyContent: "end"
             },
-            children: /*#__PURE__*/_jsx(CloseIcon, {})
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: onClose,
+              style: {
+                background: "rgba(255,255,255,0.5)"
+              },
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
           })
         })
-      })
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      children: children
-    })]
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: children
+      })]
+    })
   }) : /*#__PURE__*/_jsx(ViewportStimulator, {
+    selectedTheme: selectedTheme,
     children: children
   });
 };

package/dist/Editor/Editor.css

@@ -1339,4 +1339,22 @@ code.markcode {
   display: block;
   background-color: #f3f3f3;
   font-family: 'Source Code Pro' !important;
-}
+}
+
+/* Hide the popper when the reference is hidden */
+.hide-popper-on-overlap[data-popper-escaped],
+.hide-popper-on-overlap[data-popper-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.theme-buttons {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin: auto;
+  position: absolute;
+  top: 60px;
+  right: 20px;
+  z-index: 1000;
+}

package/dist/Editor/Elements/AI/AIInput.js

@@ -43,7 +43,8 @@ function AIInput({
   onClickOutside,
   startRecording,
   loading,
-  isMobile
+  isMobile,
+  translation
 }, ref) {
   const {
     theme
@@ -115,7 +116,7 @@ function AIInput({
           children: /*#__PURE__*/_jsx(WaveLoading, {})
         }) : /*#__PURE__*/_jsx(TextareaAutosize, {
           className: "ai-input",
-          placeholder: "Ask AI to write anything...",
+          placeholder: translation("askAItoWrite"),
           ref: inputRef,
           value: inputValue,
           onChange: onInputChange,
@@ -150,7 +151,8 @@ function AIInput({
       children: /*#__PURE__*/_jsx(CustomSelect, {
         ...props,
         onSend: onSend,
-        classes: classes
+        classes: classes,
+        translation: translation
       })
     })]
   });

package/dist/Editor/Elements/AI/CustomSelect.js

@@ -9,7 +9,8 @@ function CustomSelect({
   options,
   onSend,
   show,
-  btnProps = {}
+  btnProps = {},
+  translation
 }) {
   if (show) {
     return /*#__PURE__*/_jsx(Box, {
@@ -31,7 +32,8 @@ function CustomSelect({
               option: option,
               classes: classes,
               onSend: onSend,
-              btnProps: btnProps
+              btnProps: btnProps,
+              translation: translation
             }, i);
           })]
         }, index);
@@ -46,7 +48,8 @@ function DisplayOption({
   option,
   classes,
   onSend,
-  btnProps = {}
+  btnProps = {},
+  translation
 }) {
   const {
     Icon,
@@ -85,7 +88,7 @@ function DisplayOption({
       children: [/*#__PURE__*/_jsxs("div", {
         className: "option-label",
         id: "infinity-select-popover",
-        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), option.label]
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {}), translation(option.label)]
       }), showChild ? /*#__PURE__*/_jsx(IconButton, {
         children: /*#__PURE__*/_jsx(FaChevronRight, {
           color: "#94A3B8",
@@ -108,7 +111,8 @@ function DisplayOption({
           options: option.options,
           onSend: onSend,
           classes: classes,
-          show: open
+          show: open,
+          translation: translation
         })
       })
     })]

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -151,7 +151,8 @@ function PopoverAIInput({
   otherProps,
   editorWrapper = {
     current: null
-  }
+  },
+  translation
 }) {
   const {
     services
@@ -320,7 +321,8 @@ function PopoverAIInput({
               inputValue: inputValue,
               onInputChange: onInputChange,
               onClickOutside: onClickOutside,
-              isMobile: otherProps?.isMobile
+              isMobile: otherProps?.isMobile,
+              translation: translation
             })
           })
         })