@flozy/editor 10.0.3 → 10.0.5

package/dist/Editor/ChatEditor.js

@@ -33,7 +33,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isMobile = false,
     debounceTimeOut = 10,
     isMarkDown = false,
-    markDownContent = ''
+    markDownContent = '',
+    translation
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
@@ -147,7 +148,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const {
     CHARACTERS = [],
-    hideTools
+    hideTools,
+    translationMock
     // needLayout = true,
   } = otherProps || {};
   const mentionsRef = useRef();
@@ -156,7 +158,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,
@@ -176,7 +179,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const chars = type ? Shorthands[type]({
     ...mentions,
     CHARACTERS,
-    hideTools: hideTools
+    hideTools: hideTools,
+    translation: translation || translationMock
   }) : [];
   const Leaf = ({
     attributes,
@@ -307,7 +311,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, {
         onFocus: handleFocus,
         className: "chatEditorRoot",
@@ -318,7 +323,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         spellCheck: true,
         onBlur: handleBlur,
         onKeyDown: onKeyDown,
-        onPaste: handlePaste
+        onPaste: handlePaste,
+        customProps: customProps
       }), !readOnly && isFocused ? /*#__PURE__*/_jsx(MentionsPopup, {
         ref: mentionsRef,
         mentions: mentions,
@@ -328,7 +334,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
         index: index,
         chars: chars,
         type: type,
-        theme: theme
+        theme: theme,
+        customProps: customProps
       }) : null]
     }, id)
   }) : /*#__PURE__*/_jsx("div", {

package/dist/Editor/CommonEditor.js

@@ -15,7 +15,7 @@ import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
-import { getThumbnailImage, invertColor } from "./helper";
+import { getThumbnailImage, invertColor, pageTextStyle } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import { Box, Typography, useTheme } from "@mui/material";
 import Shorthands from "./common/Shorthands";
@@ -95,7 +95,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isIframe,
     theme,
     showViewport = false,
-    overrideWrapperStyles = {}
+    overrideWrapperStyles = {},
+    translation
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -125,12 +126,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
     });
@@ -220,7 +224,9 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
 
   const onSwitchBreakpoint = b => {
     setBreakpoint(b);
-    reRenderAllNodes();
+    setTimeout(() => {
+      reRenderAllNodes();
+    }, 0);
   };
   useImperativeHandle(ref, () => ({
     async getThumbnail(needBackground = false, options = {}) {
@@ -324,6 +330,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     ...mentions,
     CHARACTERS,
     hideTools: updatedHideTools || [],
+    translation: translation || translationFn,
     editor
   }) : [];
   const handleEditorChange = newValue => {
@@ -349,6 +356,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     isIframe: isIframe,
     onDrawerOpen: onDrawerOpen,
     ICON_API: "https://assets.agenciflow.com",
+    translation: translationFn,
     getTitleSaveData
   };
   const lineH = getBreakpointLineSpacing(lineHeight, breakpoint);
@@ -484,9 +492,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     window.open("https://www.flozy.com", "_blank");
   };
   const editorWrapperStyle = useMemo(() => {
-    const style = {
-      color: pageTextColor || ""
-    };
+    const style = {};
     if (pageBgImage && pageBgImage !== "none") {
       style.backgroundImage = `url(${pageBgImage})`;
       style.backgroundSize = `cover`;
@@ -504,6 +510,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   //   }
   // };
 
+  const gradientColor = pageTextStyle(pageTextColor);
   const handleCursorScroll = container => {
     try {
       if (!customProps?.isMobile) {
@@ -551,7 +558,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
             children: /*#__PURE__*/_jsxs(Overlay, {
               children: [/*#__PURE__*/_jsx(Box, {
                 className: `pc-${editorClass || ""} ${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} scrollable-content scrollSmooth ${readOnly ? "readOnlyContainer" : ""}`,
-                sx: classes.slateWrapper,
+                sx: {
+                  ...classes.slateWrapper,
+                  '& span[data-slate-string="true"]': {
+                    ...gradientColor
+                  }
+                },
                 id: "slate-wrapper-scroll-container",
                 ref: editorWrapper,
                 onClick: e => {
@@ -606,7 +618,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         chars: chars,
                         type: type,
                         theme: theme,
-                        otherProps: customProps
+                        otherProps: customProps,
+                        customProps: customProps
                       }) : null, /*#__PURE__*/_jsx(RnDCopy, {
                         readOnly: readOnly
                       })]
@@ -616,7 +629,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
                     otherProps: otherProps || {},
-                    editorWrapper: editorWrapper
+                    editorWrapper: editorWrapper,
+                    translation: translationFn
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
@@ -638,12 +652,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 editorWrapper: editorWrapper
               }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
-                onChange: b => onSwitchBreakpoint(b)
+                onChange: b => onSwitchBreakpoint(b),
+                translation: translationFn
               }) : null]
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
-            handleCodeToText: handleCodeToText
+            handleCodeToText: handleCodeToText,
+            translation: translationFn
           })]
         }, id), /*#__PURE__*/_jsx(FontLoader, {
           otherProps: {
@@ -659,7 +675,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       cancelText: "Cancel",
       onConfirm: () => {
         handleDeleteAll();
-      }
+      },
+      translation: translationFn
     })]
   });
 });

package/dist/Editor/Editor.css

@@ -62,7 +62,7 @@ blockquote {
   height: fit-content;
   max-width: 100%;
   border: none !important;
-  z-index: 1;
+  /* z-index: 1; */
 }
 
 .editor-wrapper table {

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

@@ -30,7 +30,8 @@ const EditorButton = props => {
   const {
     readOnly,
     metadata,
-    isMobile
+    isMobile,
+    translation
   } = customProps;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -135,7 +136,7 @@ const EditorButton = props => {
           justifyContent: "center"
         },
         children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: "Settings",
+          title: translation("Settings"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
@@ -145,7 +146,7 @@ const EditorButton = props => {
             })
           })
         }), /*#__PURE__*/_jsx(Tooltip, {
-          title: "Nav Settings",
+          title: translation("Nav Settings"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
@@ -156,7 +157,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: {
@@ -294,7 +295,7 @@ const EditorButton = props => {
           ...buttonProps,
           children: [BtnIcon && iconPosition === "start" && /*#__PURE__*/_jsx(MUIIcon, {
             ...muiIconProps
-          }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
+          }), label || translation("My Button"), BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
             ...muiIconProps
           })]
         }), !readOnly && buttonRef?.current && /*#__PURE__*/_jsx(Popper, {

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