@flozy/editor 10.4.5 → 10.4.6

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

@@ -1,87 +1,222 @@
-const ButtonNavSettingsStyles = theme => ({
-  dialogContainer: {
-    "& .MuiDialogContent-root": {
-      padding: "0px 20px"
+const ButtonNavSettingsStyles = theme => {
+  const {
+    editor,
+    grey
+  } = theme?.palette || {};
+  const {
+    borderColor,
+    background,
+    textColor,
+    activeColor,
+    miniToolBarBackground
+  } = editor || {};
+  const commonContainerStyle = {
+    backgroundColor: miniToolBarBackground,
+    "& .MuiTypography-root": {
+      color: textColor
     },
-    "& .MuiDialogActions-root": {
-      padding: "10px"
-    },
-    "& .MuiTypography-h6": {
+    "& .link-settings-title": {
+      fontSize: "18px",
+      padding: "12px 0px",
       fontWeight: 600,
-      fontSize: "16px",
-      paddingRight: "20px"
+      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
+      }
+    },
+    "& .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
+      }
     },
-    "& .MuiGrid-container": {
-      marginTop: "0px"
+    "& .MuiSvgIcon-root": {
+      color: textColor
     },
-    "& .MuiGrid-item": {
-      padding: "14px"
+    "& .MuiFormLabel-root": {
+      color: textColor,
+      backgroundColor: background
     },
-    "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+    "& .Mui-checked": {
+      "& .MuiSvgIcon-root": {
+        color: `${activeColor} !important`
+      }
+    },
+    "& .dialog-title": {
       "& .MuiTypography-root": {
-        color: theme?.palette?.editor?.textColor
+        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
+        }
+      }
+    },
+    "& .trigger-text": {
+      fontSize: "14px !important",
+      fontWeight: 400,
+      fontFamily: "'Inter',sans-serif",
+      color: theme?.palette?.editor?.textColor
+    }
+  };
+  return {
+    dialogContainer: {
+      "& .MuiDialogContent-root": {
+        margin: "0px 20px",
+        padding: "0px 4px",
+        borderTop: `1px solid ${borderColor}`,
+        borderBottom: `1px solid ${borderColor}`
       },
-      "& .MuiInputBase-root": {
-        border: `1px solid ${theme?.palette?.editor?.textColor}`,
-        color: theme?.palette?.editor?.textColor
+      "& .MuiDialogActions-root": {
+        padding: "10px"
       },
-      "& .MuiSvgIcon-root": {
-        color: theme?.palette?.editor?.textColor
+      "& .MuiTypography-h6": {
+        fontWeight: 600,
+        fontSize: "20px",
+        paddingRight: "20px"
       },
-      "& .MuiFormLabel-root": {
+      "& .MuiGrid-container": {
+        marginTop: "0px"
+      },
+      "& .MuiGrid-item": {
+        padding: "14px"
+      },
+      "& .MuiPaper-root": {
+        padding: "10px !important",
+        borderRadius: "20px !important",
+        backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+        border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+        ...commonContainerStyle
+      }
+    },
+    swipeableDrawerContainer: commonContainerStyle,
+    customSelect: {
+      zIndex: "1302 !important",
+      "& .MuiPopover-paper": {
+        background: theme?.palette?.editor?.textWeightPopUpBackground,
         color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        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 !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 !important",
+        background: "#2563EB !important"
+      }
+    },
+    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",
+      "&:hover": {
+        border: `1px solid ${theme?.palette?.editor?.customDialogueCloseBtnBorder} !important`,
+        backgroundColor: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+        color: `${theme?.palette?.editor?.customDialogueCloseBtnColor} !important`
+      }
+    },
+    closeIcon: {
+      background: theme?.palette?.editor?.closeButtonBackground,
+      borderRadius: "8px",
+      padding: "2px",
+      marginRight: "8px",
+      "& svg": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    gridDivider: {
+      borderRight: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      "& .MuiTypography-root": {
+        color: "#64748B !important",
+        fontFamily: "'Inter',sans-serif",
+        fontWeight: 500,
+        fontSize: "16px"
+      }
+    },
+    mobileActionBtns: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: "8px",
+      paddingTop: "14px",
+      marginTop: "14px",
+      borderTop: `1px solid ${grey[300]}`
     }
-  },
-  customSelect: {
-    zIndex: "1302 !important",
-    "& .MuiPopover-paper": {
-      background: theme?.palette?.editor?.miniToolBarBackground,
-      color: theme?.palette?.editor?.textColor
-    }
-  },
-  saveBtn: {
-    color: "#fff",
-    background: "#2563EB",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 24px",
-    textTransform: "none",
-    "&:hover": {
-      color: "#fff",
-      background: "#2563EB"
-    }
-  },
-  closeBtn: {
-    backgroundColor: "#F4F6F9",
-    color: "#64748B",
-    fontSize: "14px",
-    fontWeight: 500,
-    padding: "4px 22px",
-    textTransform: "none",
-    border: "1px solid #D8DDE1",
-    "&:hover": {
-      border: "1px solid #64748B"
-    }
-  },
-  closeIcon: {
-    position: "absolute",
-    right: 8,
-    top: 8,
-    color: theme?.palette?.grey[500]
-  },
-  gridDivider: {
-    borderRight: "1px solid rgba(0, 0, 0, 0.12)"
-  },
-  mobileActionBtns: {
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: "8px",
-    paddingTop: "14px",
-    marginTop: "14px",
-    borderTop: `1px solid ${theme?.palette?.grey[300]}`
-  }
-});
+  };
+};
 export default ButtonNavSettingsStyles;

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

@@ -146,7 +146,10 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
           setOpenAI("fromElements");
         }
         insertMention(editor, char, type);
