@flozy/editor 10.0.2 → 10.0.3

package/dist/Editor/common/LinkSettings/index.js

@@ -4,8 +4,8 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography, useMediaQuery } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
@@ -43,10 +43,9 @@ export default function LinkSettings(props) {
     allowTrigger
   } = props;
   const {
-    tagName,
-    translation
+    isMobile,
+    tagName
   } = customProps;
-  const isMobile = useMediaQuery('(max-width: 899px)');
   const navOptions = getNavOptions(customProps.hideTools, tagName, allowTrigger);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
@@ -64,70 +63,64 @@ export default function LinkSettings(props) {
     });
   };
   if (isMobile) {
-    return /*#__PURE__*/_jsx(SwipeableDrawer, {
+    return /*#__PURE__*/_jsxs(SwipeableDrawer, {
       open: true,
       onClose: handleClose,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        sx: classes.drawerContainer,
-        children: [/*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle1",
-          gutterBottom: true,
-          sx: {
-            fontWeight: 600
-          },
-          className: "link-settings-title",
-          children: translation("dialogueTitle")
-        }), /*#__PURE__*/_jsx(Select, {
-          size: "small",
-          fullWidth: true,
-          value: nav?.value,
-          onChange: e => {
-            const {
-              value
-            } = e.target;
-            const selected = getNav(value, navOptions);
-            setNav(selected);
-            setNavValue("");
-          },
-          displayEmpty: true,
-          MenuProps: {
-            sx: classes.customSelect
-          },
-          children: navOptions.map((navOption, i) => {
-            return /*#__PURE__*/_jsx(MenuItem, {
-              value: navOption.value,
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                children: translation(navOption.label)
-              })
-            }, i);
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          sx: {
-            paddingTop: "14px"
-          },
-          children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
-            placeholder: translation(nav?.placeholder),
-            nav: nav,
-            onChange: onChange,
-            value: navValue,
-            openInNewTab: openInNewTab,
-            onNewTabChange: () => setOpenInNewTab(prev => !prev),
-            services: customProps.services,
-            classes: classes,
-            translation: translation
-          })
-        }), /*#__PURE__*/_jsx(Box, {
-          component: "div",
-          sx: classes.mobileActionBtns,
-          children: /*#__PURE__*/_jsx(ActionsButtons, {
-            classes: classes,
-            onCancel: handleClose,
-            onSave: onSubmit,
-            translation: translation
-          })
-        })]
-      })
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: "subtitle1",
+        gutterBottom: true,
+        sx: {
+          fontWeight: 600
+        },
+        children: "What do you want to link to?"
+      }), /*#__PURE__*/_jsx(Select, {
+        size: "small",
+        fullWidth: true,
+        value: nav?.value,
+        onChange: e => {
+          const {
+            value
+          } = e.target;
+          const selected = getNav(value, navOptions);
+          setNav(selected);
+          setNavValue("");
+        },
+        displayEmpty: true,
+        MenuProps: {
+          sx: classes.customSelect
+        },
+        children: navOptions.map((navOption, i) => {
+          return /*#__PURE__*/_jsx(MenuItem, {
+            value: navOption.value,
+            children: /*#__PURE__*/_jsx(Typography, {
+              variant: "body2",
+              children: navOption.label
+            })
+          }, i);
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: {
+          paddingTop: "14px"
+        },
+        children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
+          placeholder: nav?.placeholder,
+          nav: nav,
+          onChange: onChange,
+          value: navValue,
+          openInNewTab: openInNewTab,
+          onNewTabChange: () => setOpenInNewTab(prev => !prev),
+          services: customProps.services,
+          classes: classes
+        })
+      }), /*#__PURE__*/_jsx(Box, {
+        component: "div",
+        sx: classes.mobileActionBtns,
+        children: /*#__PURE__*/_jsx(ActionsButtons, {
+          classes: classes,
+          onCancel: handleClose,
+          onSave: onSubmit
+        })
+      })]
     });
   } else {
     return /*#__PURE__*/_jsxs(Dialog, {
@@ -136,25 +129,15 @@ export default function LinkSettings(props) {
       sx: classes.dialogContainer,
       fullWidth: true,
       maxWidth: "sm",
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        direction: "row",
-        sx: {
-          justifyContent: "space-between",
-          alignItems: "center"
-        },
-        className: "dialog-title",
-        children: [/*#__PURE__*/_jsx(DialogTitle, {
-          children: translation("dialogueTitle")
-        }), /*#__PURE__*/_jsx(IconButton, {
-          "aria-label": "close",
-          onClick: handleClose,
-          sx: classes.closeIcon,
-          children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
-        })]
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: "What do you want to link to?"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        "aria-label": "close",
+        onClick: handleClose,
+        sx: classes.closeIcon,
+        children: /*#__PURE__*/_jsx(CloseIcon, {})
       }), /*#__PURE__*/_jsx(DialogContent, {
         dividers: true,
-        className: "link-settings-content",
         children: /*#__PURE__*/_jsxs(Grid, {
           container: true,
           spacing: 2,
@@ -162,16 +145,14 @@ export default function LinkSettings(props) {
             item: true,
             xs: 6,
             sx: classes.gridDivider,
-            className: "radioBtnGrp",
             children: /*#__PURE__*/_jsx(FormControl, {
-              sx: classes.customRadioBtn,
               children: /*#__PURE__*/_jsx(RadioGroup, {
                 value: nav?.value,
                 children: navOptions?.map((navOption, i) => {
                   return /*#__PURE__*/_jsx(FormControlLabel, {
                     value: navOption.value,
                     control: /*#__PURE__*/_jsx(Radio, {}),
-                    label: translation(navOption.label),
+                    label: navOption.label,
                     onChange: () => {
                       setNav(navOption);
                       setNavValue("");
@@ -184,15 +165,14 @@ export default function LinkSettings(props) {
             item: true,
             xs: 6,
             children: NavSettings && /*#__PURE__*/_jsx(NavSettings, {
-              placeholder: translation(nav?.placeholder),
+              placeholder: nav?.placeholder,
               nav: nav,
               onChange: onChange,
               value: navValue,
               openInNewTab: openInNewTab,
               onNewTabChange: () => setOpenInNewTab(prev => !prev),
               services: customProps.services,
-              classes: classes,
-              translation: translation
+              classes: classes
             })
           })]
         })
@@ -200,8 +180,7 @@ export default function LinkSettings(props) {
         children: /*#__PURE__*/_jsx(ActionsButtons, {
           classes: classes,
           onCancel: handleClose,
-          onSave: onSubmit,
-          translation: translation
+          onSave: onSubmit
         })
       })]
     });
@@ -210,18 +189,17 @@ export default function LinkSettings(props) {
 function ActionsButtons({
   classes,
   onCancel,
-  onSave,
-  translation
+  onSave
 }) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onClick: onCancel,
       sx: classes.closeBtn,
-      children: translation("Cancel")
+      children: "Cancel"
     }), /*#__PURE__*/_jsx(Button, {
       onClick: onSave,
       sx: classes.saveBtn,
-      children: translation("Save")
+      children: "Save"
     })]
   });
 }

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -13,7 +13,7 @@ export const getNavOptions = (hideTools = [], tagName = "", allowTrigger) => {
   }, {
     label: "Web Address",
     value: "webAddress",
-    placeholder: "httpsText",
+    placeholder: "https://",
     showOpenInNewTab: true
   }, {
     label: "Select Page and Section",

package/dist/Editor/common/LinkSettings/style.js

@@ -1,7 +1,7 @@
 const ButtonNavSettingsStyles = theme => ({
   dialogContainer: {
     "& .MuiDialogContent-root": {
-      padding: "0px 16px"
+      padding: "0px 20px"
     },
     "& .MuiDialogActions-root": {
       padding: "10px"
@@ -18,187 +18,62 @@ const ButtonNavSettingsStyles = theme => ({
       padding: "14px"
     },
     "& .MuiPaper-root": {
-      padding: "10px !important",
-      borderRadius: "20px !important",
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      backgroundColor: theme?.palette?.editor?.background,
       "& .MuiTypography-root": {
         color: theme?.palette?.editor?.textColor
       },
+      "& .MuiInputBase-root": {
+        border: `1px solid ${theme?.palette?.editor?.textColor}`,
+        color: theme?.palette?.editor?.textColor
+      },
       "& .MuiSvgIcon-root": {
         color: theme?.palette?.editor?.textColor
       },
       "& .MuiFormLabel-root": {
         color: theme?.palette?.editor?.textColor,
-        backgroundColor: "transparent"
-      }
-    },
-    "& .dialog-title": {
-      "& .MuiTypography-root": {
-        fontSize: "18px",
-        padding: "12px",
-        fontWeight: 600
-      }
-    },
-    "& .link-settings-content": {
-      margin: "0px 10px",
-      borderTop: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-      borderBottom: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-      overflow: "hidden !important",
-      "& .MuiInputBase-root, fieldset": {
-        background: theme?.palette?.editor?.inputFieldBgColor,
-        borderRadius: "8px",
-        border: "unset",
-        "& fieldset": {
-          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
-          background: "transparent",
-          borderRadius: "8px"
-        },
-        "& input": {
-          border: `1px solid transparent`,
-          background: theme?.palette?.editor?.inputFieldBgColor,
-          borderRadius: "8px",
-          color: theme?.palette?.editor?.textColor
-        }
-      },
-      "& .radioBtnGrp": {
-        paddingRight: "0px",
-        paddingLeft: "0px"
-      }
-    },
-    "& .MuiFormControlLabel-root": {
-      "& .MuiCheckbox-root": {
-        "& svg": {
-          color: `${theme?.palette?.editor?.radioBtnBorder}`
-        }
-      }
-    },
-    "& .ccheckbox-primary": {
-      padding: "0px",
-      "& .MuiCheckbox-root": {
-        padding: "8px 8px 8px 10px",
-        "&:hover": {
-          background: "unset !important"
-        }
-      },
-      "& button": {
-        width: "18px !important",
-        height: "18px !important",
-        borderRadius: "3px",
-        border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
-        "& svg": {
-          width: "14px",
-          height: "14px"
-        }
-      },
-      "& .checkedIcon": {
-        background: "#2563EB",
-        borderColor: "#2563EB",
-        padding: "0px"
-      },
-      "& .unCheckedIcon": {
-        background: theme?.palette?.editor?.checkedIconBg
-      },
-      "& p": {
-        margin: "0px !important"
-      }
-    },
-    "& .trigger-text": {
-      fontSize: "14px !important",
-      fontWeight: 400,
-      fontFamily: "'Inter',sans-serif",
-      color: theme?.palette?.editor?.textColor
-    }
-  },
-  customRadioBtn: {
-    "& .Mui-checked": {
-      "& span": {
-        "& .MuiSvgIcon-root": {
-          color: `#2563EB !important`
-        }
-      }
-    },
-    "& .MuiRadio-root": {
-      "& span": {
-        "& .MuiSvgIcon-root": {
-          color: `${theme?.palette?.editor?.radioBtnBorder}`
-        }
+        backgroundColor: theme?.palette?.editor?.background
       }
     }
   },
   customSelect: {
     zIndex: "1302 !important",
     "& .MuiPopover-paper": {
-      background: theme?.palette?.editor?.textWeightPopUpBackground,
-      color: theme?.palette?.editor?.textColor,
-      borderRadius: "8px",
-      marginTop: "2px",
-      "& li": {
-        padding: "6px 16px",
-        margin: "5px !important",
-        borderRadius: "4px !important"
-      },
-      "& .MuiList-root": {
-        padding: "0px"
-      },
-      "& .MuiTypography-root": {
-        fontSize: "12px !important",
-        fontWeight: 500,
-        fontFamily: "'Inter',sans-serif"
-      },
-      "& .Mui-selected": {
-        background: theme?.palette?.editor?.menuOptionSelectedOption,
-        color: theme?.palette?.editor?.textColor
-      }
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      color: theme?.palette?.editor?.textColor
     }
   },
   saveBtn: {
-    color: "#fff !important",
-    background: "#2563EB !important",
-    fontSize: "14px !important",
-    fontWeight: "700 !important",
-    padding: "8px 24px !important",
-    textTransform: "none !important",
-    borderRadius: "8px !important",
-    fontFamily: "'Inter',sans-serif !important",
+    color: "#fff",
+    background: "#2563EB",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 24px",
+    textTransform: "none",
     "&:hover": {
-      color: "#fff !important",
-      background: "#2563EB !important"
+      color: "#fff",
+      background: "#2563EB"
     }
   },
   closeBtn: {
-    backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
-    color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`,
-    fontSize: "14px !important",
-    fontWeight: "700 !important",
-    padding: "8px 22px !important",
-    textTransform: "none !important",
-    border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
-    borderRadius: "8px !important",
-    fontFamily: "'Inter',sans-serif !important",
+    backgroundColor: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
     "&:hover": {
-      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
-      backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
-      color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
+      border: "1px solid #64748B"
     }
   },
   closeIcon: {
-    background: theme?.palette?.editor?.closeButtonBackground,
-    borderRadius: "8px",
-    padding: "2px",
-    marginRight: "8px",
-    "& svg": {
-      fill: theme?.palette?.editor?.closeButtonSvgStroke
-    }
+    position: "absolute",
+    right: 8,
+    top: 8,
+    color: theme?.palette?.grey[500]
   },
   gridDivider: {
-    borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-    "& .MuiTypography-root": {
-      color: "#64748B !important",
-      fontFamily: "'Inter',sans-serif",
-      fontWeight: 500,
-      fontSize: "16px"
-    }
+    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
   },
   mobileActionBtns: {
     display: "flex",
@@ -207,96 +82,6 @@ const ButtonNavSettingsStyles = theme => ({
     paddingTop: "14px",
     marginTop: "14px",
     borderTop: `1px solid ${theme?.palette?.grey[300]}`
-  },
-  customAutoComplete: {
-    "& .MuiAutocomplete-listbox": {
-      padding: "0px",
-      "& li": {
-        margin: "5px",
-        borderRadius: "8px",
-        color: theme?.palette?.editor?.menuOptionTextColor,
-        fontSize: "14px",
-        padding: "8px 12px",
-        '&[aria-selected="true"]': {
-          backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
-        }
-      },
-      "& .Mui-selected": {
-        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
-      }
-    },
-    "& .MuiPaper-root": {
-      borderRadius: "8px",
-      background: theme?.palette?.editor?.textWeightPopUpBackground
-    }
-  },
-  drawerContainer: {
-    "& .link-settings-title": {
-      fontSize: "18px",
-      padding: "12px 0px",
-      fontWeight: 600,
-      color: theme?.palette?.editor?.textColor
-    },
-    "& .MuiInputBase-root, fieldset": {
-      background: theme?.palette?.editor?.inputFieldBgColor,
-      borderRadius: "8px",
-      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
-      "& fieldset": {
-        // border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
-        background: "transparent",
-        borderRadius: "8px"
-      },
-      "& input": {
-        border: `1px solid transparent`,
-        background: theme?.palette?.editor?.inputFieldBgColor,
-        borderRadius: "8px",
-        color: theme?.palette?.editor?.textColor
-      }
-    },
-    "& .MuiFormLabel-root": {
-      color: theme?.palette?.editor?.textColor,
-      backgroundColor: "transparent !important"
-    },
-    "& .MuiTypography-root": {
-      color: theme?.palette?.editor?.textColor
-    },
-    "& .MuiFormControlLabel-root": {
-      "& .MuiCheckbox-root": {
-        "& svg": {
-          color: `${theme?.palette?.editor?.radioBtnBorder}`
-        }
-      }
-    },
-    "& .ccheckbox-primary": {
-      padding: "0px",
-      "& .MuiCheckbox-root": {
-        padding: "8px 8px 8px 10px",
-        "&:hover": {
-          background: "unset !important"
-        }
-      },
-      "& button": {
-        width: "18px !important",
-        height: "18px !important",
-        borderRadius: "3px",
-        border: `1px solid ${theme?.palette?.editor?.buttonBorder3}`,
-        "& svg": {
-          width: "14px",
-          height: "14px"
-        }
-      },
-      "& .checkedIcon": {
-        background: "#2563EB",
-        borderColor: "#2563EB",
-        padding: "0px"
-      },
-      "& .unCheckedIcon": {
-        background: theme?.palette?.editor?.checkedIconBg
-      },
-      "& p": {
-        margin: "0px !important"
-      }
-    }
   }
 });
 export default ButtonNavSettingsStyles;

package/dist/Editor/common/MentionsPopup/index.js

@@ -24,12 +24,8 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
     mentions,
     setMentions,
     type,
-    otherProps,
-    customProps
+    otherProps
   } = props;
-  const {
-    translation
-  } = customProps;
   const classes = usePopupStyle(theme);
   const papperRef = useRef(null);
   const buttonRef = useRef(null);
@@ -98,7 +94,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         sx: classes.groupHeader,
         component: "div",
         variant: "h6",
-        children: translation(prevGroup)
+        children: prevGroup
       });
     } else {
       return null;