@seafile/sdoc-editor 0.4.21 → 0.4.23

package/dist/basic-sdk/constants/index.js

@@ -16,7 +16,8 @@ export const INTERNAL_EVENT = {
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
   CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
   OPEN_SEARCH_REPLACE_MODAL: 'open_search_replace_modal',
-  UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight'
+  UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight',
+  TABLE_CELL_MOUSE_ENTER: 'table_cell_mouse_enter'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/extension/plugins/callout/helper.js

@@ -1,6 +1,6 @@
 import { Editor, Node, Path, Transforms } from '@seafile/slate';
 import { CALL_OUT } from '../../constants/element-type';
-import { findPath, focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
+import { focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
 import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
 export const isMenuActive = editor => {
   const {
@@ -91,15 +91,6 @@ export const getCalloutEntry = function (editor) {
   });
   return aboveNodeEntry;
 };
-
-// Use in render-elem, to judge whether to display placeholder
-export const isFocusOnElement = (editor, element) => {
-  var _editor$selection, _editor$selection$anc;
-  if (!editor.selection || !element) return false;
-  const elementPath = findPath(editor, element);
-  const isSelectOnElement = Path.isAncestor(elementPath, editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : (_editor$selection$anc = _editor$selection.anchor) === null || _editor$selection$anc === void 0 ? void 0 : _editor$selection$anc.path);
-  return isSelectOnElement;
-};
 export const isCalloutContentEmpty = calloutEntry => {
   const [calloutNode] = calloutEntry;
   const contentString = Node.string(calloutNode);

package/dist/basic-sdk/extension/plugins/callout/render-elem/color-selector.js

@@ -1,39 +1,34 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { Transforms } from '@seafile/slate';
 import { CALLOUT_COLOR_MAP } from '../constant';
 import { findPath } from '../../../core';
 import { changeFillBackgroundColor } from '../helper';
 import { ElementPopover } from '../../../commons';
 import './index.css';
-const ColorSelector = (_ref, ref) => {
+const ColorSelector = _ref => {
   let {
     editor,
     element,
     popoverPosition
   } = _ref;
-  const selectorRef = useRef(null);
-  const handleClickColor = useCallback((editor, element, background_color) => {
+  const onColorClick = useCallback(event => {
+    const {
+      backgroundColor
+    } = event.target.dataset;
     const currentPath = findPath(editor, element);
     Transforms.select(editor, currentPath);
-    changeFillBackgroundColor(editor, background_color);
-  }, []);
-  useImperativeHandle(ref, () => ({
-    colorSelectorContainer: selectorRef.current
-  }));
-  const isShowCheckedIcon = useCallback((element, currentBackgroundColor) => {
+    changeFillBackgroundColor(editor, backgroundColor);
+  }, [editor, element]);
+  const isShowCheckedIcon = useCallback(currentBackgroundColor => {
     const {
       background_color
-    } = element.style;
+    } = element.style || {};
     return background_color && background_color === currentBackgroundColor;
-  }, []);
+  }, [element.style]);
   return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-callout-color-selector-container",
-    ref: selectorRef,
     contentEditable: false,
-    style: {
-      top: popoverPosition.top,
-      left: popoverPosition.left
-    }
+    style: popoverPosition
   }, /*#__PURE__*/React.createElement("ul", {
     className: "sdoc-color-selector-list"
   }, Object.values(CALLOUT_COLOR_MAP).map((_ref2, index) => {
@@ -44,14 +39,16 @@ const ColorSelector = (_ref, ref) => {
     return /*#__PURE__*/React.createElement("li", {
       key: "sdoc-callout-color-selector-".concat(index),
       className: "sdoc-callout-color-item",
-      onClick: () => handleClickColor(editor, element, Object.keys(CALLOUT_COLOR_MAP)[index]),
+      "data-border-color": border_color,
+      "data-background-color": background_color,
       style: {
         borderColor: border_color,
         backgroundColor: background_color
-      }
-    }, isShowCheckedIcon(element, background_color) && /*#__PURE__*/React.createElement("i", {
+      },
+      onClick: onColorClick
+    }, isShowCheckedIcon(background_color) && /*#__PURE__*/React.createElement("i", {
       className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
     }));
   }))));
 };
-export default forwardRef(ColorSelector);
+export default ColorSelector;

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.js

@@ -1,12 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useReadOnly } from '@seafile/slate-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Node } from '@seafile/slate';
+import { useReadOnly, useSelected } from '@seafile/slate-react';
 import { useTranslation } from 'react-i18next';
 import ColorSelector from './color-selector';
 import { CALLOUT_COLOR_MAP } from '../constant';
-import { isFocusOnElement } from '../helper';
-import { Editor } from '@seafile/slate';
-import { findPath } from '../../../core';
 import { INTERNAL_EVENT } from '../../../../constants';
 import EventBus from '../../../../utils/event-bus';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
@@ -17,24 +15,40 @@ const renderCallout = (_ref, editor) => {
     children,
     element
   } = _ref;
-  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState({
-    top: '',
-    left: ''
-  });
   const readOnly = useReadOnly();
   const scrollRef = useScrollContext();
-  const calloutRef = useRef();
-  const colorSelectorRef = useRef({
-    colorSelectorContainer: null
-  });
+  const isSelected = useSelected();
   const {
     t
   } = useTranslation();
-  const {
-    background_color
-  } = element.style;
-  const isFocusOnCallout = isFocusOnElement(editor, element);
+  const calloutRef = useRef();
+  const [isShowColorSelector, setIsShowColorSelector] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState({
+    top: '',
+    left: ''
+  });
+  const containerStyle = useMemo(() => {
+    const {
+      background_color = 'transparent'
+    } = element.style;
+    let borderColor = 'transparent';
+    if (isSelected) {
+      var _CALLOUT_COLOR_MAP$ba;
+      borderColor = (_CALLOUT_COLOR_MAP$ba = CALLOUT_COLOR_MAP[background_color]) === null || _CALLOUT_COLOR_MAP$ba === void 0 ? void 0 : _CALLOUT_COLOR_MAP$ba.border_color;
+    }
+    return {
+      backgroundColor: background_color,
+      borderColor
+    };
+  }, [element.style, isSelected]);
+  const isShowPlaceholder = useCallback(() => {
+    if (isSelected) return false;
+    // If element contains more than one element or element is not paragraph, show placeholder
+    const isContainUnitElement = element.children.length !== 1 || element.children.some(childElement => childElement.type !== 'paragraph');
+    if (isContainUnitElement) return false;
+    const elementContent = Node.string(element);
+    return !elementContent.length;
+  }, [element, isSelected]);
   const handleCloseColorSelector = useCallback(() => {
     setIsShowColorSelector(false);
   }, []);
@@ -87,15 +101,6 @@ const renderCallout = (_ref, editor) => {
   const handleClick = useCallback(e => {
     handleDisplayColorSelector();
   }, [handleDisplayColorSelector]);
-  const isShowPlaceholder = useCallback(() => {
-    if (isFocusOnCallout) return false;
-    // If element contains more than one element or element is not paragraph, show placeholder
-    const isContainUnitElement = element.children.length !== 1 || element.children.some(childElement => childElement.type !== 'paragraph');
-    if (isContainUnitElement) return false;
-    const elementPath = findPath(editor, element);
-    const elementContent = Editor.string(editor, elementPath);
-    return !elementContent.length;
-  }, [editor, element, isFocusOnCallout]);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     "data-id": element.id,
     className: "sdoc-callout-white-wrapper",
@@ -104,15 +109,11 @@ const renderCallout = (_ref, editor) => {
     onClick: handleClick,
     ref: calloutRef,
     className: "".concat(attributes.className, " sdoc-callout-container"),
-    style: {
-      backgroundColor: background_color ? CALLOUT_COLOR_MAP[background_color].background_color : 'transparent',
-      borderColor: isFocusOnCallout ? CALLOUT_COLOR_MAP[background_color].border_color : 'transparent'
-    }
+    style: containerStyle
   }, children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
     contentEditable: false,
     className: "sdoc-callout-placeholder"
   }, t('Please_enter...')), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
