@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/table/render/index.js

@@ -0,0 +1,309 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _mouseEvent = require("../../../../utils/mouse-event");
+var _objectUtils = _interopRequireDefault(require("../../../../utils/object-utils"));
+var _core = require("../../../core");
+var _constants2 = require("../constants");
+var _helpers = require("../helpers");
+var _dragHandlers = _interopRequireDefault(require("./drag-handlers"));
+var _hooks = require("./hooks");
+var _resizeHandlers = _interopRequireDefault(require("./resize-handlers"));
+var _resizeMask = _interopRequireDefault(require("./resize-mask"));
+var _tableHeader = _interopRequireDefault(require("./table-header"));
+var _tableRoot = _interopRequireDefault(require("./table-root"));
+require("./index.css");
+require("./alternate-color.css");
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    element = _ref.element;
+  var isSelected = (0, _slateReact.useSelected)();
+  var editor = (0, _slateReact.useSlateStatic)();
+  var table = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    startRowIndex = _useState2[0],
+    setStartRowIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    startColIndex = _useState4[0],
+    setStartColIndex = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    startRowSpan = _useState6[0],
+    setStartRowSpan = _useState6[1];
+  var _useState7 = (0, _react.useState)(1),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    startColSpan = _useState8[0],
+    setStartColSpan = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isSettingSelectRange = _useState0[0],
+    setIsSettingSelectRange = _useState0[1];
+  var _useState1 = (0, _react.useState)(_constants2.EMPTY_SELECTED_RANGE),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    selectedRange = _useState10[0],
+    setSelectedRange = _useState10[1];
+  var oldColumns = (0, _helpers.getTableColumns)(editor, element);
+  var _useState11 = (0, _react.useState)(oldColumns),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    columns = _useState12[0],
+    setColumns = _useState12[1];
+  var path = (0, _core.findPath)(editor, element);
+  var _useState13 = (0, _react.useState)({}),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    resizeCellMaskInfo = _useState14[0],
+    setResizeCellMaskInfo = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    isShowResizeHandlers = _useState16[0],
+    setIsShowResizeHandlers = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+    isDraggingResizeHandler = _useState18[0],
+    setIsDraggingResizeHandler = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
+    _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
+    isDragMove = _useState20[0],
+    setIsDragMove = _useState20[1];
+  var onMouseDown = (0, _react.useCallback)(function (event) {
+    if (event.button !== 0) return; // right click not deal
+    setIsSettingSelectRange(true);
+    if (!table.current.contains(event.target)) return;
+    var tableCell = (0, _helpers.getFirstTableCell)(event.target);
+    var cellData = tableCell.style.gridArea.split(' / ');
+    setStartRowIndex(Number(tableCell.getAttribute('row-index')));
+    setStartColIndex(Number(tableCell.getAttribute('cell-index')));
+    setStartRowSpan(Number(cellData[2].split(' ')[1]));
+    setStartColSpan(Number(cellData[3].split(' ')[1]));
+    setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+    (0, _helpers.setTableSelectedRange)(editor, _constants2.EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var resetState = (0, _react.useCallback)(function () {
+    setIsSettingSelectRange(false);
+    setStartColIndex(0);
+    setStartRowIndex(0);
+    setStartRowSpan(1);
+    setStartColSpan(1);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var setSelectedRangeByClick = (0, _react.useCallback)(function (range) {
+    setSelectedRange(range);
+    (0, _helpers.setTableSelectedRange)(editor, range);
+    var minRowIndex = range.minRowIndex,
+      minColIndex = range.minColIndex;
+    var selection = {
+      offset: 0,
+      path: [].concat((0, _toConsumableArray2["default"])(path), [minRowIndex, minColIndex, 0])
+    };
+    _slate.Transforms.setSelection(editor, {
+      anchor: selection,
+      focus: selection
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, path]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var cancelTableSelectRangeSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+    var setTableSelectRangeSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, setRange);
+    return function () {
+      cancelTableSelectRangeSubscribe();
+      setTableSelectRangeSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    setColumns((0, _helpers.getTableColumns)(editor, element));
+    if (isSettingSelectRange) {
+      var onMouseMove = (0, _lodash["default"])(function (event) {
+        // if event.target not in the table, clear the mouseMove event
+        if (!table.current.contains(event.target)) return;
+        var tableCell = (0, _helpers.getFirstTableCell)(event.target);
+        var endRowIndex = Number(tableCell.getAttribute('row-index'));
+        var endColIndex = Number(tableCell.getAttribute('cell-index'));
+        var cellData = tableCell.style.gridArea.split(' / ');
+        var endRowSpan = Number(cellData[2].split(' ')[1]);
+        var endColSpan = Number(cellData[3].split(' ')[1]);
+        var tableSlateNode = _slateReact.ReactEditor.toSlateNode(editor, table.current);
+        var newSelectedRange = {
+          minRowIndex: Math.min(startRowIndex, endRowIndex),
+          maxRowIndex: startRowIndex < endRowIndex ? endRowIndex + endRowSpan - 1 : startRowIndex + startRowSpan - 1,
+          minColIndex: Math.min(startColIndex, endColIndex),
+          maxColIndex: startColIndex < endColIndex ? endColIndex + endColSpan - 1 : startColIndex + startColSpan - 1
+        };
+        newSelectedRange = (0, _helpers.adjustCombinedCellRange)(tableSlateNode, newSelectedRange);
+        if (!_objectUtils["default"].isSameObject(selectedRange, _constants2.EMPTY_SELECTED_RANGE)) {
+          event.preventDefault();
+          _slate.Editor.withoutNormalizing(editor, function () {
+            var selection = {
+              offset: 0,
+              path: [].concat((0, _toConsumableArray2["default"])(path), [endRowIndex, endColIndex, 0])
+            };
+            _slate.Transforms.setSelection(editor, {
+              anchor: selection,
+              focus: selection
+            });
+          });
+        }
+
+        // same cell
+        if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) {
+          setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+          (0, _helpers.setTableSelectedRange)(editor, _constants2.EMPTY_SELECTED_RANGE);
+          return;
+        }
+        setSelectedRange(newSelectedRange);
+        (0, _helpers.setTableSelectedRange)(editor, newSelectedRange);
+      }, 200);
+      var onMouseUp = function onMouseUp(event) {
+        /*
+        if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
+          setTableSelectedRange(editor, selectedRange);
+        }
+        */
+        resetState();
+      };
+      (0, _mouseEvent.registerResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+      return function () {
+        (0, _mouseEvent.unregisterResizeEvents)({
+          'mousemove': onMouseMove,
+          'mouseup': onMouseUp
+        });
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element, isSettingSelectRange, selectedRange, element]);
+  var setRange = (0, _react.useCallback)(function (table, range) {
+    if (element.id !== table.id) {
+      setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+    } else {
+      setSelectedRange(range);
+    }
+    (0, _helpers.setTableSelectedRange)(editor, range);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element]);
+  var clearRange = (0, _react.useCallback)(function () {
+    setSelectedRange(_constants2.EMPTY_SELECTED_RANGE);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var tableContainerClassName = (0, _classnames["default"])('sdoc-table-container position-relative', attributes.className, className, {
+    'sdoc-table-selected': isSelected,
+    'sdoc-table-selected-range': !_objectUtils["default"].isSameObject(selectedRange, _constants2.EMPTY_SELECTED_RANGE)
+  });
+  var handleShowResizeHandler = (0, _react.useCallback)(function (cellInfo) {
+    setResizeCellMaskInfo(cellInfo);
+    setIsShowResizeHandlers(true);
+  }, []);
+  var hideResizeHandlers = (0, _react.useCallback)(function () {
+    setIsShowResizeHandlers(false);
+    setIsDraggingResizeHandler(false);
+  }, []);
+  var handlerStartDragging = (0, _react.useCallback)(function () {
+    setIsDraggingResizeHandler(true);
+  }, []);
+  var style = element.style ? (0, _objectSpread2["default"])({}, element.style) : {};
+  var columnWidthList = columns.map(function (item) {
+    return "".concat(item.width, "px");
+  });
+  style.gridTemplateColumns = columnWidthList.join(' ');
+  var rowHeightList = element.children.map(function (item, index) {
+    return (0, _helpers.getRowHeight)(item, index);
+  });
+  style.gridAutoRows = rowHeightList.map(function (item) {
+    return "minmax(".concat(item, "px, auto)");
+  }).join(' ');
+  return /*#__PURE__*/_react["default"].createElement(_hooks.TableSelectedRangeContext.Provider, {
+    value: selectedRange
+  }, /*#__PURE__*/_react["default"].createElement(_hooks.ResizeHandlersContext.Provider, {
+    value: columns
+  }, /*#__PURE__*/_react["default"].createElement(_hooks.SettingSelectRangeContext.Provider, {
+    value: isSettingSelectRange
+  }, /*#__PURE__*/_react["default"].createElement(_tableRoot["default"], {
+    columns: columns,
+    attributes: attributes
+  }, isSelected && /*#__PURE__*/_react["default"].createElement(_tableHeader["default"], {
+    editor: editor,
+    table: element,
+    setSelectedRange: setSelectedRangeByClick,
+    setIsDragMove: setIsDragMove
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(tableContainerClassName),
+    style: style,
+    onMouseDown: onMouseDown,
+    ref: table,
+    "data-id": element.id
+  }, children, !isSettingSelectRange && /*#__PURE__*/_react["default"].createElement(_resizeMask["default"], {
+    editor: editor,
+    table: element,
+    handleShowResizeHandler: handleShowResizeHandler,
+    hideResizeHandlers: hideResizeHandlers,
+    handlerStartDragging: handlerStartDragging,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), !isSettingSelectRange && isShowResizeHandlers && /*#__PURE__*/_react["default"].createElement(_resizeHandlers["default"], {
+    hideResizeHandlers: hideResizeHandlers,
+    element: element,
+    resizeCellMaskInfo: resizeCellMaskInfo,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), isDragMove && /*#__PURE__*/_react["default"].createElement(_dragHandlers["default"], {
+    table: element
+  }))))));
+};
+function renderTable(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = (0, _slateReact.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 = (0, _slateReact.useSlateStatic)();
+    var columns = (0, _helpers.getTableColumns)(editor, element);
+    var style = element.style ? (0, _objectSpread2["default"])({}, element.style) : {};
+    var columnWidthList = columns.map(function (item) {
+      return "".concat(item.width, "px");
+    });
+    style.gridTemplateColumns = columnWidthList.join(' ');
+    var rowHeightList = element.children.map(function (item, index) {
+      return (0, _helpers.getRowHeight)(item, index);
+    });
+    style.gridAutoRows = rowHeightList.map(function (item) {
+      return "minmax(".concat(item, "px, auto)");
+    }).join(' ');
+    return /*#__PURE__*/_react["default"].createElement(_tableRoot["default"], {
+      columns: columns,
+      attributes: attributes
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('sdoc-table-container', attributes.className, className),
+      "data-id": element.id,
+      style: style
+    }, children));
+  }
+  return /*#__PURE__*/_react["default"].createElement(Table, props);
+}
+var _default = exports["default"] = renderTable;

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

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _objectUtils = _interopRequireDefault(require("../../../../utils/object-utils"));
+var _constants2 = require("../../../constants");
+var _core = require("../../../core");
+var _constants3 = require("../constants");
+var _helpers = require("../helpers");
+var _hooks = require("./hooks");
+var TableCell = function TableCell(_ref) {
+  var attributes = _ref.attributes,
+    element = _ref.element,
+    children = _ref.children;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var selectedRange = (0, _hooks.useTableSelectedRangeContext)() || _constants3.EMPTY_SELECTED_RANGE;
+  var cellPath = (0, _core.findPath)(editor, element, [0, 0]);
+  var pathLength = cellPath.length;
+  var rowIndex = cellPath[pathLength - 2];
+  var cellIndex = cellPath[pathLength - 1];
+  var rowEntry = _slate.Editor.parent(editor, cellPath);
+  var tableEntry = _slate.Editor.parent(editor, rowEntry[1]);
+  var minColIndex = selectedRange.minColIndex,
+    maxColIndex = selectedRange.maxColIndex,
+    minRowIndex = selectedRange.minRowIndex,
+    maxRowIndex = selectedRange.maxRowIndex;
+  var isRowSelected = rowIndex >= minRowIndex && rowIndex <= maxRowIndex;
+  var isSelected = isRowSelected && cellIndex >= minColIndex && cellIndex <= maxColIndex;
+  var isSelectedFirstCell = isSelected && cellIndex === minColIndex;
+  var isSelectedLastCell = isSelected && cellIndex === maxColIndex;
+  var isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
+  var isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
+  var eventBus = _eventBus["default"].getInstance();
+  var tableId = tableEntry[0].id;
+  var canDrop = (0, _react.useRef)(false);
+  var isDragOverHalfCell = (0, _react.useRef)(false);
+  var onContextMenu = (0, _react.useCallback)(function (event) {
+    var path = (0, _core.findPath)(editor, element);
+    (0, _core.focusEditor)(editor, path);
+    _slate.Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }, [editor, element]);
+  var style = attributes.style || {};
+  if (_objectUtils["default"].hasProperty(element.style, _constants3.TABLE_CELL_STYLE.TEXT_ALIGN)) {
+    style['textAlign'] = element.style[_constants3.TABLE_CELL_STYLE.TEXT_ALIGN];
+  }
+  if (isSelected) {
+    style['backgroundColor'] = _constants3.SELECTED_TABLE_CELL_BACKGROUND_COLOR;
+  }
+  if (_objectUtils["default"].hasProperty(element.style, _constants3.TABLE_CELL_STYLE.BACKGROUND_COLOR)) {
+    var color = element.style[_constants3.TABLE_CELL_STYLE.BACKGROUND_COLOR];
+    if (color && color !== 'transparent' && color !== 'unset') {
+      style['backgroundColor'] = isSelected ? (0, _helpers.colorBlend)(_constants3.SELECTED_TABLE_CELL_BACKGROUND_COLOR, color, 0.9) : color;
+    }
+  }
+  if (element.is_combined) {
+    style.display = 'none';
+  }
+  if (rowIndex === 0) {
+    style.borderTop = '1px solid #ddd';
+  }
+  if (cellIndex === 0) {
+    style.borderLeft = '1px solid #ddd';
+  }
+  var _element$rowspan = element.rowspan,
+    rowspan = _element$rowspan === void 0 ? 1 : _element$rowspan,
+    _element$colspan = element.colspan,
+    colspan = _element$colspan === void 0 ? 1 : _element$colspan;
+  style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
+  if (element.style) {
+    style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.style), style);
+  }
+  var onMouseMove = function onMouseMove(mouseDownEvent) {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
+      mouseDownEvent: mouseDownEvent,
+      cell: element,
+      rowIndex: rowIndex,
+      cellIndex: cellIndex,
+      tableId: tableId
+    });
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var highlightClass = (0, _react.useMemo)(function () {
+    return (0, _helpers.getHighlightClass)(editor, cellPath);
+  }, []);
+  var onDragOver = (0, _react.useCallback)(function (event) {
+    var target = event.target;
+    var table = tableEntry[0];
+    var displayType = (0, _helpers.getTableDragType)(table, selectedRange);
+    var resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex, cellIndex);
+    var cellInfo = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, resizeMaskCellInfo), {}, {
+      displayType: displayType,
+      mouseDownEvent: event,
+      tableId: tableId
+    });
+    if (cellInfo.displayType === _constants3.DRAG_HANDLER_COLUMN) {
+      var offsetX = cellInfo.mouseDownEvent.nativeEvent.offsetX;
+      var cellWidth = cellInfo.width;
+      var _cellIndex = cellInfo.cellIndex;
+      // To avoid the drag handler line being covered by the table border
+      if (_cellIndex === 0) cellInfo.left += 1;
+      if (_cellIndex === table.children[0].children.length - 1) cellInfo.left -= 2;
+      if (offsetX >= cellWidth / 2) {
+        cellInfo.left = cellInfo.left + cellWidth;
+        isDragOverHalfCell.current = true;
+      } else {
+        isDragOverHalfCell.current = false;
+      }
+    } else {
+      var offsetY = cellInfo.mouseDownEvent.nativeEvent.offsetY;
+      var cellHeight = cellInfo.height;
+      var _rowIndex = cellInfo.rowIndex;
+      // To avoid the drag handler line being covered by the table border
+      if (_rowIndex === 0) cellInfo.top += 1;
+      if (_rowIndex === table.children.length - 1) cellInfo.top -= 2;
+      if (offsetY >= cellHeight / 2) {
+        cellInfo.top = cellInfo.top + cellHeight;
+        isDragOverHalfCell.current = true;
+      } else {
+        isDragOverHalfCell.current = false;
+      }
+    }
+    var isHideHandleLine = (0, _helpers.isHideDragHandlerLine)(editor, displayType, table, cellPath, isDragOverHalfCell.current);
+    canDrop.current = !isHideHandleLine;
+    if (target.classList.contains(_constants3.CELL_SELECTED) || isHideHandleLine) {
+      cellInfo.top = -9999;
+      cellInfo.left = -9999;
+    }
+    eventBus.dispatch(_constants.INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, cellInfo);
+  }, [cellIndex, cellPath, editor, eventBus, rowIndex, selectedRange, tableEntry, tableId]);
+  var handleDrop = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    if (!canDrop.current) return;
+    var target = event.target;
+    if (target.classList.contains(_constants3.CELL_SELECTED)) return;
+    var dragDataJson = event.dataTransfer.getData(_constants2.TABLE_DRAG_KEY);
+    if (!dragDataJson) return;
+    var dragData = JSON.parse(dragDataJson);
+    if (dragData) {
+      var offset = isDragOverHalfCell.current ? 1 : 0;
+      var dragTableId = dragData.tableId,
+        startIndex = dragData.startIndex,
+        endIndex = dragData.endIndex,
+        dragType = dragData.dragType;
+      if (dragTableId !== tableId) return;
+      dragType === _constants3.DRAG_HANDLER_COLUMN ? (0, _helpers.moveColumns)(editor, cellIndex + offset, startIndex, endIndex) : (0, _helpers.moveRows)(editor, rowIndex + offset, startIndex, endIndex);
+      var range = dragType === _constants3.DRAG_HANDLER_COLUMN ? (0, _helpers.getTableSelectedRangeAfterDrag)(tableEntry[0], dragType, cellIndex + offset, startIndex, endIndex) : (0, _helpers.getTableSelectedRangeAfterDrag)(tableEntry[0], dragType, rowIndex + offset, startIndex, endIndex);
+      eventBus.dispatch(_constants.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, tableEntry[0], range);
+    }
+  }, [cellIndex, editor, eventBus, rowIndex, tableEntry, tableId]);
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.style), style),
+    className: (0, _classnames2["default"])('table-cell', attributes.className, highlightClass, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants3.CELL_SELECTED, isSelected), 'cell-light-height-left-border', isSelectedFirstCell), 'cell-light-height-right-border', isSelectedLastCell), 'cell-light-height-top-border', isSelectedFirstRow), 'cell-light-height-bottom-border', isSelectedLastRow)),
+    "data-id": element.id,
+    "row-index": rowIndex,
+    "cell-index": cellIndex,
+    onContextMenu: onContextMenu,
+    onMouseMove: onMouseMove,
+    onDragOver: onDragOver,
+    onDrop: handleDrop
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-cell-container"
+  }, children));
+};
+function renderTableCell(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var readOnly = (0, _slateReact.useReadOnly)();
+  if (readOnly) {
+    var attributes = props.attributes,
+      children = props.children,
+      element = props.element;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var editor = (0, _slateReact.useSlateStatic)();
+    var cellPath = (0, _core.findPath)(editor, element, [0, 0]);
+    if (!cellPath) return null;
+    var pathLength = cellPath.length;
+    var rowIndex = cellPath[pathLength - 2];
+    var cellIndex = cellPath[pathLength - 1];
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var highlightClass = (0, _react.useMemo)(function () {
+      return (0, _helpers.getHighlightClass)(editor, cellPath);
+    }, [cellPath, editor]);
+
+    // const cellValue = element;
+    var style = attributes.style || {};
+    if (_objectUtils["default"].hasProperty(element.style, _constants3.TABLE_CELL_STYLE.TEXT_ALIGN)) {
+      style['textAlign'] = element.style[_constants3.TABLE_CELL_STYLE.TEXT_ALIGN];
+    }
+    if (_objectUtils["default"].hasProperty(element.style, _constants3.TABLE_CELL_STYLE.BACKGROUND_COLOR) && element.style[_constants3.TABLE_CELL_STYLE.BACKGROUND_COLOR]) {
+      style['backgroundColor'] = element.style[_constants3.TABLE_CELL_STYLE.BACKGROUND_COLOR];
+    }
+    if (element.is_combined) {
+      style.display = 'none';
+    }
+    if (rowIndex === 0) {
+      style.borderTop = '1px solid #ddd';
+    }
+    if (cellIndex === 0) {
+      style.borderLeft = '1px solid #ddd';
+    }
+    var _element$rowspan2 = element.rowspan,
+      rowspan = _element$rowspan2 === void 0 ? 1 : _element$rowspan2,
+      _element$colspan2 = element.colspan,
+      colspan = _element$colspan2 === void 0 ? 1 : _element$colspan2;
+    style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
+    return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, element.style), style),
+      className: (0, _classnames2["default"])('table-cell', highlightClass, attributes.className),
+      "data-id": element.id
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-cell-container"
+    }, children));
+  }
+  return /*#__PURE__*/_react["default"].createElement(TableCell, props);
+}
+var _default = exports["default"] = renderTableCell;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function renderTableRow(props) {
+  var children = props.children;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+}
+var _default = exports["default"] = renderTableRow;

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

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _mouseEvent = require("../../../../../utils/mouse-event");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+var _hooks = require("../hooks");
+var ColumnResizeHandler = function ColumnResizeHandler(_ref) {
+  var column = _ref.column,
+    initLeft = _ref.left,
+    table = _ref.table,
+    cellIndex = _ref.cellIndex,
+    rowBottom = _ref.rowBottom,
+    hideResizeHandlers = _ref.hideResizeHandlers,
+    mouseDownEvent = _ref.mouseDownEvent,
+    adjustingCell = _ref.adjustingCell,
+    isDraggingResizeHandler = _ref.isDraggingResizeHandler;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var resizeHandler = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(initLeft),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    left = _useState2[0],
+    setLeft = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    mouseDownInfo = _useState4[0],
+    setMouseDownInfo = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    style = _useState6[0],
+    setStyle = _useState6[1];
+  var width = column.width;
+  var tableRootScrollContainer = (0, _hooks.useTableRootContext)();
+  (0, _react.useLayoutEffect)(function () {
+    var mouseDownInfo = (0, _mouseEvent.getMouseDownInfo)(mouseDownEvent, tableRootScrollContainer);
+    var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
+      top = _tableRootScrollConta.top;
+    setStyle({
+      left: mouseDownInfo.positionX - 2,
+      height: tableRootScrollContainer.clientHeight,
+      top: top
+    });
+    setMouseDownInfo(mouseDownInfo);
+  }, [mouseDownEvent, tableRootScrollContainer]);
+  (0, _react.useEffect)(function () {
+    if (!isDraggingResizeHandler) return;
+    var onMouseMove = function onMouseMove(event) {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      var mouseMoveInfo = (0, _mouseEvent.getMouseMoveInfo)(event, mouseDownInfo, tableRootScrollContainer);
+      var newWidth = width + mouseMoveInfo.displacementX;
+      var columns = (0, _helpers.getTableColumns)(editor, table);
+      if (newWidth < _constants.TABLE_CELL_MIN_WIDTH) return;
+      var nextColumn = columns[cellIndex + 1];
+      if (nextColumn) {
+        var nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
+        if (nextColumnWidth < _constants.TABLE_CELL_MIN_WIDTH) return;
+      }
+      var left = initLeft + mouseMoveInfo.displacementX;
+      var _tableRootScrollConta2 = tableRootScrollContainer.getBoundingClientRect(),
+        top = _tableRootScrollConta2.top;
+      setStyle({
+        left: event.clientX - 2,
+        height: tableRootScrollContainer.clientHeight,
+        top: top
+      });
+      setLeft(left);
+    };
+    var onMouseUp = function onMouseUp(event) {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      setStyle({});
+      var columns = (0, _helpers.getTableColumns)(editor, table);
+      var newColumns = columns.slice(0);
+      var column = newColumns[cellIndex];
+      var newWidth = width + left - initLeft;
+      newColumns[cellIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, column), {}, {
+        width: newWidth
+      });
+      var nextColumn = columns[cellIndex + 1];
+      if (nextColumn) {
+        var nextColumnWidth = nextColumn.width - left + initLeft;
+        newColumns[cellIndex + 1] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextColumn), {}, {
+          width: nextColumnWidth
+        });
+      }
+      (0, _helpers.updateColumnWidth)(editor, table, newColumns);
+      (0, _helpers.focusClosestCellWhenJustifyCellSize)(editor, adjustingCell);
+      hideResizeHandlers();
+    };
+    (0, _mouseEvent.registerResizeEvents)({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return function () {
+      (0, _mouseEvent.unregisterResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDraggingResizeHandler, mouseDownInfo, left, width, column, editor, table, cellIndex, initLeft, rowBottom]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-cell-width-just resizing position-fixed",
+    contentEditable: false,
+    style: style,
+    ref: resizeHandler
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-cell-width-just-color-tip"
+  }));
+};
+var _default = exports["default"] = ColumnResizeHandler;