@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/common/Icon.js

@@ -1,18 +1,19 @@
 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, GridAddSectionIcon } 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 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 MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
@@ -22,10 +23,25 @@ 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 = {
@@ -62,7 +78,8 @@ const iconList = {
   }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
-    fill: "#64748B"
+    fill: "#64748B",
+    className: "blockQuoteSvg"
   }),
   doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
@@ -76,19 +93,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"
   }),
@@ -202,7 +219,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, {
@@ -222,23 +239,18 @@ 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"
   }),
-  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
+  calenderNewIcon: /*#__PURE__*/_jsx(CalenderIconTick, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),
   briefCase: /*#__PURE__*/_jsx(BriefCase, {}),
@@ -275,11 +287,32 @@ 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, {})
+  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, {})
 };
 export const icons = {
   ...iconList

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

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

@@ -58,11 +58,32 @@ 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: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
       color: "#ffffff !important",
@@ -71,23 +92,43 @@ const ImageSelectorStyles = theme => ({
       marginLeft: "0px !important"
     },
     "& .secondaryBtn": {
-      background: "#ffffff !important",
+      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
-      color: "#2563eb !important",
-      border: "1px solid #2563eb !important",
+      color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+      border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !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,26 +1,38 @@
 const UploadStyles = theme => ({
   uploadContainer: {
-    border: "1px solid #2563EB",
+    border: `1px solid ${theme?.palette?.editor?.uploadFileBorder}`,
     padding: "10px",
-    borderRadius: "7px",
-    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
+    borderRadius: "11px",
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+    background: theme?.palette?.editor?.uploadFileBg,
+    height: '100%',
+    minHeight: '150px'
   },
   uploadField: {
     width: "100%",
     backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
-    height: "250px",
+    height: "auto",
     position: "relative",
-    backgroundColor: theme?.palette?.editor?.background,
+    backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
-    border: "1px dashed #2563EB"
+    border: "1px dashed #2563EB",
+    minHeight: '150px'
   },
   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,6 +1,7 @@
-import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, 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,13 +5,14 @@ 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, Select, Typography } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, 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,9 +3,40 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
-    padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
-    overflow: "hidden"
+    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"
+          }
+        }
+      }
+    }
   },
   papper: {
     boxShadow: "none",
@@ -21,6 +52,111 @@ 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: {
@@ -28,7 +164,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: "1px solid #DCE4EC"
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
   },
   listItem: {
     cursor: "pointer",
@@ -59,12 +195,9 @@ const usePopupStyles = theme => ({
         justifyContent: "start",
         "& svg": {
           margin: "5.5px",
-          width: "19px",
+          width: "24px",
           height: "24px"
         },
-        '& .MuiTypography-root ': {
-          padding: '0px 0px 0px 7px'
-        },
         span: {
           padding: "8px",
           fontSize: "14px",
@@ -79,7 +212,8 @@ const usePopupStyles = theme => ({
     margin: "8px",
     display: "flex",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    color: "#64748B"
   }
 });
 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: `${i === index ? "active" : " "} ${char.renderComponent ? "renderComp" : ""}`,
+        className: `${type !== 'elements' && 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,10 +1,13 @@
 import React from "react";
 import { Transforms, Node } from "slate";
-import { Box } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, createTheme, ThemeProvider, Typography } 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,
@@ -14,7 +17,13 @@ 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?.filter(f => !f?.hideOnFGS);
+  const styleMaps = formStyle;
+  const {
+    hideTools
+  } = customProps || {};
+  const {
+    theme
+  } = useEditorContext();
   const onChange = data => {
     const currentPath = ReactEditor.findPath(editor, element);
     const updateData = {
@@ -26,23 +35,109 @@ 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) => {
-      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}`);
+      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}`);
+      }
     })
   });
 };