@flozy/editor 5.4.1 → 5.4.2

package/dist/Editor/common/iconslist.js

@@ -138,8 +138,8 @@ export const StrikethroughIcon = props => /*#__PURE__*/_jsx("svg", {
   children: /*#__PURE__*/_jsx("path", {
     className: "strokeFillPath",
     d: "M2.7607 11.125C2.7607 13.0718 4.33885 14.65 6.28568 14.65H8.21432C10.1611 14.65 11.7393 13.0718 11.7393 11.125V10.6429C11.7393 9.78254 11.4309 8.99403 10.9189 8.38214H13.5179C13.867 8.38214 14.15 8.0991 14.15 7.75C14.15 7.4009 13.867 7.11786 13.5179 7.11786H8.21597H8.21435H6.28579C5.03727 7.11786 4.02509 6.10568 4.02509 4.85714V4.375C4.02509 3.12647 5.03727 2.11429 6.28579 2.11429H8.21435C9.46288 2.11429 10.4751 3.12647 10.4751 4.375V4.84874C10.4751 5.19784 10.7581 5.48088 11.1072 5.48088C11.4563 5.48088 11.7393 5.19784 11.7393 4.84874V4.375C11.7393 2.42817 10.1612 0.85 8.21435 0.85H6.28579C4.33897 0.85 2.76081 2.42817 2.76081 4.375V4.85714C2.76081 5.71746 3.06916 6.50597 3.58108 7.11786H0.982141C0.633044 7.11786 0.35 7.4009 0.35 7.75C0.35 8.0991 0.633044 8.38214 0.982141 8.38214H8.21424L8.21556 8.38214C8.21559 8.38214 8.21562 8.38214 8.21564 8.38214C9.46353 8.38289 10.4749 9.39474 10.4749 10.6429V11.125C10.4749 12.3735 9.46276 13.3857 8.21424 13.3857H6.28568C5.03715 13.3857 4.02498 12.3735 4.02498 11.125V10.6429C4.02498 10.2938 3.74193 10.0107 3.39284 10.0107C3.04374 10.0107 2.7607 10.2938 2.7607 10.6429V11.125Z",
-    fill: "#64748B",
-    stroke: "#64748B",
+    fill: "currentColor",
+    stroke: "currentColor",
     strokeWidth: "0.3"
   })
 });
@@ -864,19 +864,19 @@ export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 11.0557H3C2.59 11.0557 2.25 10.7157 2.25 10.3057C2.25 9.89566 2.59 9.55566 3 9.55566H12.47C12.88 9.55566 13.22 9.89566 13.22 10.3057C13.22 10.7157 12.89 11.0557 12.47 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 21.0557H3C2.59 21.0557 2.25 20.7157 2.25 20.3057C2.25 19.8957 2.59 19.5557 3 19.5557H12.47C12.88 19.5557 13.22 19.8957 13.22 20.3057C13.22 20.7157 12.89 21.0557 12.47 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -888,19 +888,19 @@ export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 11.0557H7.26172C6.85172 11.0557 6.51172 10.7157 6.51172 10.3057C6.51172 9.89566 6.85172 9.55566 7.26172 9.55566H16.7317C17.1417 9.55566 17.4817 9.89566 17.4817 10.3057C17.4817 10.7157 17.1517 11.0557 16.7417 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 21.0557H7.26172C6.85172 21.0557 6.51172 20.7157 6.51172 20.3057C6.51172 19.8957 6.85172 19.5557 7.26172 19.5557H16.7317C17.1417 19.5557 17.4817 19.8957 17.4817 20.3057C17.4817 20.7157 17.1517 21.0557 16.7417 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -912,19 +912,19 @@ export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 11.0557H11.5312C11.1213 11.0557 10.7812 10.7157 10.7812 10.3057C10.7812 9.89566 11.1213 9.55566 11.5312 9.55566H21.0013C21.4113 9.55566 21.7513 9.89566 21.7513 10.3057C21.7513 10.7157 21.4113 11.0557 21.0013 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 21.0557H11.5312C11.1213 21.0557 10.7812 20.7157 10.7812 20.3057C10.7812 19.8957 11.1213 19.5557 11.5312 19.5557H21.0013C21.4113 19.5557 21.7513 19.8957 21.7513 20.3057C21.7513 20.7157 21.4113 21.0557 21.0013 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
@@ -933,6 +933,9 @@ export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "25",
   viewBox: "0 0 24 25",
   fill: "none",
