@flozy/editor 5.5.7 → 5.5.8

package/dist/Editor/common/Icon.js

@@ -1,19 +1,18 @@
 import React from "react";
-import { MdFormatQuote, MdAdd, MdArrowForward, MdOutlinePermMedia } from "react-icons/md";
-import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
+import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
+import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } 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 { 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, GridAddSectionIcon } from "./iconslist";
+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 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 GridOnIcon from "@mui/icons-material/GridOn";
-import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
-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, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } 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 } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
@@ -23,25 +22,10 @@ import AddElementIcon from "../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
+import DeleteIcon from '@mui/icons-material/Delete';
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
-import HashtagIcon from "../assets/svg/HashtagIcon";
-import SelectRoundedIcon from "../assets/svg/SelectRoundedIcon";
-import SortByIcon from "../assets/svg/SortByIcon";
-import TickOutlined from "../assets/svg/TickOutlined";
-import CalenderIconTick from "../assets/svg/CalenderIconTick";
-import PlusIcon from "../assets/svg/PlusIcon";
-import EyeSlash from "../assets/svg/EyeSlash";
-import ArrowUpIcon from "../assets/svg/ArrowUpIcon";
-import ArrowDownIcon from "../assets/svg/ArrowDownIcon";
-import DuplicateIcon from "../assets/svg/DuplicateIcon";
-import EyeIcon from "../assets/svg/EyeIcon";
-import TrashIcon from "../assets/svg/TrashCanIcon";
-import DataTableIcon from "../assets/svg/DataTableIcon";
-import ChervDown from "../assets/svg/ChervDown";
-import ChervUp from "../assets/svg/ChervUp";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -78,8 +62,7 @@ const iconList = {
   }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
-    fill: "#64748B",
-    className: "blockQuoteSvg"
+    fill: "#64748B"
   }),
   doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
@@ -93,19 +76,19 @@ const iconList = {
     size: 15,
     fill: "#64748B"
   }),
-  alignLeft: /*#__PURE__*/_jsx(LeftAlignTextFormat, {
+  alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
     size: 18,
     fill: "#64748B"
   }),
-  alignCenter: /*#__PURE__*/_jsx(CenterAlignTextFormat, {
+  alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
     size: 18,
     fill: "#64748B"
   }),
-  alignRight: /*#__PURE__*/_jsx(RightAlignTextFormat, {
+  alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
     size: 18,
     fill: "#64748B"
   }),
-  alignJustify: /*#__PURE__*/_jsx(JustifyTextFormat, {
+  alignJustify: /*#__PURE__*/_jsx(MdFormatAlignJustify, {
     size: 18,
     fill: "#64748B"
   }),
@@ -219,7 +202,7 @@ const iconList = {
   accordionArrowDown: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
     size: 20
   }),
-  appHeader: /*#__PURE__*/_jsx(AppHeaderElement, {}),
+  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
   docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
   colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
@@ -239,18 +222,23 @@ const iconList = {
   SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-  embedScript: /*#__PURE__*/_jsx(CodeElementIcon, {
+  embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
     className: "fg-op-ico",
     size: 20,
     style: {
       fill: "#64748B"
     }
   }),
-  freegrid: /*#__PURE__*/_jsx(FreeGridElement, {}),
+  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
+    size: 20,
+    style: {
+      fill: "#64748B"
+    }
+  }),
   text: /*#__PURE__*/_jsx(Text, {
     stroke: "#64748B"
   }),
-  calenderNewIcon: /*#__PURE__*/_jsx(CalenderIconTick, {}),
+  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),
   briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
