@seafile/sdoc-editor 0.1.56 → 0.1.57

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

@@ -0,0 +1,137 @@
+.sdoc-table-wrapper {
+  width: 100%;
+  overflow: hidden;
+}
+
+.sdoc-table-wrapper .sdoc-table-scroll-wrapper {
+  max-width: 100%;
+  width: fit-content;
+  overflow-x: auto; 
+}
+
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-right::before,
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-center::before {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 100%;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, .1));
+}
+
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-center::after,
+.sdoc-table-wrapper.scroll .sdoc-table-scroll-wrapper.scroll-at-left::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  background: linear-gradient(to right, transparent, rgba(0, 0, 0, .1));
+}
+
+.sdoc-table-wrapper .sdoc-table-container {
+  width: fit-content;
+  display: table;
+  overflow: hidden;
+}
+
+.sdoc-table-wrapper .table-row {
+  display: table-row ;
+  height: auto;
+}
+
+.sdoc-table-wrapper .table-cell {
+  display: table-cell;
+  padding: 10px 10px;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  word-break: break-all;
+  line-height: 1.5;
+}
+
+.sdoc-table-wrapper .table-row:first-child .table-cell {
+  border-top: 1px solid #ddd;
+}
+
+.sdoc-table-wrapper .table-row .table-cell:first-child {
+  border-left: 1px solid #ddd;
+}
+
+.sdoc-table-wrapper .cell-selected {
+  caret-color: transparent;
+  background-color: #fff4e6;
+  position: relative;
+}
+
+.sdoc-table-wrapper .cell-light-height-top-border::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-top: 1px double #ffa94d !important;
+}
+
+.sdoc-table-wrapper .cell-light-height-bottom-border {
+  border-bottom: 1px double #ffa94d !important;
+}
+
+.sdoc-table-wrapper .cell-light-height-left-border::after {
+  content: '';
+  position: absolute;
+  top: 0px;
+  left: -1px;
+  width: 2px;
+  height: 100%;
+  border-left: 1px double #ffa94d !important;
+}
+
+.sdoc-table-wrapper .cell-light-height-right-border {
+  border-right: 1px double #ffa94d !important;
+}
+
+.sdoc-table-wrapper .table-row-height-just {
+  width: 100%;
+  height: 5px;
+  bottom: -2.5px;
+  left: 0;
+  z-index: 1;
+}
+
+.sdoc-table-wrapper .table-row-height-just:hover {
+  cursor: row-resize;
+  z-index: 2;
+}
+
+.sdoc-table-wrapper .table-row-height-just.resizing .table-row-height-just-color-tip {
+  margin-top: 1.5;
+  height: 2px;
+  width: 100%;
+  background-color: #2d7ff9;
+  border-radius: 1px;
+}
+
+.sdoc-table-wrapper .table-cell-width-just {
+  height: 100%;
+  width: 5px;
+  top: 0;
+  z-index: 1;
+}
+
+.sdoc-table-wrapper .table-cell-width-just:hover {
+  cursor: col-resize;
+  z-index: 2;
+}
+
+.sdoc-table-wrapper .table-cell-width-just.resizing .table-cell-width-just-color-tip {
+  margin-left: 1.5px;
+  height: 100%;
+  width: 2px;
+  background-color: #2d7ff9;
+  border-radius: 1px;
+}

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