+  style: {
+    color: "red"
+  },
   children: [/*#__PURE__*/_jsx("path", {
     d: "M5.10156 20.0557H16.9016C18.4016 20.0557 19.0016 19.4157 19.0016 17.8257V16.7857C19.0016 15.1957 18.4016 14.5557 16.9016 14.5557H5.10156",
     stroke: "#64748B",
@@ -1343,19 +1346,22 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M10.1733 6.125V14.875",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.79834 10.5H14.5483",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   })]
 });
 export const FormIcon = () => {

package/dist/Editor/commonStyle.js

@@ -1,7 +1,147 @@
 const useCommonStyle = theme => ({
   sideBarDrawer: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.textFormatBgColor,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder}`,
+      "@media only screen and (min-width: 899px)": {
+        borderRadius: "20px",
+        margin: "5px",
+        height: "calc(100% - 10px)",
+        overflow: "hidden"
+      },
+      "@media only screen and (max-width: 599px)": {
+        borderRadius: "20px 20px 0px 0px"
+      }
+    },
+    "& .optionePopupHeader": {
+      borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`,
+      padding: "0px 0px 10px 0px",
+      margin: "0px 10px",
+      "& .MuiTypography-root": {
+        textTransform: "capitalize"
+      },
+      "& .close-popupbtn": {
+        background: theme?.palette?.editor?.closeButtonBgColor,
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        "& svg": {
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
+    "& .MuiDialogActions-root": {
+      // paddingTop: "10px",
+      "& .primaryBtn, .deleteBtn": {
+        height: "32px !important",
+        fontSize: "14px !important",
+        fontWeight: "600 !important",
+        padding: "0px 20px !important"
+      },
+      "& .deleteBtn": {
+        background: `${theme?.palette?.type === "light" && "#FFF7F9"} !important`
+      }
+    },
+    "& .MuiDialogContent-root": {
+      padding: "0px 5px 0px 10px!important",
+      height: "100%",
+      fontFamily: "Inter, sans-serif",
+      "& .MuiTypography-root": {
+        fontSize: "14px",
+        fontWeight: "500",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& p": {
+        marginBottom: "7px",
+        marginTop: "4px"
+      },
+      "& .muiIconsListParent": {
+        "& svg": {
+          color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+        },
+        "&::-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"
+        }
+      },
+      "& .MuiGrid-root>.MuiGrid-item": {
+        paddingRight: "0px !important",
+        fontFamily: "Inter, sans-serif",
+        height: 'fit-content'
+      },
+      "& .MuiInputBase-root": {
+        borderRadius: "10px",
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        border: `none`,
+        height: "36px",
+        boxShadow: "0px 4px 16px 0px #0000000D",
+        fontFamily: "Inter, sans-serif",
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+        },
+        "& input::placeholder": {
+          color: "#94A3B8 !important",
+          opacity: "unset",
+          fontFamily: "Inter, sans-serif"
+        },
+        "& .colorPickerButton": {
+          border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+        }
+      },
+      "& .MuiInputBase-root:has(.colorPickerButton)": {
+        "& .MuiInputBase-input": {
+          padding: "8.5px 14px 8.5px 0px",
+          fontFamily: "Inter, sans-serif"
+        }
+      },
+      "& .MuiInputBase-input": {
+        color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+        textTransform: "math-auto",
+        fontFamily: "Inter, sans-serif"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& fieldset": {
+        border: `1px solid transparent`,
+        borderRadius: "10px"
+      },
+      "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&:hover": {
+        "&::-webkit-scrollbar-thumb, & .MuiPaper-root ::-webkit-scrollbar-thumb": {
+          background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+        },
+        "&::-webkit-scrollbar-track, & .MuiPaper-root ::-webkit-scrollbar-track": {
+          visibility: "hidden"
+        }
+      },
+      "& .sld-wrpr": {
+        paddingLeft: "5px",
+        "& .sliderInput": {
+          background: theme?.palette?.editor?.inputFieldBgColor,
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+          borderRadius: "10px",
+          width: "46px !important",
+          marginLeft: "10px",
+          height: '36px !important'
+        }
+      },
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        fontFamily: "Inter, sans-serif"
+      }
     },
     "& .MuiTypography-root": {
       color: theme?.palette?.editor?.textColor
@@ -17,19 +157,61 @@ const useCommonStyle = theme => ({
     },
     "& .close-popupbtn": {
       color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiSvgIcon-root": {
+      color: theme?.palette?.editor?.textColor
     }
   },
   sapcingInput: {
     backgroundColor: theme?.palette?.editor?.background,
     color: theme?.palette?.editor?.textColor
   },
+  customCheckBox: {
+    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"
+    }
+  },
+  customPaddingInput: {
+    background: theme?.palette?.editor?.inputFieldBgColor,
+    border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "6px"
+  },
   colorPickerPopup: {
     "& .MuiPaper-root": {
       overflow: "auto",
       backgroundColor: theme?.palette?.editor?.background
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      "@media only screen and (max-width: 899px)": {
+        width: "100% !important"
+      }
     },
     "& .popup_tabs-header": {
       backgroundColor: theme?.palette?.editor?.background,
@@ -66,11 +248,14 @@ const useCommonStyle = theme => ({
       }
     }
   },
+  colorPickerBtnBorder: {
+    border: `2px solid ${theme?.palette?.editor?.buttonBorder2} !important`
+  },
   signaturePopup: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .signature-canvas": {
-        backgroundColor: "#FFF"
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
       "& label": {
         color: theme?.palette?.editor?.textColor
@@ -97,26 +282,97 @@ const useCommonStyle = theme => ({
         borderColor: theme?.palette?.editor?.textColor
       },
       "& .upload-wrapper-ui": {
-        backgroundColor: theme?.palette?.type === "dark" ? "transparent" : "#F8F9FF",
+        backgroundColor: theme?.palette?.type === "dark" ? "#2563EB0F" : "#F8F9FF",
         "& .MuiTypography-root": {
           color: theme?.palette?.editor?.textColor
         }
       },
+      "& .typesignature-input-wrapper": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          borderRadius: "7px !important",
+          paddingRight: "6px !important"
+        },
+        "& .MuiInputBase-input": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder}`
+        },
+        "& .Mui-focused": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid #2563EB !important`
+          }
+        },
+        "& button": {
+          background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      },
       "& .typesignature-fontfamily": {
         "& button": {
-          color: theme?.palette?.editor?.textColor
+          color: theme?.palette?.editor?.textColor,
+          background: `${theme?.palette?.editor?.signatureFontBtnBg} !important`,
+          border: `1px solid ${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+          "& p": {
+            fontSize: "13px !important"
+          }
+        },
+        "& .active ": {
+          border: `1px solid #2563EB !important`
         }
       },
       "& .MuiTab-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        opacity: "unset",
