@flozy/editor 9.8.3 → 9.8.5

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js

@@ -8,12 +8,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Label({
   label,
-  type
+  type,
+  translation
 }) {
   return /*#__PURE__*/_jsxs("span", {
     children: [/*#__PURE__*/_jsx("strong", {
       children: label
-    }), " ", type]
+    }), " ", translation(type)]
   });
 }
 function DisplayHeaderLabel({
@@ -25,85 +26,98 @@ function DisplayHeaderLabel({
     })]
   });
 }
-const typographyOptions = [{
-  id: 11,
-  format: "headingOne",
-  type: "block",
-  title: /*#__PURE__*/_jsx(Label, {
-    label: "H1",
-    type: "Header"
-  }),
-  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-    type: 1
-  }),
-  group: "typography",
-  value: "headingOne"
-}, {
-  id: 12,
-  format: "headingTwo",
-  type: "block",
-  title: /*#__PURE__*/_jsx(Label, {
-    label: "H2",
-    type: "Header"
-  }),
-  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-    type: 2
-  }),
-  group: "typography",
-  value: "headingTwo"
-}, {
-  id: 13,
-  format: "headingThree",
-  type: "block",
-  title: /*#__PURE__*/_jsx(Label, {
-    label: "H3",
-    type: "Header"
-  }),
-  label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
-    type: 3
-  }),
-  group: "typography",
-  value: "headingThree"
-}, {
-  id: 14,
-  format: "fontSize",
-  type: "mark",
-  title: /*#__PURE__*/_jsx(Label, {
+function getTypographyOptions(translation) {
+  return [{
+    id: 11,
+    format: "headingOne",
+    type: "block",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "H1",
+      type: "Header",
+      translation: translation
+    }),
+    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+      type: 1
+    }),
+    group: "typography",
+    value: "headingOne"
+  }, {
+    id: 12,
+    format: "headingTwo",
+    type: "block",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "H2",
+      type: "Header",
+      translation: translation
+    }),
+    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+      type: 2
+    }),
+    group: "typography",
+    value: "headingTwo"
+  }, {
+    id: 13,
+    format: "headingThree",
+    type: "block",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "H3",
+      type: "Header",
+      translation: translation
+    }),
+    label: /*#__PURE__*/_jsx(DisplayHeaderLabel, {
+      type: 3
+    }),
+    group: "typography",
+    value: "headingThree"
+  }, {
+    id: 14,
+    format: "fontSize",
+    type: "mark",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "L",
+      type: "Large",
+      translation: translation
+    }),
     label: "L",
