@flozy/editor 3.8.4 → 3.8.6

package/dist/Editor/Editor.css

@@ -245,6 +245,13 @@ blockquote {
   width: 17px !important;
 }
 
+.react-datepicker__input-container input {
+    height: 40px !important;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+}
+
 .close-popupbtn {
   border-radius: 4px !important;
   width: 24px;

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import { Transforms, Path, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
@@ -30,11 +30,16 @@ const GridToolBar = ({
   onAddGridItem,
   onAddSection,
   onMoveSection,
-  path
+  path,
+  isSectionFullWidth
 }) => {
   return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
     className: "grid-container-toolbar",
     contentEditable: false,
+    style: isSectionFullWidth ? {
+      right: "4px",
+      top: "4px"
+    } : {},
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Grid Settings",
       arrow: true,
@@ -75,6 +80,17 @@ const GridToolBar = ({
     }) : null]
   }) : null;
 };
+const getParentEl = (editor, path) => {
+  try {
+    if (path?.length) {
+      return Node.parent(editor, path);
+    } else {
+      return null;
+    }
+  } catch (err) {
+    return null;
+  }
+};
 const Grid = props => {
   const theme = useTheme();
   const {
@@ -115,6 +131,11 @@ const Grid = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [size] = useWindowResize();
+  const parentElement = getParentEl(editor, path);
+  const {
+    sectionGridSize
+  } = parentElement || {};
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -329,7 +350,8 @@ const Grid = props => {
         onAddGridItem: onAddGridItem,
         onAddSection: onAddSection,
         onMoveSection: onMoveSection,
-        path: path
+        path: path,
+        isSectionFullWidth: isSectionFullWidth
       })]
     }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
       element: element,

package/dist/Editor/Elements/Link/LinkPopup.js

@@ -13,7 +13,8 @@ const LinkPopup = props => {
     handleInsertLink,
     theme
   } = props;
