@flozy/editor 5.1.2 → 5.1.4

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

@@ -1,106 +1,121 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Editor, Transforms } from "slate";
-import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade } from "@mui/material";
+import React, { useState } from "react";
+import { Transforms } from "slate";
+import { useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme } from "@mui/material";
+import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
+import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
+import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
+import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteCellIcon from "./DeleteCellIcon";
+import DeleteRowIcon from "./DeleteRowIcon";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
 import { groupByBreakpoint } from "../../helper/theme";
-import useTable, { TableProvider } from "../../hooks/useTable";
-import AddRowCol from "./AddRowCol";
-import TableTool from "./TableTool";
-import { useDebouncedCallback } from "use-debounce";
-import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const hideRowDragBtns = (hide, dragRowBtnCls) => {
-  const rowDragBtns = document.querySelectorAll(`.${dragRowBtnCls}`);
-  if (rowDragBtns?.length) {
-    rowDragBtns?.forEach(btn => btn.style.display = hide);
+const TABLE_MENUS = [{
+  Icon: AlignHorizontalRightIcon,
+  text: "Insert Columns to the Right",
+  action: {
+    type: "insertColumn",
+    position: "after"
   }
-};
-const ToolBar = props => {
-  const {
-    selected,
-    showTool,
-    classes,
-    handleExpand,
-    handleAction,
-    exandTools
-  } = props;
-  const {
-    getSelectedCells
-  } = useTable();
-  const viewTool = selected && !showTool && getSelectedCells()?.length <= 1;
-  return viewTool ? /*#__PURE__*/_jsxs(Box, {
-    component: "div",
-    contentEditable: false,
-    className: `tableToolBar ${exandTools ? "active" : ""}`,
-    sx: classes.tableToolBar,
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "Settings",
-      arrow: true,
-      onClick: () => handleAction("settings"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: "Show Tools",
-      arrow: true,
-      onClick: handleExpand,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        className: "toolbtn toggle",
-        children: /*#__PURE__*/_jsx(MoreIcon, {})
-      })
-    })]
-  }) : null;
-};
+}, {
+  Icon: AlignHorizontalLeftIcon,
+  text: "Insert Columns to the Left",
+  action: {
+    type: "insertColumn",
+    position: "at"
+  }
+}, {
+  Icon: AlignVerticalTopIcon,
+  text: "Insert Row Above",
+  action: {
+    type: "insertRow",
+    positon: "at"
+  }
+}, {
+  Icon: AlignVerticalBottomIcon,
+  text: "Insert Row Below",
+  action: {
+    type: "insertRow",
+    position: "after"
+  }
+}, {
+  Icon: DeleteRowIcon,
+  text: "Delete Row",
+  action: {
+    type: "deleteRow"
+  }
+}, {
+  Icon: DeleteCellIcon,
+  text: "Delete Column",
+  action: {
+    type: "deleteColumn"
+  }
+}, {
+  Icon: SettingsIcon,
+  text: "Settings",
+  action: {
+    type: "settings"
+  }
+}, {
+  Icon: DeleteForeverIcon,
+  text: "Remove Table",
+  action: {
+    type: "remove"
+  }
+}];
 const Table = props => {
   const theme = useTheme();
-  const {
-    theme: editorTheme
-  } = useEditorContext();
   const {
     element,
     attributes,
     children,
     customProps
   } = props;
-  const classes = TableStyles(editorTheme);
+  const classes = TableStyles();
   const {
     readOnly
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
-  const [exandTools, setExpandTools] = useState(null);
+  const [exandTools, setExpandTools] = useState(false);
   const {
     bgColor,
     borderColor,
-    xsHidden,
-    fontFamily,
-    fontWeight,
-    textSize,
-    textColor
+    xsHidden
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
   const [showTool] = useEditorSelection(editor);
-  const tableRef = useRef(null);
-  const containerRef = useRef(null);
-  const path = ReactEditor.findPath(editor, element);
-  const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
-  const handleAction = type => {
+  const handleAction = ({
+    type,
+    position
+  }) => () => {
     Transforms.select(editor, editor.selection);
     switch (type) {
-      case "delete":
-        table.removeTable();
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "deleteRow":
+        table.deleteRow();
         break;
-      case "duplicate":
-        table.duplicateTable();
+      case "deleteColumn":
+        table.deleteColumn();
+        break;
+      case "remove":
+        table.removeTable();
         break;
       case "settings":
         if (tableProps) {
@@ -111,16 +126,42 @@ const Table = props => {
         return;
     }
   };
-  const handleExpand = e => {
-    setExpandTools(prev => prev ? false : e.currentTarget);
+  const handleExpand = () => {
+    setExpandTools(!exandTools);
+  };
+  const ToolBar = () => {
+    return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
+      component: "div",
+      contentEditable: false,
+      className: `tableToolBar ${exandTools ? "active" : ""}`,
+      sx: classes.tableToolBar,
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Show Tools",
+        arrow: true,
+        onClick: handleExpand,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          className: "toolbtn toggle",
+          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
+        })
+      }), TABLE_MENUS.map(({
+        Icon,
+        text,
+        action
+      }) => {
+        return /*#__PURE__*/_jsx(Tooltip, {
+          title: text,
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: `toolbtn ${action?.type}`,
+            onClick: handleAction(action),
+            children: /*#__PURE__*/_jsx(Icon, {})
+          })
+        }, text);
+      })]
+    }) : null;
   };
-  useEffect(() => {
-    if (!selected) {
-      setExpandTools(false);
-    }
-  }, [selected]);
   const onSettings = () => {
-    setOpenSettings(!openSetttings);
+    setOpenSettings(true);
   };
   const onSave = data => {
     const updateData = {
@@ -142,137 +183,28 @@ const Table = props => {
       lg: "inline-block"
     }
   }, theme);
-  const addRow = () => {
-    const lastRow = element?.rows - 1;
-    const firstCol = 0;
-    const lastRowPath = [...path, lastRow, firstCol];
-    const position = Editor.start(editor, lastRowPath);
-    const selection = {
-      anchor: position,
-      focus: position
-    };
-
-    // select the last row first col to insert row below
-    Transforms.select(editor, selection);
-    table.insertRow("after");
-    Transforms.deselect(editor);
-  };
-  const addCol = () => {
-    const lastCol = element?.columns - 1;
-    const firstRow = 0;
-    const lastColumnPath = [...path, firstRow, lastCol];
-    const position = Editor.start(editor, lastColumnPath);
-    const selection = {
-      anchor: position,
-      focus: position
-    };
-
-    // select the last row first col to insert row below
-    Transforms.select(editor, selection);
-    table.insertColumn("after");
-    Transforms.deselect(editor);
-  };
-  const handleRowDragBtns = () => {
-    if (containerRef?.current?.scrollLeft > 0) {
-      hideRowDragBtns("none", dragRowBtnCls);
-    } else {
-      hideRowDragBtns("", dragRowBtnCls);
-    }
-  };
-  const handleScroll = () => {
-    handleRowDragBtns();
-  };
-  const onMouseOver = () => {
-    containerRef?.current?.classList.remove("hideScroll");
-  };
-  const onMouseLeave = () => {
-    containerRef?.current?.classList.add("hideScroll");
-  };
-  const commonAddBtnProps = {
-    tableRef,
-    containerRef,
-    readOnly,
-    tableNode: element
-  };
-  return /*#__PURE__*/_jsxs(TableProvider, {
-    editor: editor,
-    otherProps: {
-      dragRowBtnCls,
-      tablePath: path,
-      openSetttings
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      minWidth: "100%",
+      maxWidth: "100%",
+      position: "relative"
     },
-    children: [/*#__PURE__*/_jsxs("div", {
-      style: {
-        minWidth: "100%",
-        maxWidth: "100%",
-        position: "relative",
-        overflowX: "auto",
-        display: "flex",
-        paddingTop: "10px"
-      },
-      ref: containerRef,
-      onScroll: handleScroll,
-      onMouseOver: onMouseOver,
-      onMouseLeave: onMouseLeave,
-      className: "custom-scroll",
-      children: [/*#__PURE__*/_jsx(TableComp, {
-        className: readOnly ? "readOnly" : "",
-        sx: {
-          ...classes.table,
-          ...tableSX
-        },
-        style: {
-          background: bgColor,
-          border: borderColor ? `1px solid ${borderColor}` : "",
-          width: "auto",
-          fontFamily,
-          fontWeight,
-          fontSize: textSize,
-          color: textColor
-        },
-        ref: tableRef,
-        children: /*#__PURE__*/_jsx(TableBody, {
-          ...attributes,
-          children: children
-        })
-      }), /*#__PURE__*/_jsx(AddRowCol, {
-        ...commonAddBtnProps,
-        addType: "col",
-        onAdd: addCol
-      })]
-    }), /*#__PURE__*/_jsx(AddRowCol, {
-      ...commonAddBtnProps,
-      addType: "row",
-      onAdd: addRow
-    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {
-      selected: selected,
-      showTool: showTool,
-      classes: classes,
-      handleExpand: handleExpand,
-      handleAction: handleAction,
-      exandTools: exandTools
-    }), /*#__PURE__*/_jsx(Popper, {
-      open: Boolean(exandTools),
-      anchorEl: exandTools,
-      transition: true,
-      contentEditable: false,
+    children: [/*#__PURE__*/_jsx(TableComp, {
+      className: readOnly ? "readOnly" : "",
       sx: {
-        zIndex: 2000
+        ...classes.table,
+        ...tableSX
       },
-      placement: "bottom-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        timeout: 350,
-        children: /*#__PURE__*/_jsx("div", {
-          children: /*#__PURE__*/_jsx(TableTool, {
-            theme: editorTheme,
-            handleToolAction: handleAction
-          })
-        })
+      style: {
+        background: bgColor,
+        border: borderColor ? `1px solid ${borderColor}` : "",
+        width: "auto"
+      },
+      children: /*#__PURE__*/_jsx(TableBody, {
+        ...attributes,
+        children: children
       })
-    }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,
       onClose: onClose,