@flozy/editor 10.2.1 → 10.2.3

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

@@ -1,7 +1,7 @@
 const ButtonNavSettingsStyles = theme => ({
   dialogContainer: {
     "& .MuiDialogContent-root": {
-      padding: "0px 20px"
+      padding: "0px 16px"
     },
     "& .MuiDialogActions-root": {
       padding: "10px"
@@ -18,62 +18,187 @@ const ButtonNavSettingsStyles = theme => ({
       padding: "14px"
     },
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      padding: "10px !important",
+      borderRadius: "20px !important",
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
       "& .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: theme?.palette?.editor?.background
+        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}`
+        }
       }
     }
   },
   customSelect: {
     zIndex: "1302 !important",
     "& .MuiPopover-paper": {
-      background: theme?.palette?.editor?.miniToolBarBackground,
-      color: theme?.palette?.editor?.textColor
+      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
+      }
     }
   },
   saveBtn: {
-    color: "#fff",
-    background: "#2563EB",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 24px",
-    textTransform: "none",
+    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",
     "&:hover": {
-      color: "#fff",
-      background: "#2563EB"
+      color: "#fff !important",
+      background: "#2563EB !important"
     }
   },
   closeBtn: {
-    backgroundColor: "#F4F6F9",
-    color: "#64748B",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 22px",
-    textTransform: "none",
-    border: "1px solid #D8DDE1",
+    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",
     "&:hover": {
-      border: "1px solid #64748B"
+      border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+      backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
     }
   },
   closeIcon: {
-    position: "absolute",
-    right: 8,
-    top: 8,
-    color: theme?.palette?.grey[500]
+    background: theme?.palette?.editor?.closeButtonBackground,
+    borderRadius: "8px",
+    padding: "2px",
+    marginRight: "8px",
+    "& svg": {
+      fill: theme?.palette?.editor?.closeButtonSvgStroke
+    }
   },
   gridDivider: {
-    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
+    borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+    "& .MuiTypography-root": {
+      color: "#64748B !important",
+      fontFamily: "'Inter',sans-serif",
+      fontWeight: 500,
+      fontSize: "16px"
+    }
   },
   mobileActionBtns: {
     display: "flex",
@@ -82,6 +207,96 @@ 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,19 +1,18 @@
 import { Button, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 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 AddIcon from "@mui/icons-material/Add";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
+import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
 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",
@@ -30,7 +29,7 @@ const Actions = {
   addElementInSection: {
     type: "addElement",
     Button: IconButton,
-    Icon: AddIcon,
+    Icon: AddRoundedIcon,
     title: "Add Element"
   },
   settings: {
@@ -74,25 +73,25 @@ const Actions = {
   edit: {
     type: 2,
     Button: IconButton,
-    Icon: EditIcon,
+    Icon: PenIcon,
     title: "Edit"
   },
   close: {
     type: 3,
     Button: IconButton,
-    Icon: CloseIcon,
+    Icon: CloseRoundedIcon,
     title: "close"
   },
   moveUp: {
     type: "moveUp",
     Button: IconButton,
-    Icon: ArrowUpwardIcon,
+    Icon: ArrowUpwardRoundedIcon,
     title: "Move Up"
   },
   moveDown: {
     type: "moveDown",
     Button: IconButton,
-    Icon: ArrowDownwardIcon,
+    Icon: ArrowDownwardRoundedIcon,
     title: "Move Down"
   },
   addFormField: {
@@ -110,13 +109,13 @@ const Actions = {
   embedScript: {
     type: "addEmbedScript",
     Button: IconButton,
-    Icon: CodeIcon,
+    Icon: CodeElementIcon,
     title: "Embed Code"
   },
   saveAsTemplate: {
     type: "saveAsTemplate",
     Button: IconButton,
-    Icon: SaveIcon,
+    Icon: SaveTemplIcon,
     title: "Save As Template"
   },
   imageFrame: {

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

@@ -8,6 +8,7 @@ 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 ? "active" : "",
+        className: `${enable === type || selectedAction === type || Actions[action]?.type === menu?.type ? "active" : ""} elementOption`,
         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",
+        className: "papper-root popUpOptions",
         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: "1px 1px 3px #2563EB",
+        boxShadow: theme?.palette?.type === "light" && "1px 1px 3px #2563EB",
         "& .strokePath": {
           stroke: "#2563EB"
         }
@@ -48,6 +48,33 @@ 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"
+          }
+        }
+      }
     }
   }
 });

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Paper, Popper, Tooltip, Typography, Box, Divider, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import { settingsLabel } from "../settingsConstants";
 import SettingsComponents from "../Settings";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,10 +45,10 @@ const Settings = props => {
         }
       }],
       children: /*#__PURE__*/_jsxs(Paper, {
-        className: "papper-root",
+        className: "papper-root settingsPopUp",
         children: [/*#__PURE__*/_jsxs(Typography, {
           variant: "h6",
-          className: "item-wrapper title",
+          className: "item-wrapper title popUpHeader",
           children: [translation(title), /*#__PURE__*/_jsx(Box, {
             component: "div",
             children: /*#__PURE__*/_jsx(Tooltip, {
@@ -57,7 +57,7 @@ const Settings = props => {
               children: /*#__PURE__*/_jsx(IconButton, {
                 className: "closeBtn",
                 onClick: onClose,
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
+                children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
               })
             })
           })]
@@ -68,7 +68,8 @@ const Settings = props => {
             editor: editor,
             path: path,
             customProps: customProps,
-            theme: theme
+            theme: theme,
+            onClose: onClose
           }) : null
         })]
       })

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js

@@ -13,7 +13,7 @@ const Signature = props => {
   const pPath = path?.split("|")?.map(m => parseInt(m));
   const element_path = [...pPath, 0];
   const onSave = (data = {}) => {
-    onClear();
+    onClear(element_path);
     Transforms.insertNodes(editor, [{
       type: "sign",
       signature: null,
@@ -35,9 +35,10 @@ const Signature = props => {
       at: parentPath
     });
   };
-  const onClear = () => {
+  const onClear = path => {
+    const parentPath = path || Path.parent(element_path);
     Transforms.removeNodes(editor, {
-      at: element_path
+      at: parentPath
     });
   };
   return /*#__PURE__*/_jsx(_Fragment, {

package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js

@@ -8,7 +8,8 @@ const AppHeaderSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const AppHeaderSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js

@@ -8,7 +8,8 @@ const BoxSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -27,7 +28,7 @@ const BoxSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js

@@ -8,7 +8,8 @@ const ButtonSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const ButtonSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js

@@ -8,7 +8,8 @@ const CodeSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const CodeSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -12,7 +12,8 @@ const FormSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -56,13 +57,14 @@ const FormSettings = props => {
     }
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   const muiTheme = createTheme({
     components: {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js

@@ -8,7 +8,8 @@ const ImageSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const ImageSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js

@@ -9,7 +9,8 @@ const TableSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -57,7 +58,7 @@ const TableSettings = props => {
     }
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",