@flozy/editor 3.9.7 → 3.9.8

package/dist/Editor/ChatEditor.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editable, Slate, ReactEditor } from 'slate-react';
-import { createEditor, Transforms, Editor } from 'slate';
+import { createEditor, Transforms } from 'slate';
 import { useDebounce } from "use-debounce";
 import withCommon from "./hooks/withCommon";
 import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
@@ -31,12 +31,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const classes = usePopupStyle(theme);
   const convertedContent = draftToSlate({
-    data: content && content?.length > 0 ? content : [{
-      type: 'paragraph',
-      children: [{
-        text: ''
-      }]
-    }]
+    data: content
   });
   const [isInteracted, setIsInteracted] = useState(false);
   const [value, setValue] = useState(convertedContent);
@@ -52,62 +47,57 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     emojiClick: emoji => {
       if (editor) {
-        ReactEditor.focus(editor);
         insertEmoji(editor, emoji?.native, editor.selection);
+        if (editor.selection) {
+          const path = editor.selection.anchor.path;
+          const offset = editor.selection.anchor.offset + emoji?.native.length;
+          const position = {
+            anchor: {
+              path: [0],
+              offset: 0
+            },
+            focus: {
+              path: [0],
+              offset: 0
+            }
+          };
+          // Create a new selection
+          Transforms.select(editor, position);
+        }
         ReactEditor.focus(editor);
       }
     },
