@flozy/editor 9.1.3 → 9.1.5

package/dist/Editor/ChatEditor.js

@@ -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({
@@ -144,7 +145,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const {
     CHARACTERS = [],
-    hideTools
+    hideTools,
+    translationMock
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
@@ -153,7 +155,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     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,
@@ -173,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,
@@ -282,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,
@@ -292,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,
@@ -302,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

@@ -101,7 +101,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     theme,
     showThemeButtons,
     showViewport = false,
-    overrideWrapperStyles = {}
+    overrideWrapperStyles = {},
+    translation
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -132,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
     });
@@ -332,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)) {
@@ -356,7 +361,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     page_title: page_title,
     isIframe: isIframe,
     onDrawerOpen: onDrawerOpen,
-    ICON_API: "https://assets.agenciflow.com"
+    ICON_API: "https://assets.agenciflow.com",
+    translation: translationFn
   };
   const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
   const renderElement = useCallback(props => {
@@ -631,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
                       })]
@@ -641,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)",
@@ -673,12 +681,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
               }) : null, !readOnly ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
                 show: showViewport,
-                onChange: b => onSwitchBreakpoint(b)
+                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: {
@@ -694,7 +704,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       cancelText: "Cancel",
       onConfirm: () => {
         handleDeleteAll();
-      }
+      },
+      translation: translation || translationMock
     })]
   });
 });

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
             })
           })
         })

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -67,7 +67,8 @@ const Accordion = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    translation
   } = customProps;
   const [toggle, setToggle] = useState(false);
   const [openSetttings, setOpenSettings] = useState(false);