-    type: "Large"
-  }),
-  label: "L",
-  group: "typography",
-  value: "huge"
-}, {
-  id: 15,
-  format: "fontSize",
-  type: "mark",
-  title: /*#__PURE__*/_jsx(Label, {
+    group: "typography",
+    value: "huge"
+  }, {
+    id: 15,
+    format: "fontSize",
+    type: "mark",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "M",
+      type: "Medium",
+      translation: translation
+    }),
     label: "M",
-    type: "Medium"
-  }),
-  label: "M",
-  group: "typography",
-  value: "medium"
-}, {
-  id: 16,
-  format: "fontSize",
-  type: "mark",
-  title: /*#__PURE__*/_jsx(Label, {
+    group: "typography",
+    value: "medium"
+  }, {
+    id: 16,
+    format: "fontSize",
+    type: "mark",
+    title: /*#__PURE__*/_jsx(Label, {
+      label: "S",
+      type: "Small",
+      translation: translation
+    }),
     label: "S",
-    type: "Small"
-  }),
-  label: "S",
-  group: "typography",
-  value: "small"
-}];
+    group: "typography",
+    value: "small"
+  }];
+}
 function SelectTypography({
   editor,
   classes,
-  closeMainPopup
+  closeMainPopup,
+  customProps
 }) {
   const [size] = useWindowResize();
+  const {
+    translation
+  } = customProps;
+  const typographyOptions = getTypographyOptions(translation);
   const updateMarkData = newVal => {
     const val = activeMark(editor, "fontSize");
     let upData = {

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -56,20 +56,23 @@ const MiniTextFormat = props => {
         }), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup
+          closeMainPopup: closeMainPopup,
+          customProps: customProps
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine"
         }), /*#__PURE__*/_jsx(SelectList, {
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup
+          closeMainPopup: closeMainPopup,
+          customProps: customProps
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectAlignment, {
           fontAlign: fontAlign,
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup
+          closeMainPopup: closeMainPopup,
+          customProps: customProps
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine mr-1"
         }), /*#__PURE__*/_jsx(SelectFontSize, {
@@ -80,20 +83,23 @@ const MiniTextFormat = props => {
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
-            ...m
+            ...m,
+            customProps: customProps
           }, `pptool_mark_${i}_${m.id}`);
         }), /*#__PURE__*/_jsx(MiniColorPicker, {
           format: textColorFormat,
           classes: classes,
           activeColor: activeColor,
           id: "11_cc",
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }), /*#__PURE__*/_jsx(MiniColorPicker, {
           format: textBgFormat,
           classes: classes,
           activeColor: activeBg,
           id: "12_cc",
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }), /*#__PURE__*/_jsx("div", {
           className: "verticalLine ml-1 mr-1"
         }), /*#__PURE__*/_jsx(LinkButton, {
@@ -126,7 +132,8 @@ const MiniTextFormat = props => {
               children: [/*#__PURE__*/_jsx(PopperHeader, {
                 title: "Text Settings",
                 classes: classes,
-                onClose: () => setAnchorEl(null)
+                onClose: () => setAnchorEl(null),
+                customProps: customProps
               }), /*#__PURE__*/_jsx(TextFormat, {
                 editor: editor,
                 classes: classes,

package/dist/Editor/Toolbar/PopupTool/PopperHeader.js

@@ -35,9 +35,13 @@ const PopperHeader = props => {
     fullScreen,
     toggleFullscreen,
     search,
-    onSearch
+    onSearch,
+    customProps
   } = props;
   const [openSearch, setOpenSearch] = useState(false);
+  const {
+    translation
+  } = customProps;
   const handleSearchButton = () => {
     setOpenSearch(!openSearch);
   };
@@ -61,7 +65,7 @@ const PopperHeader = props => {
           fontWeight: "700",
           color: "#000"
         },
-        children: title
+        children: translation(title)
       }), /*#__PURE__*/_jsxs(Grid, {
         sx: classes.textFormatLabel,
         justifyContent: "end",
@@ -82,7 +86,7 @@ const PopperHeader = props => {
             handleChange: onSearch
           })]
         }) : null, needFullscreen ? /*#__PURE__*/_jsx(Tooltip, {
-          title: "Toggle Fullscreen",
+          title: translation("toggleFullScreen"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             style: {
@@ -94,7 +98,7 @@ const PopperHeader = props => {
             children: fullScreen ? /*#__PURE__*/_jsx(CloseFullscreenIcon, {}) : /*#__PURE__*/_jsx(ToggleFullScreenIcon, {})
           })
         }) : null, /*#__PURE__*/_jsx(Tooltip, {
-          title: "Close",
+          title: translation("Close"),
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             sx: classes.closeBtn,

package/dist/Editor/Toolbar/PopupTool/TemplateCard.js

@@ -6,7 +6,8 @@ const PreviewAndSelect = props => {
   const {
     classes,
     data,
-    onSelectTemplate
+    onSelectTemplate,
+    translation
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     className: "template-card-action",
@@ -15,12 +16,12 @@ const PreviewAndSelect = props => {
     children: [/*#__PURE__*/_jsx(Button, {
       className: "blueBtn",
       onClick: onSelectTemplate(data),
-      children: "Select"
+      children: translation("Select")
     }), /*#__PURE__*/_jsx(Button, {
       href: data?.previewLink,
       target: "_blank",
       className: "outlineBtn",
-      children: "Preview"
+      children: translation("Preview")
     })]
   });
 };
@@ -29,8 +30,12 @@ const TemplateCard = props => {
     classes,
     m,
     onSelectTemplate,
-    fullScreen
+    fullScreen,
+    customProps
   } = props;
+  const {
+    translation
+  } = customProps;
   return /*#__PURE__*/_jsx(Grid, {
     item: true,
     xs: 4,
@@ -53,7 +58,8 @@ const TemplateCard = props => {
         }), /*#__PURE__*/_jsx(PreviewAndSelect, {
           classes: classes,
           onSelectTemplate: onSelectTemplate,
-          data: m
+          data: m,
+          translation: translation
         })]
       }), /*#__PURE__*/_jsx(CardContent, {
         sx: classes.templateCardTitle,

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -33,6 +33,9 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
+  const {
+    translation
+  } = customProps;
   const {
     element: pageSt
   } = getPageSettings(editor) || {};
@@ -129,7 +132,7 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Font Family"
+            children: translation("fontFamily")
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -141,7 +144,7 @@ const TextFormat = props => {
               val: Object.values(fontFamilyMap)[0]
             }),
             className: "npr-0",
-            children: "Default Text"
+            children: translation("defaultText")
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
@@ -166,7 +169,7 @@ const TextFormat = props => {
           variant: "body1",
           color: "primary",
           sx: classes.typoLabel3,
-          children: "Font Weight"
+          children: translation("fontWeight")
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 12,
@@ -187,7 +190,7 @@ const TextFormat = props => {
           variant: "body1",
           color: "primary",
           sx: classes.typoLabel3,
-          children: "Font Size"
+          children: translation("fontSize")
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 12,
@@ -220,7 +223,7 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Text Color"
+            children: translation("textColor")
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -230,7 +233,7 @@ const TextFormat = props => {
             onClick: handleDefault({
               format: "color"
             }),
-            children: "Default Color"
+            children: translation("defaultColor")
           })
         })]
       }), /*#__PURE__*/_jsx(Grid, {
@@ -241,7 +244,7 @@ const TextFormat = props => {
           editor: editor,
           showHex: false,
           rounded: true,
-          title: "Text Color",
+          title: translation("textColor"),
           id: "11_cc",
           classes: classes
         }, "11_cc")
@@ -260,7 +263,7 @@ const TextFormat = props => {
             variant: "body1",
             color: "primary",
             sx: classes.typoLabel,
-            children: "Background Color"
+            children: translation("backgroundColor")
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -274,7 +277,7 @@ const TextFormat = props => {
               onClick: handleDefault({
                 format: "bgColor"
               }),
-              children: "Default Color"
+              children: translation("defaultColor")
             })
           })
         })]