@@ -287,32 +275,11 @@ const iconList = {
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
   addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
-  dataView: /*#__PURE__*/_jsx(GridOnIcon, {
-    sx: {
-      fill: "#64748B"
-    }
-  }),
   editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
   deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
-  shieldNoAccess: /*#__PURE__*/_jsx(GppBadOutlinedIcon, {}),
-  hashtagIcon: /*#__PURE__*/_jsx(HashtagIcon, {}),
-  selectRounded: /*#__PURE__*/_jsx(SelectRoundedIcon, {}),
-  sortBy: /*#__PURE__*/_jsx(SortByIcon, {}),
-  addRounded: /*#__PURE__*/_jsx(GridAddSectionIcon, {}),
-  tickOutline: /*#__PURE__*/_jsx(TickOutlined, {}),
-  plusIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
-  eyeSlash: /*#__PURE__*/_jsx(EyeSlash, {}),
-  eyeIcon: /*#__PURE__*/_jsx(EyeIcon, {}),
-  arrowUp: /*#__PURE__*/_jsx(ArrowUpIcon, {}),
-  arrowDown: /*#__PURE__*/_jsx(ArrowDownIcon, {}),
-  duplicateIcon: /*#__PURE__*/_jsx(DuplicateIcon, {}),
-  trashIcon: /*#__PURE__*/_jsx(TrashIcon, {}),
-  dataTable: /*#__PURE__*/_jsx(DataTableIcon, {}),
-  chervUp: /*#__PURE__*/_jsx(ChervUp, {}),
-  chervDown: /*#__PURE__*/_jsx(ChervDown, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
 };
 export const icons = {
   ...iconList

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

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

package/dist/Editor/common/ImageSelector/Styles.js

@@ -58,32 +58,11 @@ const ImageSelectorStyles = theme => ({
       borderRadius: "12px",
       backgroundColor: theme?.palette?.editor?.background
     },
-    "& .MuiDialogTitle-root": {
-      fontSize: "16px",
-      fontWeight: "700",
-      "& button": {
-        "& svg": {
-          "& rect": {
-            fill: theme?.palette?.editor?.closeButtonBgColor
-          },
-          "& path": {
-            stroke: theme?.palette?.editor?.closeButtonSvgStroke
-          }
-        }
-      }
-    },
-    "& .MuiDivider-root": {
-      background: theme?.palette?.editor?.deviderBgColor,
-      "@media only screen and (min-width: 899px)": {
-        margin: "0px 24px",
-        width: 'calc(100% - 48px)'
-      }
-    },
     "& .primaryBtn": {
       background: "#2563eb !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "32px !important",
+      height: "28px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
       color: "#ffffff !important",
@@ -92,43 +71,23 @@ const ImageSelectorStyles = theme => ({
       marginLeft: "0px !important"
     },
     "& .secondaryBtn": {
-      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      background: "#ffffff !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "32px !important",
+      height: "28px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
-      color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
-      border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`,
+      color: "#2563eb !important",
+      border: "1px solid #2563eb !important",
       width: "auto !important",
       marginRight: "8px !important"
-    },
-    "& .MuiGrid-root": {
-      "&::-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"
-      }
-    },
-    "& .MuiImageList-root": {
-      margin: '0px'
-    },
-    "& .MuiDialogContent-root": {
-      padding: '20px 24px 5px 24px'
     }
   },
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor,
-    fontFamily: "Inter, sans-serif"
+    fontFamily: 'Inter, sans-serif'
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -1,38 +1,26 @@
 const UploadStyles = theme => ({
   uploadContainer: {
-    border: `1px solid ${theme?.palette?.editor?.uploadFileBorder}`,
+    border: "1px solid #2563EB",
     padding: "10px",
-    borderRadius: "11px",
-    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
-    background: theme?.palette?.editor?.uploadFileBg,
-    height: '100%',
-    minHeight: '150px'
+    borderRadius: "7px",
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
   },
   uploadField: {
     width: "100%",
     backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
-    height: "auto",
+    height: "250px",
     position: "relative",
-    backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
+    backgroundColor: theme?.palette?.editor?.background,
     borderRadius: "9px",
-    border: "1px dashed #2563EB",
-    minHeight: '150px'
+    border: "1px dashed #2563EB"
   },
   uploadIcon: {
-    display: "grid !important",
     "& svg": {
-      display: 'flex',
-      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
-    },
-    '& span': {
-      display: 'flex',
-      width: '100%',
-      marginTop: '5px'
     }
   }
 });

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

@@ -1,7 +1,6 @@
-import { Autocomplete, Checkbox, FormControlLabel, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
-import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -5,14 +5,13 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Select, Typography } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
 import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents";
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

@@ -3,40 +3,9 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
+    padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
-    overflow: "hidden",
-    // padding: "8px 0px !important",
-    background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-    "& .MuiPaper-root": {
-      background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      "& .MuiBox-root": {
-        "& .renderComp": {
-          padding: "2px 0px 2px 1px",
-          background: "transparent !important",
-          "&:hover": {
-            borderRadius: "10px",
-            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-          }
-        },
-        "& button": {
-          padding: "0px 0px 0px 4px !important",
-          "& svg": {
-            width: "21px !important",
-            margin: "5px 12px 6px 4px !important"
-          },
-          "&:hover": {
-            borderRadius: "10px",
-            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-          }
-        },
-        "&:hover": {
-          "& .MuiPaper-root": {
-            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
-            borderRadius: "7px"
-          }
-        }
-      }
-    }
+    overflow: "hidden"
   },
   papper: {
     boxShadow: "none",
@@ -52,111 +21,6 @@ const usePopupStyles = theme => ({
     },
     "& button": {
       color: theme?.palette?.editor?.textColor
-    },
-    "@media only screen and (min-width: 899px)": {
-      maxHeight: "400px"
-    },
-    "&  .orderedListIcon, .bulletedListTextIcon, .checkedListTextIcon, .accordianIconSvgTextFormat": {
-      width: "20px !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"
-    },
-    "& svg": {
-      width: "20px",
-      height: "20px"
-    },
-    "& .signatureElementIcon": {
-      "& path": {
-        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
-      }
-    },
-    "& .commonSvgStyle": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
-      }
-    },
-    "& .commonSvgStyle2": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
-      }
-    },
-    "& .colorBoxElementIcon": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        fill: "none"
-      }
-    },
-    "& .gridElementIcon": {
-      "& path": {
-        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
-      }
-    },
-    "& .newLineElementIcon": {
-      "& path": {
-        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
-      }
-    },
-    "& .orderedListIcon": {
-      "& .strokePathList": {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      },
-      "& .fillPathList": {
-        fill: theme?.palette?.editor?.closeButtonSvgStroke
-      }
-    },
-    "& .bulletedListTextIcon": {
-      "& path": {
-        fill: theme?.palette?.editor?.closeButtonSvgStroke,
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      },
-      "& circle": {
-        fill: theme?.palette?.editor?.closeButtonSvgStroke
-      }
-    },
-    "& .checkedListTextIcon": {
-      "& path": {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      }
-    },
-    "& .accordianIconSvgTextFormat": {
-      "& path": {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      }
-    },
-    "& .blockQuoteSvg": {
-      fill: theme?.palette?.editor?.closeButtonSvgStroke,
-      stroke: theme?.palette?.editor?.closeButtonSvgStroke
-    },
-    "& .BrainIcon": {
-      "& .bainIconPathStroke": {
-        fill: theme?.palette?.editor?.closeButtonSvgStroke,
-        stroke: "unset !important"
-      },
-      "& .bainIconPathStroke2": {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke,
-        fill: theme?.palette?.editor?.closeButtonSvgStroke
-      }
-    },
-    "& .calederIconSvg": {
-      '& rect': {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      },
-      '& .strokePath': {
-        stroke: theme?.palette?.editor?.closeButtonSvgStroke
-      },
-      '& .fillPath': {
-        fill: theme?.palette?.editor?.closeButtonSvgStroke
-      }
     }
   },
   groupHeader: {
@@ -164,7 +28,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
+    borderBottom: "1px solid #DCE4EC"
   },
   listItem: {
     cursor: "pointer",
@@ -195,9 +59,12 @@ const usePopupStyles = theme => ({
         justifyContent: "start",
         "& svg": {
           margin: "5.5px",
-          width: "24px",
+          width: "19px",
           height: "24px"
         },
+        '& .MuiTypography-root ': {
+          padding: '0px 0px 0px 7px'
+        },
         span: {
           padding: "8px",
           fontSize: "14px",
@@ -212,8 +79,7 @@ const usePopupStyles = theme => ({
     margin: "8px",
     display: "flex",
     justifyContent: "center",
-    alignItems: "center",
-    color: "#64748B"
+    alignItems: "center"
   }
 });
 export default usePopupStyles;

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

@@ -97,7 +97,7 @@ const MentionsPopup = /*#__PURE__*/forwardRef((props, ref) => {
         id: `cmd-li-ind-${index}}`,
         component: "div",
         onClick: handleClick(char, i),
-        className: `${type !== 'elements' && i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
+        className: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
         sx: classes.listItem,
         ref: i === index ? papperRef : null,
         children: char.renderComponent ? char.renderComponent({

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

@@ -1,13 +1,10 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { StyleContent } from "../../../StyleBuilder";
-import { formStyle } from "../../../StyleBuilder/formStyle";
+import formStyle from "../../../StyleBuilder/formStyle";
 import { ReactEditor } from "slate-react";
-import { ExpandMoreOutlined } from "@mui/icons-material";
-import { useEditorContext } from "../../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const FormSettings = props => {
   const {
     editor,
@@ -17,13 +14,7 @@ const FormSettings = props => {
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
   const element = Node.get(editor, element_path);
-  const styleMaps = formStyle;
-  const {
-    hideTools
-  } = customProps || {};
-  const {
-    theme
-  } = useEditorContext();
+  const styleMaps = formStyle?.filter(f => !f?.hideOnFGS);
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -35,109 +26,23 @@ const FormSettings = props => {
     }, {
       at: [...currentPath, 0]
     });
-    // adding form field style to the current form node
-    const currentNode = Node.get(editor, element_path);
-    if (currentNode) {
-      currentNode?.children[0]?.children?.forEach((item, index) => {
-        Transforms.setNodes(editor, {
-          bgColor: data?.fieldBgColor ? data?.fieldBgColor : item?.bgColor,
-          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : item?.borderColor,
-          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : item?.borderStyle,
-          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : item?.borderWidth,
-          textColor: data?.fieldTextColor ? data?.fieldTextColor : item?.textColor,
-          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : item?.fontFamily,
-          textSize: data?.fieldTextSize ? data?.fieldTextSize : item?.textSize,
-          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : item?.fontWeight
-        }, {
-          at: [...currentPath, 0, index]
-        });
-      });
-    }
   };
   const handleClose = () => {
     console.log("close");
   };
-  const muiTheme = createTheme({
-    components: {
-      MuiAccordion: {
-        styleOverrides: {
-          root: {
-            "& .MuiAccordionSummary-root": {
-              flexDirection: "row-reverse",
-              "& .MuiSvgIcon-root": {
-                color: theme?.palette?.primary?.main
-              },
-              "& .Mui-expanded": {
-                "& .MuiSvgIcon-root": {
-                  color: theme?.palette?.text?.blueText
-                }
-              }
-            },
-            padding: "0px",
-            "&.Mui-expanded": {
-              margin: "0"
-            }
-          }
-        },
-        defaultProps: {
-          elevation: 0
-        }
-      }
-    }
-  });
   return /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: "item-w",
     children: styleMaps?.map((m, i) => {
-      if (m?.hasChildrenTabs) {
-        return /*#__PURE__*/_jsx(ThemeProvider, {
-          theme: muiTheme,
-          children: /*#__PURE__*/_jsxs(Accordion, {
-            defaultExpanded: true,
-            children: [/*#__PURE__*/_jsx(AccordionSummary, {
-              expandIcon: /*#__PURE__*/_jsx(ExpandMoreOutlined, {}),
-              sx: {
-                padding: "0px"
-              },
-              children: /*#__PURE__*/_jsx(Typography, {
-                variant: "body1",
-                className: "settingsHeader",
-                color: "primary",
-                style: {
-                  fontSize: "14px !important",
-                  fontWeight: "400"
-                },
-                children: m?.tab
-              })
-            }), /*#__PURE__*/_jsx(AccordionDetails, {
-              sx: {
-                padding: "5px"
-              },
-              children: m?.fields.filter(f => (hideTools || []).indexOf(f.value) === -1).map((field, index) => {
-                return /*#__PURE__*/_jsx(StyleContent, {
-                  renderTabs: [field],
-                  value: field.value,
-                  element: element,
-                  onChange: onChange,
-                  customElement: element?.children?.[0] || null,
-                  customProps: customProps,
-                  handleClose: handleClose
-                }, `tab_${field.value}_${index}`);
-              })
-            })]
-          }, `accordion_${i}`)
-        }, i);
-      } else {
-        return /*#__PURE__*/_jsx(StyleContent, {
-          renderTabs: styleMaps,
-          value: m.value,
-          element: element,
-          customElement: element?.children?.[0] || null,
-          onChange: onChange,
-          customProps: customProps,
-          handleClose: handleClose
-        }, `tab_${m.value}_$${i}`);
-      }
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: styleMaps,
+        value: m.value,
+        element: element,
+        customElement: element?.children?.[0] || null,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
     })
   });
 };