@@ -97,7 +98,7 @@ const Accordion = props => {
         width: "fit-content"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Settings",
+        title: translation("accordianSettings"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
@@ -106,7 +107,7 @@ const Accordion = props => {
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
+        title: translation("Delete"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",

package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js

@@ -10,8 +10,11 @@ const AccordionBtnPopup = props => {
     onClose,
     customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Settings",
+    title: translation("Accordion Settings"),
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -6,8 +6,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionButton = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const handleInsertAccordion = () => {
     insertAccordion(editor);
   };
@@ -15,7 +19,7 @@ const AccordionButton = props => {
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "accordion"
     }),
-    title: "Accordion",
+    title: translation("Accordion"),
     onClick: handleInsertAccordion,
     style: {
       marginLeft: "0px"

package/dist/Editor/Elements/Accordion/AccordionTitlePopup.js

@@ -9,8 +9,11 @@ const AccordionTitlePopup = props => {
     onClose,
     customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Title",
+    title: translation("Accordion Title"),
     type: "accordionTitleStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/AppHeader/AppHeaderButton.js

@@ -7,14 +7,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const AppHeaderButton = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const handleClick = () => {
     insertAppHeader(editor, {});
     insertNewLine(editor);
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "App Header",
+    title: translation("appHeaderButton"),
     onClick: handleClick,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "appHeader"

package/dist/Editor/Elements/AppHeader/AppHeaderPopup.js

@@ -10,8 +10,11 @@ const AppHeaderPopup = props => {
     onDelete,
     customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "App Header",
+    title: translation("appHeaderButton"),
     type: "gridItemStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Attachments/AttachmentsButton.js

@@ -14,6 +14,9 @@ const AttachmentsButton = props => {
     icoBtnType
   } = props;
   const [open, SetOpen] = useState(false);
+  const {
+    translation
+  } = customProps;
   const handleClick = () => {
     SetOpen(true);
   };
@@ -28,7 +31,7 @@ const AttachmentsButton = props => {
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
-      title: "Doc Upload",
+      title: translation("Doc Upload"),
       onClick: handleClick,
       icon: /*#__PURE__*/_jsx(Icon, {
         icon: "docsUpload"

package/dist/Editor/Elements/Button/ButtonPopup.js

@@ -12,8 +12,11 @@ const ButtonPopup = props => {
     styleName,
     onDelete
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Button",
+    title: translation("Button"),
     type: styleName ? "" : "buttonStyle",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/Button/ButtonToolIcon.js

@@ -6,13 +6,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const ButtonToolIcon = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const handleInsertButton = () => {
     insertButton(editor);
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "Button",
+    title: translation("Button"),
     onClick: handleInsertButton,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "button"

package/dist/Editor/Elements/Button/EditorButton.js

@@ -32,7 +32,8 @@ const EditorButton = props => {
   const {
     readOnly,
     metadata,
-    isMobile
+    isMobile,
+    translation
   } = customProps;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -143,7 +144,7 @@ const EditorButton = props => {
           justifyContent: "center"
         },
         children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: "Settings",
+          title: translation("Settings"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
@@ -153,7 +154,7 @@ const EditorButton = props => {
             })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Nav Settings",
+          title: translation("Nav Settings"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
@@ -164,7 +165,7 @@ const EditorButton = props => {
           })
         }), hideOpenLink ? null : /*#__PURE__*/_jsx(_Fragment, {
           children: /*#__PURE__*/_jsx(Tooltip, {
-            title: "Open Link",
+            title: translation("Open Link"),
             arrow: true,
             children: /*#__PURE__*/_jsx(Box, {
               sx: {
@@ -305,7 +306,7 @@ const EditorButton = props => {
               paddingRight: "4px"
             },
             props: customProps
-          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
+          }), label || translation("My Button"), BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
             iconName: buttonIcon,
             style: {
               paddingLeft: "4px",

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -29,7 +29,8 @@ const Carousel = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    translation
   } = customProps;
   const editor = useSlateStatic();
   const [showOptions, setShowOptions] = useState(false);
@@ -96,21 +97,21 @@ const Carousel = props => {
         left: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: edit ? "Save Carousel" : "Edit Carousel",
+        title: edit ? translation("Save Carousel") : translation("Edit Carousel"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onEdit,
           children: !edit ? /*#__PURE__*/_jsx(EditIcon, {}) : /*#__PURE__*/_jsx(CheckCircleIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Slide",
+        title: translation("Add Slide"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddSlide,
           children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Carousel",
+        title: translation("Delete Carousel"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,

package/dist/Editor/Elements/Carousel/CarouselButton.js

@@ -6,13 +6,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselButton = props => {
   const {
     editor,
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const handleClick = () => {
     insertCarousel(editor);
   };
   return /*#__PURE__*/_jsx(ToolbarIcon, {
-    title: "Carousel",
+    title: translation("Carousel"),
     onClick: handleClick,
     icon: /*#__PURE__*/_jsx(CarouselElementIcon, {}),
     icoBtnType: icoBtnType

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -13,7 +13,8 @@ const CarouselItem = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    translation
   } = customProps;
   const editor = useSlateStatic();
   const onMenuClick = val => () => {
@@ -41,7 +42,7 @@ const CarouselItem = props => {
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete Slide",
+        title: translation("Delete Slide"),
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onMenuClick("delete"),

package/dist/Editor/Elements/ChipText/ChipTextPopup.js

@@ -10,8 +10,11 @@ const ChipTextPopup = props => {
     onDelete,
     customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Chip Text",
+    title: translation("Chip Text"),
     type: "ChipTextPopup",
     element: element,
     onSave: onSave,

package/dist/Editor/Elements/CodeToText/CodeToText.js

@@ -11,7 +11,8 @@ const CodeToText = props => {
     html,
     action,
     location,
-    handleCodeToText
+    handleCodeToText,
+    translation
   } = props;
   const codeToTextRef = useRef();
   const wrapperRef = useRef();
@@ -89,7 +90,7 @@ const CodeToText = props => {
           id: "",
           value: html,
           onChange: codeOnChange,
-          placeholder: "Write html here..."
+          placeholder: translation("writeHTMLText")
         }), /*#__PURE__*/_jsx("div", {
           style: {
             display: "flex",
@@ -110,11 +111,11 @@ const CodeToText = props => {
         children: [/*#__PURE__*/_jsx("button", {
           onClick: addHtml,
           className: "done",
-          children: "Done"
+          children: translation("Done")
         }), /*#__PURE__*/_jsx("button", {
           className: "clear",
           onClick: clearHtml,
-          children: "Clear"
+          children: translation("Clear")
         })]
       })]
     })

package/dist/Editor/Elements/CodeToText/HtmlContextMenu.js

@@ -7,13 +7,17 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const HtmlContextMenu = props => {
   const {
     editor,
-    handleCodeToText
+    handleCodeToText,
+    customProps
   } = props;
   const [selection, setSelection] = useState();
   const [showMenu, {
     top,
     left
   }] = useContextMenu(editor, "htmlCode", setSelection);
+  const {
+    translation
+  } = customProps;
   const handleEditHtml = () => {
     Transforms.select(editor, selection);
     const parentPath = Path.parent(selection.focus.path);
@@ -37,7 +41,7 @@ const HtmlContextMenu = props => {
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "pen"
       }), /*#__PURE__*/_jsx("span", {
-        children: "Edit HTML"
+        children: translation("Edit HTML")
       })]
     })
   });

package/dist/Editor/Elements/Colorbox/ColorboxButton.js

@@ -9,8 +9,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const ColorboxButton = props => {
   const editor = useSlateStatic();
   const {
-    icoBtnType
+    icoBtnType,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   const onClick = () => {
     toggleBlock(editor, "blockquote", false, {
       bgColor: "rgb(227, 236, 255)"
@@ -19,7 +23,7 @@ const ColorboxButton = props => {
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ToolbarIcon, {
-      title: "Colorbox",
+      title: translation("Colorbox"),
       onClick: onClick,
       icon: /*#__PURE__*/_jsx(Icon, {
         icon: "colorbox"

package/dist/Editor/Elements/DataView/DataView.js

@@ -24,7 +24,8 @@ const DataView = props => {
   } = props;
   const {
     CHARACTERS,
-    readOnly
+    readOnly,
+    translation
   } = customProps || {};
   const {
     properties,
@@ -114,9 +115,11 @@ const DataView = props => {
         readOnly: readOnly,
         title: title,
         onTitleChange: onTitleChange,
-        path: path
+        path: path,
+        translation: translation
       }), /*#__PURE__*/_jsx(LayoutView, {
         readOnly: readOnly,
+        translation: translation,
         children: children
       })]
     })