@flozy/editor 5.1.5 → 5.1.6

package/dist/Editor/common/iconslist.js

@@ -138,8 +138,8 @@ export const StrikethroughIcon = props => /*#__PURE__*/_jsx("svg", {
   children: /*#__PURE__*/_jsx("path", {
     className: "strokeFillPath",
     d: "M2.7607 11.125C2.7607 13.0718 4.33885 14.65 6.28568 14.65H8.21432C10.1611 14.65 11.7393 13.0718 11.7393 11.125V10.6429C11.7393 9.78254 11.4309 8.99403 10.9189 8.38214H13.5179C13.867 8.38214 14.15 8.0991 14.15 7.75C14.15 7.4009 13.867 7.11786 13.5179 7.11786H8.21597H8.21435H6.28579C5.03727 7.11786 4.02509 6.10568 4.02509 4.85714V4.375C4.02509 3.12647 5.03727 2.11429 6.28579 2.11429H8.21435C9.46288 2.11429 10.4751 3.12647 10.4751 4.375V4.84874C10.4751 5.19784 10.7581 5.48088 11.1072 5.48088C11.4563 5.48088 11.7393 5.19784 11.7393 4.84874V4.375C11.7393 2.42817 10.1612 0.85 8.21435 0.85H6.28579C4.33897 0.85 2.76081 2.42817 2.76081 4.375V4.85714C2.76081 5.71746 3.06916 6.50597 3.58108 7.11786H0.982141C0.633044 7.11786 0.35 7.4009 0.35 7.75C0.35 8.0991 0.633044 8.38214 0.982141 8.38214H8.21424L8.21556 8.38214C8.21559 8.38214 8.21562 8.38214 8.21564 8.38214C9.46353 8.38289 10.4749 9.39474 10.4749 10.6429V11.125C10.4749 12.3735 9.46276 13.3857 8.21424 13.3857H6.28568C5.03715 13.3857 4.02498 12.3735 4.02498 11.125V10.6429C4.02498 10.2938 3.74193 10.0107 3.39284 10.0107C3.04374 10.0107 2.7607 10.2938 2.7607 10.6429V11.125Z",
-    fill: "#64748B",
-    stroke: "#64748B",
+    fill: "currentColor",
+    stroke: "currentColor",
     strokeWidth: "0.3"
   })
 });
@@ -864,19 +864,19 @@ export const TextLeftAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 11.0557H3C2.59 11.0557 2.25 10.7157 2.25 10.3057C2.25 9.89566 2.59 9.55566 3 9.55566H12.47C12.88 9.55566 13.22 9.89566 13.22 10.3057C13.22 10.7157 12.89 11.0557 12.47 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M12.47 21.0557H3C2.59 21.0557 2.25 20.7157 2.25 20.3057C2.25 19.8957 2.59 19.5557 3 19.5557H12.47C12.88 19.5557 13.22 19.8957 13.22 20.3057C13.22 20.7157 12.89 21.0557 12.47 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -888,19 +888,19 @@ export const TextCenterAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 11.0557H7.26172C6.85172 11.0557 6.51172 10.7157 6.51172 10.3057C6.51172 9.89566 6.85172 9.55566 7.26172 9.55566H16.7317C17.1417 9.55566 17.4817 9.89566 17.4817 10.3057C17.4817 10.7157 17.1517 11.0557 16.7417 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M16.7417 21.0557H7.26172C6.85172 21.0557 6.51172 20.7157 6.51172 20.3057C6.51172 19.8957 6.85172 19.5557 7.26172 19.5557H16.7317C17.1417 19.5557 17.4817 19.8957 17.4817 20.3057C17.4817 20.7157 17.1517 21.0557 16.7417 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
@@ -912,19 +912,19 @@ export const TextRightAlign = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 6.05566H3C2.59 6.05566 2.25 5.71566 2.25 5.30566C2.25 4.89566 2.59 4.55566 3 4.55566H21C21.41 4.55566 21.75 4.89566 21.75 5.30566C21.75 5.71566 21.41 6.05566 21 6.05566Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 11.0557H11.5312C11.1213 11.0557 10.7812 10.7157 10.7812 10.3057C10.7812 9.89566 11.1213 9.55566 11.5312 9.55566H21.0013C21.4113 9.55566 21.7513 9.89566 21.7513 10.3057C21.7513 10.7157 21.4113 11.0557 21.0013 11.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21 16.0557H3C2.59 16.0557 2.25 15.7157 2.25 15.3057C2.25 14.8957 2.59 14.5557 3 14.5557H21C21.41 14.5557 21.75 14.8957 21.75 15.3057C21.75 15.7157 21.41 16.0557 21 16.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   }), /*#__PURE__*/_jsx("path", {
     className: "fillPath",
     d: "M21.0013 21.0557H11.5312C11.1213 21.0557 10.7812 20.7157 10.7812 20.3057C10.7812 19.8957 11.1213 19.5557 11.5312 19.5557H21.0013C21.4113 19.5557 21.7513 19.8957 21.7513 20.3057C21.7513 20.7157 21.4113 21.0557 21.0013 21.0557Z",
-    fill: "#292D32"
+    fill: "#64748B"
   })]
 });
 export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