@@ -288,7 +291,7 @@ const TextFormat = props => {
           editor: editor,
           showHex: false,
           rounded: true,
-          title: "Text Background Color",
+          title: translation("textBgColor"),
           classes: classes,
           id: "12_cc"
         }, "12_cc")
@@ -306,7 +309,7 @@ const TextFormat = props => {
         variant: "body1",
         color: "primary",
         sx: classes.typoLabel2,
-        children: "Alignment"
+        children: translation("Alignment")
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -314,7 +317,8 @@ const TextFormat = props => {
         children: fontAlign?.map((m, i) => {
           return /*#__PURE__*/_jsx(BlockButton, {
             editor: editor,
-            ...m
+            ...m,
+            customProps: customProps
           }, `pptool_block_${i}_${m.id}`);
         })
       })]
@@ -326,7 +330,7 @@ const TextFormat = props => {
         variant: "body1",
         color: "primary",
         sx: classes.typoLabel2,
-        children: "Lists"
+        children: translation("Lists")
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
         xs: 12,
@@ -335,7 +339,8 @@ const TextFormat = props => {
           const Comp = ButtonComp[m?.component] || BlockButton;
           return /*#__PURE__*/_jsx(Comp, {
             editor: editor,
-            ...m
+            ...m,
+            customProps: customProps
           }, `pptool_block_${i}_${m.id}`);
         })
       })]
@@ -351,7 +356,7 @@ const TextFormat = props => {
         variant: "body1",
         color: "primary",
         sx: classes.typoLabel,
-        children: "Typography"
+        children: translation("Typography")
       }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 12,
