@seafile/sdoc-editor 0.3.16 → 0.3.17

package/dist/assets/css/simple-editor.css

@@ -1,6 +1,6 @@
 /* reset common css */
 .sdoc-editor-page-wrapper .dropdown-item,
-.sdoc-context-menu .dropdown-item {
+.sdoc-context-menu .dropdown-item:not(:disabled) {
   color: #212529;
 }
 

package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react';
-import CustomTableSizeDialog from '../../plugins/table/dialog/custom-table-size-dialog';
+import { CustomTableSizeDialog, SplitCellSettingDialog } from '../../plugins/table/dialogs';
 import AddLinkDialog from '../../plugins/link/dialog/add-link-dialog';
 import SelectFileDialog from '../select-file-dialog/index.js';
 import EventBus from '../../../utils/event-bus';
@@ -77,6 +77,10 @@ const InsertElementDialog = _ref => {
       {
         return /*#__PURE__*/React.createElement(CustomTableSizeDialog, props);
       }
+    case ELEMENT_TYPE.TABLE_CELL:
+      {
+        return /*#__PURE__*/React.createElement(SplitCellSettingDialog, props);
+      }
     case ELEMENT_TYPE.LINK:
       {
         return /*#__PURE__*/React.createElement(AddLinkDialog, props);

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

@@ -5,7 +5,7 @@ export { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, DEFAULT_FONT
 export { FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE } from './font';
 export { DIFF_TYPE, ADDED_STYLE, DELETED_STYLE } from './diff-view';
 export { KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS } from './keyboard';
-export { UNDO, REDO, TEXT_STYLE, TEXT_STYLE_MAP, TEXT_STYLE_MORE, TEXT_ALIGN, REMOVE_TABLE, CLEAR_FORMAT, MENUS_CONFIG_MAP, SIDE_TRANSFORM_MENUS_CONFIG, SIDE_INSERT_MENUS_CONFIG } from './menus-config';
+export { UNDO, REDO, TEXT_STYLE, TEXT_STYLE_MAP, TEXT_STYLE_MORE, TEXT_ALIGN, REMOVE_TABLE, COMBINE_CELL, CLEAR_FORMAT, MENUS_CONFIG_MAP, SIDE_TRANSFORM_MENUS_CONFIG, SIDE_INSERT_MENUS_CONFIG } from './menus-config';
 export const HEADERS = [HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6];
 export const HEADER_TITLE_MAP = {
   [TITLE]: 'Title',

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -4,6 +4,7 @@ export const UNDO = 'undo';
 export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
 export const REMOVE_TABLE = 'remove_table';
+export const COMBINE_CELL = 'combine_cell';
 
 // text style
 export const TEXT_STYLE = 'text_style';
@@ -89,6 +90,11 @@ export const MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-delete-table',
     text: 'Delete_table'
   },
+  [COMBINE_CELL]: {
+    id: "sdoc_".concat(COMBINE_CELL),
+    iconClass: 'sdocfont sdoc-merge-cell',
+    text: 'Combine_cell'
+  },
   [TEXT_STYLE]: [{
     id: ITALIC,
     iconClass: 'sdocfont sdoc-italic',

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

@@ -1,4 +1,4 @@
-export const TABLE_MAX_ROWS = 50;
+export const TABLE_MAX_ROWS = 500;
 export const TABLE_MAX_COLUMNS = 50;
 export const EMPTY_SELECTED_RANGE = {
   minRowIndex: -1,

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

@@ -0,0 +1,3 @@
+import CustomTableSizeDialog from './custom-table-size-dialog';
+import SplitCellSettingDialog from './split-cell-setting-dialog';
+export { CustomTableSizeDialog, SplitCellSettingDialog };

package/dist/basic-sdk/extension/plugins/table/dialogs/split-cell-setting-dialog.js

@@ -0,0 +1,99 @@
+import React, { useCallback, useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Row, Col, FormGroup, Label, Input } from 'reactstrap';
+import { useTranslation } from 'react-i18next';
+import { getSelectedInfo, splitCell } from '../helpers';
+const SplitCellSettingDialog = _ref => {
+  let {
+    editor,
+    closeDialog
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    cell
+  } = getSelectedInfo(editor);
+  const {
+    rowspan = 1,
+    colspan = 1
+  } = cell;
+  const [rowNumber, setRowNumber] = useState(rowspan);
+  const [columnNumber, setColumnNumber] = useState(colspan);
+  const CELL_SPLIT_MAX_ROWS = rowspan;
+  const CELL_SPLIT_MAX_COLUMNS = colspan;
+  const [errorMessage, setErrorMessage] = useState('');
+  const onRowNumberChange = useCallback(e => {
+    setRowNumber(e.target.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onColumnNumberChange = useCallback(e => {
+    setColumnNumber(e.target.value);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleSubmit = useCallback(() => {
+    const parsedRowNumber = parseInt(rowNumber);
+    const parsedColumnNumber = parseInt(columnNumber);
+    if (!parsedRowNumber || !parsedColumnNumber || parsedRowNumber < 0 || parsedColumnNumber < 0) {
+      setErrorMessage(t('Please_enter_a_non-negative_integer'));
+      return false;
+    }
+    let targetRowNumber = parsedRowNumber;
+    let targetColumnNumber = parsedColumnNumber;
+    if (parsedRowNumber > CELL_SPLIT_MAX_ROWS) {
+      targetRowNumber = CELL_SPLIT_MAX_ROWS;
+      setRowNumber(targetRowNumber);
+      setErrorMessage(t('The_maximum_row_number_is_{number}').replace('{number}', CELL_SPLIT_MAX_ROWS));
+      return false;
+    }
+    if (parsedColumnNumber > CELL_SPLIT_MAX_COLUMNS) {
+      targetColumnNumber = CELL_SPLIT_MAX_COLUMNS;
+      setColumnNumber(targetColumnNumber);
+      setErrorMessage(t('The_maximum_column_number_is_{number}').replace('{number}', CELL_SPLIT_MAX_COLUMNS));
+      return false;
+    }
+    splitCell(editor, targetRowNumber, targetColumnNumber);
+    closeDialog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowNumber, columnNumber]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    autoFocus: false,
+    toggle: closeDialog,
+    zIndex: 1071,
+    returnFocusAfterClose: true
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: closeDialog
+  }, t('Split_cell')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
+    md: 6
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+    for: "row-number"
+  }, t('Row_number')), /*#__PURE__*/React.createElement(Input, {
+    id: "row-number",
+    name: "row-number",
+    type: "number",
+    min: 1,
+    value: rowNumber,
+    onChange: onRowNumberChange
+  }))), /*#__PURE__*/React.createElement(Col, {
+    md: 6
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+    for: "column-number"
+  }, t('Column_number')), /*#__PURE__*/React.createElement(Input, {
+    id: "column-number",
+    name: "column-number",
+    type: "number",
+    min: 1,
+    value: columnNumber,
+    onChange: onColumnNumberChange
+  })))), errorMessage && /*#__PURE__*/React.createElement(Alert, {
+    className: "mt-2 mb-0",
+    color: "danger"
+  }, t(errorMessage))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    onClick: handleSubmit
+  }, t('Submit'))));
+};
+export default SplitCellSettingDialog;

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

@@ -41,6 +41,18 @@ export const isTableMenuDisabled = (editor, readonly) => {
   if (match) return true;
   return false;
 };
+export const isCombineCellsDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection,
+    tableSelectedRange
+  } = editor;
+  if (!selection) return true;
+  if (!ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE)) {
+    return false;
+  }
+  return true;
+};
 export const generateTableCell = () => {
   return {
     id: slugid.nice(),
@@ -99,9 +111,13 @@ export const generateEmptyTable = (editor, tableProps) => {
     type: ELEMENT_TYPE.TABLE,
     children: children,
     columns,
-    style: {
+    ui: {
       alternate_highlight,
       alternate_highlight_color
+    },
+    style: {
+      gridTemplateColumns: "repeat(".concat(colsCount, ", ").concat(columnWidth, "px)"),
+      gridAutoRows: "minmax(".concat(TABLE_ROW_MIN_HEIGHT, "px, auto)")
     }
   };
 };
@@ -219,6 +235,61 @@ export const insertTableRow = function (editor, table, rowIndex) {
   });
   const focusPath = [...targetPath, 0];
   focusEditor(editor, focusPath);
+
+  // handle cells with the rowspan > 1
+  if (position === TABLE_ELEMENT_POSITION.AFTER) {
+    handleCombinedCellsAfterInsertTableRow(editor, tablePath, table, rowIndex);
+  }
+};
+export const handleCombinedCellsAfterInsertTableRow = (editor, tablePath, table, rowIndex) => {
+  // important background info: the new row is inserted after rowIndex
+  const cells = table.children[rowIndex].children;
+  for (let i = 0, len = cells.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = cells[i];
+    if (is_combined) {
+      for (let ri = rowIndex - 1; ri >= 0; ri--) {
+        const {
+          is_combined: ri_is_combined,
+          rowspan: ri_rowspan,
+          colspan: ri_colspan
+        } = table.children[ri].children[i];
+        if (!ri_is_combined && ri + ri_rowspan - 1 > rowIndex) {
+          Transforms.setNodes(editor, {
+            rowspan: ri_rowspan + 1
+          }, {
+            at: [...tablePath, ri, i]
+          });
+          for (let j = 0; j < ri_colspan; j++) {
+            Transforms.setNodes(editor, {
+              'is_combined': true
+            }, {
+              at: [...tablePath, rowIndex + 1, i + j]
+            });
+          }
+          break;
+        }
+      }
+    } else {
+      if (rowspan > 1) {
+        Transforms.setNodes(editor, {
+          rowspan: rowspan + 1
+        }, {
+          at: [...tablePath, rowIndex, i]
+        });
+        for (let j = 0; j < colspan; j++) {
+          Transforms.setNodes(editor, {
+            'is_combined': true
+          }, {
+            at: [...tablePath, rowIndex + 1, i + j]
+          });
+        }
+      }
+    }
+  }
 };
 export const insertTableColumn = function (editor, table, columnIndex) {
   let position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : TABLE_ELEMENT_POSITION.AFTER;
@@ -238,6 +309,60 @@ export const insertTableColumn = function (editor, table, columnIndex) {
   }
   const focusPath = [...tablePath, 0, newCellIndex, 0];
   focusEditor(editor, focusPath);
+
+  // handle cells with the colspan > 1
+  if (position === TABLE_ELEMENT_POSITION.AFTER) {
+    handleCombinedCellsAfterInsertTableColumn(editor, tablePath, table, columnIndex);
+  }
+};
+export const handleCombinedCellsAfterInsertTableColumn = (editor, tablePath, table, columnIndex) => {
+  // important background info: the new column is inserted after columnIndex
+  for (let i = 0, len = table.children.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = table.children[i].children[columnIndex];
+    if (is_combined) {
+      for (let ci = columnIndex - 1; ci >= 0; ci--) {
+        const {
+          is_combined: ci_is_combined,
+          rowspan: ci_rowspan,
+          colspan: ci_colspan
+        } = table.children[i].children[ci];
+        if (!ci_is_combined && ci + ci_colspan - 1 > columnIndex) {
+          Transforms.setNodes(editor, {
+            colspan: ci_colspan + 1
+          }, {
+            at: [...tablePath, i, ci]
+          });
+          for (let j = 0; j < ci_rowspan; j++) {
+            Transforms.setNodes(editor, {
+              'is_combined': true
+            }, {
+              at: [...tablePath, i + j, columnIndex + 1]
+            });
+          }
+          break;
+        }
+      }
+    } else {
+      if (colspan > 1) {
+        Transforms.setNodes(editor, {
+          colspan: colspan + 1
+        }, {
+          at: [...tablePath, i, columnIndex]
+        });
+        for (let j = 0; j < rowspan; j++) {
+          Transforms.setNodes(editor, {
+            'is_combined': true
+          }, {
+            at: [...tablePath, i + j, columnIndex + 1]
+          });
+        }
+      }
+    }
+  }
 };
 export const insertTableElement = function (editor, type) {
   let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TABLE_ELEMENT_POSITION.AFTER;
@@ -260,6 +385,12 @@ export const insertTableElement = function (editor, type) {
       Transforms.insertNodes(editor, row, {
         at: targetPath
       });
+      // handle combined cells
+      if (!(rowIndex == 0 && position === TABLE_ELEMENT_POSITION.BEFORE)) {
+        const targetRowIndex = position === TABLE_ELEMENT_POSITION.AFTER ? rowIndex : rowIndex - 1;
+        const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+        handleCombinedCellsAfterInsertTableRow(editor, tablePath, currentTable, targetRowIndex);
+      }
     }
     const focusPath = [...targetPath, cellIndex];
     focusEditor(editor, focusPath);
@@ -279,12 +410,121 @@ export const insertTableElement = function (editor, type) {
           at: newCellPath
         });
       }