-  const classes = LinkPopupStyles(theme);
+  const themeType = localStorage.getItem("themeType");
+  const classes = LinkPopupStyles(themeType);
   return /*#__PURE__*/_jsxs(Dialog, {
     fullWidth: true,
     open: open,
@@ -55,8 +56,7 @@ const LinkPopup = props => {
           name: "name",
           placeholder: "Link Title",
           onChange: handleInputChange,
-          sx: classes.addLinkField,
-          className: classes.addLinkField
+          sx: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,
@@ -71,8 +71,7 @@ const LinkPopup = props => {
           value: linkData?.url,
           placeholder: "https://google.com",
           onChange: handleInputChange,
-          sx: classes.addLinkField,
-          className: classes.addLinkField
+          sx: classes.addLinkField
         })
       }), /*#__PURE__*/_jsx(Grid, {
         item: true,

package/dist/Editor/Elements/Link/LinkPopupStyles.js

@@ -1,16 +1,16 @@
-const LinkPopupStyles = theme => ({
+const LinkPopupStyles = themeType => ({
   addLinkField: {
     "& .MuiOutlinedInput-input": {
       fontSize: "12px",
       fontWeight: 500,
-      color: `${theme?.palette?.editor?.textColor} !important`
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
     },
     "& .MuiFormHelperText-root": {
-      color: `${theme?.palette?.editor?.textColor} !important`
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important"
     },
     "& .MuiOutlinedInput-root": {
       boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
-      color: `${theme?.palette?.editor?.textColor} !important`,
+      color: themeType === "dark" ? "#FFFFFF !important" : "#000000 !important",
       borderRadius: "7px",
       "& fieldset": {
         borderColor: "#D8DDE1"

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -263,7 +263,12 @@ const SignaturePopup = props => {
                     name: "signedBy",
                     placeholder: "Enter Name",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#ccc'
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -311,7 +316,8 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
-                    marginRight: "8px"
+                    marginRight: "8px",
+                    minWidth: '44px'
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -326,7 +332,12 @@ const SignaturePopup = props => {
                     name: "signedByEmail",
                     placeholder: "Enter Email",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#ccc'
+                      }
+                    }
                   })
                 })]
               })]

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

@@ -1,4 +1,4 @@
-const TableStyles = () => ({
+const TableStyles = themeType => ({
   tableToolBar: {
     position: "absolute",
     top: "-34px",
@@ -61,6 +61,28 @@ const TableStyles = () => ({
     "&:hover": {
       background: "#ccc"
     }
+  },
+  deleteCellsPopUp: {
+    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
+    borderRadius: "7px !important",
+    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
+    zIndex: 100,
+    minWidth: "186px !important"
+  },
+  menuItemPopUp: {
+    padding: "5px 7px !important",
+    margin: "6px !important",
+    borderRadius: 1,
+    userSelect: "none",
+    color: themeType === "dark" ? "#2563EB" : "#0F172A",
+    "&:hover": {
+      // backgroundColor: "rgba(0, 123, 255, 0.1)",
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+    },
+    "&.Mui-selected": {
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
+      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
+    }
   }
 });
 export default TableStyles;

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, Popper, Typography } from "@mui/material";
 import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
 import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
 import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
@@ -15,6 +15,7 @@ import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
+import useClickOutside from "../../hooks/useClickOutside";
 import "./table.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Editor, Element } from "slate";
-import { Box } from "@mui/material";
+import { Editor, Element, Transforms } from "slate";
+import { Box, MenuItem, Popper, Typography } from "@mui/material";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
 import TableStyles from "./Styles";
 import { useEditorSelection } from "../../hooks/useMouseMove";
+import useClickOutside from "../../hooks/useClickOutside";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -28,7 +29,8 @@ const Resizer = ({
   });
 };
 const TableCell = props => {
-  const classes = TableStyles();
+  const themeType = localStorage.getItem("themeType");
+  const classes = TableStyles(themeType);
   const {
     element,
     attributes,
@@ -69,6 +71,42 @@ const TableCell = props => {
   const tableDOM = table.getDOMNode(path, true);
   const isCellSelected = table.isCellSelected(editor.selection);
   const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const popperOptions = [{
+    value: "Delete Row"
+  }, {
+    value: "Delete Column"
+  }];
+  const onRightClick = e => {
+    e.preventDefault();
+    if (hasSelected) {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const closePoper = () => {
+    setAnchorEl(null);
+  };
+  const handleMenuItemClick = value => {
+    Transforms.select(editor, editor.selection);
+    switch (value) {
+      case "Delete Row":
+        table.deleteRow();
+        break;
+      case "Delete Column":
+        table.deleteColumn();
+        break;
+      default:
+        return;
+    }
+    // closePoper();
+  };
+
+  // Use the useClickOutside hook
+  const popperRef = useClickOutside({
+    onClickOutside: closePoper,
+    refCount: 1
+  })[0];
   useEffect(() => {
     if (tableDOM) {
       const {
@@ -89,7 +127,7 @@ const TableCell = props => {
         cellWidth: parentWidth / columns
       });
     }
-  }, [tableDOM]);
+  }, [tableDOM, anchorEl]);
   useEffect(() => {
     if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -99,14 +137,37 @@ const TableCell = props => {
         height: 100
       });
     }
-  }, [tableSize]);
+  }, [tableSize, anchorEl]);
   useEffect(() => {
     if (!resizing && tableProps) {
       table.updateTableStyle({
         "col.size": size
       }, tableProps);
     }
-  }, [resizing]);
+  }, [resizing, anchorEl]);
+  const poperForDeltion = () => {
+    return /*#__PURE__*/_jsx(Popper, {
+      open: open,
+      anchorEl: anchorEl,
+      placement: "bottom-start",
+      disablePortal: true,
+      ref: popperRef,
+      sx: classes.deleteCellsPopUp,
+      children: popperOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
+        value: option.value,
+        onClick: () => handleMenuItemClick(option.value),
+        contentEditable: false,
+        sx: classes.menuItemPopUp,
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: "12px",
+            userSelect: "none"
+          },
+          children: option.value
+        })
+      }, option.value))
+    });
+  };
   const sizeProps = isHeader ? {
     width: size?.width || tableSize?.cellWidth
   } : {};