@@ -360,11 +365,13 @@ const TextFormat = props => {
         children: [/*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup || onClose
+          closeMainPopup: closeMainPopup || onClose,
+          customProps: customProps
         }), fontStyle?.map((m, i) => {
           return /*#__PURE__*/_jsx(MarkButton, {
             editor: editor,
-            ...m
+            ...m,
+            customProps: customProps
           }, `pptool_mark_${i}_${m.id}`);
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
@@ -373,7 +380,8 @@ const TextFormat = props => {
         }, link.id), /*#__PURE__*/_jsx(SelectSuperSubscript, {
           classes: classes,
           editor: editor,
-          closeMainPopup: closeMainPopup || onClose
+          closeMainPopup: closeMainPopup || onClose,
+          customProps: customProps
         })]
       })]
     }), /*#__PURE__*/_jsx(Grid, {
@@ -392,7 +400,7 @@ const TextFormat = props => {
         variant: "body1",
         color: "primary",
         sx: classes.typoLabel3,
-        children: "Decorations"
+        children: translation("Decorations")
       })
     }), /*#__PURE__*/_jsxs(Grid, {
       item: true,
@@ -412,7 +420,7 @@ const TextFormat = props => {
           style: {
             background: bqBgColor
           },
-          children: "Colorbox"
+          children: translation("Colorbox")
         }), /*#__PURE__*/_jsx("div", {
           className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
@@ -433,7 +441,7 @@ const TextFormat = props => {
               ...getBorderColor(bqColor || "transparent", 3),
               borderWidth: bqColor ? "0px 0px 0px 3px" : "0px"
             },
-            children: "Quote"
+            children: translation("Quote")
           })
         }), /*#__PURE__*/_jsx("div", {
           className: "vl"

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -11,6 +11,9 @@ import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
 import { hideSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
+const isSlateDOM = event => {
+  return event.target.getAttribute("data-slate-string") === "true";
+};
 const PopupTool = props => {
   const {
     theme,
@@ -33,6 +36,7 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const updateAnchorEl = isScroll => {
     try {
       const isHavingSelection = selection && !Range.isCollapsed(selection);
@@ -104,8 +108,20 @@ const PopupTool = props => {
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
-      if (e.target !== document.body) {
+
+      if (isSlateDOM(e)) {
+        return;
+      }
+      const wrapper = document.getElementById("slate-wrapper-scroll-container");
+      const isInsideWrapper = wrapper && wrapper.contains(e.target);
+      if (isInsideWrapper) {
+        return;
+      }
+      if (e.target === document.body) {
         // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close
+        return;
+      }
+      if (!isMobile) {
         handleClose();
       }
     },

package/dist/Editor/Toolbar/Toolbar.js

@@ -50,7 +50,8 @@ export const RenderToolbarIcon = props => {
       case "block":
         return /*#__PURE__*/_jsx(BlockButton, {
           ...element,
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }, element.id);
       case "mark":
         return /*#__PURE__*/_jsx(MarkButton, {
@@ -105,7 +106,8 @@ export const RenderToolbarIcon = props => {
           editor: editor,
           customProps: customProps,
           icoBtnType: icoBtnType,
-          lbT: element.lbT
+          lbT: element.lbT,
+          onClose: () => {}
         }, element.id);
       case "color-picker":
         return /*#__PURE__*/_jsx(ColorPicker, {
@@ -117,12 +119,14 @@ export const RenderToolbarIcon = props => {
       case "table":
         return /*#__PURE__*/_jsx(TableSelector, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "dataView":
         return /*#__PURE__*/_jsx(DataViewButton, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "id":
         return /*#__PURE__*/_jsx(Id, {
@@ -151,21 +155,25 @@ export const RenderToolbarIcon = props => {
       case "newLine":
         return /*#__PURE__*/_jsx(NewLineButton, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "accordion":
         return /*#__PURE__*/_jsx(AccordionButton, {
-          editor: editor
+          editor: editor,
+          customProps: customProps
         }, element.id);
       case "signature":
         return /*#__PURE__*/_jsx(SignatureButton, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "button":
         return /*#__PURE__*/_jsx(ButtonToolIcon, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "page-settings":
         return /*#__PURE__*/_jsx(PageSettingsButton, {
@@ -176,7 +184,8 @@ export const RenderToolbarIcon = props => {
       case "carousel":
         return /*#__PURE__*/_jsx(CarouselButton, {
           editor: editor,
-          icoBtnType: icoBtnType
+          icoBtnType: icoBtnType,
+          customProps: customProps
         }, element.id);
       case "chip-text":
         return /*#__PURE__*/_jsx(ChipTextButton, {
@@ -284,7 +293,8 @@ const Toolbar = props => {
       })
     }, index)), /*#__PURE__*/_jsx(HtmlContextMenu, {
       editor: editor,
-      handleCodeToText: handleCodeToText
+      handleCodeToText: handleCodeToText,
+      customProps: customProps
     })]
   });
 };