+      // handle combined cells
+      if (!(cellIndex == 0 && position === TABLE_ELEMENT_POSITION.BEFORE)) {
+        const targetColumnIndex = position === TABLE_ELEMENT_POSITION.AFTER ? cellIndex : cellIndex - 1;
+        const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+        handleCombinedCellsAfterInsertTableColumn(editor, tablePath, currentTable, targetColumnIndex);
+      }
     }
     const focusPath = [...tablePath, rowIndex, cellIndex + 1, 0];
     focusEditor(editor, focusPath);
     return;
   }
 };
+export const combineCells = editor => {
+  const {
+    tablePath
+  } = getSelectedInfo(editor);
+  const {
+    minColIndex,
+    maxColIndex,
+    minRowIndex,
+    maxRowIndex
+  } = editor.tableSelectedRange;
+  let newCellContent = [];
+  for (let i = minRowIndex; i < maxRowIndex + 1; i++) {
+    for (let j = minColIndex; j < maxColIndex + 1; j++) {
+      let nodePath = [...tablePath, i, j];
+      let node = Editor.node(editor, nodePath);
+      if (node[0].is_combined) {
+        continue;
+      }
+      Transforms.setNodes(editor, {
+        'is_combined': true
+      }, {
+        at: nodePath
+      });
+      newCellContent = newCellContent.concat(node[0].children);
+    }
+  }
+  const targetCellPath = [...tablePath, minRowIndex, minColIndex];
+  const newCell = generateTableCell();
+  newCell.children = newCellContent;
+  newCell.rowspan = maxRowIndex - minRowIndex + 1;
+  newCell.colspan = maxColIndex - minColIndex + 1;
+  // keep row.chilren.length not changed
+  Transforms.removeNodes(editor, {
+    at: targetCellPath
+  });
+  Transforms.insertNodes(editor, newCell, {
+    at: targetCellPath
+  });
+  focusEditor(editor, targetCellPath);
+
+  // for clicking the 'combine cell' icon in the toolbar
+  const eventBus = EventBus.getInstance();
+  eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+};
+export const splitCell = (editor, rowNumber, columnNumber) => {
+  if (rowNumber == 1 && columnNumber == 1) {
+    return;
+  }
+  const {
+    cell,
+    rowIndex,
+    cellIndex,
+    cellPath,
+    tablePath
+  } = getSelectedInfo(editor);
+  const {
+    rowspan,
+    colspan
+  } = cell;
+  const rowspanBase = Math.floor(rowspan / rowNumber);
+  const rowspanLeft = rowspan % rowNumber;
+  const colspanBase = Math.floor(colspan / columnNumber);
+  const colspanLeft = colspan % columnNumber;
+  const cellNumber = rowNumber * columnNumber;
+  const dataBlockNumber = Math.ceil(cell.children.length / cellNumber);
+  let firstNewCell;
+  let rowspanSum = 0;
+  for (let i = 0; i < rowNumber; i++) {
+    let newRowSpan = rowspanBase + (i + 1 <= rowspanLeft ? 1 : 0);
+    let colspanSum = 0;
+    for (let j = 0; j < columnNumber; j++) {
+      const newCell = generateTableCell();
+      let startIndex = (i * columnNumber + j) * dataBlockNumber;
+      if (startIndex < cell.children.length) {
+        let endIndex = Math.min(startIndex + dataBlockNumber, cell.children.length);
+        newCell.children = cell.children.slice(startIndex, endIndex);
+      }
+      newCell.rowspan = newRowSpan;
+      newCell.colspan = colspanBase + (j + 1 <= colspanLeft ? 1 : 0);
+      const newRowIndex = rowIndex + rowspanSum;
+      const newCellIndex = cellIndex + colspanSum;
+      const targetCellPath = [...tablePath, newRowIndex, newCellIndex];
+      if (i == 0 && j == 0) {
+        firstNewCell = newCell;
+      } else {
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+      colspanSum += newCell.colspan;
+    }
+    rowspanSum += newRowSpan;
+  }
+  Transforms.removeNodes(editor, {
+    at: cellPath
+  });
+  Transforms.insertNodes(editor, firstNewCell, {
+    at: cellPath
+  });
+};
 export const removeTable = (editor, path) => {
   let validPath = path;
   if (!validPath) {
@@ -336,6 +576,7 @@ export const removeTableElement = (editor, type) => {
       focusEditor(editor, focusPath);
       return;
     }
+    handleCombinedCellsBeforeDeleteTableRow(editor, tablePath, table, rowIndex);
     Transforms.removeNodes(editor, {
       at: rowPath
     });
@@ -378,6 +619,7 @@ export const removeTableElement = (editor, type) => {
     const newColumns = columns.slice(0);
     newColumns.splice(cellIndex, 1);
     updateColumnWidth(editor, table, newColumns);
+    handleCombinedCellsBeforeDeleteTableColumn(editor, tablePath, table, cellIndex);
     for (let i = 0; i < tableSize[0]; i++) {
       const cellPath = [...tablePath, i, cellIndex];
       Transforms.removeNodes(editor, {
@@ -390,6 +632,87 @@ export const removeTableElement = (editor, type) => {
     return;
   }
 };
+
+// handle combined cells before deleting a row
+export const handleCombinedCellsBeforeDeleteTableRow = (editor, tablePath, table, rowIndex) => {
+  const cells = table.children[rowIndex].children;
+  for (let i = 0, len = cells.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = cells[i];
+    if (is_combined) {
+      for (let ri = rowIndex - 1; ri >= 0; ri--) {
+        const {
+          is_combined: ri_is_combined,
+          rowspan: ri_rowspan
+        } = table.children[ri].children[i];
+        if (!ri_is_combined && ri + ri_rowspan - 1 >= rowIndex) {
+          Transforms.setNodes(editor, {
+            rowspan: ri_rowspan - 1
+          }, {
+            at: [...tablePath, ri, i]
+          });
+          break;
+        }
+      }
+    } else {
+      if (rowspan > 1) {
+        const targetCellPath = [...tablePath, rowIndex + 1, i];
+        const newCell = generateTableCell();
+        newCell.rowspan = rowspan - 1;
+        newCell.colspan = colspan;
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+    }
+  }
+};
+
+// handle combined cells before deleting a column
+export const handleCombinedCellsBeforeDeleteTableColumn = (editor, tablePath, table, columnIndex) => {
+  for (let i = 0, len = table.children.length; i < len; i++) {
+    const {
+      is_combined,
+      rowspan,
+      colspan
+    } = table.children[i].children[columnIndex];
+    if (is_combined) {
+      for (let ci = columnIndex - 1; ci >= 0; ci--) {
+        const {
+          is_combined: ci_is_combined,
+          colspan: ci_colspan
+        } = table.children[i].children[ci];
+        if (!ci_is_combined && ci + ci_colspan - 1 >= columnIndex) {
+          Transforms.setNodes(editor, {
+            colspan: ci_colspan - 1
+          }, {
+            at: [...tablePath, i, ci]
+          });
+          break;
+        }
+      }
+    } else {
+      if (colspan > 1) {
+        const targetCellPath = [...tablePath, i, columnIndex + 1];
+        const newCell = generateTableCell();
+        newCell.rowspan = rowspan;
+        newCell.colspan = colspan - 1;
+        Transforms.removeNodes(editor, {
+          at: targetCellPath
+        });
+        Transforms.insertNodes(editor, newCell, {
+          at: targetCellPath
+        });
+      }
+    }
+  }
+};
 export const setTableSelectedRange = (editor, range) => {
   if (range) {
     editor.tableSelectedRange = range;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/combine-cells.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useState } from 'react';
+import { MenuItem } from '../../../../commons';
+import { MENUS_CONFIG_MAP, COMBINE_CELL } from '../../../../constants';
+import { isCombineCellsDisabled, combineCells } from '../../helpers';
+const CombineCells = _ref => {
+  let {
+    isRichEditor,
+    className,
+    editor,
+    readonly
+  } = _ref;
+  const [disabled, setDisabled] = useState(false);
+  useEffect(() => {
+    const disabled = isCombineCellsDisabled(editor, readonly);
+    setDisabled(disabled);
+  }, [editor, editor.tableSelectedRange, readonly]);
+  const _combineCells = useCallback(() => {
+    if (readonly) return;
+    combineCells(editor);
+  }, [editor, readonly]);
+  const menuConfig = MENUS_CONFIG_MAP[COMBINE_CELL];
+  const props = _objectSpread(_objectSpread({
+    isRichEditor,
+    disabled: disabled,
+    isActive: false
+  }, menuConfig), {}, {
+    onMouseDown: _combineCells
+  });
+  return /*#__PURE__*/React.createElement(MenuItem, props);
+};
+export default CombineCells;

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

@@ -1,7 +1,3 @@
-.sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
-  width: 36px;
-}
-
 .sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
   width: 24px;
 }

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

@@ -4,6 +4,7 @@ import { MenuGroup } from '../../../../commons';
 import { isAllInTable } from '../../helpers';
 import CellBackgroundColorMenu from './cell-bg-color-menu';
 import CellTextAlignMenu from './cell-text-align-menu';
+import CombineCells from './combine-cells';
 import RemoveTable from './remove-table-menu';
 import TableColumnMenu from './table-column-menu';
 import TableRowMenu from './table-row-menu';
@@ -32,6 +33,11 @@ const ActiveTableMenu = _ref => {
     isRichEditor: isRichEditor,
     className: className,
     readonly: readonly
+  }), /*#__PURE__*/React.createElement(CombineCells, {
+    editor: editor,
+    isRichEditor: isRichEditor,
+    className: className,
+    readonly: readonly
   }), /*#__PURE__*/React.createElement(RemoveTable, {
     editor: editor,
     isRichEditor: isRichEditor,

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

@@ -4,9 +4,11 @@ import ObjectUtils from '../../../../../utils/object-utils';
 import { ElementPopover } from '../../../../commons';
 import { ELEMENT_TYPE } from '../../../../constants';
 import { getSelectedNodeByType } from '../../../../core';
-import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
-import { insertTableElement, removeTableElement } from '../../helpers';
+import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, EMPTY_SELECTED_RANGE } from '../../constants';
+import { insertTableElement, removeTableElement, getSelectedInfo, combineCells } from '../../helpers';
 import InsertTableElement from './insert-table-element';
+import EventBus from '../../../../../utils/event-bus';
+import { INTERNAL_EVENT } from '../../../../../constants';
 import './index.css';
 class TableContextMenu extends React.Component {
   constructor(props) {
@@ -51,10 +53,22 @@ class TableContextMenu extends React.Component {
         className: "dropdown-item"
       }, this.props.t(title));
     };
+    this.combineCells = () => {
+      const {
+        editor
+      } = this.props;
+      combineCells(editor);
+    };
+    this.toggleSplitCellSettingDialog = () => {
+      this.eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
+        type: ELEMENT_TYPE.TABLE_CELL
+      });
+    };
     this.state = {
       contextStyle: {}
     };
     this.position = null;
+    this.eventBus = EventBus.getInstance();
   }
   componentDidMount() {
     this.position = this.props.contextMenuPosition;
@@ -75,7 +89,8 @@ class TableContextMenu extends React.Component {
       contextStyle
     } = this.state;
     const {
-      editor
+      editor,
+      t
     } = this.props;
     const currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
     if (!currentTable) return null;
@@ -89,6 +104,8 @@ class TableContextMenu extends React.Component {
     const selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
     const canAddRowsCount = currentRowsCount + selectedRows > TABLE_MAX_ROWS ? TABLE_MAX_ROWS - currentRowsCount : selectedRows;
     const canAddColsCount = currentColumnsCount + selectedCols > TABLE_MAX_COLUMNS ? TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
+    const enableCombineCell = !ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE);
+    const enableSplitCell = !enableCombineCell;
     return /*#__PURE__*/React.createElement(ElementPopover, {
       className: "sdoc-context-menu"
     }, /*#__PURE__*/React.createElement("div", {
@@ -121,7 +138,17 @@ class TableContextMenu extends React.Component {
       insertTableElement: this.insertTableElement
     }), /*#__PURE__*/React.createElement("div", {
       className: 'seafile-divider dropdown-divider'
-    }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Delete_table')));
+    }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Delete_table'), /*#__PURE__*/React.createElement("div", {
+      className: 'seafile-divider dropdown-divider'
+    }), /*#__PURE__*/React.createElement("button", {
+      className: "dropdown-item",
+      disabled: !enableCombineCell,
+      onMouseDown: this.combineCells
+    }, t('Combine_cell')), /*#__PURE__*/React.createElement("button", {
+      className: "dropdown-item",
+      disabled: !enableSplitCell,
+      onMouseDown: this.toggleSplitCellSettingDialog
+    }, t('Split_cell'))));
   }
 }
 export default withTranslation('sdoc-editor')(TableContextMenu);

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