-        Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
+        if (mentions === "mentions") {
+          Transforms.insertText(editor, " "); //Added to insert space after inserting mention node
+        }
+
         setMentions({
           ...mentions,
           target: null

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

@@ -0,0 +1,48 @@
+import { RadioGroup as Core, Radio, FormControl, FormControlLabel, IconButton, Typography } from "@mui/material";
+import RadioGroupStyles from "./styles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { CheckedRadioIcon } from "../iconListV2";
+import { jsx as _jsx } from "react/jsx-runtime";
+function RadioGroup(props) {
+  const {
+    value,
+    options,
+    onChange,
+    label,
+    labelProps,
+    radioProps,
+    translation,
+    ...rest
+  } = props;
+  const {
+    theme
+  } = useEditorContext();
+  const classes = RadioGroupStyles(theme);
+  return /*#__PURE__*/_jsx(FormControl, {
+    children: /*#__PURE__*/_jsx(Core, {
+      value: value,
+      sx: classes.customRadioGroup,
+      ...rest,
+      children: options?.map((option, i) => {
+        return /*#__PURE__*/_jsx(FormControlLabel, {
+          value: option.value,
+          control: /*#__PURE__*/_jsx(Radio, {
+            checkedIcon: /*#__PURE__*/_jsx(CheckedRadioIcon, {}),
+            icon: /*#__PURE__*/_jsx(IconButton, {
+              className: "unCheckedIcon"
+            }),
+            ...(radioProps || {})
+          }),
+          label: /*#__PURE__*/_jsx(Typography, {
+            variant: "body1",
+            sx: classes.label,
+            ...(labelProps || {}),
+            children: translation(option.label)
+          }),
+          onChange: () => onChange(option)
+        }, i);
+      })
+    })
+  });
+}
+export default RadioGroup;

package/dist/Editor/common/RadioGroup/styles.js

@@ -0,0 +1,29 @@
+const SelectStyles = (theme = {}) => {
+  const {
+    buttonBorder3,
+    checkedIconBg,
+    tv_text,
+    inputFieldBgColor
+  } = theme?.palette?.editor || {};
+  return {
+    customRadioGroup: {
+      gap: "4px",
+      "& button": {
+        border: `1px solid ${buttonBorder3}`
+      },
+      "& .unCheckedIcon": {
+        background: checkedIconBg,
+        width: "17px",
+        height: "17px",
+        padding: "0px"
+      },
+      "& .radio-icon-path": {
+        fill: inputFieldBgColor
+      }
+    },
+    label: {
+      color: `${tv_text} !important`
+    }
+  };
+};
+export default SelectStyles;

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

@@ -1,19 +1,17 @@
 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 SaveIcon from "@mui/icons-material/Save";
+import AddRoundedIcon from "@mui/icons-material/AddRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 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 +28,7 @@ const Actions = {
   addElementInSection: {
     type: "addElement",
     Button: IconButton,
-    Icon: AddIcon,
+    Icon: AddRoundedIcon,
     title: "Add Element"
   },
   settings: {
@@ -74,25 +72,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 +108,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",