-    submitChat: () => {
-      const {
-        value: strVal,
-        ...restVal
-      } = getOnSaveData(value);
-      onsubmit(false, {
-        strVal,
-        restVal
-      });
+    setContent: newContent => {
+      setIsExternalUpdate(true);
+      setValue(newContent);
+      ReactEditor.focus(editor);
     },
     // Focus enable
-    enableFocus: () => {
-      if (editor) {
-        const position = {
-          anchor: {
-            path: [0],
-            offset: 0
-          },
-          focus: {
-            path: [0],
-            offset: 0
-          }
-        };
-        Transforms.select(editor, position);
-        ReactEditor.focus(editor);
-      }
-    },
-    clearAll: (content = null, clear = true) => {
+    //     enableFocus: () => {
+    //     if (editor) {
+    //         const position = {
+    //             anchor: { path: [0], offset: 0 },
+    //             focus: { path: [0], offset: 0 },
+    //         };
+    //         Transforms.select(editor, position);
+    //         ReactEditor.focus(editor);
+    //     }
+    // },
+
+    clearAll: () => {
       if (!editor) return;
-      try {
-        if (clear) {
-          while (editor.children.length > 0) {
-            Transforms.removeNodes(editor, {
-              at: [0]
-            });
-          }
-        }
-        const newValue = draftToSlate({
-          data: content
+      while (editor.children.length > 0) {
+        Transforms.removeNodes(editor, {
+          at: [0]
         });
-        setValue(newValue);
-        setTimeout(() => {
-          if (editor.children.length === 0) {
-            Transforms.insertNodes(editor, newValue);
-          }
-          Transforms.select(editor, Editor.end(editor, []));
-          ReactEditor.focus(editor);
-        }, 300);
-      } catch {
-        console.log("error:");
       }
+      Transforms.insertNodes(editor, {
+        type: 'paragraph',
+        children: [{
+          text: ''
+        }]
+      });
+      ReactEditor.focus(editor);
     }
   }));
   useEffect(() => {
@@ -115,7 +105,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
     setValue(draftToSlate({
       data: content
     }));
-  }, [content]);
+  }, [id, content]);
   useEffect(() => {
     if (JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {

package/dist/Editor/CommonEditor.js

@@ -29,7 +29,7 @@ import Section from "./common/Section";
 import "animate.css";
 import decorators from "./utils/Decorators";
 import { getTRBLBreakPoints } from "./helper/theme";
-import { handleInsertLastElement, onDeleteKey, outsideEditorClickLabel } from "./utils/helper";
+import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import useWindowResize from "./hooks/useWindowResize";
 import PopoverAIInput from "./Elements/AI/PopoverAIInput";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -319,8 +319,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     } else if (isCtrlKey) {
       commands({
         event,
-        editor,
-        needLayout
+        editor
       });
     } else if (event.key === "Tab") {
       event.preventDefault();

package/dist/Editor/Editor.css

@@ -106,7 +106,7 @@ blockquote {
 }
 
 .grid-container {
-  display: flex;
+  /* display: flex;
   border-radius: 0px;
   background-color: transparent;
   border: 0px solid #e5eaf2;
@@ -114,7 +114,7 @@ blockquote {
   position: relative;
   flex-wrap: wrap;
   background-repeat: no-repeat;
-  background-size: cover;
+  background-size: cover; */
 }
 
 .grid-container-toolbar,

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -9,55 +9,6 @@ import Icon from "../../common/Icon";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const accordionBtnStyleKeys = {
-  accordionTextColor: "textColor",
-  accordionBgColor: "bgColor",
-  accordionBorderColor: "borderColor"
-};
-const getAccordionData = updateData => {
-  const accordionBtnStyle = {}; // accordion btn style will come under type: accordion node
-  const accordionTitleStyle = {}; // accordion title style will come under type: accordion-summary node
-
-  Object.entries(updateData).forEach(([key, value]) => {
-    const accordionBtnStyleKey = accordionBtnStyleKeys[key];
-    if (accordionBtnStyleKey) {
-      // converting accordion button elementProp keys to node keys e.g: accordionTextColor -> textColor
-      accordionBtnStyle[accordionBtnStyleKey] = value;
-      return;
-    }
-    accordionTitleStyle[key] = value;
-  });
-  return {
-    accordionBtnStyle,
-    accordionTitleStyle
-  };
-};
-const convertAccordionBtnStyleKeys = (data = {}) => {
-  const style = {
-    ...data
-  };
-  Object.entries(accordionBtnStyleKeys).forEach(([key, value]) => {
-    const val = data[value];
-    if (val) {
-      // deleting the existing style key in node e.g: textColor
-      delete style[value];
-
-      // convertint into new key in element props e.g: accordionTextColor
-      style[key] = val;
-    }
-  });
-  return style;
-};
-const getElementProps = element => {
-  const accordionSummary = element.children?.find(c => c.type === "accordion-summary");
-
-  // joining accordion title and button styles
-  const elementProps = {
-    ...accordionSummary,
-    ...convertAccordionBtnStyleKeys(element)
-  };
-  return elementProps;
-};
 const Accordion = props => {
   const {
     attributes,
@@ -118,34 +69,16 @@ const Accordion = props => {
       at: path
     });
   };
-  const setNodes = (data, path) => {
-    Transforms.setNodes(editor, data, {
-      at: path
-    });
-  };
   const onSave = data => {
     const updateData = {
       ...data
     };
-    const {
-      accordionBtnStyle,
-      accordionTitleStyle
-    } = getAccordionData(updateData);
-
-    // applying accordion title style
-    const accordionSummary = data.children?.find(c => c.type === "accordion-summary");
-    const accordionSummaryPath = ReactEditor.findPath(editor, accordionSummary);
-    setNodes({
-      ...accordionTitleStyle,
-      type: "accordion-summary",
-      children: accordionSummary.children
-    }, accordionSummaryPath);
-
-    // applying accordion button style
-    delete accordionBtnStyle.children;
-    setNodes({
-      ...accordionBtnStyle
-    }, path);
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
     onClose();
   };
   const onClose = () => {
@@ -190,7 +123,7 @@ const Accordion = props => {
       },
       children: children[1]
     }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionBtnPopup, {
-      element: getElementProps(element),
+      element: element,
       onSave: onSave,
       onClose: onClose,
       customProps: customProps

package/dist/Editor/Elements/Accordion/AccordionBtnPopup.js

@@ -1,7 +1,6 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
 import accordionTitleBtnStyle from "../../common/StyleBuilder/accordionTitleBtnStyle";
-import accordionTitleStyle from "../../common/StyleBuilder/accordionTitleStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AccordionBtnPopup = props => {
   const {
@@ -11,12 +10,12 @@ const AccordionBtnPopup = props => {
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Accordion Settings",
+    title: "Accordion Collapse Button",
     type: "accordionTitleBtnStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: [...accordionTitleBtnStyle, ...accordionTitleStyle],
+    renderTabs: accordionTitleBtnStyle,
     customProps: customProps
   });
 };

package/dist/Editor/Elements/Accordion/AccordionSummary.js

@@ -1,17 +1,68 @@
-import React from "react";
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import AccordionTitlePopup from "./AccordionTitlePopup";
+import { IconButton, Tooltip } from "@mui/material";
+import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const AccordionSummary = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const editor = useSlateStatic();
+  const [showTool] = useEditorSelection(editor);
+  const selected = useSelected();
+  const path = ReactEditor.findPath(editor, element);
   const {
     textColor,
     bgColor,
     borderColor
   } = element;
-  return /*#__PURE__*/_jsx("div", {
+  const ToolBar = () => {
+    return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        top: "-42px"
+      },
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onSettings,
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+        })
+      })
+    }) : null;
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs("div", {
     className: `accordion-summary-container`,
     ...attributes,
     style: {
@@ -21,7 +72,12 @@ const AccordionSummary = props => {
       border: `1px solid ${borderColor}`,
       color: textColor
     },
-    children: children
+    children: [children, !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(AccordionTitlePopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
   });
 };
 export default AccordionSummary;

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

@@ -167,19 +167,15 @@ const Image = ({
     onTouchEnd
   } = handleLinkType(webAddress, linkType, readOnly, isNewTab);
   const handleImageClick = () => {
-    try {
-      Transforms.select(editor, {
-        anchor: Editor.start(editor, path),
-        focus: Editor.end(editor, path)
-      });
-      if (onClick) {
-        onClick();
-      }
-      if (onTouchEnd) {
-        onTouchEnd();
-      }
-    } catch (err) {
-      console.log(err);
+    Transforms.select(editor, {
+      anchor: Editor.start(editor, path),
+      focus: Editor.end(editor, path)
+    });
+    if (onClick) {
+      onClick();
+    }
+    if (onTouchEnd) {
+      onTouchEnd();
     }
   };
   useEffect(() => {
@@ -193,20 +189,16 @@ const Image = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    try {
-      const updateData = {
-        ...data
-      };
-      delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
-        at: path
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-    }
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
@@ -245,7 +237,7 @@ const Image = ({
         lg: "flex",
         xs: xsHidden ? "none" : "flex"
       },
-      width: `100%`,
+      width: `100% !important`,
       maxWidth: "100%",
       padding: {
         ...getTRBLBreakPoints(bannerSpacing)
@@ -296,7 +288,7 @@ const Image = ({
           readOnly: readOnly,
           handleImageClick: handleImageClick
         })
-      }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      }) : null, url && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,

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

@@ -95,20 +95,16 @@ const Video = ({
     setOpenSettings(true);
   };
   const onSave = data => {
-    try {
-      const updateData = {
-        ...data
-      };
-      delete updateData.children;
-      Transforms.setNodes(editor, {
-        ...updateData
-      }, {
-        at: path
-      });
-      onClose();
-    } catch (err) {
-      console.log(err);
-    }
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
@@ -191,7 +187,7 @@ const Video = ({
       flexDirection: "row",
       flexWrap: "wrap",
       // to support oldWidth with link
-      width: `100%`,
+      width: `100% !important`,
       justifyContent: horizantal,
       alignContent: vertical
     },

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -4,14 +4,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const EmojiPicker = props => {
   const {
-    onEmojiSelect,
-    onClose
+    onEmojiSelect
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
-      onEmojiSelect: onEmojiSelect,
-      onClickOutside: onClose
+      onEmojiSelect: onEmojiSelect
     })
   });
 };

package/dist/Editor/Elements/Form/Form.js

@@ -119,7 +119,7 @@ const Form = props => {
         if (fieldData?.element === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required && fieldData?.element === "email") {
+        if (fieldData?.required || fieldData?.element === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],

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

@@ -270,10 +270,10 @@ const Grid = props => {
     backgroundImage: `url(${backgroundImage})`
   } : {};
   const {
-    topLeft,
-    topRight,
-    bottomLeft,
-    bottomRight
+    topLeft = 0,
+    topRight = 0,
+    bottomLeft = 0,
+    bottomRight = 0
   } = getBreakPointsValue(borderRadius, size?.device) || {};
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
@@ -285,15 +285,22 @@ const Grid = props => {
         lg: "flex",
         xs: xsHidden ? "none" : "flex"
       },
-      background: bgColor,
+      background: bgColor || "transparent",
       alignContent: vertical,
       ...bgImage,
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
       borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
       borderStyle: borderStyle || "solid",
-      height: "auto"
+      height: "auto",
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover',
+      position: 'relative',
+      flexWrap: 'wrap',
+      padding: '0px'
+      // border: 0px solid #e5eaf2;
     },
+
     "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -11,9 +11,7 @@ const PageSettingsButton = props => {
   const {
     customProps,
     icoBtnType,
-    from,
-    closePopper,
-    setToolTip
+    from
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -40,8 +38,6 @@ const PageSettingsButton = props => {
     }
   };
   const onClose = () => {
-    closePopper(true);
-    setToolTip(false);
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {

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

@@ -183,7 +183,7 @@ const Table = props => {
     children: [/*#__PURE__*/_jsx(TableComp, {
       sx: classes.table,
       style: {
-        background: bgColor,
+        backgroundColor: bgColor,
         border: `1px solid ${borderColor}`,
         width: "auto"
       },

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

@@ -117,7 +117,7 @@ const TableCell = props => {
     className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
     style: {
       position: "relative",
-      background: bgColor || entireBgColor,
+      backgroundColor: bgColor || entireBgColor,
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import { TextField, IconButton } from "@mui/material";
 import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
 import { headingMap, sizeMap } from "../../utils/font.js";
@@ -18,11 +18,6 @@ const TextSize = ({
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
   const value = getBreakPointsValue(val, size?.device);
-  const [fontSize, setFontSize] = useState();
-  const timerRef = useRef();
-  useEffect(() => {
-    setFontSize(getSizeVal());
-  }, [value]);
   const updateMarkData = newVal => {
     let upData = {
       ...getBreakPointsValue(val),
@@ -44,14 +39,10 @@ const TextSize = ({
       }
     });
   };
-  const onChangeSize = value => {
-    if (value) {
-      let inc = parseInt(value);
-      inc = inc > 200 ? 200 : inc;
-      updateMarkData(inc);
-    } else {
-      setFontSize(null);
-    }
+  const onChangeSize = e => {
+    let inc = parseInt(e.target.value) || 8;
+    inc = inc > 200 ? 200 : inc;
+    updateMarkData(inc || 8);
   };
   const getSizeVal = () => {
     try {
@@ -76,19 +67,11 @@ const TextSize = ({
     const newVal = combinedOldVal - 1 < 0 ? 0 : combinedOldVal - 1;
     updateMarkData(newVal);
   };
-  const onChange = e => {
-    clearTimeout(timerRef.current);
-    const value = e.target.value;
-    setFontSize(value);
-    timerRef.current = setTimeout(() => {
-      onChangeSize(value);
-    }, 500);
-  };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {
       sx: classes?.textSize,
-      value: fontSize,
-      onChange: onChange,
+      value: combinedOldVal,
+      onChange: onChangeSize,
       size: "small",
       inputProps: {
         style: {

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -9,7 +9,6 @@ import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -48,23 +47,12 @@ const MiniToolbar = props => {
   const {
     popupType
   } = useEditorContext();
-  const [toolTip, setToolTip] = useState(false);
-  const [data, setData] = useState(null);
-  useEffect(() => {
-    if (data) {
-      setToolTip(false);
-      setData(null);
-    }
-  }, [data]);
   useEffect(() => {
     if (popper) {
       setPopper(null);
     }
   }, [editor.selection]);
   const handleClick = type => e => {
-    if (type === "page-settings") {
-      setToolTip(true);
-    }
     setPopper(type);
     setAnchorEl(e.currentTarget);
   };
@@ -78,10 +66,6 @@ const MiniToolbar = props => {
   const onSearch = e => {
     setSearch(e?.target?.value || "");
   };
-  const closePopper = data => {
-    setData(data);
-    setToolTip("false");
-  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -97,19 +81,11 @@ const MiniToolbar = props => {
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
-          disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
             onClick: handleClick(type),
             disabled: isDisabled,
-            children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
-              from: "miniToolBar",
-              icoBtnType: "mini",
-              customProps: customProps,
-              editor: editor,
-              closePopper: closePopper,
-              setToolTip: setToolTip
-            }) : /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx(Icon, {
               from: "miniToolBar",
               icoBtnType: "mini",
               customProps: customProps,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate } from "slate-react";
+import { useSlate, useFocused } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -23,6 +23,7 @@ const PopupTool = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
+  const inFocus = useFocused();
   const {
     selection
   } = editor;
@@ -46,7 +47,7 @@ const PopupTool = props => {
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       updateAnchorEl();

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

@@ -39,12 +39,7 @@ const MentionsListCard = props => {
       },
       alt: name,
       children: /*#__PURE__*/_jsx(Avatar, {
-        sx: {
-          background: 'linear-gradient(90deg, #5351FC 0%, #19A9FC 100%)'
-        },
-        alt: name,
-        src: avatar_filename,
-        children: !avatar_filename && name && name.charAt(0).toUpperCase()
+        src: avatar_filename
       })
     }), /*#__PURE__*/_jsx(Box, {
       sx: {

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

@@ -39,13 +39,10 @@ const usePopupStyles = theme => ({
       color: theme?.palette?.editor?.textColor
     },
     "&.active": {
-      background: `#2563EB2B`,
-      "& .MuiTypography-root": {
-        color: `${theme?.palette?.editor?.activeColor} !important`
-      }
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&:hover": {
-      background: theme?.palette?.action?.hover || `#F4F4F4`
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&.renderComp": {
       padding: "0px",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -1,18 +1,18 @@
 const accordionTitleBtnStyle = [{
   tab: "Colors",
-  value: "accordionColor",
+  value: "colors",
   fields: [{
-    label: "Accordion Color",
-    key: "accordionTextColor",
+    label: "Text Color",
+    key: "textColor",
     type: "color",
     needPreview: true
   }, {
-    label: "Accordion Background Color",
-    key: "accordionBgColor",
+    label: "Background Color",
+    key: "bgColor",
     type: "color"
   }, {
-    label: "Accordion Border Color",
-    key: "accordionBorderColor",
+    label: "Border Color",
+    key: "borderColor",
     type: "color"
   }]
 }];

package/dist/Editor/common/StyleBuilder/accordionTitleStyle.js

@@ -1,4 +1,20 @@
 const accordionTitleStyle = [{
+  tab: "Banner Spacing",
+  value: "bannerSpacing",
+  fields: [{
+    label: "Banner Spacing",
+    key: "bannerSpacing",
+    type: "bannerSpacing"
+  }]
+}, {
+  tab: "Border Radius",
+  value: "borderRadius",
+  fields: [{
+    label: "Border Radius",
+    key: "borderRadius",
+    type: "borderRadius"
+  }]
+}, {
   tab: "Colors",
   value: "colors",
   fields: [{
@@ -15,21 +31,5 @@ const accordionTitleStyle = [{
     key: "borderColor",
     type: "color"
   }]
-}, {
-  tab: "Banner Spacing",
-  value: "bannerSpacing",
-  fields: [{
-    label: "Banner Spacing",
-    key: "bannerSpacing",
-    type: "bannerSpacing"
-  }]
-}, {
-  tab: "Border Radius",
-  value: "borderRadius",
-  fields: [{
-    label: "Border Radius",
-    key: "borderRadius",
-    type: "borderRadius"
-  }]
 }];
 export default accordionTitleStyle;

package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react";
+import React from "react";
 import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -6,23 +6,12 @@ const SelectBox = props => {
   const {
     value,
     data,
-    onChange,
-    elementProps
+    onChange
   } = props;
   const {
     key,
     placeholder
   } = data;
-  const [checkedValue, setCheckedValue] = useState(false);
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    if (isFirstRender.current && elementProps.element === "email" && value === undefined) {
-      setCheckedValue(true);
-      isFirstRender.current = false;
-    } else {
-      setCheckedValue(value);
-    }
-  }, [elementProps.element, value]);
   const handleChange = e => {
     onChange({
       [key]: e.target.checked
@@ -37,7 +26,7 @@ const SelectBox = props => {
     children: [/*#__PURE__*/_jsx(FormControlLabel, {
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: value,
-        checked: checkedValue,
+        checked: value,
         onChange: handleChange
       }),
       label: placeholder

package/dist/Editor/helper/deserialize/index.js

@@ -72,20 +72,15 @@ const ELEMENT_TAGS = {
     type: "paragraph"
   }),
   TABLE: (el, children = []) => {
-    try {
-      const tableBody = (children || [])?.find(f => f?.type === "table-body");
-      const bodyChild = tableBody?.children || [];
-      const firstRowChildren = tableBody[0]?.children || [];
-      return {
-        type: "table",
-        overwriteChild: bodyChild,
-        // we are not having table-body in our json format, just we are wrapping table-row's inside the table
-        rows: bodyChild?.length,
-        columns: firstRowChildren?.length
-      };
-    } catch (err) {
-      console.log(err);
-    }
+    const bodyChild = children[0]?.children || [];
+    const firstRowChildren = bodyChild[0]?.children || [];
+    return {
+      type: "table",
+      overwriteChild: bodyChild,
+      // we are not having table-body in our json format, just we are wrapping table-row's inside the table
+      rows: bodyChild?.length,
+      columns: firstRowChildren?.length
+    };
   },
   THEAD: () => ({
     type: "table-head"

package/dist/Editor/hooks/useMouseMove.js

@@ -75,6 +75,7 @@ const useMouseMove = () => {
   }, []);
   const onMouseMove = e => {
     const dpath = e?.target?.closest(".dpath");
+    console.log(dpath);
     if (dpath) {
       console.log(`Stopped position: (${e.clientX}, ${e.clientY})`, dpath);
       setEvent({

package/dist/Editor/plugins/withHTML.js

@@ -1,4 +1,4 @@
-import { Transforms, Editor, Element, Node, Path } from "slate";
+import { Transforms, Editor, Element, Node } from "slate";
 import deserialize from "../helper/deserialize";
 import { decodeAndParseBase64 } from "../utils/helper";
 const avoidDefaultInsert = ["table", "grid"];
@@ -26,48 +26,6 @@ const getCurrentElement = editor => {
     return null;
   }
 };
-const getCurrentElementText = editor => {
-  try {
-    if (editor.selection) {
-      return Editor.string(editor, editor?.selection?.anchor?.path);
-    } else {
-      return null;
-    }
-  } catch (err) {
-    return null;
-  }
-};
-const insertAtNextNode = (editor, formattedFragment) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (selection) {
-      const parentPath = Path.parent(editor?.selection?.anchor?.path);
-      const nextPath = Path.next(parentPath);
-      Transforms.insertNodes(editor, {
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        at: nextPath
-      });
-      Transforms.insertFragment(editor, formattedFragment, {
-        at: nextPath
-      });
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-const handleInsert = (editor, defaultInsert, fragment = []) => {
-  if (getCurrentElementText(editor) && fragment.some(f => f.type === "table")) {
-    insertAtNextNode(editor, fragment);
-  } else {
-    defaultInsert();
-  }
-};
 const formatFragment = {
   "list-item": fragment => {
     let refactorFragment = [];
@@ -106,11 +64,11 @@ const withHtml = editor => {
     const currentEl = getCurrentElement(editor);
     const eltype = currentEl?.type;
     if (slateHTML && !formatFragment[eltype]) {
-      const decoded = decodeAndParseBase64(slateHTML);
       const [tableNode] = Editor.nodes(editor, {
         match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
       });
       if (tableNode && tableNode[0]) {
+        const decoded = decodeAndParseBase64(slateHTML);
         const defaultInsert = loopChildren(decoded, true);
         if (defaultInsert) {
           insertData(data);
@@ -121,7 +79,7 @@ const withHtml = editor => {
           Transforms.insertText(editor, text);
         }
       } else {
-        handleInsert(editor, () => insertData(data), decoded);
+        insertData(data);
       }
     } else if (html) {
       const parsed = new DOMParser().parseFromString(html, "text/html");
@@ -138,7 +96,7 @@ const withHtml = editor => {
       }
       const fragment = deserialize(parsed.body);
       const formattedFragment = formatFragment[eltype] ? formatFragment[eltype](fragment) : fragment;
-      handleInsert(editor, () => Transforms.insertFragment(editor, formattedFragment), formattedFragment);
+      Transforms.insertFragment(editor, formattedFragment);
       return;
     } else {
       insertData(data);

package/dist/Editor/plugins/withLayout.js

@@ -32,21 +32,16 @@ const withLayout = editor => {
   editor.normalizeNode = ([node, path]) => {
     if (path.length === 0) {
       if (editor.children.length <= 1 && Editor.string(editor, [0, 0]) === "") {
-        const {
-          anchor
-        } = editor?.selection || {};
-        if (anchor?.offset !== 0) {
-          const title = {
-            type: "title",
-            children: [{
-              text: "Untitled"
-            }]
-          };
-          Transforms.insertNodes(editor, title, {
-            at: path.concat(0),
-            select: true
-          });
-        }
+        const title = {
+          type: "title",
+          children: [{
+            text: "Untitled"
+          }]
+        };
+        Transforms.insertNodes(editor, title, {
+          at: path.concat(0),
+          select: true
+        });
       }
       if (editor.children.length === 0) {
         const paragraph = {

package/dist/Editor/plugins/withTable.js

@@ -8,7 +8,7 @@ const withTable = editor => {
     delete: slateDelete
   } = editor;
   editor.delete = arg => {
-    if (arg?.reverse) {
+    if (arg.reverse) {
       const table = new TableUtil(editor);
       const cellsSelected = table.isCellSelected(editor.selection);
       if (cellsSelected && cellsSelected.length > 1) {

package/dist/Editor/utils/draftToSlate.js

@@ -100,7 +100,7 @@ export const draftToSlate = props => {
       return a;
     }, []);
     return converted;
-  } else if (data?.length > 0) {
+  } else if (data?.length) {
     return data;
   } else {
     return [{

package/dist/Editor/utils/events.js

@@ -3,7 +3,6 @@ import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
 import { isListItem } from "./helper";
-import EDITORCMDS from "../common/EditorCmds";
 const HOTKEYS = {
   b: "bold",
   i: "italic",
@@ -64,8 +63,7 @@ export const commands = props => {
   try {
     const {
       event,
-      editor,
-      needLayout
+      editor
     } = props;
     if (HOTKEYS[event.key]) {
       event.preventDefault();
@@ -75,11 +73,6 @@ export const commands = props => {
       } else {
         Editor.addMark(editor, HOTKEYS[event.key], true);
       }
-    } else if (EDITORCMDS[event.key]) {
-      EDITORCMDS[event.key](event, {
-        editor,
-        needLayout
-      });
     }
   } catch (err) {
     console.log(err);
@@ -103,7 +96,7 @@ export const indentation = props => {
           Transforms.wrapNodes(editor, {
             type: listItem.type,
             children: [{
-              text: ""
+              text: ''
             }]
           });
         } else {
@@ -160,7 +153,7 @@ const checkListEnterEvent = (editor, type) => {
     Transforms.insertNodes(editor, {
       type: "check-list-item",
       children: [{
-        text: ""
+        text: ''
       }]
     }, {
       at: newPath
@@ -169,7 +162,7 @@ const checkListEnterEvent = (editor, type) => {
     // focus on the end of the line
     Transforms.move(editor, {
       distance: 1,
-      unit: "line"
+      unit: 'line'
     });
   } else {
     toggleBlock(editor, type);

package/dist/Editor/utils/helper.js

@@ -216,17 +216,6 @@ const getScrollElement = () => {
   const scrollFrom = isSlateWrapperScroll ? slateWrapper : window;
   return scrollFrom;
 };
-const handleLinkBtnClick = (e, props) => {
-  if (e) {
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  if (props.target) {
-    window.open(props.href);
-  } else {
-    window.location.href = props.href;
-  }
-};
 export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick = () => {}) => {
   const props = {};
   if (!readOnly) {
@@ -317,22 +306,23 @@ export const handleLinkType = (url, linkType, readOnly, openInNewTab, onClick =
 
   // for iphone fix
   if (props.component === "a" && props.href) {
-    const isMobile = getDevice(window.innerWidth) === "xs";
-    if (isMobile) {
+    if (getDevice(window.innerWidth) === "xs") {
       props.component = "button"; // iphone is opening two tabs, on open in new tab because of a tag.
     }
 
-    let touchEndClicked = false;
     props.onTouchEnd = e => {
-      touchEndClicked = true;
-      handleLinkBtnClick(e, props);
-    };
-    props.onClick = e => {
-      // This condition is used for mobile preview in the page editor.
-      // 'touchEnd' will not work in the mobile page preview.
-      if (!touchEndClicked && isMobile) {
-        handleLinkBtnClick(e, props);
+      if (e) {
+        // onTouchEnd will get triggered on web, only for image element, for that case event is getting undefined.
+        e.preventDefault();
+        e.stopPropagation();
       }
+      if (props.target) {
+        window.open(props.href);
+      } else {
+        window.location.href = props.href;
+      }
+    };
+    props.onClick = () => {
       return false;
     };
   }
@@ -377,25 +367,4 @@ export const decodeString = str => {
   } catch (err) {
     console.log(err);
   }
-};
-export const onDeleteKey = (event, {
-  editor
-}) => {
-  try {
-    const {
-      selection
-    } = editor;
-    if (selection) {
-      // If text is selected, delete the selection
-      Transforms.delete(editor);
-    } else {
-      // If no text is selected, handle deleting the next character/element
-      Transforms.delete(editor, {
-        unit: "character",
-        reverse: false
-      });
-    }
-  } catch (err) {
-    console.log(err);
-  }
 };

package/package.json

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

package/dist/Editor/common/EditorCmds.js

@@ -1,35 +0,0 @@
-import { Editor, Transforms } from "slate";
-const selectAll = (event, {
-  editor,
-  needLayout
-}) => {
-  try {
-    if (needLayout) {
-      event.preventDefault();
-      // Select the entire document
-      const {
-        selection
-      } = editor;
-      const [firstNode] = Editor.nodes(editor, {
-        at: [0]
-      }); // First node
-      const [lastNode] = Editor.nodes(editor, {
-        at: [editor.children.length - 1]
-      }); // Last node
-
-      if (firstNode && lastNode) {
-        Transforms.select(editor, {
-          anchor: Editor.start(editor, [0]),
-          // Start at the first node
-          focus: Editor.end(editor, [editor.children.length - 1]) // End at the last node
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-const EDITORCMDS = {
-  a: selectAll
-};
-export default EDITORCMDS;