@@ -933,6 +933,9 @@ export const JustifyStartIcon = props => /*#__PURE__*/_jsxs("svg", {
   height: "25",
   viewBox: "0 0 24 25",
   fill: "none",
+  style: {
+    color: "red"
+  },
   children: [/*#__PURE__*/_jsx("path", {
     d: "M5.10156 20.0557H16.9016C18.4016 20.0557 19.0016 19.4157 19.0016 17.8257V16.7857C19.0016 15.1957 18.4016 14.5557 16.9016 14.5557H5.10156",
     stroke: "#64748B",
@@ -1343,19 +1346,22 @@ export const GridAddSectionIcon = props => /*#__PURE__*/_jsxs("svg", {
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M10.1733 6.125V14.875",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   }), /*#__PURE__*/_jsx("path", {
     d: "M5.79834 10.5H14.5483",
     stroke: "#64748B",
     strokeWidth: "1.5",
     strokeLinecap: "round",
-    strokeLinejoin: "round"
+    strokeLinejoin: "round",
+    className: "fillStroke"
   })]
 });
 export const FormIcon = () => {

package/dist/Editor/commonStyle.js

@@ -17,12 +17,21 @@ const useCommonStyle = theme => ({
     },
     "& .close-popupbtn": {
       color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiSvgIcon-root": {
+      color: theme?.palette?.editor?.textColor
     }
   },
   sapcingInput: {
     backgroundColor: theme?.palette?.editor?.background,
     color: theme?.palette?.editor?.textColor
   },
+  customPaddingInput: {
+    background: theme?.palette?.editor?.inputFieldBgColor,
+    border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`,
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: '6px'
+  },
   colorPickerPopup: {
     "& .MuiPaper-root": {
       overflow: "auto",
@@ -68,9 +77,9 @@ const useCommonStyle = theme => ({
   },
   signaturePopup: {
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .signature-canvas": {
-        backgroundColor: "#FFF"
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
       },
       "& label": {
         color: theme?.palette?.editor?.textColor
@@ -97,26 +106,97 @@ const useCommonStyle = theme => ({
         borderColor: theme?.palette?.editor?.textColor
       },
       "& .upload-wrapper-ui": {
-        backgroundColor: theme?.palette?.type === "dark" ? "transparent" : "#F8F9FF",
+        backgroundColor: theme?.palette?.type === "dark" ? "#2563EB0F" : "#F8F9FF",
         "& .MuiTypography-root": {
           color: theme?.palette?.editor?.textColor
         }
       },
+      "& .typesignature-input-wrapper": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          borderRadius: "7px !important",
+          paddingRight: "6px !important"
+        },
+        "& .MuiInputBase-input": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder}`
+        },
+        "& .Mui-focused": {
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid #2563EB !important`
+          }
+        },
+        "& button": {
+          background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+          color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      },
       "& .typesignature-fontfamily": {
         "& button": {
-          color: theme?.palette?.editor?.textColor
+          color: theme?.palette?.editor?.textColor,
+          background: `${theme?.palette?.editor?.signatureFontBtnBg} !important`,
+          border: `1px solid ${theme?.palette?.editor?.sectionSettingIconHover} !important`,
+          "& p": {
+            fontSize: "13px !important"
+          }
+        },
+        "& .active ": {
+          border: `1px solid #2563EB !important`
         }
       },
       "& .MuiTab-root": {
-        color: theme?.palette?.editor?.textColor,
-        backgroundColor: theme?.palette?.editor?.background
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`,
+        backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        opacity: "unset",
+        fontSize: "12px !important",
+        fontWeight: "500 !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonBorder} !important`
+      },
+      "& .Mui-selected": {
+        background: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBg} !important`,
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpTabButtonSelectedBorder} !important`,
+        "& .MuiGrid-root": {
+          "& svg": {
+            "& path": {
+              fill: `${theme?.palette?.editor?.signaturePopUpTabButtonSelectedSvg} !important`
+            }
+          }
+        }
       },
       "& .close-popupbtn": {
-        color: theme?.palette?.editor?.textColor
+        color: theme?.palette?.editor?.closeButtonSvgStroke,
+        background: `${theme?.palette?.editor?.closeButtonBgColor} !important`
       },
       "& .deleteBtn": {
-        background: "transparent"
+        background: "transparent",
+        margin: '0px !important'
+      },
+      "& .MuiGrid-container": {
+        "& .workFlowButton": {
+          background: `${theme?.palette?.editor?.workFlowButtonBackground} !important`,
+          textTransform: "unset !important",
+          color: `${theme?.palette?.editor?.textColor} !important`,
+          fontSize: "14px !important",
+          fontWeight: "500 !important",
+          borderRadius: "25px",
+          padding: "5px 15px"
+        }
+      },
+      "& .MuiDialogActions-root": {
+        "& .deleteButtonSignature": {
+          background: `${theme?.palette?.editor?.closeButtonBackground} !important`,
+          color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+          border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`
+        }
       }
+    },
+    "& .disabledSaveBtn": {
+      background: "#2563EB33 !important",
+      color: theme?.palette?.type === "dark" && "#FFFFFF33 !important",
+      border: "1px solid #2563EB33 !important"
     }
   },
   popupTitle2: {
@@ -130,7 +210,44 @@ const useCommonStyle = theme => ({
   },
   datePicker: {
     "& .react-datepicker-wrapper": {
-      width: "100%"
+      width: "100%",
+      "& .react-datepicker__input-container": {
+        "& .MuiInputBase-root": {
+          background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          "& .MuiInputBase-input": {
+            background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+            color: `${theme?.palette?.editor?.textColor} !important`
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`
+          }
+        }
+      }
+    }
+  },
+  signaturePopUpNameField: {
+    background: "transparent !important",
+    "& .MuiInputBase-root": {
+      borderRadius: "10px !important",
+      background: "transparent !important",
+      "& .MuiOutlinedInput-input": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "10px !important",
+        border: `1px solid ${theme?.palette?.editor?.signaturePopUpInputFieldBorder} !important`,
+        fontSize: "14px !important",
+        fontWeight: "500 !important"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
+    },
+    "& .Mui-focused": {
+      "& .MuiOutlinedInput-input": {
+        border: `1px solid #2563EB !important`
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid transparent !important`
+      }
     }
   }
 });

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

@@ -14,7 +14,10 @@ const handleTableCell = (el, children) => {
   });
   return {
     type: "table-cell",
-    overwriteChild: wrapChild
+    overwriteChild: wrapChild,
+    size: {
+      width: 120
+    }
   };
 };
 const ELEMENT_TAGS = {

package/dist/Editor/helper/index.js

@@ -331,14 +331,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/helper/theme.js

@@ -147,4 +147,27 @@ export const groupByBreakpoint = (styleProps, theme) => {
     }
   };
 };
-export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getCustomizationValue = value => isNaN(parseInt(value)) ? null : parseInt(value);
+export const getBreakpointLineSpacing = (value, breakpoint) => {
+  try {
+    const values = getBreakPointsValue(value, breakpoint);
+    const cssVal = BREAKPOINTS_DEVICES.reduce((a, b) => {
+      if (values[b] || values["lg"]) {
+        const value = values[b] || values["lg"];
+        return {
+          ...a,
+          [b]: value
+        };
+      } else {
+        return a;
+      }
+    }, {});
+    if (breakpoint) {
+      return value[breakpoint] || value["lg"] || value;
+    } else {
+      return cssVal["lg"];
+    }
+  } catch (err) {
+    // console.log(err);
+  }
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -35,6 +35,7 @@ export const EditorProvider = ({
     path: null
   });
   const [fontFamilies, setFontFamilies] = useState({});
+  const [activeBreakPoint, setActiveBreakPoint] = useState("");
   useEffect(() => {
     window.updateSelectedItem = d => {
       setSelectedElement(d);
@@ -97,8 +98,10 @@ export const EditorProvider = ({
     setOpenAI,
     updateDragging,
     fontFamilies,
-    setFontFamilies
-  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop]);
+    setFontFamilies,
+    activeBreakPoint,
+    setActiveBreakPoint
+  }), [path, editor?.selection, selectedPath, selectedElement, contextMenu, openAI, popupType, drop, activeBreakPoint]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
     value: otherValues,
     children: children

package/dist/Editor/hooks/useTable.js

@@ -0,0 +1,195 @@
+import { ClickAwayListener } from "@mui/material";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { clearCellText } from "../utils/table";
+import { Editor, Element, Transforms, Range } from "slate";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { encodeToBase64, isHavingSelection } from "../utils/helper";
+import { serializeToText } from "../utils/serializeToText";
+import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const handleDragEnd = (dragData, editor, resetAll) => {
+  const {
+    active,
+    over
+  } = dragData;
+  if (over) {
+    const {
+      dragType,
+      path: startCellPath
+    } = active?.data?.current || {};
+    const {
+      path: overCellPath
+    } = over?.data?.current || {};
+    if (startCellPath?.length) {
+      if (dragType === "row") {
+        const startRowPath = startCellPath.slice(0, -1);
+        const overRowPath = overCellPath.slice(0, -1);
+        Transforms.moveNodes(editor, {
+          at: startRowPath,
+          to: overRowPath
+        });
+      } else {
+        const [startCol] = startCellPath.slice(-1);
+        const [overCol] = overCellPath.slice(-1);
+        const [tableData] = Editor.nodes(editor, {
+          at: startCellPath,
+          match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+        });
+        const [tableNode, tablePath] = tableData;
+        const rows = tableNode?.rows || 0;
+        for (let row = 0; row < rows; row++) {
+          const startColPath = [...tablePath, row, startCol];
+          const overColPath = [...tablePath, row, overCol];
+          Transforms.moveNodes(editor, {
+            at: startColPath,
+            to: overColPath
+          });
+        }
+      }
+      resetAll();
+    }
+  }
+};
+const TableContext = /*#__PURE__*/createContext();
+export function getDefaultTableSelection() {
+  return {
+    startCellPath: [],
+    endCellPath: [],
+    isDragging: false
+  };
+}
+export const TableProvider = ({
+  editor,
+  children,
+  otherProps = {}
+}) => {
+  const {
+    openSetttings
+  } = otherProps;
+  const [hoverPath, setHoverPath] = useState(null);
+  const [tableSelection, setTableSelection] = useState(getDefaultTableSelection());
+  const [tableResizing, setTableResizing] = useState(null);
+
+  // for the button events (like onclick,...etc) inside draggable component to work correctly
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      delay: 250,
+      distance: 0 // throws exceeded distance error
+    }
+  }));
+
+  const getSelectedCells = () => {
+    return getRectangleBounds(tableSelection);
+  };
+  const updateTableSelection = update => {
+    setTableSelection(prev => ({
+      ...prev,
+      ...update
+    }));
+  };
+  const resetAll = () => {
+    setTableSelection(getDefaultTableSelection());
+    Transforms.deselect(editor);
+
+    // hide drag icons after drag completion
+    setTimeout(() => setHoverPath(null), 200);
+  };
+  const values = useMemo(() => {
+    return {
+      hoverPath,
+      setHoverPath,
+      editor,
+      getSelectedCells,
+      updateTableSelection,
+      tableSelection,
+      tableResizing,
+      setTableResizing,
+      otherProps
+    };
+  }, [hoverPath, editor?.selection, tableSelection, tableResizing]);
+  useEffect(() => {
+    let isTextSelected;
+    const handleKeyDown = event => {
+      const isCutKey = (event.ctrlKey || event.metaKey) && event.key === "x";
+      if (isCutKey) {
+        isTextSelected = isHavingSelection(editor);
+      } else if (event.key === "Backspace") {
+        const selectedCells = getSelectedCells();
+        if (selectedCells?.length > 1) {
+          selectedCells.forEach(currentCellPath => {
+            clearCellText(editor, currentCellPath);
+          });
+        }
+      }
+    };
+    const handleCopy = (event, isCut) => {
+      try {
+        const isTextSelected = isHavingSelection(editor);
+        const {
+          startCellPath
+        } = tableSelection || {};
+        const customCopy = startCellPath?.length;
+        if (customCopy && !isTextSelected) {
+          event.preventDefault(); // Prevent default copy behavior
+
+          const {
+            tablePath
+          } = otherProps;
+          const [node] = Editor.node(editor, tablePath);
+          const copiedTableNode = createCopiedTableStructure(editor, tableSelection, node, tablePath);
+          const tableNode = [copiedTableNode];
+          const encodedTableNode = encodeToBase64(tableNode);
+          event.clipboardData.setData("application/x-slate-fragment", encodedTableNode);
+          const textData = serializeToText(tableNode);
+          event.clipboardData.setData("text/plain", textData);
+          const tableDom = tableNodeToDom(copiedTableNode);
+          event.clipboardData.setData("text/html", tableDom?.outerHTML);
+          if (isCut) {
+            clearCellText(editor, startCellPath);
+          }
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    };
+    const handleCut = e => {
+      // unable to find the text selected or not here, that why handling it on handleKeyDown
+
+      if (!isTextSelected) {
+        e.preventDefault();
+        handleCopy(e, true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("copy", handleCopy);
+    window.addEventListener("cut", handleCut);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("copy", handleCopy);
+      window.removeEventListener("cut", handleCut);
+    };
+  }, [tableSelection, editor, tableSelection]);
+  useEffect(() => {
+    if (!openSetttings) {
+      resetAll();
+    }
+  }, [openSetttings]);
+  return /*#__PURE__*/_jsx(TableContext.Provider, {
+    value: values,
+    children: /*#__PURE__*/_jsxs(DndContext, {
+      sensors: sensors,
+      onDragEnd: data => handleDragEnd(data, editor, resetAll),
+      children: [/*#__PURE__*/_jsx(ClickAwayListener, {
+        onClickAway: () => setTableSelection(getDefaultTableSelection()),
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      }), /*#__PURE__*/_jsx(DragOverlay, {})]
+    })
+  });
+};
+function useTable() {
+  return useContext(TableContext);
+}
+export default useTable;

package/dist/Editor/plugins/withCustomDeleteBackward.js

@@ -1,5 +1,6 @@
 import { Editor, Node, Path, Point, Transforms } from "slate";
 import { getNextNode } from "../utils/helper";
+const BACKWARD_BLOCKS = ["list-item", "signature"];
 const isNodeTextEmpty = node => {
   const nodeText = Node.string(node);
   return nodeText.trim() === "";
@@ -29,9 +30,9 @@ const withCustomDeleteBackward = editor => {
         }
       }
 
-      // Check if current node is a list item and is the last one
+      // Check if current node is a list item and is the last one, signature node
       const [node] = Editor.nodes(editor, {
-        match: n => n.type === "list-item" // Adjust based on your list item type
+        match: n => BACKWARD_BLOCKS.includes(n.type) // Adjust based on your list item type
       });
 
       if (node) {

package/dist/Editor/plugins/withHTML.js

@@ -68,6 +68,12 @@ const handleInsert = (editor, defaultInsert, fragment = []) => {
     defaultInsert();
   }
 };
+const getTableCellChild = (fragment = []) => {
+  const table = fragment.find(node => node.type === "table");
+  const row = table?.children?.find(node => node.type === "table-row");
+  const cell = row?.children?.find(node => node.type === "table-cell");
+  return cell?.children || [];
+};
 const formatFragment = {
   "list-item": fragment => {
     let refactorFragment = [];
@@ -114,9 +120,19 @@ const withHtml = editor => {
     const slateHTML = data?.getData("application/x-slate-fragment");
     const html = data?.getData("text/html");
     const currentEl = getCurrentElement(editor);
-    const eltype = currentEl?.type;
+    let eltype = currentEl?.type;
     if (slateHTML && !formatFragment[eltype]) {
+      const [tableCellNode] = Editor.nodes(editor, {
+        match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-cell"
+      });
       const decoded = decodeAndParseBase64(slateHTML);
+      if (tableCellNode) {
+        const tableCellChild = getTableCellChild(decoded);
+        if (tableCellChild?.length) {
+          Transforms.insertFragment(editor, tableCellChild);
+          return;
+        }
+      }
       const tableNode = getFocusedNode(editor, "table");
       const onlyTextNode = getFocusedNode(editor, "freegrid");