@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,253 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _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");
+const TableCell = _ref => {
+  let {
+    attributes,
+    element,
+    children
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)() || _constants3.EMPTY_SELECTED_RANGE;
+  const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
+  const pathLength = cellPath.length;
+  const rowIndex = cellPath[pathLength - 2];
+  const cellIndex = cellPath[pathLength - 1];
+  const rowEntry = _slate.Editor.parent(editor, cellPath);
+  const tableEntry = _slate.Editor.parent(editor, rowEntry[1]);
+  const {
+    minColIndex,
+    maxColIndex,
+    minRowIndex,
+    maxRowIndex
+  } = selectedRange;
+  const isRowSelected = rowIndex >= minRowIndex && rowIndex <= maxRowIndex;
+  const isSelected = isRowSelected && cellIndex >= minColIndex && cellIndex <= maxColIndex;
+  const isSelectedFirstCell = isSelected && cellIndex === minColIndex;
+  const isSelectedLastCell = isSelected && cellIndex === maxColIndex;
+  const isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
+  const isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
+  const eventBus = _eventBus.default.getInstance();
+  const tableId = tableEntry[0].id;
+  const canDrop = (0, _react.useRef)(false);
+  const isDragOverHalfCell = (0, _react.useRef)(false);
+  const onContextMenu = (0, _react.useCallback)(event => {
+    const path = (0, _core.findPath)(editor, element);
+    (0, _core.focusEditor)(editor, path);
+    _slate.Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }, [editor, element]);
+  let 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)) {
+    const 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';
+  }
+  const {
+    rowspan = 1,
+    colspan = 1
+  } = element;
+  style.gridArea = `${rowIndex + 1} / ${cellIndex + 1} / span ${rowspan} / span ${colspan}`;
+  if (element.style) {
+    style = {
+      ...element.style,
+      ...style
+    };
+  }
+  const onMouseMove = mouseDownEvent => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
+      mouseDownEvent,
+      cell: element,
+      rowIndex,
+      cellIndex,
+      tableId
+    });
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const highlightClass = (0, _react.useMemo)(() => (0, _helpers.getHighlightClass)(editor, cellPath), []);
+  const onDragOver = (0, _react.useCallback)(event => {
+    const {
+      target
+    } = event;
+    const table = tableEntry[0];
+    const displayType = (0, _helpers.getTableDragType)(table, selectedRange);
+    const resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex, cellIndex);
+    const cellInfo = {
+      ...resizeMaskCellInfo,
+      displayType,
+      mouseDownEvent: event,
+      tableId
+    };
+    if (cellInfo.displayType === _constants3.DRAG_HANDLER_COLUMN) {
+      const offsetX = cellInfo.mouseDownEvent.nativeEvent.offsetX;
+      const cellWidth = cellInfo.width;
+      const 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 {
+      const offsetY = cellInfo.mouseDownEvent.nativeEvent.offsetY;
+      const cellHeight = cellInfo.height;
+      const 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;
+      }
+    }
+    const 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]);
+  const handleDrop = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    if (!canDrop.current) return;
+    const {
+      target
+    } = event;
+    if (target.classList.contains(_constants3.CELL_SELECTED)) return;
+    const dragDataJson = event.dataTransfer.getData(_constants2.TABLE_DRAG_KEY);
+    if (!dragDataJson) return;
+    const dragData = JSON.parse(dragDataJson);
+    if (dragData) {
+      const offset = isDragOverHalfCell.current ? 1 : 0;
+      const {
+        tableId: dragTableId,
+        startIndex,
+        endIndex,
+        dragType
+      } = dragData;
+      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);
+      const 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: {
+      ...element.style,
+      ...style
+    },
+    className: (0, _classnames.default)('table-cell', attributes.className, highlightClass, {
+      [_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
+  const readOnly = (0, _slateReact.useReadOnly)();
+  if (readOnly) {
+    const {
+      attributes,
+      children,
+      element
+    } = props;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const editor = (0, _slateReact.useSlateStatic)();
+    const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
+    if (!cellPath) return null;
+    const pathLength = cellPath.length;
+    const rowIndex = cellPath[pathLength - 2];
+    const cellIndex = cellPath[pathLength - 1];
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const highlightClass = (0, _react.useMemo)(() => (0, _helpers.getHighlightClass)(editor, cellPath), [cellPath, editor]);
+
+    // const cellValue = element;
+    let 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';
+    }
+    const {
+      rowspan = 1,
+      colspan = 1
+    } = element;
+    style.gridArea = `${rowIndex + 1} / ${cellIndex + 1} / span ${rowspan} / span ${colspan}`;
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
+      style: {
+        ...element.style,
+        ...style
+      },
+      className: (0, _classnames.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/basic-sdk/extension/plugins/table/render/render-row.js

@@ -0,0 +1,15 @@
+"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) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+}
+var _default = exports.default = renderTableRow;

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const ColumnResizeHandler = _ref => {
+  let {
+    column,
+    left: initLeft,
+    table,
+    cellIndex,
+    rowBottom,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const resizeHandler = (0, _react.useRef)(null);
+  const [left, setLeft] = (0, _react.useState)(initLeft);
+  const [mouseDownInfo, setMouseDownInfo] = (0, _react.useState)({});
+  const [style, setStyle] = (0, _react.useState)({});
+  const width = column.width;
+  const tableRootScrollContainer = (0, _hooks.useTableRootContext)();
+  (0, _react.useLayoutEffect)(() => {
+    const mouseDownInfo = (0, _mouseEvent.getMouseDownInfo)(mouseDownEvent, tableRootScrollContainer);
+    const {
+      top
+    } = tableRootScrollContainer.getBoundingClientRect();
+    setStyle({
+      left: mouseDownInfo.positionX - 2,
+      height: tableRootScrollContainer.clientHeight,
+      top
+    });
+    setMouseDownInfo(mouseDownInfo);
+  }, [mouseDownEvent, tableRootScrollContainer]);
+  (0, _react.useEffect)(() => {
+    if (!isDraggingResizeHandler) return;
+    const onMouseMove = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      const mouseMoveInfo = (0, _mouseEvent.getMouseMoveInfo)(event, mouseDownInfo, tableRootScrollContainer);
+      const newWidth = width + mouseMoveInfo.displacementX;
+      const columns = (0, _helpers.getTableColumns)(editor, table);
+      if (newWidth < _constants.TABLE_CELL_MIN_WIDTH) return;
+      const nextColumn = columns[cellIndex + 1];
+      if (nextColumn) {
+        const nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
+        if (nextColumnWidth < _constants.TABLE_CELL_MIN_WIDTH) return;
+      }
+      const left = initLeft + mouseMoveInfo.displacementX;
+      const {
+        top
+      } = tableRootScrollContainer.getBoundingClientRect();
+      setStyle({
+        left: event.clientX - 2,
+        height: tableRootScrollContainer.clientHeight,
+        top
+      });
+      setLeft(left);
+    };
+    const onMouseUp = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      setStyle({});
+      const columns = (0, _helpers.getTableColumns)(editor, table);
+      const newColumns = columns.slice(0);
+      const column = newColumns[cellIndex];
+      const newWidth = width + left - initLeft;
+      newColumns[cellIndex] = {
+        ...column,
+        width: newWidth
+      };
+      const nextColumn = columns[cellIndex + 1];
+      if (nextColumn) {
+        const nextColumnWidth = nextColumn.width - left + initLeft;
+        newColumns[cellIndex + 1] = {
+          ...nextColumn,
+          width: nextColumnWidth
+        };
+      }
+      (0, _helpers.updateColumnWidth)(editor, table, newColumns);
+      (0, _helpers.focusClosestCellWhenJustifyCellSize)(editor, adjustingCell);
+      hideResizeHandlers();
+    };
+    (0, _mouseEvent.registerResizeEvents)({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return () => {
+      (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;

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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");
+const FirstColumnResizeHandler = _ref => {
+  let {
+    column,
+    left: initLeft,
+    table,
+    cellIndex,
+    rowBottoms,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const resizeHandler = (0, _react.useRef)(null);
+  const [left, setLeft] = (0, _react.useState)(initLeft);
+  const [mouseDownInfo, setMouseDownInfo] = (0, _react.useState)({});
+  const [style, setStyle] = (0, _react.useState)({});
+  const width = column.width;
+  const tableRootScrollContainer = (0, _hooks.useTableRootContext)();
+  (0, _react.useLayoutEffect)(() => {
+    const mouseDownInfo = (0, _mouseEvent.getMouseDownInfo)(mouseDownEvent, tableRootScrollContainer);
+    const {
+      top
+    } = tableRootScrollContainer.getBoundingClientRect();
+    setStyle({
+      left: mouseDownInfo.positionX - 2,
+      height: tableRootScrollContainer.clientHeight,
+      top
+    });
+    setMouseDownInfo(mouseDownInfo);
+  }, [mouseDownEvent, tableRootScrollContainer]);
+  (0, _react.useEffect)(() => {
+    if (!isDraggingResizeHandler) return;
+    const onMouseMove = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      const mouseMoveInfo = (0, _mouseEvent.getMouseMoveInfo)(event, mouseDownInfo, tableRootScrollContainer);
+      const newWidth = width - mouseMoveInfo.displacementX;
+      if (newWidth < _constants.TABLE_CELL_MIN_WIDTH) return;
+      const left = initLeft - mouseMoveInfo.displacementX;
+      const {
+        top
+      } = tableRootScrollContainer.getBoundingClientRect();
+      setStyle({
+        left: event.clientX - 2,
+        height: tableRootScrollContainer.clientHeight,
+        top
+      });
+      setLeft(left);
+    };
+    const onMouseUp = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      setStyle({});
+      const columns = (0, _helpers.getTableColumns)(editor, table);
+      const newColumns = columns.slice(0);
+      const column = newColumns[cellIndex];
+      const newWidth = width + left - initLeft;
+      newColumns[cellIndex] = {
+        ...column,
+        width: newWidth
+      };
+      (0, _helpers.updateColumnWidth)(editor, table, newColumns);
+      (0, _helpers.focusClosestCellWhenJustifyCellSize)(editor, adjustingCell);
+      hideResizeHandlers();
+    };
+    (0, _mouseEvent.registerResizeEvents)({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return () => {
+      (0, _mouseEvent.unregisterResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDraggingResizeHandler, mouseDownInfo, left, width, column, editor, table, cellIndex, initLeft, rowBottoms]);
+  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 = FirstColumnResizeHandler;

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

@@ -0,0 +1,74 @@
+"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"));
+var _slateReact = require("@seafile/slate-react");
+var _core = require("../../../../core");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+var _hooks = require("../hooks");
+var _columnResizeHandler = _interopRequireDefault(require("./column-resize-handler"));
+var _firstColumnLeftResizeHandler = _interopRequireDefault(require("./first-column-left-resize-handler"));
+var _rowResizeHandler = _interopRequireDefault(require("./row-resize-handler"));
+/* eslint-disable react-hooks/rules-of-hooks */
+
+const ResizeHandlers = _ref => {
+  let {
+    element,
+    resizeCellMaskInfo,
+    hideResizeHandlers,
+    isDraggingResizeHandler
+  } = _ref;
+  const {
+    rowIndex,
+    cellIndex,
+    top,
+    height,
+    left,
+    mouseDownEvent,
+    displayType,
+    cell
+  } = resizeCellMaskInfo;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const tablePath = (0, _core.findPath)(editor, element);
+  if (!tablePath) return null;
+  const table = (0, _core.getNode)(editor, tablePath);
+  if (!table) return null;
+  const columns = (0, _hooks.useResizeHandlersContext)() || (0, _helpers.getTableColumns)(editor, element);
+  const rowBottom = top + height;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayType === _constants.RESIZE_HANDLER_ROW && /*#__PURE__*/_react.default.createElement(_rowResizeHandler.default, {
+    initRowBottom: rowBottom,
+    rowIndex: rowIndex,
+    table: element,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), displayType === _constants.RESIZE_HANDLER_FIRST_COLUMN && /*#__PURE__*/_react.default.createElement(_firstColumnLeftResizeHandler.default, {
+    key: "column-0-left",
+    column: columns[0],
+    left: 0,
+    cellIndex: 0,
+    table: element,
+    rowBottoms: rowBottom,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }), displayType === _constants.RESIZE_HANDLER_COLUMN && /*#__PURE__*/_react.default.createElement(_columnResizeHandler.default, {
+    rowBottom: rowBottom,
+    column: element.columns[cellIndex],
+    left: left,
+    cellIndex: cellIndex,
+    table: element,
+    hideResizeHandlers: hideResizeHandlers,
+    mouseDownEvent: mouseDownEvent,
+    adjustingCell: cell,
+    isDraggingResizeHandler: isDraggingResizeHandler
+  }));
+};
+var _default = exports.default = ResizeHandlers;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _useScrollContext = require("../../../../../hooks/use-scroll-context");
+var _mouseEvent = require("../../../../../utils/mouse-event");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+const RowResizeHandler = _ref => {
+  let {
+    rowIndex,
+    initRowBottom = 0,
+    table,
+    hideResizeHandlers,
+    mouseDownEvent,
+    adjustingCell,
+    isDraggingResizeHandler
+  } = _ref;
+  const editor = (0, _slateReact.useSlateStatic)();
+  const [rowBottom, setRowBottom] = (0, _react.useState)(initRowBottom);
+  const [mouseDownInfo, setMouseDownInfo] = (0, _react.useState)({});
+  const [style, setStyle] = (0, _react.useState)({});
+  const row = table.children[rowIndex];
+  const rowHeight = (0, _helpers.getRowHeight)(row, rowIndex);
+  const tableRow = (0, _react.useRef)(rowHeight);
+  const [height, setHeight] = (0, _react.useState)(rowHeight);
+  const scrollContent = (0, _useScrollContext.useScrollContext)();
+  (0, _react.useLayoutEffect)(() => {
+    const mouseDownInfo = (0, _mouseEvent.getMouseDownInfo)(mouseDownEvent, scrollContent.current);
+    setMouseDownInfo(mouseDownInfo);
+    const lastRowOffset = rowIndex === table.children.length - 1 ? -2 : 0;
+    setStyle({
+      top: rowBottom + lastRowOffset
+    });
+  }, [mouseDownEvent, rowBottom, rowIndex, scrollContent, table.children.length]);
+  (0, _react.useEffect)(() => {
+    if (!isDraggingResizeHandler) return;
+    const onMouseMove = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      const mouseMoveInfo = (0, _mouseEvent.getMouseMoveInfo)(event, mouseDownInfo, scrollContent.current);
+      const newHeight = tableRow.current + mouseMoveInfo.displacementY;
+      const validHeight = Math.max(_constants.TABLE_ROW_MIN_HEIGHT, newHeight);
+      setHeight(validHeight);
+      setStyle({
+        top: rowBottom - tableRow.current + validHeight
+      });
+    };
+    const onMouseUp = event => {
+      (0, _mouseEvent.eventStopPropagation)(event);
+      tableRow.current = height;
+      (0, _helpers.updateTableRowHeight)(editor, row, height);
+      (0, _helpers.focusClosestCellWhenJustifyCellSize)(editor, adjustingCell);
+      hideResizeHandlers();
+    };
+    (0, _mouseEvent.registerResizeEvents)({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return () => {
+      (0, _mouseEvent.unregisterResizeEvents)({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDraggingResizeHandler, mouseDownInfo, rowBottom, table, height]);
+  (0, _react.useEffect)(() => {
+    const cell = row.children.filter(cell => !cell.is_combined && (!cell.rowspan || cell.rowspan === 1))[0];
+    if (!cell) return;
+    const rowDom = _slateReact.ReactEditor.toDOMNode(editor, cell);
+    if (!rowDom) return;
+    tableRow.current = rowDom.clientHeight;
+    setRowBottom(initRowBottom);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [row, initRowBottom]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-row-height-just position-absolute resizing",
+    contentEditable: false,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-row-height-just-color-tip"
+  }));
+};
+var _default = exports.default = RowResizeHandler;