+        fontSize: "12px !important",
+        fontWeight: "500 !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonBorder} !important`
+      },
+      "& .Mui-selected": {
+        background: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBg} !important`,
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBorder} !important`,
+        "& .MuiGrid-root": {
+          "& svg": {
+            "& path": {
+              fill: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedSvg} !important`
+            }
+          }
+        }
       },
       "& .close-popupbtn": {
-        color: theme?.palette?.editor?.textColor
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        background: `${theme?.palette?.editor?.closeButtonBgColor} !important`
       },
       "& .deleteBtn": {
-        background: "transparent"
+        background: "transparent",
+        margin: "0px !important"
+      },
+      "& .MuiGrid-container": {
+        "& .workFlowButton": {
+          background: `${theme?.palette?.editor?.workFlowButtonBackground} !important`,
+          textTransform: "unset !important",
+          color: `${theme?.palette?.editor?.textColor} !important`,
+          fontSize: "14px !important",
+          fontWeight: "500 !important",
+          borderRadius: "25px",
+          padding: "5px 15px"
+        }
+      },
+      "& .MuiDialogActions-root": {
+        "& .deleteButtonSignature": {
+          background: `${theme?.palette?.editor?.closeButtonBackground} !important`,
+          color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+          border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`
+        }
       }
+    },
+    "& .disabledSaveBtn": {
+      background: "#2563EB33 !important",
+      color: theme?.palette?.type === "dark" && "#FFFFFF33 !important",
+      border: "1px solid #2563EB33 !important"
     }
   },
   popupTitle2: {
@@ -126,11 +382,161 @@ const useCommonStyle = theme => ({
   textOptions: {
     "& .MuiPopover-root": {
       backgroundColor: theme?.palette?.editor?.background
+    },
+    "& svg": {
+      width: "20px",
+      height: "24px",
+      color: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+    }
+  },
+  textOptionsList: {
+    "& .MuiMenuItem-root": {
+      padding: "8px 12px",
+      fontSize: "12px",
+      color: theme?.palette?.editor?.menuOptionTextColor,
+      fontWeight: '500',
+      fontFamily: "Inter, sans-serif",
+      minHeight: '36px',
+      "&:hover": {
+        backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
+      }
+    },
+    '& .Mui-selected': {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+    },
+    "& .MuiListSubheader-root": {
+      color: "gray",
+      fontWeight: "bold",
+      fontSize: "12px"
+    },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      padding: '0px',
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
+    },
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
+    },
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
     "& .react-datepicker-wrapper": {
-      width: "100%"
+      width: "100%",
+      "& .react-datepicker__input-container": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          "& .MuiInputBase-input": {
+            background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`
+          }
+        }
+      }
+    }
+  },
+  signaturePopUpNameField: {
+    background: "transparent !important",
+    "& .MuiInputBase-root": {
+      borderRadius: "10px !important",
+      background: "transparent !important",
+      "& .MuiOutlinedInput-input": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "10px !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`,
+        fontSize: "14px !important",
+        fontWeight: "500 !important"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
+    },
+    "& .Mui-focused": {
+      "& .MuiOutlinedInput-input": {
+        border: `1px solid #2563EB !important`
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
+    }
+  },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '4px !important',
+    '& svg': {
+      width: '18px !important',
+      height: '18px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  pageSettingPopUpRoot: {
+    padding: "16px 8px 16px 10px!important",
+    height: "100%"
+  },
+  buttonMoreOption2: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  buttonMoreOption3: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    padding: '5px !important',
+    '& svg': {
+      width: '16px !important',
+      height: '16px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
+  },
+  resizeButton: {
+    background: theme?.palette?.editor?.aiInputBackground,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    '&:hover': {
+      background: theme?.palette?.editor?.aiInputBackground
+    }
+  },
+  gradientFillBtn: {
+    background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
+    textTransform: 'math-auto !important',
+    color: '#FFFFFF !important',
+    padding: '0px 12px !important',
+    height: '32px',
+    borderRadius: '8px',
+    fontWeight: '500',
+    fontSize: '14px'
+  },
+  emptyThumbBtn: {
+    background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+    color: `${theme?.palette?.editor?.textColor} !important`,
+    fontSize: '14px !important',
+    '& svg': {
+      width: '20px !important',
+      height: '20px !important',
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
     }
   }
 });

package/dist/Editor/helper/deserialize/index.js

@@ -14,15 +14,24 @@ const handleTableCell = (el, children) => {
   });
   return {
     type: "table-cell",
-    overwriteChild: wrapChild
+    overwriteChild: wrapChild,
+    size: {
+      width: 120
+    }
   };
 };
