@flozy/editor 9.6.0 → 9.6.1

package/dist/Editor/CommonEditor.js

@@ -275,7 +275,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     },
     toggleFullscreen() {
       setFullScreen(!fullScreen);
-      Transforms.deselect(editor);
     },
     toggleToolbarShow() {
       setToolbarShow(!toolbarShow);

package/dist/Editor/Editor.css

@@ -1282,8 +1282,8 @@ blockquote {
 }
 @media (max-width: 899px) {
   /* Qa validation required */
-  /* .MuiPopover-root {
-    z-index: 1302 !important;
+    /* .MuiPopover-root {
+      z-index: 1302 !important;
   } */
 
   canvas {

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

@@ -57,7 +57,10 @@ const ColumnView = props => {
       value: row[property?.key] || "",
       rowIndex: rowIndex,
       label: property?.label,
-      readOnly: readOnly
+      readOnly: readOnly,
+      settings: {
+        wrapColumn: property?.wrapColumn
+      }
     }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
       sx: classes.root,
       open: open,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -40,13 +40,14 @@ export default function Select(props) {
     limitTags = 2,
     placeholder = "",
     disabled = false,
-    optionAvatar = false
+    optionAvatar = false,
+    className = ""
   } = props;
   const value = Array.isArray(pValue) ? pValue : [];
   const options = selectOptions?.length ? selectOptions.filter(s => s.value) : [];
   return /*#__PURE__*/_jsx(Autocomplete, {
     disabled: disabled,
-    className: "tv-ac-field",
+    className: `tv-ac-field ${className}`,
     multiple: true,
     limitTags: limitTags,
     placeholder: placeholder,
@@ -102,7 +103,7 @@ export default function Select(props) {
     },
     renderTags: (value, getTagProps) => {
       return /*#__PURE__*/_jsx(Box, {
-        className: "tv-ms-tag-wrpr",
+        className: `tv-ms-tag-wrpr ${className}`,
         sx: {
           "& svg": {
             marginRight: "5px",

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

@@ -9,8 +9,12 @@ const MultiSelectType = props => {
     value: pValue,
     options,
     label = "",
-    readOnly
+    readOnly,
+    settings
   } = props;
+  const {
+    wrapColumn
+  } = settings;
   const {
     onChange
   } = useDataView();
@@ -27,6 +31,7 @@ const MultiSelectType = props => {
     });
   };
   return /*#__PURE__*/_jsx(Select, {
+    className: `wrap-${wrapColumn}`,
     value: coloredValues,
     onChange: handleChange,
     options: options,

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

@@ -8,8 +8,12 @@ const TextType = props => {
     rowIndex,
     property,
     value,
-    readOnly
+    readOnly,
+    settings
   } = props;
+  const {
+    wrapColumn
+  } = settings;
   const {
     onChange
   } = useDataView();
@@ -34,7 +38,8 @@ const TextType = props => {
     onChange: handleChange,
     disabled: readOnly,
     id: `tv-text-input-${rowIndex}-${property}` // * should be unique
+    ,
+    multiline: wrapColumn
   });
 };
-
 export default TextType;

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

@@ -7,6 +7,7 @@ import Icon from "../../../../common/Icon";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const NEED_WRAPS = ["text", "multi-select"];
 const EditProperty = props => {
   const {
     classes,
@@ -20,6 +21,8 @@ const EditProperty = props => {
   const editData = useRef({
     ...edit
   });
+  const type = mode?.edit?.type || "";
+  const needWrap = NEED_WRAPS?.indexOf(type) >= 0;
   useEffect(() => {
     return () => {
       // on un-mount update the label
@@ -88,6 +91,12 @@ const EditProperty = props => {
         }, false);
         onEvent("close");
         break;
+      case "wrapColumn":
+        onUpdate({
+          wrapColumn: !edit?.wrapColumn
+        });
+        // onEvent("close");
+        break;
       case "Delete":
         onEvent("deleteProperty", {
           ...editData?.current
@@ -108,17 +117,17 @@ const EditProperty = props => {
           size: "small",
           onClick: onBack,
           sx: {
-            paddingLeft: '0px',
-            '&:hover': {
-              background: 'transparent !important'
+            paddingLeft: "0px",
+            "&:hover": {
+              background: "transparent !important"
             },
-            '& svg': {
-              width: '14px !important',
-              height: '14px !important'
+            "& svg": {
+              width: "14px !important",
+              height: "14px !important"
             }
           },
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'leftArrow'
+            icon: "leftArrow"
           })
         }), "Edit Property"]
       }), /*#__PURE__*/_jsx(IconButton, {
@@ -126,8 +135,8 @@ const EditProperty = props => {
         size: "small",
         onClick: onClose,
         sx: {
-          '& svg': {
-            '& path': {
+          "& svg": {
+            "& path": {
               strokeWidth: 0
             }
           }
@@ -140,8 +149,8 @@ const EditProperty = props => {
         label: "Field Name",
         labelPlacement: "top",
         sx: {
-          '& .MuiFormControl-root': {
-            marginBottom: '4px'
+          "& .MuiFormControl-root": {
+            marginBottom: "4px"
           }
         },
         control: /*#__PURE__*/_jsx(TextField, {
@@ -151,31 +160,45 @@ const EditProperty = props => {
           fullWidth: true,
           placeholder: "Field Name"
         })
-      }), /*#__PURE__*/_jsx(List, {
+      }), needWrap ? /*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list",
+        children: /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("wrapColumn"),
+          children: [/*#__PURE__*/_jsx(ListItemText, {
+            children: "Wrap Column"
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: edit?.wrapColumn ? /*#__PURE__*/_jsx(Icon, {
+              icon: "toggleOn"
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: "toggleOff"
+            })
+          })]
+        })
+      }) : null, /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           sx: {
-            paddingBottom: '12px'
+            paddingBottom: "12px"
           },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
           }), /*#__PURE__*/_jsxs(ListItemIcon, {
             sx: {
-              display: 'flex',
+              display: "flex",
               alignItems: "center",
               gap: 1
             },
             children: [/*#__PURE__*/_jsx(Box, {
               sx: {
                 background: "#64748B1F",
-                borderRadius: '4px',
-                display: 'flex',
-                alignItems: 'center',
-                padding: '2px',
-                '& svg': {
-                  width: '16px',
-                  height: '16px'
+                borderRadius: "4px",
+                display: "flex",
+                alignItems: "center",
+                padding: "2px",
+                "& svg": {
+                  width: "16px",
+                  height: "16px"
                 }
               },
               children: /*#__PURE__*/_jsx(Icon, {
@@ -185,7 +208,7 @@ const EditProperty = props => {
               className: "label-tp",
               children: TYPE_LABELS[edit?.type]
             }), /*#__PURE__*/_jsx(Icon, {
-              icon: 'rightArrow'
+              icon: "rightArrow"
             })]
           })]
         })
@@ -205,9 +228,9 @@ const EditProperty = props => {
           onClick: onAction("Visibilty"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: edit?.visible ? /*#__PURE__*/_jsx(Icon, {
-              icon: 'eyeSlash'
+              icon: "eyeSlash"
             }) : /*#__PURE__*/_jsx(Icon, {
-              icon: 'eyeIcon'
+              icon: "eyeIcon"
             })
           }), /*#__PURE__*/_jsxs(ListItemText, {
             children: [edit?.visible ? "Hide" : "Show", " in View"]
@@ -216,7 +239,7 @@ const EditProperty = props => {
           onClick: onAction("Duplicate"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: 'duplicateIcon'
+              icon: "duplicateIcon"
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Duplicate Property"
@@ -225,7 +248,7 @@ const EditProperty = props => {
           onClick: onAction("Delete"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: 'trashIcon'
+              icon: "trashIcon"
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Delete Property"

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

@@ -33,7 +33,7 @@ const useTableStyles = (theme, appTheme) => ({
       height: "40px",
       maxWidth: "0px !important",
       minWidth: "0px !important",
-      "& input": {
+      "& input, & textarea": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         background: "transparent",
         fontSize: "14px"
@@ -107,6 +107,9 @@ const useTableStyles = (theme, appTheme) => ({
             "& .MuiChip-deleteIcon": {
               minWidth: "22px",
               minHeight: "22px"
+            },
+            "&.wrap-true": {
+              flexWrap: "wrap"
             }
           },
           "&.Mui-disabled": {

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

@@ -69,6 +69,19 @@ const useDataViewStyles = (theme, appTheme) => ({
           opacity: 1
         }
       }
+    },
+    "& .fe-tv-type_text": {
+      "& .MuiInputBase-multiline": {
+        height: "auto !important",
+        "&.Mui-focused": {
+          border: 0,
+          outline: 0,
+          "& textarea:focus-visible": {
+            border: 0,
+            borderColor: "none"
+          }
+        }
+      }
     }
   },
   filterView: {

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

@@ -5,7 +5,7 @@ import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
-import { LinkIcon } from "../../common/iconslist";
+import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import Icon from "../../common/Icon";
@@ -32,7 +32,7 @@ const ToolBar = ({
       top: "-4px",
       left: topM ? "35px" : "0px",
       margin: "0px",
-      gap: "3px"
+      gap: '3px'
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",

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

@@ -33,14 +33,17 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-
-  // const { element: pageSt } = getPageSettings(editor) || {};
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
   // const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  // const { activeBreakPoint } = useEditorContext();
+  const {
+    activeBreakPoint
+  } = useEditorContext();
   // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   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");

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

@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
+    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -34,9 +35,6 @@ const PopupTool = props => {
   const [size] = useWindowResize();
   const updateAnchorEl = isScroll => {
     try {
-      const {
-        selection
-      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -76,16 +74,15 @@ const PopupTool = props => {
       if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
-        // setIsTextSelected(true);
+        setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");
-      // setIsTextSelected(false);
+      setIsTextSelected(false);
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    console.log("Editor useEffect", selection);
     const {
       path,
       enable
@@ -95,20 +92,17 @@ const PopupTool = props => {
     if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
       setAnchorEl(null);
     } else {
-      console.log("Editor updateAnchorEl", selection);
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {
-    console.log("Editor closing");
     // setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
-      console.log("ClickAwayListener", e.target, document.body, e.target !== document.body);
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
       if (e.target !== document.body) {
         // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close

package/dist/Editor/common/Icon.js

@@ -13,6 +13,9 @@ 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 WrapTextIcon from "@mui/icons-material/WrapText";
+import ToggleOn from "@mui/icons-material/ToggleOn";
+import ToggleOff from "@mui/icons-material/ToggleOff";
 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";
@@ -312,7 +315,21 @@ const iconList = {
   trashIcon: /*#__PURE__*/_jsx(TrashIcon, {}),
   dataTable: /*#__PURE__*/_jsx(DataTableIcon, {}),
   chervUp: /*#__PURE__*/_jsx(ChervUp, {}),
-  chervDown: /*#__PURE__*/_jsx(ChervDown, {})
+  chervDown: /*#__PURE__*/_jsx(ChervDown, {}),
+  wrapColumn: /*#__PURE__*/_jsx(WrapTextIcon, {}),
+  toggleOn: /*#__PURE__*/_jsx(ToggleOn, {
+    sx: {
+      fill: "rgb(37, 99, 235)",
+      stroke: "rgb(37, 99, 235)"
+    }
+  }),
+  toggleOff: /*#__PURE__*/_jsx(ToggleOff, {
+    sx: {
+      fill: "#64748B",
+      stroke: "#64748B",
+      color: "#64748B"
+    }
+  })
 };
 export const icons = {
   ...iconList

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

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

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

@@ -5,8 +5,8 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
-    minHeight: "150px",
-    height: "inherit"
+    minHeight: '150px',
+    height: 'inherit'
   },
   uploadField: {
     width: "100%",
@@ -18,21 +18,21 @@ const UploadStyles = theme => ({
     backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
     border: "1px dashed #2563EB",
-    minHeight: "150px"
+    minHeight: '150px'
   },
   uploadIcon: {
     display: "grid !important",
     "& svg": {
-      display: "flex",
-      width: "100%",
+      display: 'flex',
+      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
     },
-    "& span": {
-      display: "flex",
-      width: "100%",
-      marginTop: "5px"
+    '& span': {
+      display: 'flex',
+      width: '100%',
+      marginTop: '5px'
     }
   }
 });

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -58,7 +58,6 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      paddingLeft: "4px",
       background: theme?.palette?.editor?.background,
       paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {

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

@@ -470,13 +470,6 @@ const RnD = props => {
     }
     e.preventDefault();
     e.stopPropagation();
-    const isMuiBackdrop = e.target.classList.contains("MuiBackdrop-root");
-    if (isMuiBackdrop) {
-      setContextMenu({
-        path: null
-      });
-      return;
-    }
     onClick({
       detail: 1
     });

package/dist/Editor/commonStyle.js

@@ -54,10 +54,10 @@ const useCommonStyle = theme => ({
         marginTop: "4px"
       },
       "& .MuiPaper-root": {
-        border: "unset !important",
-        borderRadius: "0px",
-        height: "fit-content",
-        padding: "2px"
+        border: 'unset !important',
+        borderRadius: '0px',
+        height: 'fit-content',
+        padding: '2px'
       },
       "& .muiIconsListParent": {
         "& svg": {
@@ -73,7 +73,7 @@ const useCommonStyle = theme => ({
       "& .MuiGrid-root>.MuiGrid-item": {
         paddingRight: "0px !important",
         fontFamily: "Inter, sans-serif",
-        height: "fit-content"
+        height: 'fit-content'
       },
       "& .MuiInputBase-root": {
         borderRadius: "10px",
@@ -134,14 +134,14 @@ const useCommonStyle = theme => ({
           borderRadius: "10px",
           width: "46px !important",
           marginLeft: "10px",
-          height: "36px !important"
+          height: '36px !important'
         },
         "& .spacingSlider": {
           width: "calc(100% - 18px)"
         }
       },
-      "& .MuiFormHelperText-root": {
-        margin: "4px 0px 0px 0px",
+      '& .MuiFormHelperText-root': {
+        margin: '4px 0px 0px 0px',
         color: theme?.palette?.editor?.closeButtonSvgStroke,
         fontFamily: "Inter, sans-serif"
       }
@@ -397,14 +397,14 @@ const useCommonStyle = theme => ({
       padding: "8px 12px",
       fontSize: "12px",
       color: theme?.palette?.editor?.menuOptionTextColor,
-      fontWeight: "500",
+      fontWeight: '500',
       fontFamily: "Inter, sans-serif",
-      minHeight: "36px",
+      minHeight: '36px',
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.menuOptionHoverBackground
       }
     },
-    "& .Mui-selected": {
+    '& .Mui-selected': {
       background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
     },
     "& .MuiListSubheader-root": {
@@ -413,16 +413,16 @@ const useCommonStyle = theme => ({
       fontSize: "12px"
     },
     "& .MuiPaper-root": {
-      borderRadius: "8px",
-      padding: "0px",
+      borderRadius: '8px',
+      padding: '0px',
       background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`
     },
-    "& .MuiButtonBase-root": {
-      margin: "4px",
-      borderRadius: "6px"
+    '& .MuiButtonBase-root': {
+      margin: '4px',
+      borderRadius: '6px'
     },
-    "& .MuiList-root": {
-      padding: "0px"
+    '& .MuiList-root': {
+      padding: '0px'
     }
   },
   datePicker: {
@@ -529,11 +529,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: "4px !important",
-    "& svg": {
-      width: "18px !important",
-      height: "18px !important",
-      "& path": {
+    padding: '4px !important',
+    '& svg': {
+      width: '18px !important',
+      height: '18px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -541,8 +541,8 @@ const useCommonStyle = theme => ({
   buttonMoreOption2: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    "& svg": {
-      "& path": {
+    '& svg': {
+      '& path': {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -550,11 +550,11 @@ const useCommonStyle = theme => ({
   buttonMoreOption3: {
     background: `${theme?.palette?.editor?.aiInputBackground} !important`,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1} !important`,
-    padding: "5px !important",
-    "& svg": {
-      width: "16px !important",
-      height: "16px !important",
-      "& path": {
+    padding: '5px !important',
+    '& svg': {
+      width: '16px !important',
+      height: '16px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }
@@ -562,37 +562,37 @@ const useCommonStyle = theme => ({
   resizeButton: {
     background: theme?.palette?.editor?.aiInputBackground,
     border: `1px solid ${theme?.palette?.editor?.buttonBorder1}`,
-    padding: "5px !important",
-    borderRadius: "50% !important",
-    "& svg": {
-      width: "18px",
-      height: "18px",
-      "& path": {
+    padding: '5px !important',
+    borderRadius: '50% !important',
+    '& svg': {
+      width: '18px',
+      height: '18px',
+      '& path': {
         fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
       }
     },
-    "&:hover": {
+    '&:hover': {
       background: theme?.palette?.editor?.aiInputBackground
     }
   },
   gradientFillBtn: {
     background: `linear-gradient(112.61deg, #2C63ED 19.3%, #8360FD 88.14%) !important`,
-    textTransform: "math-auto !important",
-    color: "#FFFFFF !important",
-    padding: "0px 12px !important",
-    height: "32px",
-    borderRadius: "8px",
-    fontWeight: "500",
-    fontSize: "14px"
+    textTransform: 'math-auto !important',
+    color: '#FFFFFF !important',
+    padding: '0px 12px !important',
+    height: '32px',
+    borderRadius: '8px',
+    fontWeight: '500',
+    fontSize: '14px'
   },
   emptyThumbBtn: {
     background: `${theme?.palette?.editor?.sectionSettingIconHover} !important`,
     color: `${theme?.palette?.editor?.textColor} !important`,
-    fontSize: "14px !important",
-    "& svg": {
-      width: "20px !important",
-      height: "20px !important",
-      "& path": {
+    fontSize: '14px !important',
+    '& svg': {
+      width: '20px !important',
+      height: '20px !important',
+      '& path': {
         stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
       }
     }

package/dist/Editor/hooks/useDrag.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
   useEffect(() => {

package/dist/Editor/hooks/useEditorScroll.js

@@ -5,7 +5,6 @@ function useEditorScroll(editorWrapper = {
   useEffect(() => {
     if (!editorWrapper?.current) return;
     const handleScroll = () => {
-      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       callback("scroll");
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/plugins/withHTML.js

@@ -149,7 +149,6 @@ const getFocusedNode = (editor, nodeType = "") => {
     console.log(err);
   }
 };
-const voidTypes = ["image", "page-settings"];
 const withHtml = editor => {
   const {
     insertData,
@@ -160,7 +159,7 @@ const withHtml = editor => {
     return element.type === "link" ? true : isInline(element);
   };
   editor.isVoid = element => {
-    return voidTypes.includes(element.type) ? true : isVoid(element);
+    return element.type === "image" ? true : isVoid(element);
   };
   editor.insertData = data => {
     const slateHTML = data?.getData("application/x-slate-fragment");

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range, Text, Element } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.6.0",
+  "version": "9.6.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -61,7 +61,7 @@
   "scripts": {
     "prepare": "husky install .husky",
     "analyze": "source-map-explorer build/static/js/*.js",
-    "lint": "./node_modules/. bin/eslint --ignore-path .gitignore .",
+    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",