-    ref: colorSelectorRef,
     editor: editor,
     element: element,
     popoverPosition: popoverPosition

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -112,7 +112,7 @@ const withImage = editor => {
     } = editor;
     const focusPoint = Editor.before(editor, selection);
     const point = Editor.before(editor, selection, {
-      distance: 2
+      distance: 1
     });
     if (!point) return;
     const [node, path] = Editor.node(editor, [point.path[0], point.path[1]]);

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.js

@@ -12,7 +12,8 @@ const SearchReplaceMenu = _ref => {
   let {
     isRichEditor,
     className,
-    editor
+    editor,
+    readonly
   } = _ref;
   const [isOpenPopover, setIsOpenPopover] = useState(false);
   useEffect(() => {
@@ -38,7 +39,7 @@ const SearchReplaceMenu = _ref => {
       clientHeight
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpenPopover, editor.children]);
+  }, [isOpenPopover]);
   const renderCanvasses = useMemo(() => {
     if (!isOpenPopover) return false;
     const generateCount = Math.ceil(articleContainerSize.offsetHeight / 5000);
@@ -66,6 +67,7 @@ const SearchReplaceMenu = _ref => {
     onMouseDown: onMouseDown
   }, menuConfig)), isOpenPopover && /*#__PURE__*/React.createElement(SearchReplacePopover, {
     editor: editor,
+    readonly: readonly,
     isOpen: isOpenPopover,
     closePopover: onMouseDown
   }), isOpenPopover && createPortal( /*#__PURE__*/React.createElement("div", {

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.css

@@ -52,6 +52,13 @@
   justify-content: space-between;
 }
 
+.sdoc-search-replace-popover-body .sdoc-search-replace-popover-btn-group .btn {
+  padding: 0;
+  width: 23%;
+  min-height: 35px;
+  border-radius: 5px;
+}
+
 .sdoc-replace-all-confirm-modal {
   position: absolute;
   top: 0;

package/dist/basic-sdk/extension/plugins/search-replace/popover/index.js

@@ -8,11 +8,13 @@ import { handleReplaceKeyword, getHighlightInfos, drawHighlights } from '../help
 import ReplaceAllConfirmModal from './replace-all-confirm-modal';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
+import context from '../../../../../context';
 import './index.css';
 const SearchReplacePopover = _ref => {
   let {
     editor,
-    closePopover
+    closePopover,
+    readonly
   } = _ref;
   const [searchContent, setSearchContent] = useState('');
   const [replacementContent, setReplacementContent] = useState('');
@@ -44,6 +46,17 @@ const SearchReplacePopover = _ref => {
       y: 95
     });
   }, []);
+  const isOwnReplacePermission = useMemo(() => {
+    if (readonly) return false;
+    const isFreezed = context.getSetting('isFreezed');
+    if (isFreezed) return false;
+    const isPublished = context.getSetting('isPublished');
+    const isSdocRevision = context.getSetting('isSdocRevision');
+    if (isSdocRevision && isPublished) return false;
+    const docPerm = context.getSetting('docPerm');
+    if (docPerm === 'rw') return true;
+    return false;
+  }, [readonly]);
   const handleDrawHighlight = useCallback((editor, keyword) => {
     const newHighlightInfos = getHighlightInfos(editor, keyword);
     setHighlightInfos(newHighlightInfos);
@@ -193,11 +206,11 @@ const SearchReplacePopover = _ref => {
     onClick: handleNext,
     className: "btn btn-secondary"
   }, t('Next')), /*#__PURE__*/React.createElement("button", {
-    disabled: !highlightInfos.length,
+    disabled: !highlightInfos.length || !isOwnReplacePermission,
     onClick: handleReplace,
     className: "btn btn-primary"
   }, t('Replace')), /*#__PURE__*/React.createElement("button", {
-    disabled: !highlightInfos.length,
+    disabled: !highlightInfos.length || !isOwnReplacePermission,
     onClick: handleOpenReplaceAllModal,
     className: "btn btn-primary"
   }, t('Replace_all'))))), /*#__PURE__*/React.createElement(ReplaceAllConfirmModal, {

package/dist/basic-sdk/extension/plugins/table/constants/index.js

@@ -38,4 +38,11 @@ export const TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = {
   'sdoc-table-header-0099f4': 'sdoc-table-body-0099f4'
 };
 export const INHERIT_CELL_STYLE_WHEN_SELECT_SINGLE = ['background_color'];
-export const INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = ['background_color', 'text_align'];
+export const INHERIT_CELL_STYLE_WHEN_SELECT_MULTIPLE = ['background_color', 'text_align'];
+export const RESIZE_MASK_TOP = 'top';
+export const RESIZE_MASK_RIGHT = 'right';
+export const RESIZE_MASK_BOTTOM = 'bottom';
+export const RESIZE_MASK_LEFT = 'left';
+export const RESIZE_HANDLER_ROW = 'row';
+export const RESIZE_HANDLER_COLUMN = 'column';
+export const RESIZE_HANDLER_FIRST_COLUMN = 'first_column';

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -1249,6 +1249,25 @@ export const getRowHeight = (element, rowIndex) => {
   const rowHeight = style[TABLE_ROW_STYLE.MIN_HEIGHT] || TABLE_ROW_MIN_HEIGHT;
   return rowIndex === 0 ? rowHeight + 1 : rowHeight;
 };
+export const getRowDomHeight = (editor, row) => {
+  let height = 0;
+  for (const cell of row.children) {
+    const {
+      is_combined,
+      rowspan = 1
+    } = cell;
+    if (is_combined || rowspan > 1) continue;
+    const cellDom = ReactEditor.toDOMNode(editor, cell);
+    if (!cellDom) break;
+    height = cellDom.getBoundingClientRect().height;
+    break;
+  }
+  // if the row is empty, get the height from style
+  if (!height) {
+    height = row.style[TABLE_ROW_STYLE.MIN_HEIGHT] || TABLE_ROW_MIN_HEIGHT;
+  }
+  return height;
+};
 const normalizeTableCell = (editor, cell) => {
   if (!cell) return generateTableCell(editor);
   let newCell = _objectSpread({
@@ -1398,96 +1417,78 @@ export const getCellHighlightClassName = (primaryColorClassName, rowIndex) => {
   }
   return className;
 };
-export const getRowBottomPositions = (editor, rows) => {
-  const recorder = [];
-  let bottomPosition = 0;
-  rows.forEach(row => {
-    let cellHeight;
-    row.children.forEach(cell => {
-      const currentCellHeight = ReactEditor.toDOMNode(editor, cell).getBoundingClientRect().height;
-      if (!cellHeight || currentCellHeight < cellHeight) cellHeight = currentCellHeight;
-    });
-    bottomPosition += cellHeight;
-    recorder.push(bottomPosition);
-  });
-  return recorder;
+export const focusClosestCellWhenJustifyCellSize = (editor, adjustingCell) => {
+  const cellPath = ReactEditor.findPath(editor, adjustingCell);
+  focusEditor(editor, Editor.end(editor, cellPath));
 };
-export const focusClosestCellWhenJustifyCellSize = _ref => {
-  let {
-    editor,
-    rowIndex,
-    columnIndex,
-    table,
-    mouseDownInfo,
-    rowBottoms
-  } = _ref;
-  if (!editor) return;
-  const {
-    columns
-  } = table;
-  // Get cursor position in table, calculate columnIndex and rowIndex
-  const tableDom = ReactEditor.toDOMNode(editor, table);
-  const {
-    left,
-    top
-  } = tableDom.getBoundingClientRect();
-  const {
-    positionY,
-    positionX
-  } = mouseDownInfo;
-  const tableScrollWrapper = document.querySelector('.sdoc-table-scroll-wrapper');
-  const scrollX = tableScrollWrapper.scrollLeft;
-  const tableInnerX = positionX - left + scrollX;
-  const tableInnerY = positionY - top;
-  // Calculate columnIndex
-  if (columnIndex === undefined) {
-    let passedColumnsWidth = 0;
-    columns.some((_ref2, index) => {
-      let {
-        width
-      } = _ref2;
-      passedColumnsWidth += width;
-      if (passedColumnsWidth > tableInnerX) {
-        columnIndex = index;
-        return true;
-      }
-      return false;
-    });
+const searchCombinedMainCell = (table, startRowIndex, startColIndex) => {
+  for (let rowIndex = startRowIndex; rowIndex >= 0; rowIndex--) {
+    const row = table.children[rowIndex];
+    for (let cellIndex = startColIndex; cellIndex >= 0; cellIndex--) {
+      const currentCell = row.children[cellIndex];
+      const {
+        colspan = 0,
+        rowspan = 0
+      } = currentCell;
+      if (colspan <= 1 && rowspan <= 1) continue;
+      const isInColRange = cellIndex + colspan >= startColIndex;
+      const isInRowRange = rowIndex + rowspan >= startRowIndex;
+      if (isInColRange && isInRowRange) {
+        return {
+          currentCell,
+          rowIndex,
+          cellIndex
+        };
+      } else break;
+    }
   }
-  // Calculate rowIndex
-  if (rowIndex === undefined) {
-    rowBottoms.some((bottom, index) => {
-      if (bottom >= tableInnerY) {
-        rowIndex = index;
-        return true;
-      }
-      return false;
-    });
+};
+export const getResizeMaskCellInfo = (editor, table, rowIndex, cellIndex) => {
+  // The cell shown cursor as resize (mouse is on this cell)
+  const focusCellIndex = cellIndex;
+  let focusCell = table.children[rowIndex].children[cellIndex];
+  // The cell dominating resize handlers (the true cell to be resized)
+  let cell = table.children[rowIndex].children[cellIndex];
+  // Resolve combined cell
+  if (cell.is_combined) {
+    const targetCellInfo = searchCombinedMainCell(table, rowIndex, cellIndex);
+    cellIndex = targetCellInfo.cellIndex;
+    rowIndex = targetCellInfo.rowIndex;
+    cell = targetCellInfo.currentCell;
   }
-  // Correct focus position
-  const is_combined = table.children[rowIndex].children[columnIndex].is_combined;
-  if (is_combined) {
-    for (let i = columnIndex - 1; i >= 0; i--) {
-      const {
-        is_combined: ci_is_combined,
-        colspan: ci_colspan
-      } = table.children[rowIndex].children[i];
-      if (!ci_is_combined && ci_colspan && i + ci_colspan - 1 >= columnIndex) {
-        columnIndex = i;
-        break;
-      }
+  const columns = table.columns;
+  const focussedCell = ReactEditor.toDOMNode(editor, cell);
+  const {
+    colspan,
+    rowspan
+  } = focusCell;
+  let width = columns[cellIndex].width;
+  let height = focussedCell.getBoundingClientRect().height;
+  // Calculate cell width and height
+  if (colspan > 1) {
+    let index = cellIndex + 1;
+    while (index < cellIndex + colspan) {
+      width += columns[index].width;
+      index++;
     }
-    for (let j = rowIndex - 1; j >= 0; j--) {
-      const {
-        is_combined: ri_is_combined,
-        rowspan: ri_rowspan
-      } = table.children[j].children[columnIndex];
-      if (!ri_is_combined && ri_rowspan && j + ri_rowspan - 1 >= rowIndex) {
-        rowIndex = j;
-        break;
-      }
+  }
+  if (rowspan > 1) {
+    let index = rowIndex + 1;
+    while (index < rowIndex + rowspan) {
+      const currentCell = table.children[index].children[cellIndex];
+      const currentHeight = ReactEditor.toDOMNode(editor, currentCell).getBoundingClientRect().height;
+      height += currentHeight;
+      index++;
     }
   }
-  const focusPath = ReactEditor.findPath(editor, table.children[rowIndex].children[columnIndex]);
-  focusEditor(editor, Editor.end(editor, focusPath));
+  return {
+    width,
+    height,
+    top: focussedCell.offsetTop,
+    left: focussedCell.offsetLeft,
+    rowIndex,
+    cellIndex,
+    cell,
+    focusCellIndex
+  };
 };

package/dist/basic-sdk/extension/plugins/table/render/index.css

@@ -3,7 +3,7 @@
   margin: 16px 0;
 }
 
-.sdoc-table-wrapper + .sdoc-table-wrapper {
+.sdoc-table-wrapper+.sdoc-table-wrapper {
   margin-top: 32px;
 }
 
@@ -68,6 +68,7 @@
   bottom: -2.5px;
   left: 0;
   z-index: 1;
+  pointer-events: none;
 }
 
 .sdoc-table-wrapper .table-row-height-just:hover {
@@ -88,6 +89,7 @@
   width: 5px;
   top: 0;
   z-index: 1;
+  pointer-events: none;
 }
 
 .sdoc-table-wrapper .table-cell-width-just:hover {
@@ -110,3 +112,47 @@
 .sdoc-table-wrapper .sdoc-table-selected-range .table-cell *::selection {
   background-color: unset;
 }
+
+.sdoc-table-resize-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-top {
+  position: absolute;
+  top: 1px;
+  width: 100%;
+  height: 1px;
+  cursor: row-resize;
+}
+
+.sdoc-table-resize-mask>div {
+  position: absolute;
+  pointer-events: auto;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-bottom {
+  bottom: 1px;
+  width: 100%;
+  height: 1px;
+  cursor: row-resize;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-right {
+  right: -1px;
+  width: 1px;
+  height: 100%;
+  cursor: col-resize;
+}
+
+.sdoc-table-resize-mask .sdoc-table-resize-left {
+  left: -1px;
+  width: 1px;
+  height: 100%;
+  cursor: col-resize;
+}

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

@@ -15,6 +15,7 @@ import { registerResizeEvents, unregisterResizeEvents } from '../../../../utils/
 import TableRoot from './table-root';
 import TableHeader from './table-header';
 import { findPath } from '../../../core';
+import ResizeMask from './resize-mask';
 import './index.css';
 import './alternate-color.css';
 const Table = _ref => {
@@ -36,6 +37,9 @@ const Table = _ref => {
   const oldColumns = getTableColumns(editor, element);
   const [columns, setColumns] = useState(oldColumns);
   const path = findPath(editor, element);
+  const [resizeCellMaskInfo, setResizeCellMaskInfo] = useState({});
+  const [isShowResizeHandlers, setIsShowResizeHandlers] = useState(false);
+  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = useState(false);
   const onMouseDown = useCallback(event => {
     if (event.button !== 0) return; // right click not deal
     setIsSettingSelectRange(true);
@@ -146,7 +150,6 @@ const Table = _ref => {
         });
       };
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, isSettingSelectRange, selectedRange, element]);
   const setRange = useCallback((table, range) => {
@@ -168,6 +171,17 @@ const Table = _ref => {
     'sdoc-table-selected': isSelected,
     'sdoc-table-selected-range': !ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)
   });
+  const handleShowResizeHandler = useCallback(cellInfo => {
+    setResizeCellMaskInfo(cellInfo);
+    setIsShowResizeHandlers(true);
+  }, []);
+  const hideResizeHandlers = useCallback(() => {
+    setIsShowResizeHandlers(false);
+    setIsDraggingResizeHandler(false);
+  }, []);
+  const handlerStartDragging = useCallback(() => {
+    setIsDraggingResizeHandler(true);
+  }, []);
   let style = element.style ? _objectSpread({}, element.style) : {};
   const columnWidthList = columns.map(item => "".concat(item.width, "px"));
   style.gridTemplateColumns = columnWidthList.join(' ');
@@ -191,8 +205,18 @@ const Table = _ref => {
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
-  }, children, !isSettingSelectRange && /*#__PURE__*/React.createElement(ResizeHandlers, {
-    element: element
+  }, children, !isSettingSelectRange && /*#__PURE__*/React.createElement(ResizeMask, {
+    editor: editor,
+    table: element,
+    handleShowResizeHandler: handleShowResizeHandler,
+    hideResizeHandlers: hideResizeHandlers,
+    handlerStartDragging: handlerStartDragging,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), !isSettingSelectRange && isShowResizeHandlers && /*#__PURE__*/React.createElement(ResizeHandlers, {
+    hideResizeHandlers: hideResizeHandlers,
+    element: element,
+    resizeCellMaskInfo: resizeCellMaskInfo,
+    isDraggingResizeHandler: isDraggingResizeHandler
   }))))));
 };
 function renderTable(props) {