-const PARA_WRAP = ["A"];
+const INLINE_TAGS = ["A", "ABBR", "B", "BDO", "CITE", "CODE", "DATA", "DEL", "DFN", "IMG", "INS", "KBD", "LABEL", "MARK", "Q", "SAMP", "SMALL", "SPAN", "SUB", "SUP", "TIME", "VAR"];
 const paragraphType = el => {
   const {
     childNodes = []
   } = el || {};
-  const isHavingText = childNodes?.length ? Array.from(childNodes)?.find(child => child?.nodeType === 3 || TEXT_TAGS[child?.nodeName] || PARA_WRAP.includes(child.nodeName)) : null;
+
+  // if anyone of the child node is text node or wrapped with inline tags, it is considered to be an paragraph node
+  const isHavingText = childNodes?.length ? Array.from(childNodes)?.some(child => {
+    const isTextNode = child?.nodeType === 3;
+    const isHavingInlineTags = TEXT_TAGS[child?.nodeName] || INLINE_TAGS.includes(child.nodeName);
+    return isTextNode || isHavingInlineTags;
+  }) : null;
   return isHavingText ? {
     type: "paragraph"
   } : {};
@@ -121,11 +130,10 @@ const TEXT_TAGS = {
   }),
   U: () => ({
     underline: true
-  }),
-  B: () => ({
-    bold: true
   })
+  // B: () => ({ bold: true }),
 };
+
 const deserialize = el => {
   if (el.nodeType === 3) {
     const match = /\r|\n/.exec(el.textContent);
@@ -145,12 +153,9 @@ const deserialize = el => {
   }
   let children = Array.from(parent.childNodes).map(deserialize).flat();
   if (children.length === 0) {
-    children = {
-      type: "paragraph",
-      children: [{
-        text: ""
-      }]
-    };
+    children = [{
+      text: ""
+    }];
   }
   if (el.nodeName === "BODY") {
     return jsx("fragment", {}, children);
@@ -166,7 +171,14 @@ const deserialize = el => {
   }
   if (TEXT_TAGS[nodeName]) {
     const attrs = TEXT_TAGS[nodeName](el);
-    return children.map(child => jsx("text", attrs, child));
+    return children.map(child => {
+      if (child?.type) {
+        // if any list elements (like ul, ol... tags) is wrapped inside the TEXT_TAGS, we will return child as it is, else return it as text node
+        return child;
+      } else {
+        return jsx("text", attrs, child);
+      }
+    });
   }
   return children;
 };