@@ -0,0 +1,161 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import classnames from 'classnames';
+import throttle from 'lodash.throttle';
+import { useSelected, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { EMPTY_SELECTED_RANGE } from '../constants';
+import { ResizeHandlersContext, TableContext, SettingSelectRangeContext } from './hooks';
+import EventBus from '../../../../utils/event-bus';
+import { EXTERNAL_EVENT } from '../../../../../constants';
+import { getTableColumns, setTableSelectedRange, getFirstTableCell } from '../helpers';
+import ObjectUtils from '../../../../utils/object-utils';
+import ResizeHandlers from './resize-handlers';
+import { registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
+import TableRoot from './table-root';
+import './index.css';
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var isSelected = useSelected();
+  var editor = useSlateStatic();
+  var table = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    startRowIndex = _useState2[0],
+    setStartRowIndex = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    startColIndex = _useState4[0],
+    setStartColIndex = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSettingSelectRange = _useState6[0],
+    setIsSettingSelectRange = _useState6[1];
+  var _useState7 = useState(EMPTY_SELECTED_RANGE),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedRange = _useState8[0],
+    setSelectedRange = _useState8[1];
+  var oldColumns = getTableColumns(editor, element);
+  var _useState9 = useState(oldColumns),
+    _useState10 = _slicedToArray(_useState9, 2),
+    columns = _useState10[0],
+    setColumns = _useState10[1];
+  var onMouseDown = useCallback(function (event) {
+    if (event.button !== 0) return; // right click not deal
+    setIsSettingSelectRange(true);
+    var tableCell = getFirstTableCell(event.target);
+    setStartRowIndex(Number(tableCell.getAttribute('row-index')));
+    setStartColIndex(Number(tableCell.getAttribute('cell-index')));
+    setSelectedRange(EMPTY_SELECTED_RANGE);
+    setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var resetState = useCallback(function () {
+    setIsSettingSelectRange(false);
+    setStartColIndex(0);
+    setStartRowIndex(0);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    setColumns(getTableColumns(editor, element));
+    var eventBus = EventBus.getInstance();
+    var cancelTableSelectRangeSubscribe = eventBus.subscribe(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+    if (isSettingSelectRange) {
+      var onMouseMove = throttle(function (event) {
+        // if event.target not in the table, clear the mouseMove event
+        if (!table.current.contains(event.target)) return;
+        var tableCell = getFirstTableCell(event.target);
+        var endRowIndex = Number(tableCell.getAttribute('row-index'));
+        var endColIndex = Number(tableCell.getAttribute('cell-index'));
+        var newSelectedRange = {
+          minRowIndex: Math.min(startRowIndex, endRowIndex),
+          maxRowIndex: Math.max(startRowIndex, endRowIndex),
+          minColIndex: Math.min(startColIndex, endColIndex),
+          maxColIndex: Math.max(startColIndex, endColIndex)
+        };
+        if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
+          window.getSelection().collapseToEnd();
+        }
+
+        // same cell
+        if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) {
+          setSelectedRange(EMPTY_SELECTED_RANGE);
+          return;
+        }
+        setSelectedRange(newSelectedRange);
+      }, 200);
+      var onMouseUp = function onMouseUp(event) {
+        if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
+          setTableSelectedRange(editor, selectedRange);
+        }
+        resetState();
+      };
+      registerResizeEvents({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+      return function () {
+        cancelTableSelectRangeSubscribe();
+        unregisterResizeEvents({
+          'mousemove': onMouseMove,
+          'mouseup': onMouseUp
+        });
+      };
+    }
+    return function () {
+      cancelTableSelectRangeSubscribe();
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, isSettingSelectRange, selectedRange, element]);
+  var clearRange = useCallback(function () {
+    setSelectedRange(EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: selectedRange
+  }, /*#__PURE__*/React.createElement(ResizeHandlersContext.Provider, {
+    value: columns
+  }, /*#__PURE__*/React.createElement(SettingSelectRangeContext.Provider, {
+    value: isSettingSelectRange
+  }, /*#__PURE__*/React.createElement(TableRoot, {
+    columns: columns,
+    attributes: attributes
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-table-container position-relative', attributes.className, className, {
+      'sdoc-table-selected': isSelected
+    }),
+    onMouseDown: onMouseDown,
+    ref: table,
+    "data-id": element.id
+  }, children, !isSettingSelectRange && /*#__PURE__*/React.createElement(ResizeHandlers, {
+    element: element
+  }))))));
+};
+function renderTable(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = useReadOnly();
+  if (readOnly) {
+    var className = props.className,
+      attributes = props.attributes,
+      children = props.children,
+      element = props.element;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var editor = useSlateStatic();
+    return /*#__PURE__*/React.createElement(TableRoot, {
+      columns: getTableColumns(editor, element),
+      attributes: attributes
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classnames('sdoc-table-container', attributes.className, className),
+      "data-id": element.id
+    }, children));
+  }
+  return /*#__PURE__*/React.createElement(Table, props);
+}
+export default renderTable;

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

@@ -1,26 +1,30 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import classnames from 'classnames';
-import { useSlateStatic } from '@seafile/slate-react';
+import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import ObjectUtils from '../../../../utils/object-utils';
 import { STYLE_KEY } from '../../../constants';
-import { getNodePathById } from '../../../../socket/helpers';
-import { useTableContext } from './context';
+import { findPath } from '../../../core';
+import { useResizeHandlersContext, useTableContext } from './hooks';
+import { EMPTY_SELECTED_RANGE } from '../constants';
+import { getTableColumns, getCellColumn } from '../helpers';
 var TableCell = function TableCell(_ref) {
   var attributes = _ref.attributes,
     element = _ref.element,
     children = _ref.children;
   var editor = useSlateStatic();
-  var selectedRange = useTableContext();
-  var cellPath = getNodePathById(editor, element.id);
-  if (!cellPath) return null;
-  var cellValue = element.children[0];
-  var style = attributes.style || {};
-  if (ObjectUtils.hasProperty(cellValue, STYLE_KEY.TEXT_ALIGN)) {
-    style[STYLE_KEY.TEXT_ALIGN] = cellValue[STYLE_KEY.TEXT_ALIGN];
-  }
+  var selectedRange = useTableContext() || EMPTY_SELECTED_RANGE;
+  var cellPath = findPath(editor, element, [0, 0]);
+  var columns = useResizeHandlersContext() || getTableColumns(editor, element);
   var pathLength = cellPath.length;
   var rowIndex = cellPath[pathLength - 2];
   var cellIndex = cellPath[pathLength - 1];
+  var column = columns ? columns[cellIndex] : {};
+  var columnWidth = (column === null || column === void 0 ? void 0 : column.width) || 0;
+  var style = attributes.style || {};
+  if (ObjectUtils.hasProperty(element.style, STYLE_KEY.TEXT_ALIGN)) {
+    style[STYLE_KEY.TEXT_ALIGN] = element.style[STYLE_KEY.TEXT_ALIGN];
+  }
   var minColIndex = selectedRange.minColIndex,
     maxColIndex = selectedRange.maxColIndex,
     minRowIndex = selectedRange.minRowIndex,
@@ -31,9 +35,12 @@ var TableCell = function TableCell(_ref) {
   var isSelectedLastCell = isSelected && cellIndex === maxColIndex;
   var isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
   var isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
-  return /*#__PURE__*/React.createElement("td", Object.assign({}, attributes, {
-    style: style,
-    className: classnames('', attributes.className, {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    style: _objectSpread(_objectSpread(_objectSpread({}, style), element.style), {}, {
+      minWidth: columnWidth,
+      width: columnWidth
+    }),
+    className: classnames('table-cell', attributes.className, {
       'cell-selected': isSelected,
       'cell-light-height-left-border': isSelectedFirstCell,
       'cell-light-height-right-border': isSelectedLastCell,
@@ -46,6 +53,33 @@ var TableCell = function TableCell(_ref) {
   }), children);
 };
 function renderTableCell(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = useReadOnly();
+  if (readOnly) {
+    var attributes = props.attributes,
+      children = props.children,
+      element = props.element;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var editor = useSlateStatic();
+    var cellPath = findPath(editor, element);
+    if (!cellPath) return null;
+
+    // const cellValue = element;
+    var style = attributes.style || {};
+    if (ObjectUtils.hasProperty(element, STYLE_KEY.TEXT_ALIGN)) {
+      style[STYLE_KEY.TEXT_ALIGN] = element[STYLE_KEY.TEXT_ALIGN];
+    }
+    var column = getCellColumn(editor, element);
+    var width = column.width;
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+      style: _objectSpread(_objectSpread(_objectSpread({}, style), element.style), {}, {
+        width: width
+      }),
+      className: classnames('table-cell', attributes.className),
+      "data-id": element.id
+    }), children);
+  }
   return /*#__PURE__*/React.createElement(TableCell, props);
 }
 export default renderTableCell;

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

@@ -1,15 +1,130 @@
-import React from 'react';
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
+import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { ReactEditor } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import { findPath } from '../../../core';
+import { TABLE_ROW_MIN_HEIGHT } from '../constants';
+import { updateTableRowHeight } from '../helpers';
+import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
+import { useSettingSelectRangeContext, useResizeHandlersContext } from './hooks';
 var TableRow = function TableRow(_ref) {
-  var attributes = _ref.attributes,
-    element = _ref.element,
+  var _element$style;
+  var element = _ref.element,
+    attributes = _ref.attributes,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("tr", Object.assign({}, attributes, {
-    className: classnames('', attributes.className),
+  var editor = useSlateStatic();
+  var isSettingSelectRange = useSettingSelectRangeContext();
+  var columns = useResizeHandlersContext();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    mouseDownInfo = _useState4[0],
+    setMouseDownInfo = _useState4[1];
+  var rowPath = findPath(editor, element);
+  var pathLength = rowPath ? rowPath.length : 0;
+  var rowIndex = rowPath ? rowPath[pathLength - 1] : -1;
+  var minHeight = ((_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.minHeight) || TABLE_ROW_MIN_HEIGHT;
+  var initHeight = rowIndex === 0 ? minHeight + 1 : minHeight;
+  var tableRow = useRef(initHeight);
+  var _useState5 = useState(initHeight),
+    _useState6 = _slicedToArray(_useState5, 2),
+    height = _useState6[0],
+    setHeight = _useState6[1];
+  var onMouseDown = useCallback(function (event) {
+    eventStopPropagation(event);
+    Transforms.deselect(editor);
+    var pageElement = document.getElementsByClassName('sdoc-editor-article-container')[0];
+    var mouseDownInfo = getMouseDownInfo(event, pageElement);
+    setMouseDownInfo(mouseDownInfo);
+    setIsResizing(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (!isResizing) return;
+    var onMouseMove = function onMouseMove(event) {
+      eventStopPropagation(event);
+      var pageElement = document.getElementsByClassName('sdoc-editor-article-container')[0];
+      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, pageElement);
+      var newHeight = tableRow.current + mouseMoveInfo.displacementY;
+      var validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
+      setHeight(validHeight);
+    };
+    var onMouseUp = function onMouseUp(event) {
+      eventStopPropagation(event);
+      setIsResizing(false);
+      tableRow.current = height;
+      updateTableRowHeight(editor, element, height);
+    };
+    registerResizeEvents({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return function () {
+      unregisterResizeEvents({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isResizing, mouseDownInfo, element, attributes, height]);
+  useEffect(function () {
+    var rowDom = ReactEditor.toDOMNode(editor, element);
+    if (!rowDom) return;
+    tableRow.current = rowDom.clientHeight;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, element]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    className: classnames('table-row position-relative', attributes.className),
+    style: _objectSpread(_objectSpread({}, attributes.style), {}, {
+      height: height,
+      maxHeight: 'fit-content'
+    }),
     "data-id": element.id
-  }), children);
+  }), children, !isSettingSelectRange && /*#__PURE__*/React.createElement("div", {
+    className: classnames('table-row-height-just position-absolute', {
+      'resizing': isResizing
+    }),
+    contentEditable: false,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-row-height-just-color-tip"
+  })));
 };
-function renderTableRow(props, editor) {
+function renderTableRow(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = useReadOnly();
+  if (readOnly) {
+    var attributes = props.attributes,
+      children = props.children,
+      element = props.element;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var editor = useSlateStatic();
+    var style = element.style;
+    var rowPath = findPath(editor, element);
+    if (!rowPath) return null;
+    var pathLength = rowPath.length;
+    var rowIndex = rowPath[pathLength - 1];
+    var minHeight = (style === null || style === void 0 ? void 0 : style.minHeight) || TABLE_ROW_MIN_HEIGHT;
+    var height = rowIndex === 0 ? minHeight + 1 : minHeight;
+    return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+      className: classnames('table-row', attributes.className),
+      style: _objectSpread(_objectSpread(_objectSpread({}, attributes.style), style), {}, {
+        height: height,
+        maxHeight: 'fit-content'
+      }),
+      "data-id": element.id
+    }), children);
+  }
   return /*#__PURE__*/React.createElement(TableRow, props);
 }
 export default renderTableRow;

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

@@ -0,0 +1,109 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import classnames from 'classnames';
+import { useTableRootContext } from './hooks';
+import { TABLE_CELL_MIN_WIDTH } from '../constants';
+import { getTableColumns, updateColumnWidth } from '../helpers';
+import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
+var ResizeHandler = function ResizeHandler(_ref) {
+  var column = _ref.column,
+    initLeft = _ref.left,
+    element = _ref.element,
+    index = _ref.index;
+  var editor = useSlateStatic();
+  var resizeHandler = useRef(null);
+  var _useState = useState(initLeft),
+    _useState2 = _slicedToArray(_useState, 2),
+    left = _useState2[0],
+    setLeft = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mouseDownInfo = _useState6[0],
+    setMouseDownInfo = _useState6[1];
+  var width = column.width;
+  var tableRootScrollContainer = useTableRootContext();
+  var onMouseDown = useCallback(function (event) {
+    eventStopPropagation(event);
+    Transforms.deselect(editor);
+    var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+    setMouseDownInfo(mouseDownInfo);
+    setIsResizing(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (!isResizing) {
+      if (initLeft !== left) {
+        setLeft(initLeft);
+      }
+      return;
+    }
+    var onMouseMove = function onMouseMove(event) {
+      eventStopPropagation(event);
+      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
+      var newWidth = width + mouseMoveInfo.displacementX;
+      if (newWidth < TABLE_CELL_MIN_WIDTH) return;
+      var columns = getTableColumns(editor, element);
+      var nextColumn = columns[index + 1];
+      if (nextColumn) {
+        var nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
+        if (nextColumnWidth < TABLE_CELL_MIN_WIDTH) return;
+      }
+      var left = initLeft + mouseMoveInfo.displacementX;
+      setLeft(left);
+    };
+    var onMouseUp = function onMouseUp(event) {
+      eventStopPropagation(event);
+      setIsResizing(false);
+      var columns = getTableColumns(editor, element);
+      var newColumns = columns.slice(0);
+      var column = newColumns[index];
+      var newWidth = width + left - initLeft;
+      newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
+        width: newWidth
+      });
+      var nextColumn = columns[index + 1];
+      if (nextColumn) {
+        var nextColumnWidth = nextColumn.width - left + initLeft;
+        newColumns[index + 1] = _objectSpread(_objectSpread({}, nextColumn), {}, {
+          width: nextColumnWidth
+        });
+      }
+      updateColumnWidth(editor, element, newColumns);
+    };
+    registerResizeEvents({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return function () {
+      unregisterResizeEvents({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('table-cell-width-just position-absolute', {
+      'resizing': isResizing
+    }),
+    contentEditable: false,
+    style: {
+      left: left - 3.5,
+      top: 0
+    },
+    onMouseDown: onMouseDown,
+    ref: resizeHandler
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+export default ResizeHandler;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSlateStatic } from '@seafile/slate-react';
+import ResizeHandler from './resize-handler';
+import { getNode, findPath } from '../../../core';
+import { useResizeHandlersContext } from './hooks';
+import { getTableColumns } from '../helpers';
+var ResizeHandlers = function ResizeHandlers(props) {
+  var element = props.element;
+  var editor = useSlateStatic();
+  var tablePath = findPath(editor, element);
+  var columns = useResizeHandlersContext() || getTableColumns(editor, element);
+  if (!tablePath) return null;
+  var table = getNode(editor, tablePath);
+  if (!table) return null;
+  var columnLeft = 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, columnIndex) {
+    columnLeft = columnLeft + column.width;
+    return /*#__PURE__*/React.createElement(ResizeHandler, {
+      key: columnIndex,
+      column: column,
+      left: columnLeft,
+      index: columnIndex,
+      element: element
+    });
+  }));
+};
+export default ResizeHandlers;