@flozy/editor 5.1.9 → 5.2.1

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -108,10 +108,15 @@ const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
       return;
     }
     const selection = window.getSelection();
-    if (openAI === "fromToolBar" && selection.anchorOffset !== selection.focusOffset) {
-      // to fix some issue in Drag n Drop
-      return;
-    }
+
+    // if (
+    //   openAI === "fromToolBar" &&
+    //   selection.anchorOffset !== selection.focusOffset
+    // ) {
+    //   // to fix some issue in Drag n Drop
+    //   return;
+    // }
+
     if (selection.rangeCount) {
       let caret;
       if (getSelectedText(editor)) {

package/dist/Editor/Elements/AI/Styles.js

@@ -115,7 +115,7 @@ const Styles = theme => ({
     overflow: "auto",
     // width: "240px",
     minWidth: "200px",
-    border: "1px solid #E0E0E0",
+    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
     padding: "6px"
   },
   optionWrapper: {
@@ -142,22 +142,28 @@ const Styles = theme => ({
       gap: "8px"
     },
     "&:hover": {
-      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
+      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+      "& svg path": {
+        stroke: `${theme?.palette?.editor?.textColor} !important`
+      },
+      "& svg": {
+        color: `${theme?.palette?.editor?.textColor} !important`
+      }
     },
     "& svg path": {
-      stroke: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+      stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
     },
     "& svg": {
-      color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+      color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
     },
     "&.active": {
       background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`,
-      color: "#2563EB",
+      color: theme?.palette?.editor?.menuOptionsSelectedTextColor,
       "& svg path": {
-        stroke: "#2563EB"
+        stroke: theme?.palette?.editor?.menuOptionsSelectedTextColor
       },
       "& svg": {
-        color: "#2563EB !important"
+        color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
       }
     }
   },

package/dist/Editor/Elements/Button/EditorButton.js

@@ -11,6 +11,7 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
+  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -136,6 +138,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -145,6 +148,7 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
+            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -157,7 +161,8 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important"
+                marginBottom: "0px !important",
+                ...classes.buttonMoreOption
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Tooltip, IconButton } from "@mui/material";
+import { Tooltip, IconButton, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -53,7 +53,7 @@ const CarouselItem = props => {
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxs(Box, {
       className: "carousel-item-inner",
       style: {
         minHeight: "50px",
@@ -61,6 +61,14 @@ const CarouselItem = props => {
         justifyContent: "center",
         alignItems: "center"
       },
+      sx: {
+        "& .ico-grp-ss": {
+          position: "absolute",
+          top: "0px",
+          right: "0px",
+          display: "flex"
+        }
+      },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });

package/dist/Editor/Elements/DataView/DataView.js

@@ -83,6 +83,7 @@ const DataView = props => {
     ...attributes,
     className: "fe-dataview",
     sx: classes.root,
+    contentEditable: false,
     children: /*#__PURE__*/_jsxs(DataViewProvider, {
       initialData: {
         properties,

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, Checkbox, Popper } from "@mui/material";
+import CheckBoxTwoToneIcon from "@mui/icons-material/CheckBoxTwoTone";
 import DataTypes from "./DataTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -58,7 +59,8 @@ const ColumnView = props => {
         sx: {
           mr: 0
         },
-        checked: selected
+        checked: selected,
+        checkedIcon: /*#__PURE__*/_jsx(CheckBoxTwoToneIcon, {})
       })
     }) : null]
   });

package/dist/Editor/Elements/DataView/Layouts/DataTypes/CheckType.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { useDataView } from "../../Providers/DataViewProvider";
 import Checkbox from "@mui/material/Checkbox";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CheckType = props => {
   const {
@@ -21,8 +20,12 @@ const CheckType = props => {
   };
   return /*#__PURE__*/_jsx(Checkbox, {
     checked: value,
-    icon: /*#__PURE__*/_jsx(CheckCircleOutlineIcon, {}),
-    checkedIcon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButton"
+    }),
+    checkedIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: "checkListButtonActive"
+    }),
     onChange: handleChange,
     disabled: readOnly
   }, rowIndex);

package/dist/Editor/Elements/DataView/Layouts/FilterSort/index.js

@@ -52,7 +52,7 @@ const FilterSort = props => {
         children: [/*#__PURE__*/_jsx("span", {
           children: "Sort By"
         }), /*#__PURE__*/_jsx(IconButton, {
-          className: "tv-act-ico bg",
+          className: "tv-act-ico bg br1",
           size: "small",
           onClick: onClose,
           children: /*#__PURE__*/_jsx(CloseIcon, {})

package/dist/Editor/Elements/DataView/Layouts/FilterSort/styles.js

@@ -50,7 +50,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
               marginRight: "12px",
               background: appTheme?.palette?.editor?.tv_ico_bg
             },
-            color: appTheme?.palette?.editor?.tv_text_primary,
+            color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
               width: "16px"
             }
@@ -60,9 +60,9 @@ const useFilterSortStyles = (theme, appTheme) => ({
           },
           "&:hover": {
             background: appTheme?.palette?.editor?.tv_hover_bg,
-            color: appTheme?.palette?.editor?.tv_hover_text,
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
             "& .MuiListItemIcon-root": {
-              color: appTheme?.palette?.editor?.tv_hover_text
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }
         }
@@ -70,7 +70,7 @@ const useFilterSortStyles = (theme, appTheme) => ({
       "& .tv-cf": {
         "& .MuiInputBase-root": {
           color: appTheme?.palette?.editor?.tv_text_primary,
-          background: appTheme?.palette?.editor?.tv_ico_bg,
+          background: appTheme?.palette?.editor?.tv_input_bg,
           borderRadius: "8px",
           "& svg": {
             color: appTheme?.palette?.editor?.tv_text_primary

package/dist/Editor/Elements/DataView/Layouts/FilterView.js

@@ -111,7 +111,7 @@ const FilterView = props => {
             paddingBottom: "0px"
           },
           size: "small",
-          placeholder: "Search in Table",
+          placeholder: "Search here",
           inputProps: {
             "aria-label": "search google maps"
           },

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -142,7 +142,7 @@ const EditOption = props => {
         })
       })]
     }), /*#__PURE__*/_jsx(List, {
-      className: "fe-dv-opt-list st sb",
+      className: "fe-dv-opt-list st",
       children: /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: onDeleteOption,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -29,7 +29,7 @@ const useOptionsStyles = (theme, appTheme) => ({
       "& .MuiInputBase-root": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         fontSize: "14px",
-        background: appTheme?.palette?.editor?.tv_ico_bg,
+        background: appTheme?.palette?.editor?.tv_input_bg,
         borderRadius: "8px"
       },
       "& .MuiOutlinedInput-notchedOutline": {
@@ -54,7 +54,7 @@ const useOptionsStyles = (theme, appTheme) => ({
               marginRight: "12px",
               background: appTheme?.palette?.editor?.tv_ico_bg
             },
-            color: appTheme?.palette?.editor?.tv_text_primary,
+            color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
               width: "16px"
             }
@@ -64,9 +64,9 @@ const useOptionsStyles = (theme, appTheme) => ({
           },
           "&:hover": {
             background: appTheme?.palette?.editor?.tv_hover_bg,
-            color: appTheme?.palette?.editor?.tv_hover_text,
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
             "& .MuiListItemIcon-root": {
-              color: appTheme?.palette?.editor?.tv_hover_text
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }
         }
@@ -138,7 +138,7 @@ const useOptionsStyles = (theme, appTheme) => ({
       justifyContent: "space-between",
       fontSize: "14px",
       alignItems: "center",
-      borderBottom: "1px solid rgba(220, 228, 236, 1)",
+      borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       marginBottom: "8px",
       "& span": {
         display: "flex",

package/dist/Editor/Elements/DataView/Utils/multiSortRows.js

@@ -49,9 +49,11 @@ const multiSortRows = (rows, criteria, columnConfig) => {
           break;
         case "select":
         case "multi-select":
-          comparison = valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
-            sensitivity: "base"
-          });
+          if (Array.isArray(valueA) && Array.isArray(valueB)) {
+            comparison = Array.isArray(valueA) ? valueA?.map(m => m?.value).join(", ").localeCompare(valueB?.map(m => m?.value).join(", "), undefined, {
+              sensitivity: "base"
+            }) : 0;
+          }
           break;
         case "date":
           comparison = sortByDate(valueA, valueB);

package/dist/Editor/Elements/DataView/styles.js

@@ -69,8 +69,9 @@ const useDataViewStyles = (theme, appTheme) => ({
     alignItems: "center",
     "& .MuiButtonBase-root": {
       padding: "6px",
-      width: "24px",
-      height: "24px",
+      marginLeft: "4px",
+      width: "29px",
+      height: "29px",
       "&.active": {
         color: "rgba(37, 99, 235, 1)"
       }
@@ -82,7 +83,8 @@ const useDataViewStyles = (theme, appTheme) => ({
       transition: "width 1s",
       "&.open": {
         width: "fit-content",
-        border: "1px solid rgba(236, 236, 236, 1)",
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px"
       },
       "& input": {
@@ -129,12 +131,16 @@ const useDataViewStyles = (theme, appTheme) => ({
         fontSize: "14px",
         "& svg": {
           width: "16px",
-          height: "16px"
+          height: "16px",
+          color: `${appTheme?.palette?.editor?.tv_text}`
         },
         "&:hover": {
           background: appTheme?.palette?.editor?.tv_hover_bg,
           borderRadius: "8px",
-          color: appTheme?.palette?.editor?.tv_hover_text
+          color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+          "& svg": {
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+          }
         }
       }
     }

package/dist/Editor/Elements/Embed/Image.js

@@ -66,7 +66,7 @@ const ImageContent = props => {
     path,
     theme
   } = props;
-  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     contentEditable: false,
@@ -76,6 +76,18 @@ const ImageContent = props => {
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "image"
     }), "Add Image"]
+  }) : /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      color: "#64748B !important",
+      "& svg": {
+        color: "#64748B"
+      }
+    },
+    component: "button",
+    className: "element-empty-btn",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "shieldNoAccess"
+    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(Box, {
     component: "img",
     className: "emb-img",

package/dist/Editor/Elements/Embed/Video.js

@@ -70,13 +70,25 @@ const VideoPlaceholder = props => {
     readOnly,
     onSettings
   } = props;
-  return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+  return !url ? !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
     onClick: onSettings,
     children: [/*#__PURE__*/_jsx(Icon, {
       icon: "video"
     }), "Embed Video or Other"]
+  }) : /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      color: "#64748B !important",
+      "& svg": {
+        color: "#64748B"
+      }
+    },
+    component: "button",
+    className: "element-empty-btn",
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: "shieldNoAccess"
+    }), "The Content is no longer available."]
   }) : /*#__PURE__*/_jsx(VideoContent, {
     ...props
   });

package/dist/Editor/Elements/Grid/GridItem.js

@@ -45,7 +45,7 @@ const GridItemToolbar = props => {
     onAddColumn,
     columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
+  return selected && !showTool ? /*#__PURE__*/_jsx(Popper, {
     anchorEl: columnRef?.current,
     open: true,
     placement: "top-end",
@@ -53,23 +53,26 @@ const GridItemToolbar = props => {
     className: "gi-tool-pp",
     disablePortal: true,
     contentEditable: false,
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "Column Settings",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: "Add Column",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "small",
-        onClick: onAddColumn,
-        children: /*#__PURE__*/_jsx(AddIcon, {})
-      })
-    })]
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "ico-grp-ss",
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Column Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Column",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onAddColumn,
+          children: /*#__PURE__*/_jsx(AddIcon, {})
+        })
+      })]
+    })
   }) : null;
 };
 const GridItem = props => {

package/dist/Editor/Elements/SimpleText/style.js

@@ -12,7 +12,12 @@ const SimpleTextStyle = ({
         opacity: 0
       }
     },
-    "&.dataView, &.signature": {
+    "&.grid": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
+    "&.dataView": {
       "& .placeholder-simple-text": {
         opacity: 0
       }

package/dist/Editor/Elements/Table/DragButton.js

@@ -42,6 +42,7 @@ function DragButton({
   const dragProps = {
     ...dndProps,
     id: dndProps?.id + dragType,
+    disabled: isMobile,
     data: {
       ...dndProps.data,
       dragType

package/dist/Editor/Elements/Table/Styles.js

@@ -4,7 +4,9 @@ const TableStyles = theme => {
     closeButtonSvgStroke,
     activeColor,
     signaturePopUpTabButtonSelectedBg,
-    signaturePopUpTabButtonSelectedSvg
+    signaturePopUpTabButtonSelectedSvg,
+    aiInputBackground,
+    buttonBorder1
   } = theme?.palette?.editor || {};
   return {
     tableToolBar: {
@@ -13,8 +15,8 @@ const TableStyles = theme => {
       left: 0,
       transition: "all 0.3s",
       "& button": {
-        backgroundColor: background,
-        border: "1px solid rgba(37, 99, 235, 0.32)",
+        backgroundColor: aiInputBackground,
+        border: `1px solid ${buttonBorder1}`,
         boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
         borderRadius: "50%",
         padding: "4px",
@@ -32,6 +34,7 @@ const TableStyles = theme => {
         "&.selected": {
           outline: `1.5px solid ${activeColor || "#2563EB"}`,
           background: signaturePopUpTabButtonSelectedBg,
+          border: "none",
           "& svg": {
             "& path": {
               stroke: signaturePopUpTabButtonSelectedSvg

package/dist/Editor/Elements/Table/Table.js

@@ -106,7 +106,8 @@ const Table = props => {
   } = props;
   const classes = TableStyles(editorTheme);
   const {
-    readOnly
+    readOnly,
+    isMobile
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const [exandTools, setExpandTools] = useState(null);
@@ -219,10 +220,14 @@ const Table = props => {
     handleRowDragBtns();
   };
   const onMouseOver = () => {
-    containerRef?.current?.classList.remove("hideScroll");
+    if (!isMobile) {
+      containerRef?.current?.classList.remove("hideScroll");
+    }
   };
   const onMouseLeave = () => {
-    containerRef?.current?.classList.add("hideScroll");
+    if (!isMobile) {
+      containerRef?.current?.classList.add("hideScroll");
+    }
   };
   const commonAddBtnProps = {
     tableRef,

package/dist/Editor/Elements/Table/TableCell.js

@@ -57,7 +57,8 @@ const TableCell = props => {
     entireTextColor,
     entireFontFamily,
     entireFontWeight,
-    entireTextSize
+    entireTextSize,
+    size: elementSize
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
@@ -275,7 +276,7 @@ const TableCell = props => {
   const isCellDragging = active?.id && active?.id === cellId;
   const isRowDragging = isCellDragging && currentDraggingType === "row";
   const isColDragging = isCellDragging && currentDraggingType === "col";
-  const width = isHeader ? size?.width || tableSize?.cellWidth : "0px";
+  const width = isHeader ? size?.width || tableSize?.cellWidth || elementSize?.width : "0px";
   const sizeProps = {
     minWidth: width,
     maxWidth: width
@@ -401,6 +402,7 @@ const TableCell = props => {
         color: entireTextColor || "inherit",
         cursor: "text",
         verticalAlign: "top",
+        padding: "0px",
         ...(sizeProps || {})
       },
       ...tbProps,
@@ -415,7 +417,8 @@ const TableCell = props => {
         tableDOM: tableDOM
       }) : null, /*#__PURE__*/_jsx("div", {
         style: {
-          overflow: "auto hidden"
+          overflow: "auto hidden",
+          padding: "8px"
         },
         children: children
       }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -77,6 +77,7 @@ const TopBanner = props => {
     theme
   } = useEditorContext();
   const classes = TopBannerStyles(theme);
+  const renderHeaderAboveBanner = customProps?.metadata?.renderHeader ? customProps.metadata.renderHeader() : null;
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,
@@ -87,7 +88,7 @@ const TopBanner = props => {
     },
     contentEditable: false,
     sx: classes.root,
-    children: [/*#__PURE__*/_jsx("img", {
+    children: [renderHeaderAboveBanner, /*#__PURE__*/_jsx("img", {
       src: url,
       alt: "Top Banner",
       className: "top-banner-wrpr-ele",

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

@@ -62,13 +62,12 @@ const PopupTool = props => {
 
     if (userStoppedSelection && anchorEl && !open) {
       // for table cell selection
-      // const isCellsSelected = table.isCellSelected(editor.selection);
-      // if (!isCellsSelected) {
-      // }
       const isCarouselEdit = isCarouselSelected(editor);
+      // const isCellsSelected = table.isCellSelected(editor.selection) || isCarouselEdit;
       if (isCarouselEdit) {
         Transforms.deselect(editor);
-      } else {
+      }
+      if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
         setIsTextSelected(true);

package/dist/Editor/common/Icon.js

@@ -12,6 +12,7 @@ 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, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
@@ -280,7 +281,8 @@ const iconList = {
   deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
+  shieldNoAccess: /*#__PURE__*/_jsx(GppBadOutlinedIcon, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -141,7 +141,11 @@ const VirtualElement = props => {
     sx: classes.root,
     dangerouslySetInnerHTML: {
       __html: getItems()
-    }
+    },
+    style: {
+      visibility: "hidden"
+    },
+    "aria-hidden": "true"
   });
 };
 export default VirtualElement;

package/dist/Editor/commonStyle.js

@@ -249,6 +249,15 @@ const useCommonStyle = theme => ({
         border: `1px solid transparent !important`
       }
     }
+  },
+  buttonMoreOption: {
+    background: `${theme?.palette?.editor?.aiInputBackground} !important`,
+    border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
+    '& svg': {
+      '& path': {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      }
+    }
   }
 });
 export default useCommonStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.1.9",
+  "version": "5.2.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"