@flozy/editor 4.8.9 → 4.9.0

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

@@ -1,14 +1,15 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: "1px 2px 15px 0px #2563EB40",
+    boxShadow: theme?.palette?.type === "light" ? "1px 2px 15px 0px #2563EB40" : "unset",
     zIndex: 1300,
     marginBottom: "12px !important",
-    borderRadius: "6px",
-    border: "1px solid #D8DDE1",
+    borderRadius: "20px !important",
+    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor} !important`,
     maxWidth: "100%",
     // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
+      borderRadius: "0px !important",
       "& .papper-wrpr": {
         boxShadow: "none"
       }
@@ -17,7 +18,12 @@ const usePopupStyle = theme => ({
       transform: "none !important"
     },
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: `${theme?.palette?.editor?.textFormatBgColor} !important`,
+      borderRadius: "19px !important",
+      paddingBottom: "10px !important"
+    },
+    "& .MuiDialog-paperFullScreen": {
+      borderRadius: "0px !important"
     },
     "&.textSettings": {
       "@media only screen and (max-width: 600px)": {
@@ -26,7 +32,7 @@ const usePopupStyle = theme => ({
       }
     },
     "& .MuiTypography-root": {
-      color: theme?.palette?.editor?.textColor
+      color: theme?.palette?.editor?.textFormatTextColor
     },
     "& .MuiInputBase-root": {
       color: theme?.palette?.editor?.textColor,
@@ -54,12 +60,13 @@ const usePopupStyle = theme => ({
       }
     },
     "@media only screen and (max-width: 599px)": {
-      padding: "10px",
+      margin: "10px !important",
       background: "unset",
-      boxShadow: "unset",
-      border: "none"
+      boxShadow: "unset"
+      // border: "none",
     }
   },
+
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "323px",
@@ -96,7 +103,7 @@ const usePopupStyle = theme => ({
     },
     "& .headerContainer": {},
     "& .textSettingHeader": {
-      borderBottom: "1px solid #DCE4EC",
+      // borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",
       marginBottom: "20px"
     },
@@ -111,8 +118,45 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
+      "& .colorBoxElementIcon": {
+        "& path": {
+          fill: theme?.palette?.type === "dark" ? "none" : ""
+        }
+      },
       "&:hover": {
-        backgroundColor: "#E9F3FE"
+        backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        "& .signatureElementIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+          }
+        },
+        "& .commonSvgStyle": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+          }
+        },
+        "& .commonSvgStyle2": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+          }
+        },
+        "& .colorBoxElementIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+            fill: "none"
+          }
+        },
+        "& .gridElementIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+          }
+        },
+        "& .newLineElementIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+          }
+        }
       },
       "& svg": {
         width: "24px",
@@ -168,8 +212,21 @@ const usePopupStyle = theme => ({
     },
     "& .MuiFormControl-root.MuiTextField-root input": {
       padding: "8px 35px 6px 12px"
+    },
+    "& .toogleFullScreenBtn": {
+      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      padding: "4px !important",
+      "& .toogleFullScreenSvg": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
     }
   },
+  textSettingHeader: {
+    display: "flex",
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
+  },
   textFormatField: {
     marginBottom: "16px",
     marginTop: "10px"
@@ -182,6 +239,87 @@ const usePopupStyle = theme => ({
     // marginBottom: "16px",
     marginTop: "10px"
   },
+  textFormatField3: {
+    marginBottom: "16px"
+  },
+  textAlignButtons: {
+    "& .justifyIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    },
+    "& .textAlignIconSameStyles": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    },
+    "& .orderedListIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      },
+      "& text": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    },
+    "& .bulletedListTextIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      },
+      "& circle": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    },
+    "& .checkedListTextIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    },
+    "& .accordianListTextIcon": {
+      // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+      "& svg": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      },
+      "& path": {
+        fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+        stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`
+      }
+    }
+  },
+  autoCompleteaFontFamily: {
+    "& .MuiOutlinedInput-root": {
+      borderRadius: "8px",
+      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+      fontSize: "14px",
+      height: "36px"
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    }
+  },
+  textFormatSelect: {
+    background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+    width: "100%",
+    height: "36px",
+    borderRadius: "10px",
+    fontSize: "12px",
+    fontFamily: "Inter, sans-serif",
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    }
+  },
+  textFormatSelectOptions: {
+    margin: "5px !important",
+    borderRadius: "4px !important",
+    fontSize: "12px !important",
+    fontWeight: 500,
+    "&.Mui-selected": {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+      color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+    }
+  },
   textFormatFieldBorder: {
     display: "flex",
     alignItems: "center",
@@ -191,7 +329,8 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   dividerGrid: {
-    margin: "5px 0px 10px 0px"
+    margin: "5px 0px 10px 0px",
+    background: `${theme?.palette?.editor?.deviderBgColor} !important`
   },
   textFormatColorWrpr: {
     display: "flex",
@@ -301,58 +440,95 @@ const usePopupStyle = theme => ({
     }
   },
   btnGroup: {
-    backgroundColor: theme?.palette?.editor?.background,
+    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+    borderRadius: "7px",
+    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
     "& button": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: theme?.palette?.editor?.borderColor,
+      borderColor: "#ffffff00 !important",
       textTransform: "capitalize",
       marginBottom: "0px",
-      "&:hover": {
-        color: theme?.palette?.editor?.borderColor,
-        background: theme?.palette?.editor?.background
-      },
       "&.active": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+        border: `1px solid #ffffff00`
       }
+    },
+    "& .colorBox": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "7px 0px 0px 7px",
+      fontSize: "12px !important",
+      fontWeight: 500
+    },
+    "& .colorPicker": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "0px 7px 7px 0px"
+    },
+    "& .vl": {
+      background: theme?.palette?.editor?.borderColor,
+      width: "2px",
+      height: "25px",
+      margin: "5px 0px"
     }
   },
   btnGroup2: {
-    backgroundColor: theme?.palette?.editor?.background,
+    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+    borderRadius: "7px",
+    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
     "& button": {
       backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: theme?.palette?.editor?.borderColor,
+      borderColor: "#ffffff00 !important",
       textTransform: "capitalize",
       marginBottom: "0px",
-      "&:hover": {
-        color: theme?.palette?.editor?.borderColor,
-        background: theme?.palette?.editor?.background
-      },
+      // "&:hover": {
+      //   color: theme?.palette?.editor?.borderColor,
+      //   background: theme?.palette?.editor?.background,
+      // },
       "&.active": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-        padding: "0px 5px !important"
+        border: `1px solid #ffffff00`,
+        borderRadius: "7px 0px 0px 7px"
       }
+    },
+    "& .colorBox": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "7px 0px 0px 7px",
+      fontSize: "12px !important",
+      fontWeight: 500
+    },
+    "& .colorPicker": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "0px 7px 7px 0px"
+    },
+    "& .vl": {
+      background: theme?.palette?.editor?.borderColor,
+      width: "2px",
+      height: "25px",
+      margin: "5px 0px"
     }
   },
   allColor: {
+    borderRadius: "7px !important",
     "& .buttonsWrpr": {
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderRadius: "7px !important",
       "& button": {
         color: theme?.palette?.editor?.textColor
       }
     }
   },
   allColorInner: {
+    borderRadius: "7px !important",
     "& .buttonsWrpr": {
       "& button": {
         border: "1px solid #ccc",
@@ -382,7 +558,7 @@ const usePopupStyle = theme => ({
     padding: "0px 10px"
   },
   defaultBtn2: {
-    color: "#A2B0B9 !important",
+    color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
@@ -430,10 +606,24 @@ const usePopupStyle = theme => ({
     }
   },
   textOptions: {
-    backgroundColor: theme?.palette?.editor?.background,
-    color: theme?.palette?.editor?.textColor
+    backgroundColor: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "8px !important",
+    fontFamily: "Inter, sans-serif",
+    "& .MuiList-root": {
+      padding: "0px !important"
+    }
   },
   textSize: {
+    height: "36px !important",
+    "& .MuiOutlinedInput-root": {
+      borderRadius: "8px !important",
+      height: "36px !important",
+      background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
     "& .textFontArrows": {
       "& svg": {
         stroke: theme?.palette?.editor?.textColor
@@ -441,41 +631,76 @@ const usePopupStyle = theme => ({
     }
   },
   closeBtn: {
-    backgroundColor: theme?.palette?.editor?.background,
-    color: theme?.palette?.editor?.textColor
+    background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+    color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
   },
   colorPickerPopup: {
     margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      borderRadius: "14px !important",
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor
     },
     "& .popup_tabs-header": {
-      backgroundColor: theme?.palette?.editor?.background,
+      fontFamily: "Inter, sans-serif",
+      fontWeight: 700,
+      fontSize: "12px !important",
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.background
+        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
       }
     },
+    "& .popup_tabs-body": {
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+    },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .color-picker-panel": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .input_rgba": {
       "& input": {
-        backgroundColor: theme?.palette?.editor?.background,
-        color: theme?.palette?.editor?.textColor
+        backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+        color: theme?.palette?.editor?.textColor,
+        height: "32px !important",
+        borderRadius: "10px !important",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: "none",
+        "&:hover": {
+          backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+        },
+        "&:focus": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+          backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          boxShadow: "none"
+        }
+      },
+      "& .input_rgba-hex-label": {
+        top: "4px !important"
+      },
+      "& .input_rgba-alpha-label": {
+        top: "6px !important"
+      },
+      "& .input_rgba-label": {
+        display: "none"
+      }
+    },
+    "& .default-color-panel": {
+      "& .default-color-panel_item": {
+        borderRadius: "50%"
       }
     }
   },
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
+      borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }

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

@@ -32,7 +32,8 @@ const TextFormat = props => {
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
   const {
-    fontFamilies
+    fontFamilies,
+    theme
   } = useEditorContext();
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");
@@ -145,7 +146,7 @@ const TextFormat = props => {
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 12,
-          sx: classes.textFormatField,
+          sx: classes.textFormatField3,
           children: /*#__PURE__*/_jsx(Dropdown, {
             classes: classes,
             ...fontWeight,
@@ -242,7 +243,7 @@ const TextFormat = props => {
             children: /*#__PURE__*/_jsx(Button, {
               sx: classes.defaultBtn2,
               startIcon: /*#__PURE__*/_jsx(ColorResetIcon, {
-                stroke: "#A2B0B9"
+                stroke: theme?.palette?.type === "dark" ? "#505359" : "#A2B0B9"
               }),
               onClick: handleDefault({
                 format: "bgColor"
@@ -378,7 +379,7 @@ const TextFormat = props => {
       children: [/*#__PURE__*/_jsxs(ButtonGroup, {
         sx: classes.btnGroup,
         children: [/*#__PURE__*/_jsx(Button, {
-          className: `no-hover ${bqBgColor ? "active" : ""}`,
+          className: `no-hover ${bqBgColor ? "active" : ""} colorBox`,
           onClick: handleQuote({
             bgColor: !bqBgColor ? "rgb(227, 236, 255)" : null
           }),
@@ -386,14 +387,17 @@ const TextFormat = props => {
             background: bqBgColor
           },
           children: "Colorbox"
+        }), /*#__PURE__*/_jsx("div", {
+          className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("bgColor"),
+          className: "colorPicker",
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
         sx: classes.btnGroup2,
         children: [/*#__PURE__*/_jsx(Button, {
-          className: `no-hover ${bqColor ? "active" : ""}`,
+          className: `no-hover colorBox`,
           onClick: handleQuote({
             color: !bqColor ? "rgb(47, 94, 188)" : null
           }),
@@ -405,8 +409,11 @@ const TextFormat = props => {
             },
             children: "Quote"
           })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("color"),
+          className: "colorPicker",
           children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
         })]
       })]

package/dist/Editor/common/Icon.js

@@ -1,18 +1,17 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
-import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
+import { MdFormatQuote, MdAdd, MdArrowForward, MdOutlinePermMedia } from "react-icons/md";
+import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { CiGrid32 } from "react-icons/ci";
-import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
+import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon } from "./iconListV2";
+import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
@@ -60,7 +59,8 @@ const iconList = {
   }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
-    fill: "#64748B"
+    fill: "#64748B",
+    className: "blockQuoteSvg"
   }),
   doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
@@ -74,19 +74,19 @@ const iconList = {
     size: 15,
     fill: "#64748B"
   }),
-  alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
+  alignLeft: /*#__PURE__*/_jsx(LeftAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
+  alignCenter: /*#__PURE__*/_jsx(CenterAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
+  alignRight: /*#__PURE__*/_jsx(RightAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignJustify: /*#__PURE__*/_jsx(MdFormatAlignJustify, {
+  alignJustify: /*#__PURE__*/_jsx(JustifyTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
@@ -200,7 +200,7 @@ const iconList = {
   accordionArrowDown: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
     size: 20
   }),
-  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
+  appHeader: /*#__PURE__*/_jsx(AppHeaderElement, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
   docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
   colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
@@ -220,19 +220,14 @@ const iconList = {
   SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-  embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
+  embedScript: /*#__PURE__*/_jsx(CodeElementIcon, {
     className: "fg-op-ico",
     size: 20,
     style: {
       fill: "#64748B"
     }
   }),
-  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
-    size: 20,
-    style: {
-      fill: "#64748B"
-    }
-  }),
+  freegrid: /*#__PURE__*/_jsx(FreeGridElement, {}),
   text: /*#__PURE__*/_jsx(Text, {
     stroke: "#64748B"
   }),