@flozy/editor 5.3.6 → 5.3.8

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

@@ -1,16 +1,12 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { Editor, Element, Path, Transforms } from "slate";
-import { Box } from "@mui/material";
+import React, { useState, useEffect } from "react";
+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 { 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 { 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";
@@ -32,14 +28,9 @@ const Resizer = ({
     })
   });
 };
-const isCellEditable = (startCellPath, path) => {
-  return startCellPath?.length && startCellPath?.toString() === path?.toString();
-};
 const TableCell = props => {
-  const {
-    theme
-  } = useEditorContext();
-  const classes = TableStyles(theme);
+  const themeType = localStorage.getItem("themeType");
+  const classes = TableStyles(themeType);
   const {
     element,
     attributes,
@@ -53,48 +44,18 @@ const TableCell = props => {
     bgColor,
     borderColor,
     entireBgColor,
-    entireBorderColor,
-    entireTextColor,
-    entireFontFamily,
-    entireFontWeight,
-    entireTextSize,
-    size: elementSize
+    entireBorderColor
   } = 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({
     parentDOM,
-    size: element?.size,
-    minMaxProps: {
-      minWidth: 30
-    }
+    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, {
@@ -105,19 +66,47 @@ 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 = getSelectedCells();
+  const isCellSelected = table.isCellSelected(editor.selection);
   const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
-  const containerEle = tableDOM?.parentNode?.parentNode;
+  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 {
@@ -127,329 +116,81 @@ const TableCell = props => {
       const {
         width: parentWidth
       } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
-      const cellWidth = element?.size?.width;
-      const columns = tableNode?.[0]?.columns;
-      const oldTableWidth = parentWidth / columns - 4;
+      const {
+        styleProps
+      } = tableProps || {};
+      const columns = styleProps ? styleProps["table.columns"] : 2;
       setTableSize({
         width,
         height,
         parentWidth,
-        cellWidth: cellWidth || oldTableWidth
+        cellWidth: parentWidth / columns
       });
     }
-  }, [tableDOM]);
+  }, [tableDOM, anchorEl]);
   useEffect(() => {
     if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
-      const width = tableSize?.cellWidth;
-      const size = element?.size ? {
-        ...element?.size,
-        width
-      } : {
-        width,
+      onLoad(element?.size || {
+        width: tableSize?.cellWidth,
         height: 100
-      };
-      onLoad(size);
+      });
     }
-  }, [tableSize]);
-  const resetSelection = () => {
-    Transforms.deselect(editor);
-    updateTableSelection(getDefaultTableSelection());
-  };
+  }, [tableSize, anchorEl]);
   useEffect(() => {
-    const currentPath = path?.toString();
-    setTimeout(() => {
-      if (tableResizing === currentPath) {
-        setTableResizing(null);
-
-        // reset selection after resizing
-        resetSelection();
-      }
-    }, 200);
-    if (!resizing && tableResizing) {
-      table.resizeTableCell({
+    if (!resizing && tableProps) {
+      table.updateTableStyle({
         "col.size": size
-      }, 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);
-      }
+      }, tableProps);
     }
-  };
-  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
-      });
-    }
-  };
-  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
+  }, [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 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 || elementSize?.width : "0px";
-  const sizeProps = {
-    minWidth: width,
-    maxWidth: width
-  };
+  const sizeProps = isHeader ? {
+    width: size?.width || tableSize?.cellWidth
+  } : {};
   const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor || entireBorderColor;
-  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",
-        padding: "0px",
-        ...(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",
-          padding: "8px"
-        },
-        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]
+  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()]
   });
 };
 export default TableCell;

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

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

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

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

package/dist/Editor/Styles/EditorStyles.js

@@ -288,19 +288,12 @@ const editorStyles = ({
     "& ::selection": {
       color: "inherit",
       background: "#EAEBFE"
-    },
-    "&.readOnlyContainer": {
-      "& .max-content": {
-        paddingBottom: "0px !important"
-      }
     }
   },
   fullScreenWrapper: {
-    "& .editor-wrapper": {
-      paddingTop: '20px'
-    },
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
+      paddingTop: "20px",
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

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

@@ -2,8 +2,6 @@ import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
 import { toggleBlock, isBlockActive, isMarkActive, toggleMark } from "../../utils/SlateUtilityFunctions.js";
-import usePopupStyle from "../PopupTool/PopupToolStyle";
-import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MARK_TYPES = ["doublequote"];
 const BlockButton = props => {
@@ -14,10 +12,6 @@ const BlockButton = props => {
   } = props;
   const isMark = MARK_TYPES?.indexOf(format) >= 0;
   const isActive = isMark ? isMarkActive(editor, format) : isBlockActive(editor, format);
-  const {
-    theme
-  } = useEditorContext();
-  const classes = usePopupStyle(theme);
   return /*#__PURE__*/_jsx(Button, {
     active: isActive,
     format: format,
@@ -30,10 +24,6 @@ const BlockButton = props => {
       }
     },
     title: title,
-    sx: classes.textAlignButtons,
-    style: {
-      color: "#64748B"
-    },
     children: /*#__PURE__*/_jsx(Icon, {
       icon: format
     })

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
   classes,
@@ -23,18 +23,23 @@ const Dropdown = ({
     value: value,
     className: "editor-dd",
     onChange: e => changeMarkData(e, format),
+    style: {
+      fontFamily: fontFamilyMap[value],
+      width: width || "100%",
+      height: "36px",
+      borderRadius: "10px",
+      fontSize: "12px"
+    },
     MenuProps: {
       PaperProps: {
         sx: classes?.textOptions
       }
     },
-    sx: classes.textFormatSelect,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem
-    // style={{ fontFamily: item.text }}
-    , {
+    children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+      style: {
+        fontFamily: item.text
+      },
       value: item.value,
-      sx: classes.textFormatSelectOptions,
       children: item.text
     }, index))
   });