@flozy/editor 10.2.0 → 10.2.1

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,10 @@ export default function LinkSettings(props) {
     allowTrigger
   } = props;
   const {
+    isMobile,
     tagName,
     translation
   } = 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 +64,66 @@ 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: 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
+        })
+      })]
     });
   } else {
     return /*#__PURE__*/_jsxs(Dialog, {
@@ -136,25 +132,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: translation("dialogueTitle")
+      }), /*#__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,9 +148,7 @@ 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) => {

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/RnD/ElementOptions/Actions.js

@@ -1,18 +1,19 @@
 import { Button, IconButton } from "@mui/material";
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import CloseIcon from "@mui/icons-material/Close";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import SettingsIcon from "@mui/icons-material/Settings";
+import EditIcon from "@mui/icons-material/Edit";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
-import AddRoundedIcon from '@mui/icons-material/AddRounded';
-import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
-import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
+import AddIcon from "@mui/icons-material/Add";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import SaveIcon from "@mui/icons-material/Save";
 import LinkIcon from "./Icons/LinkIcon";
+import CodeIcon from "@mui/icons-material/Code";
 import FilterFramesIcon from "@mui/icons-material/FilterFrames";
 import { GridAddSectionIcon, SignatureIcon, WorkflowIcon } from "../../iconslist";
 import Delete from "@mui/icons-material/Delete";
-import SettingsIcon from "../../../assets/svg/SettingsIcon";
-import { CodeElementIcon, PenIcon, SaveTemplIcon } from "../../iconListV2";
 const Actions = {
   ai: {
     type: "ai",
@@ -29,7 +30,7 @@ const Actions = {
   addElementInSection: {
     type: "addElement",
     Button: IconButton,
-    Icon: AddRoundedIcon,
+    Icon: AddIcon,
     title: "Add Element"
   },
   settings: {
@@ -73,25 +74,25 @@ const Actions = {
   edit: {
     type: 2,
     Button: IconButton,
-    Icon: PenIcon,
+    Icon: EditIcon,
     title: "Edit"
   },
   close: {
     type: 3,
     Button: IconButton,
-    Icon: CloseRoundedIcon,
+    Icon: CloseIcon,
     title: "close"
   },
   moveUp: {
     type: "moveUp",
     Button: IconButton,
-    Icon: ArrowUpwardRoundedIcon,
+    Icon: ArrowUpwardIcon,
     title: "Move Up"
   },
   moveDown: {
     type: "moveDown",
     Button: IconButton,
-    Icon: ArrowDownwardRoundedIcon,
+    Icon: ArrowDownwardIcon,
     title: "Move Down"
   },
   addFormField: {
@@ -109,13 +110,13 @@ const Actions = {
   embedScript: {
     type: "addEmbedScript",
     Button: IconButton,
-    Icon: CodeElementIcon,
+    Icon: CodeIcon,
     title: "Embed Code"
   },
   saveAsTemplate: {
     type: "saveAsTemplate",
     Button: IconButton,
-    Icon: SaveTemplIcon,
+    Icon: SaveIcon,
     title: "Save As Template"
   },
   imageFrame: {

package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js

@@ -8,7 +8,6 @@ const LinkIcon = () => {
     height: "18",
     viewBox: "0 0 18 18",
     fill: "none",
-    className: "settingsIcon",
     children: [/*#__PURE__*/_jsx("path", {
       d: "M10.1582 7.84185C9.54389 7.22778 8.71084 6.88281 7.84222 6.88281C6.97361 6.88281 6.14055 7.22778 5.52622 7.84185L3.20947 10.1578C2.59513 10.7722 2.25 11.6054 2.25 12.4742C2.25 13.343 2.59513 14.1763 3.20947 14.7906C3.82381 15.4049 4.65704 15.7501 5.52585 15.7501C6.39466 15.7501 7.22788 15.4049 7.84222 14.7906L9.00022 13.6326",
       stroke: "#000000",

package/dist/Editor/common/RnD/ElementOptions/index.js

@@ -65,7 +65,7 @@ const ElementOptions = props => {
       arrow: true,
       children: /*#__PURE__*/_jsx(Button, {
         onClick: handleOptionClick(type),
-        className: `${enable === type || selectedAction === type || Actions[action]?.type === menu?.type ? "active" : ""} elementOption`,
+        className: enable === type || selectedAction === type ? "active" : "",
         children: Icon ? /*#__PURE__*/_jsx(Icon, {}) : title
       })
     }, `actions_fgele_${type}_${index}`) : null;
@@ -83,7 +83,7 @@ const ElementOptions = props => {
       contentEditable: false,
       disablePortal: false,
       children: /*#__PURE__*/_jsx(Paper, {
-        className: "papper-root popUpOptions",
+        className: "papper-root",
         children: actions.map(renderAction)
       })
     }), open && MenuComp ? /*#__PURE__*/_jsx(OptionsPopup, {

package/dist/Editor/common/RnD/ElementOptions/styles.js

@@ -38,7 +38,7 @@ const useElementOptionsStyle = ({
         color: "#2563EB",
         background: theme?.palette?.editor?.background,
         border: "1px solid #2563EB",
-        boxShadow: theme?.palette?.type === "light" && "1px 1px 3px #2563EB",
+        boxShadow: "1px 1px 3px #2563EB",
         "& .strokePath": {
           stroke: "#2563EB"
         }
@@ -48,33 +48,6 @@ const useElementOptionsStyle = ({
           fill: theme?.palette?.editor?.textColor
         }
       }
-    },
-    "& .popUpOptions": {
-      "& .elementOption": {
-        background: theme?.palette?.editor?.signatureFontBtnBg,
-        border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-        height: "28px",
-        width: "28px",
-        "& svg": {
-          color: theme?.palette?.editor?.closeButtonSvgStroke,
-          width: "20px",
-          height: "20px"
-        },
-        "& .addIconCircle path, & .settingsIcon path, & .commonSvgStyle path": {
-          stroke: theme?.palette?.editor?.closeButtonSvgStroke
-        }
-      },
-      "& .active": {
-        border: "1px solid #2563EB",
-        "& svg": {
-          color: "#2563EB"
-        },
-        "& .settingsIcon": {
-          "& path": {
-            stroke: "#2563EB"
-          }
-        }
-      }
     }
   }
 });