@@ -40,18 +40,16 @@
 
 .sdoc-table-wrapper .sdoc-table-container {
   width: fit-content;
-  display: table;
+  display: grid;
   overflow: hidden;
   cursor: text;
 }
 
 .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;
@@ -59,14 +57,6 @@
   vertical-align: top;
 }
 
-.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;
   position: relative;

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

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import throttle from 'lodash.throttle';
@@ -7,7 +8,7 @@ import { EMPTY_SELECTED_RANGE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../co
 import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
-import { getTableColumns, setTableSelectedRange, getFirstTableCell } from '../helpers';
+import { getTableColumns, setTableSelectedRange, getFirstTableCell, getRowHeight } from '../helpers';
 import ObjectUtils from '../../../../utils/object-utils';
 import ResizeHandlers from './resize-handlers';
 import { registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
@@ -17,7 +18,7 @@ import { findPath } from '../../../core';
 import './index.css';
 import './alternate-color.css';
 const Table = _ref => {
-  var _element$style, _element$style2;
+  var _element$ui, _element$ui2;
   let {
     className,
     attributes,
@@ -29,6 +30,8 @@ const Table = _ref => {
   const table = useRef(null);
   const [startRowIndex, setStartRowIndex] = useState(0);
   const [startColIndex, setStartColIndex] = useState(0);
+  const [startRowSpan, setStartRowSpan] = useState(1);
+  const [startColSpan, setStartColSpan] = useState(1);
   const [isSettingSelectRange, setIsSettingSelectRange] = useState(false);
   const [selectedRange, setSelectedRange] = useState(EMPTY_SELECTED_RANGE);
   const oldColumns = getTableColumns(editor, element);
@@ -38,8 +41,11 @@ const Table = _ref => {
     if (event.button !== 0) return; // right click not deal
     setIsSettingSelectRange(true);
     const tableCell = getFirstTableCell(event.target);
+    const 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(EMPTY_SELECTED_RANGE);
     setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
 
@@ -49,6 +55,8 @@ const Table = _ref => {
     setIsSettingSelectRange(false);
     setStartColIndex(0);
     setStartRowIndex(0);
+    setStartRowSpan(1);
+    setStartColSpan(1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -74,11 +82,14 @@ const Table = _ref => {
         const tableCell = getFirstTableCell(event.target);
         const endRowIndex = Number(tableCell.getAttribute('row-index'));
         const endColIndex = Number(tableCell.getAttribute('cell-index'));
+        const cellData = tableCell.style.gridArea.split(' / ');
+        const endRowSpan = Number(cellData[2].split(' ')[1]);
+        const endColSpan = Number(cellData[3].split(' ')[1]);
         const newSelectedRange = {
           minRowIndex: Math.min(startRowIndex, endRowIndex),
-          maxRowIndex: Math.max(startRowIndex, endRowIndex),
+          maxRowIndex: startRowIndex < endRowIndex ? endRowIndex + endRowSpan - 1 : startRowIndex + startRowSpan - 1,
           minColIndex: Math.min(startColIndex, endColIndex),
-          maxColIndex: Math.max(startColIndex, endColIndex)
+          maxColIndex: startColIndex < endColIndex ? endColIndex + endColSpan - 1 : startColIndex + startColSpan - 1
         };
         if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
           event.preventDefault();
@@ -97,14 +108,18 @@ const Table = _ref => {
         // same cell
         if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) {
           setSelectedRange(EMPTY_SELECTED_RANGE);
+          setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
           return;
         }
         setSelectedRange(newSelectedRange);
+        setTableSelectedRange(editor, newSelectedRange);
       }, 200);
       const onMouseUp = event => {
+        /*
         if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
           setTableSelectedRange(editor, selectedRange);
         }
+        */
         resetState();
       };
       registerResizeEvents({
@@ -157,6 +172,11 @@ const Table = _ref => {
     'sdoc-table-selected': isSelected,
     'sdoc-table-selected-range': !ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)
   });
+  let style = element.style ? _objectSpread({}, element.style) : {};
+  const columnWidthList = columns.map(item => "".concat(item.width, "px"));
+  style.gridTemplateColumns = columnWidthList.join(' ');
+  const rowHeightList = element.children.map((item, index) => getRowHeight(item, index));
+  style.gridAutoRows = rowHeightList.map(item => "minmax(".concat(item, "px, auto)")).join(' ');
   return /*#__PURE__*/React.createElement(TableSelectedRangeContext.Provider, {
     value: selectedRange
   }, /*#__PURE__*/React.createElement(ResizeHandlersContext.Provider, {
@@ -171,8 +191,9 @@ const Table = _ref => {
     setSelectedRange: setSelectedRangeByClick
   }), /*#__PURE__*/React.createElement("div", {
     className: classnames(tableContainerClassName, {
-      [TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.alternate_highlight_color]]: element === null || element === void 0 ? void 0 : (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.alternate_highlight
+      [TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$ui = element.ui) === null || _element$ui === void 0 ? void 0 : _element$ui.alternate_highlight_color]]: element === null || element === void 0 ? void 0 : (_element$ui2 = element.ui) === null || _element$ui2 === void 0 ? void 0 : _element$ui2.alternate_highlight
     }),
+    style: style,
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
@@ -192,12 +213,19 @@ function renderTable(props) {
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const editor = useSlateStatic();
+    const columns = getTableColumns(editor, element);
+    let style = element.style ? _objectSpread({}, element.style) : {};
+    const columnWidthList = columns.map(item => "".concat(item.width, "px"));
+    style.gridTemplateColumns = columnWidthList.join(' ');
+    const rowHeightList = element.children.map((item, index) => getRowHeight(item, index));
+    style.gridAutoRows = rowHeightList.map(item => "minmax(".concat(item, "px, auto)")).join(' ');
     return /*#__PURE__*/React.createElement(TableRoot, {
-      columns: getTableColumns(editor, element),
+      columns: columns,
       attributes: attributes
     }, /*#__PURE__*/React.createElement("div", {
       className: classnames('sdoc-table-container', attributes.className, className),
-      "data-id": element.id
+      "data-id": element.id,
+      style: style
     }, children));
   }
   return /*#__PURE__*/React.createElement(Table, props);

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

@@ -21,8 +21,6 @@ const TableCell = _ref => {
   const pathLength = cellPath.length;
   const rowIndex = cellPath[pathLength - 2];
   const cellIndex = cellPath[pathLength - 1];
-  const column = columns ? columns[cellIndex] : {};
-  const columnWidth = (column === null || column === void 0 ? void 0 : column.width) || 0;
   const {
     minColIndex,
     maxColIndex,
@@ -55,12 +53,22 @@ const TableCell = _ref => {
       style['backgroundColor'] = isSelected ? colorBlend(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 = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-    style: _objectSpread(_objectSpread(_objectSpread({}, element.style), style), {}, {
-      minWidth: columnWidth,
-      width: columnWidth,
-      maxWidth: columnWidth
-    }),
+    style: _objectSpread(_objectSpread({}, element.style), style),
     className: classnames('table-cell', attributes.className, {
       'cell-selected': isSelected,
       'cell-light-height-left-border': isSelectedFirstCell,
@@ -86,8 +94,11 @@ function renderTableCell(props) {
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const editor = useSlateStatic();
-    const cellPath = findPath(editor, element);
+    const cellPath = findPath(editor, element, [0, 0]);
     if (!cellPath) return null;
+    const pathLength = cellPath.length;
+    const rowIndex = cellPath[pathLength - 2];
+    const cellIndex = cellPath[pathLength - 1];
 
     // const cellValue = element;
     let style = attributes.style || {};
@@ -97,14 +108,22 @@ function renderTableCell(props) {
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.BACKGROUND_COLOR) && element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR]) {
       style['backgroundColor'] = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];
     }
-    const column = getCellColumn(editor, element);
-    const width = column.width;
+    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 = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-      style: _objectSpread(_objectSpread(_objectSpread({}, element.style), style), {}, {
-        minWidth: width,
-        width: width,
-        maxWidth: width
-      }),
+      style: _objectSpread(_objectSpread({}, element.style), style),
       className: classnames('table-cell', attributes.className),
       "data-id": element.id
     }), children);

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

@@ -1,121 +1,8 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 { findPath } from '../../../core';
-import { TABLE_ROW_MIN_HEIGHT } from '../constants';
-import { getRowHeight, updateTableRowHeight } from '../helpers';
-import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
-import { useSettingSelectRangeContext, useResizeHandlersContext } from './hooks';
-import { useScrollContext } from '../../../../hooks/use-scroll-context';
-const TableRow = _ref => {
-  let {
-    element,
-    attributes,
-    children
-  } = _ref;
-  const editor = useSlateStatic();
-  const isSettingSelectRange = useSettingSelectRangeContext();
-  const columns = useResizeHandlersContext();
-  const [isResizing, setIsResizing] = useState(false);
-  const [mouseDownInfo, setMouseDownInfo] = useState({});
-  const rowPath = findPath(editor, element);
-  const pathLength = rowPath ? rowPath.length : 0;
-  const rowIndex = rowPath ? rowPath[pathLength - 1] : -1;
-  const rowHeight = getRowHeight(element, rowIndex);
-  const tableRow = useRef(rowHeight);
-  const [height, setHeight] = useState(rowHeight);
-  const scrollContent = useScrollContext();
-  const onMouseDown = useCallback(event => {
-    eventStopPropagation(event);
-    const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
-    setMouseDownInfo(mouseDownInfo);
-    setIsResizing(true);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (!isResizing) return;
-    const onMouseMove = event => {
-      eventStopPropagation(event);
-      const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, scrollContent.current);
-      const newHeight = tableRow.current + mouseMoveInfo.displacementY;
-      const validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
-      setHeight(validHeight);
-    };
-    const onMouseUp = event => {
-      eventStopPropagation(event);
-      setIsResizing(false);
-      tableRow.current = height;
-      updateTableRowHeight(editor, element, height);
-    };
-    registerResizeEvents({
-      'mousemove': onMouseMove,
-      'mouseup': onMouseUp
-    });
-    return () => {
-      unregisterResizeEvents({
-        'mousemove': onMouseMove,
-        'mouseup': onMouseUp
-      });
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isResizing, mouseDownInfo, element, attributes, height]);
-  useEffect(() => {
-    const 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, !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"
-  })));
-};
+import React from 'react';
 function renderTableRow(props) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const readOnly = useReadOnly();
-  if (readOnly) {
-    const {
-      attributes,
-      children,
-      element
-    } = props;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const editor = useSlateStatic();
-    const rowPath = findPath(editor, element);
-    if (!rowPath) return null;
-    const pathLength = rowPath.length;
-    const rowIndex = rowPath[pathLength - 1];
-    const {
-      style = {}
-    } = element;
-    const height = getRowHeight(element, rowIndex);
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-      className: classnames('table-row', attributes.className),
-      style: _objectSpread(_objectSpread(_objectSpread({}, attributes.style), style), {}, {
-        height,
-        maxHeight: 'fit-content'
-      }),
-      "data-id": element.id
-    }), children);
-  }
-  return /*#__PURE__*/React.createElement(TableRow, props);
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 export default renderTableRow;

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

@@ -6,7 +6,7 @@ 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';
-const ResizeHandler = _ref => {
+const ColumnResizeHandler = _ref => {
   let {
     column,
     left: initLeft,
@@ -115,4 +115,4 @@ const ResizeHandler = _ref => {
     className: "table-cell-width-just-color-tip"
   }));
 };
-export default ResizeHandler;
+export default ColumnResizeHandler;

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import FirstColumnResizeHandler from './first-column-left-resize-handler';
-import ResizeHandler from './resize-handler';
+import ColumnResizeHandler from './column-resize-handler';
+import RowResizeHandler from './row-resize-handler';
 import { getNode, findPath } from '../../../../core';
 import { useResizeHandlersContext } from '../hooks';
-import { getTableColumns } from '../../helpers';
+import { getRowHeight, getTableColumns } from '../../helpers';
+import { TABLE_ROW_STYLE } from '../../constants';
 const ResizeHandlers = _ref => {
   let {
     element
@@ -15,8 +17,19 @@ const ResizeHandlers = _ref => {
   if (!tablePath) return null;
   const table = getNode(editor, tablePath);
   if (!table) return null;
+  const rows = element.children;
+  let rowBottom = 0;
   let columnLeft = 0;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, rows.map((row, index) => {
+    rowBottom += getRowHeight(row, index);
+    return /*#__PURE__*/React.createElement(RowResizeHandler, {
+      key: index,
+      row: row,
+      rowBottom: rowBottom,
+      index: index,
+      element: element
+    });
+  }), /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
     key: "column-0-left",
     column: columns[0],
     left: 0,
@@ -24,7 +37,7 @@ const ResizeHandlers = _ref => {
     element: element
   }), columns.map((column, columnIndex) => {
     columnLeft = columnLeft + column.width;
-    return /*#__PURE__*/React.createElement(ResizeHandler, {
+    return /*#__PURE__*/React.createElement(ColumnResizeHandler, {
       key: columnIndex,
       column: column,
       left: columnLeft,

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

@@ -0,0 +1,89 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import { useSlateStatic } from '@seafile/slate-react';
+import { ReactEditor } from '@seafile/slate-react';
+import { TABLE_ROW_MIN_HEIGHT } from '../../constants';
+import { getRowHeight, updateTableRowHeight } from '../../helpers';
+import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
+import { useScrollContext } from '../../../../../hooks/use-scroll-context';
+const RowResizeHandler = _ref => {
+  let {
+    row,
+    index,
+    rowBottom: initRowBottom,
+    element
+  } = _ref;
+  const editor = useSlateStatic();
+  const [rowBottom, setRowBottom] = useState(initRowBottom);
+  const [isResizing, setIsResizing] = useState(false);
+  const [mouseDownInfo, setMouseDownInfo] = useState({});
+  const [style, setStyle] = useState({});
+  const rowHeight = getRowHeight(row, index);
+  const tableRow = useRef(rowHeight);
+  const [height, setHeight] = useState(rowHeight);
+  const scrollContent = useScrollContext();
+  const onMouseDown = useCallback(event => {
+    eventStopPropagation(event);
+    const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
+    setMouseDownInfo(mouseDownInfo);
+    setStyle({
+      top: initRowBottom - 2.5
+    });
+    setIsResizing(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (!isResizing) return;
+    const onMouseMove = event => {
+      eventStopPropagation(event);
+      const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, scrollContent.current);
+      const newHeight = tableRow.current + mouseMoveInfo.displacementY;
+      const validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
+      setHeight(validHeight);
+      setStyle({
+        top: rowBottom - tableRow.current + validHeight - 2.5
+      });
+    };
+    const onMouseUp = event => {
+      eventStopPropagation(event);
+      setIsResizing(false);
+      tableRow.current = height;
+      updateTableRowHeight(editor, row, height);
+    };
+    registerResizeEvents({
+      'mousemove': onMouseMove,
+      'mouseup': onMouseUp
+    });
+    return () => {
+      unregisterResizeEvents({
+        'mousemove': onMouseMove,
+        'mouseup': onMouseUp
+      });
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isResizing, mouseDownInfo, rowBottom, element, height]);
+  useEffect(() => {
+    const cell = row.children.filter(cell => !cell.is_combined && (!cell.rowspan || cell.rowspan == 1))[0];
+    if (!cell) return;
+    const rowDom = ReactEditor.toDOMNode(editor, cell);
+    if (!rowDom) return;
+    tableRow.current = rowDom.clientHeight;
+    setRowBottom(initRowBottom - height + tableRow.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [row, initRowBottom]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('table-row-height-just position-absolute', {
+      'resizing': isResizing
+    }),
+    contentEditable: false,
+    style: isResizing ? style : {
+      top: rowBottom - 2.5
+    },
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "table-row-height-just-color-tip"
+  }));
+};
+export default RowResizeHandler;

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

@@ -28,24 +28,23 @@ const RowHeader = _ref => {
   const currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
   const currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
   const pathLength = currentCellPath.length;
+  const updateRowHeight = () => {
+    const cell = row.children.filter(cell => !cell.is_combined && (!cell.rowspan || cell.rowspan == 1))[0];
+    if (!cell) return;
+    const rowDom = ReactEditor.toDOMNode(editor, cell);
+    if (!rowDom) return;
+    if (rowHeight === rowDom.clientHeight) return;
+    setRowHeight(rowDom.clientHeight);
+  };
   useEffect(() => {
     if (elementHasImage(row)) {
-      const time = setTimeout(() => {
-        // There is a delay in image loading
-        const rowDom = ReactEditor.toDOMNode(editor, row);
-        if (!rowDom) return;
-        if (rowHeight === rowDom.clientHeight) return;
-        setRowHeight(rowDom.clientHeight);
-      }, 300);
+      // There is a delay in image loading
+      const time = setTimeout(updateRowHeight, 300);
       return () => {
         clearTimeout(time);
       };
     }
-    const rowDom = ReactEditor.toDOMNode(editor, row);
-    if (!rowDom) return;
-    if (rowHeight === rowDom.clientHeight) return;
-    setRowHeight(rowDom.clientHeight);
-
+    updateRowHeight();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columns, row, index]);
   const onMouseMove = useCallback(event => {
@@ -90,7 +89,7 @@ const RowHeader = _ref => {
       'range-selected-tip': !isSelectedARow && isSelectedSomeRow || currentCellPath[pathLength - 2] === index
     }),
     style: {
-      height: index === 0 ? rowHeight - 1 : rowHeight
+      height: rowHeight + 1
     },
     ref: rowHeaderRef,
     onClick: () => selectRange(index),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/en/sdoc-editor.json

@@ -417,5 +417,11 @@
   "Freezed": "Freezed",
   "Callout": "Callout",
   "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
-  "Please_enter...": "Please enter..."
+  "Please_enter...": "Please enter...",
+  "Combine_cell": "Combine cells",
+  "Split_cell": "Split cell",
+  "Row_number": "Row number",
+  "Column_number": "Column number",
+  "The_maximum_row_number_is_{number}": "The maximum row number is {number}",
+  "The_maximum_column_number_is_{number}": "The maximum column number is {number}"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -417,5 +417,11 @@
   "Freezed": "已冻结",
   "Callout": "高亮块",
   "The_current_location_does_not_support_pasting": "当前位置不支持粘贴",
-  "Please_enter...": "请输入..."
+  "Please_enter...": "请输入...",
+  "Combine_cell": "合并单元格",
+  "Split_cell": "拆分单元格",
+  "Row_number": "行数",
+  "Column_number": "列数",
+  "The_maximum_row_number_is_{number}": "最大行数为 {number}",
+  "The_maximum_column_number_is_{number}": "最大列数为 {number}"
 }