@seafile/sdoc-editor 0.4.21 → 0.4.23

package/dist/basic-sdk/extension/plugins/table/render/render-cell.js

@@ -9,6 +9,8 @@ import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks'
 import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
 import { getTableColumns, colorBlend, getCellHighlightClassName } from '../helpers';
 import { ELEMENT_TYPE } from '../../../constants';
+import EventBus from '../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../constants';
 const TableCell = _ref => {
   let {
     attributes,
@@ -22,6 +24,8 @@ const TableCell = _ref => {
   const pathLength = cellPath.length;
   const rowIndex = cellPath[pathLength - 2];
   const cellIndex = cellPath[pathLength - 1];
+  const rowEntry = Editor.parent(editor, cellPath);
+  const tableEntry = Editor.parent(editor, rowEntry[1]);
   const {
     minColIndex,
     maxColIndex,
@@ -75,10 +79,6 @@ const TableCell = _ref => {
   // Table alternate highlight
   const highlightClass = useMemo(() => {
     var _tableEntry$;
-    const [tableEntry] = Editor.nodes(editor, {
-      at: cellPath,
-      match: n => n.type === ELEMENT_TYPE.TABLE
-    });
     const {
       alternate_highlight,
       alternate_highlight_color
@@ -88,6 +88,17 @@ const TableCell = _ref => {
     return className;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, rowIndex]);
+  const onMouseMove = mouseDownEvent => {
+    const eventBus = EventBus.getInstance();
+    const tableId = tableEntry[0].id;
+    eventBus.dispatch(INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
+      mouseDownEvent,
+      cell: element,
+      rowIndex,
+      cellIndex,
+      tableId
+    });
+  };
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     style: _objectSpread(_objectSpread({}, element.style), style),
     className: classnames('table-cell', attributes.className, highlightClass, {
@@ -100,7 +111,8 @@ const TableCell = _ref => {
     "data-id": element.id,
     "row-index": rowIndex,
     "cell-index": cellIndex,
-    onContextMenu: onContextMenu
+    onContextMenu: onContextMenu,
+    onMouseMove: onMouseMove
   }), children);
 };
 function renderTableCell(props) {

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/column-resize-handler.js

@@ -1,7 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import classnames from 'classnames';
 import { useTableRootContext } from '../hooks';
 import { TABLE_CELL_MIN_WIDTH } from '../../constants';
 import { getTableColumns, updateColumnWidth, focusClosestCellWhenJustifyCellSize } from '../../helpers';
@@ -10,21 +9,23 @@ const ColumnResizeHandler = _ref => {
   let {
     column,
     left: initLeft,
-    element,
-    index,
-    rowBottoms
+    table,
+    cellIndex,
+    rowBottom,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
   } = _ref;
   const editor = useSlateStatic();
   const resizeHandler = useRef(null);
   const [left, setLeft] = useState(initLeft);
-  const [isResizing, setIsResizing] = useState(false);
   const [mouseDownInfo, setMouseDownInfo] = useState({});
   const [style, setStyle] = useState({});
   const width = column.width;
   const tableRootScrollContainer = useTableRootContext();
-  const onMouseDown = useCallback(event => {
-    eventStopPropagation(event);
-    const mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+  useLayoutEffect(() => {
+    const mouseDownInfo = getMouseDownInfo(mouseDownEvent, tableRootScrollContainer);
     const {
       top
     } = tableRootScrollContainer.getBoundingClientRect();
@@ -34,24 +35,16 @@ const ColumnResizeHandler = _ref => {
       top
     });
     setMouseDownInfo(mouseDownInfo);
-    setIsResizing(true);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableRootScrollContainer]);
+  }, [mouseDownEvent, tableRootScrollContainer]);
   useEffect(() => {
-    if (!isResizing) {
-      if (initLeft !== left) {
-        setLeft(initLeft);
-      }
-      return;
-    }
+    if (!isDraggingResizeHandler) return;
     const onMouseMove = event => {
       eventStopPropagation(event);
       const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
       const newWidth = width + mouseMoveInfo.displacementX;
-      const columns = getTableColumns(editor, element);
+      const columns = getTableColumns(editor, table);
       if (newWidth < TABLE_CELL_MIN_WIDTH) return;
-      const nextColumn = columns[index + 1];
+      const nextColumn = columns[cellIndex + 1];
       if (nextColumn) {
         const nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
         if (nextColumnWidth < TABLE_CELL_MIN_WIDTH) return;
@@ -69,30 +62,24 @@ const ColumnResizeHandler = _ref => {
     };
     const onMouseUp = event => {
       eventStopPropagation(event);
-      setIsResizing(false);
       setStyle({});
-      const columns = getTableColumns(editor, element);
+      const columns = getTableColumns(editor, table);
       const newColumns = columns.slice(0);
-      const column = newColumns[index];
+      const column = newColumns[cellIndex];
       const newWidth = width + left - initLeft;
-      newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
+      newColumns[cellIndex] = _objectSpread(_objectSpread({}, column), {}, {
         width: newWidth
       });
-      const nextColumn = columns[index + 1];
+      const nextColumn = columns[cellIndex + 1];
       if (nextColumn) {
         const nextColumnWidth = nextColumn.width - left + initLeft;
-        newColumns[index + 1] = _objectSpread(_objectSpread({}, nextColumn), {}, {
+        newColumns[cellIndex + 1] = _objectSpread(_objectSpread({}, nextColumn), {}, {
           width: nextColumnWidth
         });
       }
-      updateColumnWidth(editor, element, newColumns);
-      focusClosestCellWhenJustifyCellSize({
-        editor,
-        columnIndex: index,
-        table: element,
-        mouseDownInfo,
-        rowBottoms
-      });
+      updateColumnWidth(editor, table, newColumns);
+      focusClosestCellWhenJustifyCellSize(editor, adjustingCell);
+      hideResizeHandlers();
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -106,18 +93,11 @@ const ColumnResizeHandler = _ref => {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
+  }, [isDraggingResizeHandler, mouseDownInfo, left, width, column, editor, table, cellIndex, initLeft, rowBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('table-cell-width-just ', {
-      'resizing position-fixed': isResizing,
-      'position-absolute': !isResizing
-    }),
+    className: "table-cell-width-just resizing position-fixed",
     contentEditable: false,
-    style: isResizing ? style : {
-      left: left - 3.5,
-      top: 0
-    },
-    onMouseDown: onMouseDown,
+    style: style,
     ref: resizeHandler
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-cell-width-just-color-tip"

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/first-column-left-resize-handler.js

@@ -1,7 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useRef, useState, useEffect, useCallback } from 'react';
+import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
-import classnames from 'classnames';
 import { useTableRootContext } from '../hooks';
 import { TABLE_CELL_MIN_WIDTH } from '../../constants';
 import { focusClosestCellWhenJustifyCellSize, getTableColumns, updateColumnWidth } from '../../helpers';
@@ -10,21 +9,23 @@ const FirstColumnResizeHandler = _ref => {
   let {
     column,
     left: initLeft,
-    element,
-    index,
-    rowBottoms
+    table,
+    cellIndex,
+    rowBottoms,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
   } = _ref;
   const editor = useSlateStatic();
   const resizeHandler = useRef(null);
   const [left, setLeft] = useState(initLeft);
-  const [isResizing, setIsResizing] = useState(false);
   const [mouseDownInfo, setMouseDownInfo] = useState({});
   const [style, setStyle] = useState({});
   const width = column.width;
   const tableRootScrollContainer = useTableRootContext();
-  const onMouseDown = useCallback(event => {
-    eventStopPropagation(event);
-    const mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+  useLayoutEffect(() => {
+    const mouseDownInfo = getMouseDownInfo(mouseDownEvent, tableRootScrollContainer);
     const {
       top
     } = tableRootScrollContainer.getBoundingClientRect();
@@ -34,17 +35,9 @@ const FirstColumnResizeHandler = _ref => {
       top
     });
     setMouseDownInfo(mouseDownInfo);
-    setIsResizing(true);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tableRootScrollContainer]);
+  }, [mouseDownEvent, tableRootScrollContainer]);
   useEffect(() => {
-    if (!isResizing) {
-      if (initLeft !== left) {
-        setLeft(initLeft);
-      }
-      return;
-    }
+    if (!isDraggingResizeHandler) return;
     const onMouseMove = event => {
       eventStopPropagation(event);
       const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
@@ -63,23 +56,17 @@ const FirstColumnResizeHandler = _ref => {
     };
     const onMouseUp = event => {
       eventStopPropagation(event);
-      setIsResizing(false);
       setStyle({});
-      const columns = getTableColumns(editor, element);
+      const columns = getTableColumns(editor, table);
       const newColumns = columns.slice(0);
-      const column = newColumns[index];
+      const column = newColumns[cellIndex];
       const newWidth = width + left - initLeft;
-      newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
+      newColumns[cellIndex] = _objectSpread(_objectSpread({}, column), {}, {
         width: newWidth
       });
-      updateColumnWidth(editor, element, newColumns);
-      focusClosestCellWhenJustifyCellSize({
-        editor,
-        columnIndex: index,
-        table: element,
-        mouseDownInfo,
-        rowBottoms
-      });
+      updateColumnWidth(editor, table, newColumns);
+      focusClosestCellWhenJustifyCellSize(editor, adjustingCell);
+      hideResizeHandlers();
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -93,18 +80,11 @@ const FirstColumnResizeHandler = _ref => {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
+  }, [isDraggingResizeHandler, mouseDownInfo, left, width, column, editor, table, cellIndex, initLeft, rowBottoms]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('table-cell-width-just ', {
-      'resizing position-fixed': isResizing,
-      'position-absolute': !isResizing
-    }),
+    className: "table-cell-width-just resizing position-fixed",
     contentEditable: false,
-    style: isResizing ? style : {
-      left: -3.5,
-      top: 0
-    },
-    onMouseDown: onMouseDown,
+    style: style,
     ref: resizeHandler
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-cell-width-just-color-tip"

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/index.js

@@ -1,57 +1,66 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import FirstColumnResizeHandler from './first-column-left-resize-handler';
 import ColumnResizeHandler from './column-resize-handler';
 import RowResizeHandler from './row-resize-handler';
 import { getNode, findPath } from '../../../../core';
 import { useResizeHandlersContext } from '../hooks';
-import { getRowBottomPositions, getTableColumns } from '../../helpers';
+import { getTableColumns } from '../../helpers';
+import { RESIZE_HANDLER_COLUMN, RESIZE_HANDLER_ROW, RESIZE_HANDLER_FIRST_COLUMN } from '../../constants';
 const ResizeHandlers = _ref => {
   let {
-    element
+    element,
+    resizeCellMaskInfo,
+    hideResizeHandlers,
+    isDraggingResizeHandler
   } = _ref;
+  const {
+    rowIndex,
+    cellIndex,
+    top,
+    height,
+    left,
+    mouseDownEvent,
+    displayType,
+    cell
+  } = resizeCellMaskInfo;
   const editor = useSlateStatic();
   const tablePath = findPath(editor, element);
   if (!tablePath) return null;
   const table = getNode(editor, tablePath);
   if (!table) return null;
-  const [rowBottoms, setRowBottoms] = useState([]);
   const columns = useResizeHandlersContext() || getTableColumns(editor, element);
-  const rows = element.children;
-  const calculateRowBottom = useCallback(() => {
-    const rowBottomPositions = getRowBottomPositions(editor, rows);
-    setRowBottoms(rowBottomPositions);
-  }, [editor, rows]);
-  useEffect(() => {
-    calculateRowBottom();
-  }, [calculateRowBottom, element]);
-  let columnLeft = 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, rows.map((row, index) => {
-    return /*#__PURE__*/React.createElement(RowResizeHandler, {
-      key: index,
-      row: row,
-      rowBottoms: rowBottoms[index],
-      index: index,
-      element: element
-    });
-  }), /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
+  const rowBottom = top + height;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, displayType === RESIZE_HANDLER_ROW && /*#__PURE__*/React.createElement(RowResizeHandler, {
+    initRowBottom: rowBottom,
+    rowIndex: rowIndex,
+    table: element,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), displayType === RESIZE_HANDLER_FIRST_COLUMN && /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
     key: "column-0-left",
     column: columns[0],
     left: 0,
-    index: 0,
-    element: element,
-    rowBottoms: rowBottoms
-  }), columns.map((column, columnIndex) => {
-    columnLeft = columnLeft + column.width;
-    return /*#__PURE__*/React.createElement(ColumnResizeHandler, {
-      rowBottoms: rowBottoms,
-      key: columnIndex,
-      column: column,
-      left: columnLeft,
-      index: columnIndex,
-      element: element
-    });
+    cellIndex: 0,
+    table: element,
+    rowBottoms: rowBottom,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), displayType === RESIZE_HANDLER_COLUMN && /*#__PURE__*/React.createElement(ColumnResizeHandler, {
+    rowBottom: rowBottom,
+    column: element.columns[cellIndex],
+    left: left,
+    cellIndex: cellIndex,
+    table: element,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
   }));
 };
 export default ResizeHandlers;

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/row-resize-handler.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
-import classnames from 'classnames';
+import React, { useEffect, useState, useRef, useLayoutEffect } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import { ReactEditor } from '@seafile/slate-react';
 import { TABLE_ROW_MIN_HEIGHT } from '../../constants';
@@ -8,32 +7,33 @@ import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResiz
 import { useScrollContext } from '../../../../../hooks/use-scroll-context';
 const RowResizeHandler = _ref => {
   let {
-    row,
-    index,
-    rowBottoms: initRowBottom = 0,
-    element
+    rowIndex,
+    initRowBottom = 0,
+    table,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
   } = _ref;
   const editor = useSlateStatic();
   const [rowBottom, setRowBottom] = useState(initRowBottom);
-  const [isResizing, setIsResizing] = useState(false);
   const [mouseDownInfo, setMouseDownInfo] = useState({});
   const [style, setStyle] = useState({});
-  const rowHeight = getRowHeight(row, index);
+  const row = table.children[rowIndex];
+  const rowHeight = getRowHeight(row, rowIndex);
   const tableRow = useRef(rowHeight);
   const [height, setHeight] = useState(rowHeight);
   const scrollContent = useScrollContext();
-  const onMouseDown = useCallback(event => {
-    eventStopPropagation(event);
-    const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
+  useLayoutEffect(() => {
+    const mouseDownInfo = getMouseDownInfo(mouseDownEvent, scrollContent.current);
     setMouseDownInfo(mouseDownInfo);
+    const lastRowOffset = rowIndex === table.children.length - 1 ? -2 : 0;
     setStyle({
-      top: rowBottom - 2.5
+      top: rowBottom + lastRowOffset
     });
-    setIsResizing(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowBottom]);
+  }, [mouseDownEvent, rowBottom, rowIndex, scrollContent, table.children.length]);
   useEffect(() => {
-    if (!isResizing) return;
+    if (!isDraggingResizeHandler) return;
     const onMouseMove = event => {
       eventStopPropagation(event);
       const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, scrollContent.current);
@@ -41,20 +41,15 @@ const RowResizeHandler = _ref => {
       const validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
       setHeight(validHeight);
       setStyle({
-        top: rowBottom - tableRow.current + validHeight - 2.5
+        top: rowBottom - tableRow.current + validHeight
       });
     };
     const onMouseUp = event => {
       eventStopPropagation(event);
-      setIsResizing(false);
       tableRow.current = height;
       updateTableRowHeight(editor, row, height);
-      focusClosestCellWhenJustifyCellSize({
-        editor,
-        rowIndex: index,
-        table: element,
-        mouseDownInfo
-      });
+      focusClosestCellWhenJustifyCellSize(editor, adjustingCell);
+      hideResizeHandlers();
     };
     registerResizeEvents({
       'mousemove': onMouseMove,
@@ -68,7 +63,7 @@ const RowResizeHandler = _ref => {
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, rowBottom, element, height]);
+  }, [isDraggingResizeHandler, mouseDownInfo, rowBottom, table, height]);
   useEffect(() => {
     const cell = row.children.filter(cell => !cell.is_combined && (!cell.rowspan || cell.rowspan == 1))[0];
     if (!cell) return;
@@ -79,14 +74,9 @@ const RowResizeHandler = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [row, initRowBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('table-row-height-just position-absolute', {
-      'resizing': isResizing
-    }),
+    className: "table-row-height-just position-absolute resizing",
     contentEditable: false,
-    style: isResizing ? style : {
-      top: rowBottom - 2.5
-    },
-    onMouseDown: onMouseDown
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-row-height-just-color-tip"
   }));

package/dist/basic-sdk/extension/plugins/table/render/resize-mask/index.js

@@ -0,0 +1,133 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useState } from 'react';
+import EventBus from '../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../constants';
+import { getResizeMaskCellInfo } from '../../helpers';
+import { RESIZE_MASK_TOP, RESIZE_MASK_RIGHT, RESIZE_MASK_BOTTOM, RESIZE_MASK_LEFT, RESIZE_HANDLER_ROW, RESIZE_HANDLER_COLUMN, RESIZE_HANDLER_FIRST_COLUMN } from '../../constants';
+import '../index.css';
+const ResizeMask = _ref => {
+  let {
+    editor,
+    table,
+    handleShowResizeHandler,
+    hideResizeHandlers,
+    handlerStartDragging,
+    isDraggingResizeHandler
+  } = _ref;
+  const [cellInfo, setCellInfo] = useState({});
+  const [maskStyle, setMaskStyle] = useState({});
+  const handleCellMouseMove = useCallback(cellInfo => {
+    const {
+      mouseDownEvent,
+      rowIndex,
+      cellIndex,
+      tableId
+    } = cellInfo;
+    if (table.id !== tableId) return;
+    const resizeMaskCellInfo = getResizeMaskCellInfo(editor, table, rowIndex, cellIndex);
+    const {
+      width,
+      height,
+      top,
+      left
+    } = resizeMaskCellInfo;
+    setMaskStyle({
+      width,
+      height,
+      top,
+      left
+    });
+    setCellInfo(_objectSpread(_objectSpread({}, resizeMaskCellInfo), {}, {
+      mouseDownEvent
+    }));
+  }, [editor, table]);
+  useEffect(() => {
+    const eventBus = EventBus.getInstance();
+    const unSubscribe = eventBus.subscribe(INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, handleCellMouseMove);
+    return () => {
+      unSubscribe();
+    };
+  }, [handleCellMouseMove]);
+  const getHandlerDisplayInfo = useCallback(mode => {
+    let resizeHandlerInfo = {};
+    if (mode === RESIZE_MASK_BOTTOM) resizeHandlerInfo = _objectSpread(_objectSpread(_objectSpread({}, cellInfo), maskStyle), {}, {
+      displayType: RESIZE_HANDLER_ROW
+    });
+    if (mode === RESIZE_MASK_RIGHT) resizeHandlerInfo = _objectSpread(_objectSpread(_objectSpread({}, cellInfo), maskStyle), {}, {
+      displayType: RESIZE_HANDLER_COLUMN
+    });
+    if (mode === RESIZE_MASK_LEFT) {
+      const {
+        cellIndex,
+        rowIndex,
+        focusCellIndex,
+        mouseDownEvent
+      } = cellInfo;
+      const calculateCellIndex = cellIndex === 0 ? 0 : cellIndex - 1;
+      const resizeMaskCellInfo = getResizeMaskCellInfo(editor, table, rowIndex, calculateCellIndex);
+      const displayType = focusCellIndex === 0 ? RESIZE_HANDLER_FIRST_COLUMN : RESIZE_HANDLER_COLUMN;
+      resizeHandlerInfo = _objectSpread(_objectSpread({
+        displayType
+      }, resizeMaskCellInfo), {}, {
+        mouseDownEvent
+      });
+    }
+    if (mode === RESIZE_MASK_TOP) {
+      const {
+        rowIndex,
+        cellIndex,
+        mouseDownEvent
+      } = cellInfo;
+      const resizeMaskCellInfo = getResizeMaskCellInfo(editor, table, rowIndex - 1, cellIndex);
+      resizeHandlerInfo = _objectSpread(_objectSpread({
+        displayType: RESIZE_HANDLER_ROW
+      }, resizeMaskCellInfo), {}, {
+        mouseDownEvent: mouseDownEvent
+      });
+    }
+    return resizeHandlerInfo;
+  }, [cellInfo, editor, maskStyle, table]);
+  const handleMouseOver = useCallback((event, mode) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (isDraggingResizeHandler) return;
+    const handlerInfo = getHandlerDisplayInfo(mode);
+    handleShowResizeHandler(handlerInfo);
+  }, [getHandlerDisplayInfo, handleShowResizeHandler, isDraggingResizeHandler]);
+  const handleMouseDown = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    handlerStartDragging();
+  }, [handlerStartDragging]);
+  const handleMouseOut = useCallback(event => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (isDraggingResizeHandler) return;
+    hideResizeHandlers();
+  }, [hideResizeHandlers, isDraggingResizeHandler]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-resize-mask",
+    style: maskStyle
+  }, cellInfo.rowIndex !== 0 && /*#__PURE__*/React.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: handleMouseDown,
+    onMouseOver: e => handleMouseOver(e, RESIZE_MASK_TOP),
+    className: "sdoc-table-resize-top"
+  }), /*#__PURE__*/React.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: handleMouseDown,
+    onMouseOver: e => handleMouseOver(e, RESIZE_MASK_RIGHT),
+    className: "sdoc-table-resize-right"
+  }), /*#__PURE__*/React.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: handleMouseDown,
+    onMouseOver: e => handleMouseOver(e, RESIZE_MASK_BOTTOM),
+    className: "sdoc-table-resize-bottom"
+  }), /*#__PURE__*/React.createElement("div", {
+    onMouseOut: handleMouseOut,
+    onMouseDown: handleMouseDown,
+    onMouseOver: e => handleMouseOver(e, RESIZE_MASK_LEFT),
+    className: "sdoc-table-resize-left"
+  }));
+};
+export default ResizeMask;