@flozy/editor 10.4.0 → 10.4.1

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",

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",

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

@@ -9,6 +9,7 @@ const TextSettings = props => {
     editor,
     path,
     theme,
+    onClose,
     customProps
   } = props;
   const item_path = path.split("|").map(m => parseInt(m));
@@ -27,7 +28,8 @@ const TextSettings = props => {
   return /*#__PURE__*/_jsx(TextFormat, {
     classes: classes,
     editor: editor,
-    customProps: customProps
+    customProps: customProps,
+    closeMainPopup: onClose
   });
 };
 export default TextSettings;

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

@@ -8,7 +8,8 @@ const VideoSettings = 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 VideoSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

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

@@ -1,8 +1,9 @@
 const useElementSettingsStyle = theme => ({
   root: {
     zIndex: 1200,
-    background: theme?.palette?.editor?.background,
-    borderRadius: "10px",
+    background: theme?.palette?.editor?.miniToolBarBackground,
+    border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+    borderRadius: "20px",
     overflow: "hidden",
     boxShadow: "0px 0px 12px 4px #00000014",
     padding: "10px 16px",
@@ -58,28 +59,34 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      background: theme?.palette?.editor?.background,
-      paddingLeft: "4px",
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      paddingLeft: "2px",
+      paddingRight: "6px",
+      overflow: "hidden",
+      "&:hover": {
+        overflowY: "auto",
+        "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiInputBase-root, input": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`
-      },
       "& .borderInput": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.textColor
       },
-      "& .MuiCheckbox-root": {
-        "& svg": {
-          fill: theme?.palette?.editor?.textColor
-        }
-      },
       "& .fillPath": {
         fill: theme?.palette?.editor?.textColor
       },
       "& .MuiIconButton-root": {
         color: theme?.palette?.editor?.textColor
+      },
+      "& .MuiFormHelperText-root": {
+        color: theme?.palette?.editor?.textColor
       }
     },
     "& .item-wrapper": {
@@ -104,6 +111,133 @@ const useElementSettingsStyle = theme => ({
           }
         }
       }
+    },
+    "& .settingsPopUp": {
+      background: theme?.palette?.editor?.miniToolBarBackground,
+      "& .text-formatter-popup": {
+        paddingRight: "10px",
+        overflow: "hidden",
+        "&:hover": {
+          overflow: "auto",
+          "&::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb": {
+            background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+          },
+          "&::-webkit-scrollbar-track, ::-webkit-scrollbar-track": {
+            visibility: "hidden"
+          }
+        },
+        "& .more-btn-cbs": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+          paddingTop: "10px",
+          "& svg": {
+            width: "20px",
+            height: "24px"
+          }
+        },
+        "& .MuiInputBase-root": {
+          height: "36px"
+        }
+      },
+      "& .popUpHeader": {
+        fontFamily: "'Inter',sans-serif",
+        fontWeight: "700",
+        fontSize: "16px",
+        lineHeight: "25px",
+        "& button": {
+          background: theme?.palette?.editor?.closeButtonBackground,
+          borderRadius: "8px",
+          "& svg": {
+            fill: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      },
+      "& .MuiTypography-root": {
+        color: `${theme?.palette?.editor?.textColor} !important`
+      },
+      "& .MuiInputBase-root": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px",
+        fontSize: "12px",
+        height: "36px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        "& fieldset": {
+          border: `1px solid transparent !important`,
+          background: "transparent",
+          borderRadius: "8px"
+          // fontSize: "12px",
+        },
+
+        "& input": {
+          // border: `1px solid transparent`,
+          // background: theme?.palette?.editor?.inputFieldBgColor,
+          borderRadius: "8px"
+          // fontSize: "12px",
+        }
+      },
+
+      "& .editor-dd": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid transparent !important`
+        }
+      },
+      "& .MuiAutocomplete-root": {
+        "& fieldset": {
+          border: `1px solid transparent !important`
+        }
+      },
+      "& .sliderInput": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "10px",
+        paddingLeft: "10px",
+        width: "50px !important"
+      },
+      "& .selctedBtnIcon": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "10px",
+        height: "36px",
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        }
+      },
+      "& .muiIconsListParent": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        },
+        "&::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .menu-item-app-header": {
+        paddingBottom: "5px",
+        "& .text-field1": {
+          marginRight: "5px"
+        },
+        "& .settingsIcon, .deleteIcon": {
+          width: "20px",
+          height: "20px",
+          "& path": {
+            stroke: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      },
+      "& .MuiPaper-root": {
+        background: theme?.palette?.editor?.miniToolBarBackground
+      },
+      "& .iconRadioButton": {
+        "& svg": {
+          height: "24px",
+          width: "24px"
+        },
+        "& .MuiRadio-root": {
+          paddingLeft: "0px"
+        }
+      }
     }
   },
   dialog: {

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Box, Paper, Popper, Typography, Tooltip, IconButton } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import { Box, Paper, Popper, Typography, Tooltip, IconButton, Grid } from "@mui/material";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import useOptionsPopupStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,7 +30,7 @@ const OptionsPopup = props => {
       className: "papper-root",
       children: [/*#__PURE__*/_jsxs(Typography, {
         variant: "div",
-        className: "item-wrapper title",
+        className: "item-wrapper title sectionOptionTitle",
         children: [translation(title), /*#__PURE__*/_jsx(Box, {
           component: "div",
           children: /*#__PURE__*/_jsx(Tooltip, {
@@ -38,11 +38,14 @@ const OptionsPopup = props => {
             arrow: true,
             children: /*#__PURE__*/_jsx(IconButton, {
               onClick: handleClose,
-              children: /*#__PURE__*/_jsx(CloseIcon, {})
+              children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
             })
           })
         })]
-      }), children]
+      }), /*#__PURE__*/_jsx(Grid, {
+        className: "sectionOptionChild",
+        children: children
+      })]
     })
   }) : null;
 };