@@ -121,6 +182,7 @@ const TableCell = props => {
       border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
+    onContextMenu: onRightClick,
     children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
@@ -128,7 +190,7 @@ const TableCell = props => {
     }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
       className: "selection-area-tc",
       contentEditable: false
-    }) : null]
+    }) : null, poperForDeltion()]
   });
 };
 export default TableCell;

package/dist/Editor/Elements/TableContextMenu/TableContextMenu.js

@@ -8,6 +8,7 @@ import { ReactEditor } from "slate-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableContextMenu = props => {
+  console.log("Table context menu :", props);
   const {
     editor
   } = props;

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -8,58 +8,67 @@ import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree", "grid"];
-const DragHandleStyle = () => ({
-  dragHandle: {
-    opacity: 0,
-    content: '" "',
+const DragHandleStyle = fromPopper => {
+  const handleDragStyle = fromPopper ? {
+    position: "absolute",
+    top: "6px",
+    left: "4px"
+  } : {
     position: "absolute",
     top: "3px",
-    left: "-52px",
-    borderRadius: "0px",
-    padding: "0px",
-    width: "20px",
-    height: "20px",
-    border: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "grab",
-    color: "#D7D7D6",
-    background: "rgb(221, 221, 221, 0.1)",
-    "& svg": {
-      width: "20px"
+    left: "-52px"
+  };
+  return {
+    dragHandle: {
+      opacity: 0,
+      content: '" "',
+      ...handleDragStyle,
+      borderRadius: "0px",
+      padding: "0px",
+      width: "20px",
+      height: "20px",
+      border: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "grab",
+      color: "#D7D7D6",
+      background: "rgb(221, 221, 221, 0.1)",
+      "& svg": {
+        width: "20px"
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "rgb(221, 221, 221, 0.8)"
+      },
+      "&.active": {
+        opacity: 1,
+        cursor: "grabbing"
+      }
     },
-    "&:hover": {
-      opacity: 1,
-      background: "rgb(221, 221, 221, 0.8)"
+    dropArea: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: -1,
+      "&.dragging": {
+        backgroundColor: "#def4ff"
+      }
     },
-    "&.active": {
-      opacity: 1,
-      cursor: "grabbing"
+    dropAreaOver: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "4px"
     }
-  },
-  dropArea: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    "&.dragging": {
-      backgroundColor: "#def4ff"
-    }
-  },
-  dropAreaOver: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "4px"
-  }
-});
+  };
+};
 const DragHandle = props => {
-  const classes = DragHandleStyle();
+  const classes = DragHandleStyle(props.fromPopper);
   const editor = useSlateStatic();
   const [dragging, setDragging] = useState(false);
   const {

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

@@ -36,11 +36,12 @@ export default function LinkSettings(props) {
     customProps,
     navType
   } = props;
+  const themeType = localStorage.getItem("themeType");
   const {
     isMobile
   } = customProps;
   const navOptions = getNavOptions(customProps.hideTools);
-  const classes = LinkSettingsStyles();
+  const classes = LinkSettingsStyles(themeType);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
   const [openInNewTab, setOpenInNewTab] = useState(props.openInNewTab || false);

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

@@ -1,32 +1,35 @@
-const ButtonNavSettingsStyles = () => ({
+const ButtonNavSettingsStyles = themeType => ({
   dialogContainer: {
-    '& .MuiDialogContent-root': {
+    "& .MuiPaper-root": {
+      background: themeType === "dark" ? "#141720 !important" : "#ffffff !important"
+    },
+    "& .MuiDialogContent-root": {
       padding: "0px 20px"
     },
-    '& .MuiDialogActions-root': {
+    "& .MuiDialogActions-root": {
       padding: "10px"
     },
-    '& .MuiTypography-h6': {
+    "& .MuiTypography-h6": {
       fontWeight: 600,
       fontSize: "16px",
       paddingRight: "20px"
     },
     "& .MuiGrid-container": {
-      marginTop: '0px'
+      marginTop: "0px"
     },
     "& .MuiGrid-item": {
       padding: "14px"
     }
   },
   saveBtn: {
-    color: '#fff',
+    color: "#fff",
     background: "#2563EB",
     fontSize: "14px",
     fontWeight: 500,
     padding: "4px 24px",
     textTransform: "none",
     "&:hover": {
-      color: '#fff',
+      color: "#fff",
       background: "#2563EB"
     }
   },
@@ -43,7 +46,7 @@ const ButtonNavSettingsStyles = () => ({
     }
   },
   closeIcon: {
-    position: 'absolute',
+    position: "absolute",
     right: 8,
     top: 8,
     color: theme => theme.palette.grey[500]

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

@@ -1,15 +1,17 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const anchorEl = useRef(null);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = () => {
+  const Toolbar = ({
+    fromPopper
+  }) => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: {
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
         left: "-28px",
         top: "3px"
       },
@@ -99,6 +120,8 @@ const Section = props => {
       alignItems: horizantal,
       justifyContent: vertical
     },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -107,9 +130,36 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-        ...props
-      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
+      ref: anchorEl,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            background: "#F6F6F6",
+            height: "30px",
+            position: "relative"
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

package/dist/Editor/common/Section/styles.js

@@ -6,6 +6,9 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
+      },
+      "& .sectionPopper": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
+    "& .sectionPopper": {
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    "& .sectionPopper": {
+      opacity: 0
+    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",

package/dist/Editor/hooks/useWindowMessage.js

@@ -4,9 +4,19 @@ const useWindowMessage = props => {
     type
   } = props;
   const [message, setMessage] = useState(null);
+  const sendMessage = action => {
+    if (window.parent) {
+      window.parent.postMessage({
+        ...action
+      }, "*");
+    }
+  };
   useEffect(() => {
     if (window.addEventListener) {
       window.addEventListener("message", onMessage, false);
+      sendMessage({
+        isLoaded: true
+      });
     } else {
       window.attachEvent("onmessage", onMessage);
     }
@@ -23,13 +33,6 @@ const useWindowMessage = props => {
       setMessage(e?.data[type]);
     }
   };
-  const sendMessage = action => {
-    if (window.parent) {
-      window.parent.postMessage({
-        ...action
-      }, "*");
-    }
-  };
   return [message, sendMessage];
 };
 export default useWindowMessage;

package/dist/Editor/utils/events.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element, Node, Path } from "slate";
+import { Editor, Transforms, Element, Node, Path, Range } from "slate";
 import { toggleBlock } from "./SlateUtilityFunctions";
 import insertNewLine from "./insertNewLine";
 import { insertAccordion } from "./accordion";
@@ -179,7 +179,6 @@ const checkListEnterEvent = (editor, type) => {
 export const enterEvent = (e, editor, isMobile) => {
   try {
     const ele = isListItem(editor);
-
     // on shift enter break line in same node
     if (e.shiftKey && !isMobile) {
       e.preventDefault();
@@ -188,6 +187,7 @@ export const enterEvent = (e, editor, isMobile) => {
       const {
         type
       } = ele[0];
+      const path = ele[1];
       const text = Node.string(ele[0]);
       switch (type) {
         case "list-item":
@@ -219,6 +219,58 @@ export const enterEvent = (e, editor, isMobile) => {
             insertAccordion(editor, nextPath);
           }
           break;
+        case "headingOne":
+        case "headingTwo":
+        case "headingThree":
+          const {
+            selection
+          } = editor;
+          if (selection && Range.isCollapsed(selection)) {
+            const isAtEnd = Editor.isEnd(editor, selection.anchor, path);
+            const isAtStart = Editor.isStart(editor, selection.anchor, path);
+            if (isAtEnd) {
+              e.preventDefault();
+              Transforms.insertNodes(editor, {
+                type: 'paragraph',
+                children: [{
+                  text: ''
+                }]
+              });
+              const newLocation = Editor.after(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            } else if (!isAtStart) {
+              e.preventDefault();
+              Transforms.splitNodes(editor);
+              Transforms.setNodes(editor, {
+                type: 'paragraph'
+              }, {
+                at: Editor.after(editor, selection)
+              });
+              const newLocation = Editor.after(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            } else if (isAtStart) {
+              e.preventDefault();
+              Transforms.insertNodes(editor, {
+                type: 'paragraph',
+                children: [{
+                  text: ''
+                }]
+              }, {
+                at: Editor.before(editor, selection)
+              });
+              Transforms.select(editor, Editor.before(editor, selection));
+              const newLocation = Editor.before(editor, selection);
+              if (newLocation) {
+                Transforms.select(editor, newLocation);
+              }
+            }
+            return;
+          }
+          break;
         default:
       }
     }

package/dist/Editor/utils/helper.js

@@ -146,7 +146,7 @@ export const handleInsertLastElement = (event, editor) => {
   }
 };
 export const isListItem = editor => {
-  const format = ["list-item", "check-list-item", "accordion-summary"];
+  const format = ["list-item", "check-list-item", "accordion-summary", "headingOne", "headingTwo", "headingThree"];
   const [node] = Editor.nodes(editor, {
     match: n => !Editor.isEditor(n) && Element.isElement(n) && format.indexOf(n.type) > -1
   });

package/dist/Editor/utils/table.js

@@ -95,28 +95,32 @@ export class TableUtil {
     }
   };
   deleteRow = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
-      });
-      if (tableNode) {
-        const [[table, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
-        });
-        const [, currentRow] = tableNode;
-        const path = currentRow;
-        Transforms.removeNodes(this.editor, {
-          at: path
-        });
-        Transforms.setNodes(this.editor, {
-          rows: table.rows - 1
-        }, {
-          at: tablePath
+    try {
+      const {
+        selection
+      } = this.editor;
+      if (!!selection && Range.isCollapsed(selection)) {
+        const [tableNode] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
         });
+        if (tableNode) {
+          const [[table, tablePath]] = Editor.nodes(this.editor, {
+            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+          });
+          const [, currentRow] = tableNode;
+          const path = currentRow;
+          Transforms.removeNodes(this.editor, {
+            at: path
+          });
+          Transforms.setNodes(this.editor, {
+            rows: table.rows - 1
+          }, {
+            at: tablePath
+          });
+        }
       }
+    } catch (error) {
+      console.log("Error", error);
     }
   };
   insertColumn = action => {
@@ -151,34 +155,38 @@ export class TableUtil {
     }
   };
   deleteColumn = () => {
-    const {
-      selection
-    } = this.editor;
-    if (!!selection && Range.isCollapsed(selection)) {
-      const [tableNode] = Editor.nodes(this.editor, {
-        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
-      });
-      if (tableNode) {
-        const [[table, tablePath]] = Editor.nodes(this.editor, {
-          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+    try {
+      const {
+        selection
+      } = this.editor;
+      if (!!selection && Range.isCollapsed(selection)) {
+        const [tableNode] = Editor.nodes(this.editor, {
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
         });
-        const [, currentCell] = tableNode;
-        const startPath = currentCell;
+        if (tableNode) {
+          const [[table, tablePath]] = Editor.nodes(this.editor, {
+            match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+          });
+          const [, currentCell] = tableNode;
+          const startPath = currentCell;
 
-        // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
-        startPath[startPath.length - 2] = 0;
-        for (let row = 0; row < table.rows; row++) {
-          Transforms.removeNodes(this.editor, {
-            at: startPath
+          // The last two indices of the path represents the row and column. We need to add one cell to each row starting from the first row
+          startPath[startPath.length - 2] = 0;
+          for (let row = 0; row < table.rows; row++) {
+            Transforms.removeNodes(this.editor, {
+              at: startPath
+            });
+            startPath[startPath.length - 2]++;
+          }
+          Transforms.setNodes(this.editor, {
+            columns: table.columns - 1
+          }, {
+            at: tablePath
           });
-          startPath[startPath.length - 2]++;
         }
-        Transforms.setNodes(this.editor, {
-          columns: table.columns - 1
-        }, {
-          at: tablePath
-        });
       }
+    } catch (error) {
+      console.log("Error ", error);
     }
   };
   updateTableStyle = (styleProps, paths) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -62,7 +62,7 @@
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",
     "eject": "react-scripts eject",
-    "storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
     "publish:local": "rm -rf /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agenciflow08/Documents/flozy/client/node_modules/@flozy/editor/dist --copy-files"