@flozy/editor 5.3.3 → 5.3.4

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -90,12 +90,16 @@ const usePopupStyle = theme => ({
       },
       "& .more-btn-cbs": {
         color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        border: `1.5px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        paddingTop: "10px"
+        border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        paddingTop: "10px",
+        "& svg": {
+          width: "20px",
+          height: "24px"
+        }
       }
     },
     "@media only screen and (max-width: 599px)": {
-      margin: "10px !important",
+      // margin: "10px !important",
       background: "unset",
       boxShadow: "unset"
       // border: "none",
@@ -125,6 +129,9 @@ const usePopupStyle = theme => ({
         width: "330px"
       }
     },
+    "& .MuiTypography-root": {
+      padding: "0px"
+    },
     "&.templates": {
       width: "500px",
       maxWidth: "100%",
@@ -146,6 +153,7 @@ const usePopupStyle = theme => ({
       },
       "& .MuiTabScrollButton-horizontal": {
         borderBottom: "unset !important",
+        width: "10px",
         "& svg": {
           color: theme?.palette?.editor?.closeButtonSvgStroke
         }
@@ -215,37 +223,37 @@ const usePopupStyle = theme => ({
         }
       },
       "&:hover": {
-        backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        backgroundColor: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
         "& .signatureElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .commonSvgStyle": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .commonSvgStyle2": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .colorBoxElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
+            stroke: `${theme?.palette?.editor?.textColor}`,
             fill: "none"
           }
         },
         "& .gridElementIcon": {
           "& path": {
-            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            stroke: `${theme?.palette?.editor?.textColor}`,
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         },
         "& .newLineElementIcon": {
           "& path": {
-            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+            fill: `${theme?.palette?.editor?.textColor}`
           }
         }
       },
@@ -289,8 +297,11 @@ const usePopupStyle = theme => ({
     },
     "& .textFormatMUIIcon": {
       "& svg": {
-        color: theme?.palette?.editor?.closeButtonSvgStroke
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
+    },
+    "& .npr-0": {
+      paddingRight: "0px !important"
     }
   },
   textFormatLabel: {
@@ -324,8 +335,8 @@ const usePopupStyle = theme => ({
     borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
   },
   textFormatField: {
-    marginBottom: "16px",
-    marginTop: "10px"
+    marginBottom: "8px",
+    marginTop: "8px"
   },
   textFormatField1: {
     marginBottom: "16px",
@@ -339,58 +350,68 @@ const usePopupStyle = theme => ({
     marginBottom: "16px"
   },
   textAlignButtons: {
-    // "& .justifyIcon": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .textAlignIconSameStyles": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .orderedListIcon": {
-    //   "& path": {
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& text": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .bulletedListTextIcon": {
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& circle": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .checkedListTextIcon": {
-    //   "& path": {
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
-    // "& .accordianListTextIcon": {
-    //   // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-    //   "& svg": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    //   "& path": {
-    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
-    //   },
-    // },
+    paddingLeft: "0px",
+    paddingRight: "12px",
+    "&:hover": {
+      background: "unset"
+    },
+    "&:not(.btnActive):hover": {
+      background: "unset",
+      color: `${theme?.palette?.editor?.textColor} !important`,
+      "& .justifyIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .textAlignIconSameStyles": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .orderedListIcon": {
+        "& .strokePathList": {
+          stroke: `${theme?.palette?.editor?.textColor} !important`
+        },
+        "& .fillPathList": {
+          fill: `${theme?.palette?.editor?.textColor} !important`
+        }
+      },
+      "& .bulletedListTextIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        },
+        "& circle": {
+          fill: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .checkedListTextIcon": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      },
+      "& .accordianListTextIcon": {
+        // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        "& svg": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        },
+        "& path": {
+          fill: `${theme?.palette?.editor?.textColor}`,
+          stroke: `${theme?.palette?.editor?.textColor}`
+        }
+      }
+    }
   },
   autoCompleteaFontFamily: {
     "& .MuiOutlinedInput-root": {
       borderRadius: "8px",
       backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
-      fontSize: "14px",
+      fontSize: "12px",
+      fontWeight: "400",
       height: "36px",
-      paddingLeft: "15px !important"
+      paddingLeft: "12px !important"
     },
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
@@ -399,6 +420,41 @@ const usePopupStyle = theme => ({
       '& input': {
         border: "none !important"
       }
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
+    }
+  },
+  fontFamilyListOptions: {
+    "& .MuiAutocomplete-listbox": {
+      padding: "0px",
+      "&::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "& li": {
+        margin: "5px",
+        borderRadius: "8px",
+        color: theme?.palette?.editor?.menuOptionTextColor,
+        fontSize: '14px',
+        padding: '8px 12px',
+        '&[aria-selected="true"]': {
+          backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+        }
+      }
+    },
+    "& .MuiPaper-root": {
+      borderRadius: "8px",
+      background: theme?.palette?.editor?.textWeightPopUpBackground
     }
   },
   textFormatSelect: {
@@ -410,6 +466,10 @@ const usePopupStyle = theme => ({
     fontFamily: "Inter, sans-serif",
     "& .MuiOutlinedInput-notchedOutline": {
       border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
     }
   },
   textFormatSelectOptions: {
@@ -431,15 +491,32 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   dividerGrid: {
-    margin: "5px 0px 10px 0px",
-    background: `${theme?.palette?.editor?.deviderBgColor} !important`
+    margin: "5px 0px 10px 0px"
+    // background: `${theme?.palette?.editor?.deviderBgColor} !important`,
   },
+
   textFormatColorWrpr: {
     display: "flex",
     alignItems: "center",
     marginBottom: "8px"
   },
-  textFormatCG: {},
+  textFormatCG: {
+    alignItems: "flexStart",
+    justifyContent: "center",
+    flexDirection: "row",
+    "& .accordionIcon": {
+      paddingLeft: "0px",
+      paddingRight: "12px",
+      "&:not(.btnActive):hover": {
+        background: "unset",
+        "& .accordianIconSvgTextFormat": {
+          "& path": {
+            stroke: theme?.palette?.editor?.textColor
+          }
+        }
+      }
+    }
+  },
   evenSpace: {
     display: "flex",
     flexDirection: "row",
@@ -451,7 +528,36 @@ const usePopupStyle = theme => ({
     "&.typo-icons": {
       "& button": {
         width: "31px",
-        height: "36px"
+        height: "36px",
+        "&:hover": {
+          background: "unset"
+        },
+        "&:not(.btnActive):hover": {
+          background: "unset",
+          "& svg": {
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .linkIcon": {
+            "& path": {
+              stroke: theme?.palette?.editor?.textColor
+            }
+          }
+        }
+      },
+      alignItems: "flexStart",
+      justifyContent: "center",
+      flexDirection: "row",
+      "&:hover": {
+        background: "unset"
+      },
+      "& .customSelectTool": {
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontWeight: "510",
+        "& svg": {
+          marginTop: "8px",
+          width: "16px",
+          height: "8px"
+        }
       }
     },
     "&.text-decorations-wrpr": {
@@ -464,15 +570,24 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
+    marginTop: "4px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor || "#000"
   },
   typoLabel2: {
     fontSize: "14px",
-    marginBottom: "5px",
-    paddingLeft: "10px",
+    marginBottom: "2px",
+    // paddingLeft: "10px",
     fontWeight: 500
   },
+  typoLabel3: {
+    fontSize: "14px",
+    marginBottom: "10px",
+    paddingLeft: "5px",
+    marginTop: "4px",
+    fontWeight: 500,
+    color: theme?.palette?.editor?.textColor || "#000"
+  },
   templateCard: {
     borderRadius: "10px",
     boxShadow: "none",
@@ -545,6 +660,7 @@ const usePopupStyle = theme => ({
     border: `1px solid ${theme?.palette?.editor?.borderColor}`,
     borderRadius: "7px",
     backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    height: "36px",
     "& button": {
       backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       marginRight: "0px",
@@ -576,12 +692,17 @@ const usePopupStyle = theme => ({
       width: "2px",
       height: "25px",
       margin: "5px 0px"
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px"
     }
   },
   btnGroup2: {
     border: `1px solid ${theme?.palette?.editor?.borderColor}`,
     borderRadius: "7px",
     backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    height: "36px",
     "& button": {
       backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
@@ -600,6 +721,10 @@ const usePopupStyle = theme => ({
       "&.no-hover": {
         border: `1px solid #ffffff00`,
         borderRadius: "7px 0px 0px 7px"
+      },
+      "& svg": {
+        width: "20px",
+        height: "24px"
       }
     },
     "& .colorBox": {
@@ -659,14 +784,14 @@ const usePopupStyle = theme => ({
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px 10px"
+    padding: "0px"
   },
   defaultBtn2: {
     color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px 10px"
+    padding: "0px"
   },
   defaultBtn: {
     color: "#0F172A",
@@ -732,7 +857,10 @@ const usePopupStyle = theme => ({
     },
     "& .textFontArrows": {
       "& svg": {
-        stroke: theme?.palette?.editor?.textColor
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke,
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        width: "10px",
+        height: "12px"
       }
     }
   },
@@ -751,7 +879,7 @@ const usePopupStyle = theme => ({
     "& .popup_tabs": {
       backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       "@media only screen and (max-width: 899px)": {
-        width: '100% !important'
+        width: "100% !important"
       }
     },
     "& .popup_tabs-header": {
@@ -953,10 +1081,10 @@ const usePopupStyle = theme => ({
         color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
         background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
         "& .orderedListIcon": {
-          "& path": {
+          "& .strokePathList": {
             stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
           },
-          "& text": {
+          "& .fillPathList": {
             fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
           }
         },

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -137,6 +137,7 @@ const TextFormat = props => {
               format: "fontFamily",
               val: Object.values(fontFamilyMap)[0]
             }),
+            className: "npr-0",
             children: "Default Text"
           })
         })]
@@ -161,7 +162,7 @@ const TextFormat = props => {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "body1",
           color: "primary",
-          sx: classes.typoLabel,
+          sx: classes.typoLabel3,
           children: "Font Weight"
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -178,10 +179,11 @@ const TextFormat = props => {
       }), /*#__PURE__*/_jsxs(Grid, {
         item: true,
         xs: 6,
+        className: "npr-0",
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "body1",
           color: "primary",
-          sx: classes.typoLabel,
+          sx: classes.typoLabel3,
           children: "Font Size"
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -361,15 +363,15 @@ const TextFormat = props => {
             editor: editor,
             ...m
           }, `pptool_mark_${i}_${m.id}`);
-        }), /*#__PURE__*/_jsx(SelectSuperSubscript, {
-          classes: classes,
-          editor: editor,
-          closeMainPopup: closeMainPopup || onClose
         }), /*#__PURE__*/_jsx(LinkButton, {
           active: isBlockActive(editor, link.format),
           editor: editor,
           customProps: customProps
-        }, link.id)]
+        }, link.id), /*#__PURE__*/_jsx(SelectSuperSubscript, {
+          classes: classes,
+          editor: editor,
+          closeMainPopup: closeMainPopup || onClose
+        })]
       })]
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
@@ -412,7 +414,7 @@ const TextFormat = props => {
       children: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",
         color: "primary",
-        sx: classes.typoLabel,
+        sx: classes.typoLabel3,
         children: "Decorations"
       })
     }), /*#__PURE__*/_jsxs(Grid, {

package/dist/Editor/assets/svg/SettingsIcon.js

@@ -2,21 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SettingsIcon = props => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "17",
+    width: "18",
     height: "18",
-    viewBox: "0 0 17 18",
+    viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M8.5 11.125C9.6736 11.125 10.625 10.1736 10.625 9C10.625 7.82639 9.6736 6.875 8.5 6.875C7.32639 6.875 6.375 7.82639 6.375 9C6.375 10.1736 7.32639 11.125 8.5 11.125Z",
+      d: "M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M1.4165 9.62343V8.37676C1.4165 7.6401 2.01859 7.03093 2.76234 7.03093C4.04442 7.03093 4.56859 6.12426 3.924 5.01218C3.55567 4.37468 3.77525 3.54593 4.41984 3.1776L5.64525 2.47635C6.20484 2.14343 6.92734 2.34176 7.26025 2.90135L7.33817 3.03593C7.97567 4.14801 9.024 4.14801 9.66859 3.03593L9.7465 2.90135C10.0794 2.34176 10.8019 2.14343 11.3615 2.47635L12.5869 3.1776C13.2315 3.54593 13.4511 4.37468 13.0828 5.01218C12.4382 6.12426 12.9623 7.03093 14.2444 7.03093C14.9811 7.03093 15.5903 7.63301 15.5903 8.37676V9.62343C15.5903 10.3601 14.9882 10.9693 14.2444 10.9693C12.9623 10.9693 12.4382 11.8759 13.0828 12.988C13.4511 13.6326 13.2315 14.4543 12.5869 14.8226L11.3615 15.5238C10.8019 15.8568 10.0794 15.6584 9.7465 15.0988L9.66859 14.9643C9.03109 13.8522 7.98275 13.8522 7.33817 14.9643L7.26025 15.0988C6.92734 15.6584 6.20484 15.8568 5.64525 15.5238L4.41984 14.8226C3.77525 14.4543 3.55567 13.6255 3.924 12.988C4.56859 11.8759 4.04442 10.9693 2.76234 10.9693C2.01859 10.9693 1.4165 10.3601 1.4165 9.62343Z",
+      d: "M1.5 9.6591V8.3391C1.5 7.5591 2.1375 6.9141 2.925 6.9141C4.2825 6.9141 4.8375 5.9541 4.155 4.7766C3.765 4.1016 3.9975 3.2241 4.68 2.8341L5.9775 2.0916C6.57 1.7391 7.335 1.9491 7.6875 2.5416L7.77 2.6841C8.445 3.8616 9.555 3.8616 10.2375 2.6841L10.32 2.5416C10.6725 1.9491 11.4375 1.7391 12.03 2.0916L13.3275 2.8341C14.01 3.2241 14.2425 4.1016 13.8525 4.7766C13.17 5.9541 13.725 6.9141 15.0825 6.9141C15.8625 6.9141 16.5075 7.5516 16.5075 8.3391V9.6591C16.5075 10.4391 15.87 11.0841 15.0825 11.0841C13.725 11.0841 13.17 12.0441 13.8525 13.2216C14.2425 13.9041 14.01 14.7741 13.3275 15.1641L12.03 15.9066C11.4375 16.2591 10.6725 16.0491 10.32 15.4566L10.2375 15.3141C9.5625 14.1366 8.4525 14.1366 7.77 15.3141L7.6875 15.4566C7.335 16.0491 6.57 16.2591 5.9775 15.9066L4.68 15.1641C3.9975 14.7741 3.765 13.8966 4.155 13.2216C4.8375 12.0441 4.2825 11.0841 2.925 11.0841C2.1375 11.0841 1.5 10.4391 1.5 9.6591Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",

package/dist/Editor/common/ColorPickerButton.js

@@ -82,10 +82,12 @@ const ColorPickerButton = props => {
         height: "22px",
         minWidth: "22px",
         borderRadius: "26px"
-        // border: "2px solid #E7E7E7",
       },
-
-      onClick: handleColorPicker
+      onClick: handleColorPicker,
+      className: "colorPickerButton",
+      sx: {
+        ...classes.colorPickerBtnBorder
+      }
     }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
       open: open,
       onClose: handleClose,

package/dist/Editor/common/DnD/Draggable.js

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {
   const {
@@ -35,7 +36,7 @@ const Draggable = props => {
     contentEditable: false,
     style: dragStyle,
     sx: classes.dragHandle,
-    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+    children: /*#__PURE__*/_jsx(SectionDragIcon, {})
   });
 };
 export default Draggable;

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,7 +18,8 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: 0
+      padding: 0,
+      height: '100%'
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {