@flozy/editor 5.1.5 → 5.1.7

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

@@ -1,12 +1,16 @@
-import React, { useState, useEffect } from "react";
-import { Editor, Element, Transforms } from "slate";
-import { Box, MenuItem, Popper, Typography } from "@mui/material";
+import React, { useState, useEffect, useMemo } from "react";
+import { Editor, Element, Path, Transforms } from "slate";
+import { Box } 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 { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
+import useTable, { getDefaultTableSelection } from "../../hooks/useTable";
+import DragButton from "./DragButton";
+import TablePopup from "./TablePopup";
+import { Droppable } from "./Droppable";
+import { useDndContext } from "@dnd-kit/core";
 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,9 +32,14 @@ const Resizer = ({
     })
   });
 };
+const isCellEditable = (startCellPath, path) => {
+  return startCellPath?.length && startCellPath?.toString() === path?.toString();
+};
 const TableCell = props => {
-  const themeType = localStorage.getItem("themeType");
-  const classes = TableStyles(themeType);
+  const {
+    theme
+  } = useEditorContext();
+  const classes = TableStyles(theme);
   const {
     element,
     attributes,
@@ -44,11 +53,36 @@ const TableCell = props => {
     bgColor,
     borderColor,
     entireBgColor,
-    entireBorderColor
+    entireBorderColor,
+    entireTextColor,
+    entireFontFamily,
+    entireFontWeight,
+    entireTextSize
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
   const [showTool] = useEditorSelection(editor);
+  const {
+    hoverPath,
+    setHoverPath,
+    getSelectedCells,
+    updateTableSelection,
+    tableSelection,
+    tableResizing,
+    setTableResizing,
+    otherProps
+  } = useTable();
+  const {
+    active,
+    over
+  } = useDndContext();
+  const currentDraggingType = active?.data?.current?.dragType;
+  const {
+    dragRowBtnCls
+  } = otherProps || {};
+  const {
+    startCellPath
+  } = tableSelection;
   const path = ReactEditor.findPath(editor, element);
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
@@ -56,6 +90,7 @@ const TableCell = props => {
     size: element?.size
   });
   const [tableSize, setTableSize] = useState({});
+  const [openSettings, setOpenSettings] = useState(false);
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
   const [tableNode] = Editor.nodes(editor, {
@@ -66,47 +101,19 @@ const TableCell = props => {
     at: path,
     match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
   });
+  const currentPath = path.slice(-2) || []; // getting last 2 items from path, which gives row and column position of the cell
+  const [row, column] = currentPath;
+  const isFirstRow = row === 0;
+  const isFirstColumn = column === 0;
+  const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);
-  const isCellSelected = table.isCellSelected(editor.selection);
+  const isCellSelected = getSelectedCells();
   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];
+  const containerEle = tableDOM?.parentNode?.parentNode;
   useEffect(() => {
     if (tableDOM) {
       const {
@@ -116,81 +123,327 @@ const TableCell = props => {
       const {
         width: parentWidth
       } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
-      const {
-        styleProps
-      } = tableProps || {};
-      const columns = styleProps ? styleProps["table.columns"] : 2;
+      const cellWidth = element?.size?.width;
+      const columns = tableNode?.[0]?.columns;
+      const oldTableWidth = parentWidth / columns - 4;
       setTableSize({
         width,
         height,
         parentWidth,
-        cellWidth: parentWidth / columns
+        cellWidth: cellWidth || oldTableWidth
       });
     }
-  }, [tableDOM, anchorEl]);
+  }, [tableDOM]);
   useEffect(() => {
     if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
-      onLoad(element?.size || {
-        width: tableSize?.cellWidth,
+      const width = tableSize?.cellWidth;
+      const size = element?.size ? {
+        ...element?.size,
+        width
+      } : {
+        width,
         height: 100
-      });
+      };
+      onLoad(size);
     }
-  }, [tableSize, anchorEl]);
+  }, [tableSize]);
+  const resetSelection = () => {
+    Transforms.deselect(editor);
+    updateTableSelection(getDefaultTableSelection());
+  };
   useEffect(() => {
-    if (!resizing && tableProps) {
-      table.updateTableStyle({
+    const currentPath = path?.toString();
+    setTimeout(() => {
+      if (tableResizing === currentPath) {
+        setTableResizing(null);
+
+        // reset selection after resizing
+        resetSelection();
+      }
+    }, 200);
+    if (!resizing && tableResizing) {
+      table.resizeTableCell({
         "col.size": size
-      }, tableProps);
+      }, path);
+    }
+    if (resizing) {
+      setTableResizing(currentPath);
+    }
+  }, [resizing]);
+  const onMouseEnter = path => {
+    setHoverPath(path);
+    if (tableSelection?.isDragging) {
+      updateTableSelection({
+        endCellPath: path
+      });
+      const isSelectingOneCellToAnotherCell = startCellPath?.length && !Path.equals(path, startCellPath);
+      if (isSelectingOneCellToAnotherCell) {
+        Transforms.deselect(editor);
+      }
+    }
+  };
+  const onMouseLeave = () => {
+    setHoverPath(null);
+  };
+  const onMouseDownInCell = e => {
+    if (
+    // for shift selection
+    e.shiftKey && startCellPath?.length && startCellPath.toString() !== path.toString()) {
+      updateTableSelection({
+        endCellPath: path
+      });
+    } else {
+      updateTableSelection({
+        startCellPath: path,
+        endCellPath: [],
+        isDragging: true
+      });
+    }
+  };
+  const onMouseUp = () => {
+    if (startCellPath?.length) {
+      updateTableSelection({
+        endCellPath: path,
+        isDragging: false
+      });
+    }
+  };
+  const onClick = () => {
+    const currentEditorSelection = editor?.selection?.focus?.path || [];
+    const selectionPath = currentEditorSelection?.slice(0, -2);
+    const isCellSelected = selectionPath?.length && Path.equals(selectionPath, path);
+    if (!isCellSelected) {
+      // after mousedown event, onclick is triggered, while onclick, dragging should be disabled and focus should be on that clicked cell to edit the contents inside it.
+      updateTableSelection({
+        isDragging: false
+      });
     }
-  }, [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 cellId = "table-cell" + path.toString();
+  const cellRef = document.getElementById(cellId);
+  const contentEditable = !readOnly && isCellEditable(startCellPath, path);
+  const commonTdProps = useMemo(() => {
+    const props = {
+      id: cellId
+    };
+
+    // if (!contentEditable) {
+    //   props.contentEditable = false;
+    // }
+
+    return props;
+  }, [contentEditable, cellId]);
+  const handleTouchMove = e => {
+    const touch = e.touches[0]; // Get the current touch point
+    const element = document.elementFromPoint(touch.clientX, touch.clientY);
+    if (element && element.dataset.cell) {
+      const elementPath = element.dataset.cell.split(",").map(Number);
+      onMouseEnter(elementPath);
+    }
+  };
+  const handleTouchEnd = () => {
+    updateTableSelection({
+      isDragging: false
     });
   };
-  const sizeProps = isHeader ? {
-    width: size?.width || tableSize?.cellWidth
-  } : {};
+  const tbProps = tableResizing || resizing || over || readOnly ? {
+    ...commonTdProps,
+    contentEditable: false
+  } : {
+    ...commonTdProps,
+    onMouseEnter: () => onMouseEnter(path),
+    onMouseLeave,
+    onMouseDown: onMouseDownInCell,
+    onMouseUp,
+    onClick,
+    // mobile events for selection
+    onTouchStart: onMouseDownInCell,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  };
+  const dndProps = {
+    id: cellId,
+    data: {
+      path
+    }
+  };
+  const isCellDragging = active?.id && active?.id === cellId;
+  const isRowDragging = isCellDragging && currentDraggingType === "row";
+  const isColDragging = isCellDragging && currentDraggingType === "col";
+  const width = isHeader ? size?.width || tableSize?.cellWidth : "0px";
+  const sizeProps = {
+    minWidth: width,
+    maxWidth: width
+  };
   const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
-  return /*#__PURE__*/_jsxs("td", {
-    ...element.attr,
-    ...attributes,
-    className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
-    style: {
-      position: "relative",
-      background: bgColor || entireBgColor,
-      border: cellBorderColor ? `3px solid ${cellBorderColor}` : "",
-      ...(sizeProps || {})
-    },
-    onContextMenu: onRightClick,
-    children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
-      classes: classes,
-      onMouseDown: onMouseDown,
-      height: tableDOM.getBoundingClientRect()?.height
-    }) : null, hasSelected && !readOnly ? /*#__PURE__*/_jsx("div", {
-      className: "selection-area-tc",
-      contentEditable: false
-    }) : null, poperForDeltion()]
+  const selectCurrentCell = () => {
+    const cellPath = Editor.start(editor, path);
+    const selection = {
+      anchor: cellPath,
+      focus: cellPath
+    };
+
+    // select the cell to insert/delete/duplicate/clear
+    Transforms.select(editor, selection);
+  };
+  const onRowDrag = () => {
+    const {
+      children
+    } = rowNode[0] || {};
+    const rowPath = rowNode[1] || [];
+    const rowStartCell = [...rowPath, 0];
+    const rowEndCell = [...rowPath, children?.length - 1];
+    updateTableSelection({
+      startCellPath: rowStartCell,
+      endCellPath: rowEndCell,
+      isDragging: false
+    });
+    selectCurrentCell();
+  };
+  const onColDrag = () => {
+    const [tableData, tablePath] = tableNode;
+    const {
+      rows
+    } = tableData;
+    const startColCell = [...tablePath, 0, column];
+    const endColCell = [...tablePath, rows - 1, column];
+    updateTableSelection({
+      startCellPath: startColCell,
+      endCellPath: endColCell,
+      isDragging: false
+    });
+    selectCurrentCell();
+  };
+  const handleToolAction = (value, option, dragType) => {
+    const isRowDrag = dragType === "row";
+    switch (value) {
+      case "insertAbove":
+        table.insertRow("at");
+        break;
+      case "insertBelow":
+        table.insertRow("after");
+        break;
+      case "delete":
+        const deleteFn = isRowDrag ? table.deleteRow : table.deleteColumn;
+        deleteFn();
+        setTimeout(() => resetSelection(), 200); // throws cannot find the descendant path error because of deletion
+        break;
+      case "duplicate":
+        if (isRowDrag) {
+          table.insertRow("duplicate");
+        } else {
+          table.duplicateColumn();
+        }
+        break;
+      case "clear":
+        if (isRowDrag) {
+          table.clearRow();
+        } else {
+          table.clearColumn();
+        }
+        break;
+      case "insertRight":
+        table.insertColumn("after");
+        break;
+      case "insertLeft":
+        table.insertColumn("at");
+        break;
+      case "color":
+        setOpenSettings(dragType);
+        break;
+      default:
+        return;
+    }
+    const omitValues = ["color", "delete"];
+    if (!omitValues.includes(value)) {
+      resetSelection();
+    }
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    delete updateData.type;
+    table.updateTableStyle(updateData, {
+      ...tableProps
+    });
+    onClose();
+  };
+  const commonDragBtnProps = {
+    anchorEl: cellRef,
+    handleToolAction,
+    customProps,
+    dndProps,
+    resetSelection
+  };
+  const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("td", {
+      ...element.attr,
+      ...attributes,
+      className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
+      style: {
+        position: "relative",
+        background: bgColor || entireBgColor,
+        border: cellBorderColor ? `3px solid ${cellBorderColor}` : "1px solid #E0E0E0",
+        fontFamily: entireFontFamily || "inherit",
+        fontWeight: entireFontWeight || "inherit",
+        fontSize: entireTextSize || "inherit",
+        color: entireTextColor || "inherit",
+        cursor: "text",
+        verticalAlign: "top",
+        ...(sizeProps || {})
+      },
+      ...tbProps,
+      "data-cell": path.toString(),
+      children: [isFirstRow && currentDraggingType === "col" ? /*#__PURE__*/_jsx(Droppable, {
+        ...dndProps,
+        dragType: currentDraggingType,
+        tableDOM: tableDOM
+      }) : null, isFirstColumn && currentDraggingType === "row" ? /*#__PURE__*/_jsx(Droppable, {
+        ...dndProps,
+        dragType: currentDraggingType,
+        tableDOM: tableDOM
+      }) : null, /*#__PURE__*/_jsx("div", {
+        style: {
+          overflow: "auto hidden"
+        },
+        children: children
+      }), isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
+        classes: classes,
+        onMouseDown: onMouseDown,
+        height: tableDOM.getBoundingClientRect()?.height
+      }) : null, hasSelected && !readOnly && !tableResizing ? /*#__PURE__*/_jsx("div", {
+        className: "selection-area-tc",
+        contentEditable: false
+      }) : null, /*#__PURE__*/_jsx(DragButton, {
+        ...commonDragBtnProps,
+        placement: "top",
+        dragType: "col",
+        onDrag: onColDrag,
+        hideDelete: rowProps?.children?.length <= 1,
+        show: showColDrag || isColDragging
+      }), /*#__PURE__*/_jsx(DragButton, {
+        ...commonDragBtnProps,
+        dragType: "row",
+        onDrag: onRowDrag,
+        hideDelete: parentProps?.children?.length <= 1,
+        className: dragRowBtnCls,
+        show: showRowDragBtn
+      })]
+    }), openSettings ? /*#__PURE__*/_jsx(TablePopup, {
+      element: tableProps?.styleProps || {},
+      customProps: customProps,
+      onSave: onSave,
+      onClose: onClose,
+      styleType: openSettings
+    }) : null]
   });
 };
 export default TableCell;

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

@@ -1,21 +1,27 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
-import tableStyle from "../../common/StyleBuilder/tableStyle";
+import tableStyle, { tableColumnStyle, tableRowStyle } from "../../common/StyleBuilder/tableStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
+const STYLE_TYPES = {
+  row: tableRowStyle,
+  col: tableColumnStyle
+};
 const TablePopup = props => {
   const {
     element,
     onSave,
     onClose,
-    customProps
+    customProps,
+    styleType
   } = props;
+  const styles = STYLE_TYPES[styleType] || tableStyle;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Table",
     type: "gridStyle",
     element: element,
     onSave: onSave,
     onClose: onClose,
-    renderTabs: tableStyle,
+    renderTabs: styles,
     customProps: customProps
   });
 };

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

@@ -10,7 +10,11 @@ const TableRow = props => {
   } = props;
   const {
     bgColor,
-    borderColor
+    borderColor,
+    fontFamily,
+    fontWeight,
+    textSize,
+    textColor
   } = element;
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
@@ -24,7 +28,11 @@ const TableRow = props => {
     ...attributes,
     style: {
       backgroundColor: bgColor,
-      border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
+      border: rowBorderColor ? `1px solid ${rowBorderColor}` : "",
+      fontFamily,
+      fontWeight,
+      fontSize: textSize,
+      color: textColor
     },
     children: children
   });

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

@@ -0,0 +1,101 @@
+import CustomSelect from "../AI/CustomSelect";
+import Styles from "../AI/Styles";
+import { CloseIcon, DeleteIcon } from "../../assets/svg/AIIcons";
+import { AboveArrow, BelowArrow, DuplicateIcon, LeftArrow, PaintIcon, RightArrow } from "../../assets/svg/TableIcons";
+import { jsx as _jsx } from "react/jsx-runtime";
+const wholeTableTools = [{
+  group: "",
+  groupLabel: "",
+  options: [{
+    label: "Duplicate",
+    value: "duplicate",
+    Icon: DuplicateIcon
+  }, {
+    label: "Delete",
+    value: "delete",
+    Icon: DeleteIcon
+  }]
+}];
+const insertColOptions = [{
+  label: "Insert Right",
+  value: "insertRight",
+  Icon: RightArrow
+}, {
+  label: "Insert Left",
+  value: "insertLeft",
+  Icon: LeftArrow
+}];
+const insertRowOptions = [{
+  label: "Insert Above",
+  value: "insertAbove",
+  Icon: AboveArrow,
+  replace: false
+}, {
+  label: "Insert Below",
+  value: "insertBelow",
+  Icon: BelowArrow,
+  replace: false
+}];
+function getTools(dragType, hideDelete) {
+  const insertOptions = dragType === "col" ? insertColOptions : insertRowOptions;
+  const deleteOption = hideDelete ? [] : [{
+    label: "Delete",
+    value: "delete",
+    Icon: DeleteIcon,
+    replace: false
+  }];
+  let tools = [{
+    group: "",
+    groupLabel: "",
+    options: [{
+      label: "Color",
+      value: "color",
+      Icon: PaintIcon
+    }, {
+      label: "Duplicate",
+      value: "duplicate",
+      Icon: DuplicateIcon
+    }, ...insertOptions, {
+      label: "Clear Contents",
+      value: "clear",
+      Icon: CloseIcon
+    }, ...deleteOption]
+  }];
+  return tools;
+}
+export function TableToolOnDrag({
+  theme,
+  dragType,
+  handleToolAction,
+  hideDelete
+}) {
+  const classes = Styles(theme);
+  const tools = getTools(dragType, hideDelete);
+  return /*#__PURE__*/_jsx(CustomSelect, {
+    classes: classes,
+    show: true,
+    options: tools,
+    onSend: (value, option) => {
+      handleToolAction(value, option, dragType);
+    },
+    btnProps: {
+      onMouseDown: e => e.stopPropagation(),
+      onMouseUp: e => e.stopPropagation()
+    }
+  });
+}
+function TableTool({
+  theme,
+  handleToolAction
+}) {
+  const classes = Styles(theme);
+  return /*#__PURE__*/_jsx(CustomSelect, {
+    classes: classes,
+    show: true,
+    options: wholeTableTools,
+    onSend: (value, option) => {
+      handleToolAction(value, option);
+    }
+  });
+}
+export default TableTool;