@seafile/sdoc-editor 0.1.52 → 0.1.54

package/dist/basic-sdk/editor.js

@@ -9,6 +9,9 @@ import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { useCursors } from './cursor/use-cursors';
+import EventBus from './utils/event-bus';
+import { EXTERNAL_EVENT } from '../constants';
+import { isAllInTable } from './extension/plugins/table/helpers';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -45,6 +48,7 @@ var SDocEditor = function SDocEditor(_ref) {
   var eventProxy = useMemo(function () {
     return new EventProxy(editor);
   }, []);
+  var eventBus = EventBus.getInstance();
 
   // useMount: init socket connection
   useEffect(function () {
@@ -64,7 +68,7 @@ var SDocEditor = function SDocEditor(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onContextMenu = useCallback(function (event) {
-    if (editor.isAllInTable()) {
+    if (isAllInTable(editor)) {
       event.preventDefault();
       var contextMenuPosition = {
         left: event.clientX,
@@ -80,6 +84,12 @@ var SDocEditor = function SDocEditor(_ref) {
     setContextMenu(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var onMouseDown = useCallback(function (event) {
+    if (event.button === 0) {
+      eventBus.dispatch(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -102,7 +112,8 @@ var SDocEditor = function SDocEditor(_ref) {
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,
     cursors: cursors,
-    onContextMenu: onContextMenu
+    onContextMenu: onContextMenu,
+    onMouseDown: onMouseDown
   })))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
     editor: editor,
     contextMenuPosition: menuPosition

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
+var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP, _TABLE_ELEMENT_SPAN;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
 import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
@@ -96,6 +96,7 @@ export var TABLE_ELEMENT = {
   COLUMN: 'column',
   CELL: 'cell'
 };
+export var TABLE_ELEMENT_SPAN = (_TABLE_ELEMENT_SPAN = {}, _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.TABLE, 'table'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.ROW, 'tr'), _defineProperty(_TABLE_ELEMENT_SPAN, TABLE_ELEMENT.CELL, 'td'), _TABLE_ELEMENT_SPAN);
 export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'

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

@@ -5,6 +5,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import ModalPortal from '../../../../components/modal-portal';
 import { TablePlugin } from '../../plugins';
+import { isAllInTable } from '../../plugins/table/helpers';
 var ContextMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextMenu, _Component);
   var _super = _createSuper(ContextMenu);
@@ -17,7 +18,7 @@ var ContextMenu = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _this.renderContextMenu = function () {
       var editor = _this.props.editor;
-      if (editor.isAllInTable()) {
+      if (isAllInTable(editor)) {
         var ContextMenuComponent = TablePlugin.contextMenu;
         return /*#__PURE__*/React.createElement(ContextMenuComponent, _this.props);
       }

package/dist/basic-sdk/extension/plugins/link/menu/hover-link-dialog.js

@@ -34,15 +34,15 @@ var LinkHoverComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("span", {
         role: "button",
         className: "link-op-icon",
-        onClick: this.props.onDeleteLink
+        onClick: this.props.onEditLink
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-delete"
+        className: "sdocfont sdoc-rename"
       })), /*#__PURE__*/React.createElement("span", {
         role: "button",
         className: "link-op-icon",
-        onClick: this.props.onEditLink
+        onClick: this.props.onDeleteLink
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-rename"
+        className: "sdocfont sdoc-unlink"
       }))), /*#__PURE__*/React.createElement("span", {
         className: "link-op-menu-triangle"
       })), document.body));

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

@@ -1,2 +1,8 @@
 export var TABLE_MAX_ROWS = 50;
-export var TABLE_MAX_COLUMNS = 50;
+export var TABLE_MAX_COLUMNS = 50;
+export var EMPTY_SELECTED_RANGE = {
+  minRowIndex: -1,
+  maxRowIndex: -1,
+  minColIndex: -1,
+  maxColIndex: -1
+};

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

@@ -1,8 +1,15 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import slugid from 'slugid';
 import { Editor, Range, Transforms } from '@seafile/slate';
-import { ELEMENT_TYPE } from '../../constants';
-import { getNodeType, getParentNode, isTextNode } from '../../core';
+import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, replaceNodeChildren, focusEditor } from '../../core';
+import { getNodePathById } from '../../../socket/helpers';
+import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE } from './constants';
+import EventBus from '../../../utils/event-bus';
+import { EXTERNAL_EVENT } from '../../../../constants';
+import ObjectUtils from '../../../utils/object-utils';
 export var isTableMenuDisabled = function isTableMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection === null) return true;
@@ -78,4 +85,211 @@ export var insertTable = function insertTable(editor, size, selection) {
   Transforms.insertNodes(editor, tableNode, {
     at: selection
   });
+};
+export var getSelectedInfo = function getSelectedInfo(editor) {
+  var currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+  var currentRow = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_ROW);
+  var currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
+  var currentCellPath = getNodePathById(editor, currentCell.id);
+  return {
+    table: currentTable,
+    tablePath: getNodePathById(editor, currentTable.id),
+    tableSize: [currentTable.children.length, currentRow.children.length],
+    row: currentRow,
+    rowPath: getNodePathById(editor, currentRow.id),
+    rowIndex: currentCellPath[currentCellPath.length - 2],
+    cell: currentCell,
+    cellPath: getNodePathById(editor, currentCell.id),
+    cellIndex: currentCellPath[currentCellPath.length - 1]
+  };
+};
+export var isInTable = function isInTable(editor) {
+  var selectedNodes = getSelectedElems(editor);
+  if (!selectedNodes.some(function (node) {
+    return node.type === ELEMENT_TYPE.TABLE;
+  })) return false;
+  var firstSelectedNode = selectedNodes[0];
+  return firstSelectedNode.type === ELEMENT_TYPE.TABLE;
+};
+export var isAllInTable = function isAllInTable(editor) {
+  var selectedNodes = getSelectedElems(editor);
+  if (!selectedNodes.some(function (node) {
+    return node.type === ELEMENT_TYPE.TABLE;
+  })) return false;
+  var firstSelectedNode = selectedNodes[0];
+  if (firstSelectedNode.type !== ELEMENT_TYPE.TABLE) return false;
+  return selectedNodes.slice(1).every(function (node) {
+    return [ELEMENT_TYPE.TABLE_ROW, ELEMENT_TYPE.TABLE_CELL].includes(node.type);
+  }); // same table element
+};
+
+export var setTextStyle = function setTextStyle(editor, style) {
+  var selectedNodes = getSelectedElems(editor);
+  var firstTableCellNodePath;
+  selectedNodes.forEach(function (node) {
+    if (node.type === ELEMENT_TYPE.TABLE_CELL) {
+      var targetNode = node.children[0];
+      var path = getNodePathById(editor, node.id);
+      firstTableCellNodePath = firstTableCellNodePath ? firstTableCellNodePath : path;
+      replaceNodeChildren(editor, {
+        at: path,
+        nodes: _objectSpread(_objectSpread({}, targetNode), style)
+      });
+    }
+  });
+  if (firstTableCellNodePath) {
+    var start = Editor.start(editor, firstTableCellNodePath);
+    var end = Editor.end(editor, firstTableCellNodePath);
+    var newSelection = {
+      anchor: start,
+      focus: end
+    };
+    Transforms.select(editor, newSelection);
+  }
+};
+export var insertTableElement = function insertTableElement(editor, type) {
+  var position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : TABLE_ELEMENT_POSITION.AFTER;
+  var count = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var _getSelectedInfo = getSelectedInfo(editor),
+    tablePath = _getSelectedInfo.tablePath,
+    tableSize = _getSelectedInfo.tableSize,
+    rowIndex = _getSelectedInfo.rowIndex,
+    cellIndex = _getSelectedInfo.cellIndex;
+  var eventBus = EventBus.getInstance();
+  eventBus.dispatch(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+  if (type === TABLE_ELEMENT.ROW) {
+    if (tableSize[0] >= TABLE_MAX_ROWS) return;
+    var targetPath = position === TABLE_ELEMENT_POSITION.AFTER ? [].concat(_toConsumableArray(tablePath), [rowIndex + 1]) : [].concat(_toConsumableArray(tablePath), [rowIndex]);
+    var validCount = Math.min(TABLE_MAX_ROWS - tableSize[0], count);
+    for (var i = 0; i < validCount; i++) {
+      var row = generateTableRow(tableSize[1]);
+      Transforms.insertNodes(editor, row, {
+        at: targetPath
+      });
+    }
+    var focusPath = [].concat(_toConsumableArray(targetPath), [cellIndex]);
+    focusEditor(editor, focusPath);
+    return;
+  }
+  if (type === TABLE_ELEMENT.COLUMN) {
+    if (tableSize[1] >= TABLE_MAX_COLUMNS) return;
+    var newCellIndex = position === TABLE_ELEMENT_POSITION.AFTER ? cellIndex + 1 : cellIndex;
+    var _validCount = Math.min(TABLE_MAX_COLUMNS - tableSize[1], count);
+    for (var j = 0; j < _validCount; j++) {
+      for (var _i = 0; _i < tableSize[0]; _i++) {
+        var newCellPath = [].concat(_toConsumableArray(tablePath), [_i, newCellIndex]);
+        var newCell = generateTableCell();
+        Transforms.insertNodes(editor, newCell, {
+          at: newCellPath
+        });
+      }
+    }
+    var _focusPath = [].concat(_toConsumableArray(tablePath), [rowIndex, cellIndex + 1, 0]);
+    focusEditor(editor, _focusPath);
+    return;
+  }
+};
+var removeTable = function removeTable(editor, path) {
+  var validPath = path;
+  if (!validPath) {
+    var _getSelectedInfo2 = getSelectedInfo(editor),
+      tablePath = _getSelectedInfo2.tablePath;
+    validPath = tablePath;
+  }
+  var tableIndex = validPath[validPath.length - 1];
+  var tableParentPath = validPath.slice(0, validPath.length - 1);
+  var targetNodeIndex = tableIndex >= 1 ? tableIndex - 1 : 1;
+  var targetNodePath = [].concat(_toConsumableArray(tableParentPath), [targetNodeIndex]);
+  Transforms.removeNodes(editor, {
+    at: path
+  });
+  focusEditor(editor, targetNodePath);
+};
+export var removeTableElement = function removeTableElement(editor, type) {
+  var _getSelectedInfo3 = getSelectedInfo(editor),
+    tablePath = _getSelectedInfo3.tablePath,
+    tableSize = _getSelectedInfo3.tableSize,
+    rowPath = _getSelectedInfo3.rowPath,
+    rowIndex = _getSelectedInfo3.rowIndex,
+    cellIndex = _getSelectedInfo3.cellIndex;
+  var eventBus = EventBus.getInstance();
+  eventBus.dispatch(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+  if (type === TABLE_ELEMENT.TABLE) {
+    removeTable(editor, tablePath);
+    return;
+  }
+  if (type === TABLE_ELEMENT.ROW) {
+    if (tableSize[0] === 1) {
+      removeTable(editor, tablePath);
+      return;
+    }
+    if (!ObjectUtils.isSameObject(editor.tableSelectedRange, EMPTY_SELECTED_RANGE)) {
+      var _editor$tableSelected = editor.tableSelectedRange,
+        minRowIndex = _editor$tableSelected.minRowIndex,
+        maxRowIndex = _editor$tableSelected.maxRowIndex;
+      if (minRowIndex === 0 && maxRowIndex === tableSize[0] - 1) {
+        removeTable(editor, tablePath);
+        return;
+      }
+      for (var i = minRowIndex; i <= maxRowIndex; i++) {
+        Transforms.removeNodes(editor, {
+          at: [].concat(_toConsumableArray(tablePath), [minRowIndex])
+        });
+      }
+      var _focusPath2 = [].concat(_toConsumableArray(tablePath), [minRowIndex === 0 ? 0 : minRowIndex - 1, cellIndex]);
+      focusEditor(editor, _focusPath2);
+      return;
+    }
+    Transforms.removeNodes(editor, {
+      at: rowPath
+    });
+    var focusRowIndex = rowIndex === tableSize[0] - 1 ? rowIndex - 1 : rowIndex;
+    var focusPath = [].concat(_toConsumableArray(tablePath), [focusRowIndex, cellIndex]);
+    focusEditor(editor, focusPath);
+    return;
+  }
+  if (type === TABLE_ELEMENT.COLUMN) {
+    if (tableSize[1] === 1) {
+      removeTable(editor, tablePath);
+      return;
+    }
+    if (!ObjectUtils.isSameObject(editor.tableSelectedRange, EMPTY_SELECTED_RANGE)) {
+      var _editor$tableSelected2 = editor.tableSelectedRange,
+        minColIndex = _editor$tableSelected2.minColIndex,
+        maxColIndex = _editor$tableSelected2.maxColIndex;
+      if (minColIndex === 0 && maxColIndex === tableSize[1] - 1) {
+        removeTable(editor, tablePath);
+        return;
+      }
+      for (var _i2 = 0; _i2 < tableSize[0]; _i2++) {
+        for (var j = minColIndex; j <= maxColIndex; j++) {
+          // count
+          var cellPath = [].concat(_toConsumableArray(tablePath), [_i2, minColIndex]);
+          Transforms.removeNodes(editor, {
+            at: cellPath
+          });
+        }
+      }
+      var _focusPath3 = [].concat(_toConsumableArray(tablePath), [rowIndex, minColIndex === 0 ? 0 : minColIndex - 1]);
+      focusEditor(editor, _focusPath3);
+      return;
+    }
+    for (var _i3 = 0; _i3 < tableSize[0]; _i3++) {
+      var _cellPath = [].concat(_toConsumableArray(tablePath), [_i3, cellIndex]);
+      Transforms.removeNodes(editor, {
+        at: _cellPath
+      });
+    }
+    var focusCellIndex = cellIndex === tableSize[1] - 1 ? cellIndex - 1 : cellIndex;
+    var _focusPath4 = [].concat(_toConsumableArray(tablePath), [rowIndex, focusCellIndex]);
+    focusEditor(editor, _focusPath4);
+    return;
+  }
+};
+export var setTableSelectedRange = function setTableSelectedRange(editor, range) {
+  if (range) {
+    editor.tableSelectedRange = range;
+    return;
+  }
+  editor.tableSelectedRange = EMPTY_SELECTED_RANGE;
 };

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

@@ -9,6 +9,7 @@ import { withTranslation } from 'react-i18next';
 import { MenuGroup, MenuItem } from '../../../../menu';
 import CommonMenu from './common-menu';
 import { TABLE_ELEMENT, MENUS_CONFIG_MAP, REMOVE_TABLE } from '../../../../constants';
+import { setTextStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
 import './index.css';
 var ActiveTableMenu = /*#__PURE__*/function (_Component) {
   _inherits(ActiveTableMenu, _Component);
@@ -22,14 +23,14 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _this.setTextAlignStyle = function (textAlign) {
       var editor = _this.props.editor;
-      editor.setTextStyle({
+      setTextStyle(editor, {
         textAlign: textAlign
       });
       _this.textAlignRef.hidePopover();
     };
     _this.insertTableElement = function (type) {
       var editor = _this.props.editor;
-      editor.insertTableElement(type);
+      insertTableElement(editor, type);
       if (type === TABLE_ELEMENT.ROW) {
         _this.tableRowRef.hidePopover();
         return;
@@ -38,7 +39,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
     };
     _this.removeTableElement = function (type) {
       var editor = _this.props.editor;
-      editor.removeTableElement(type);
+      removeTableElement(editor, type);
       if (type === TABLE_ELEMENT.ROW) {
         _this.tableRowRef.hidePopover();
         return;
@@ -47,7 +48,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
     };
     _this.removeTable = function () {
       var editor = _this.props.editor;
-      editor.removeTableElement(TABLE_ELEMENT.TABLE);
+      removeTableElement(editor, TABLE_ELEMENT.TABLE);
     };
     _this.renderTextAlign = function () {
       var t = _this.props.t;
@@ -85,10 +86,10 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.insertTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.COLUMN)
-      }, t('Insert_Column')), /*#__PURE__*/React.createElement("button", {
+      }, t('Insert_column')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.removeTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.COLUMN)
-      }, t('Remove_Column')));
+      }, t('Remove_column')));
     };
     _this.renderTableRow = function () {
       var t = _this.props.t;
@@ -101,10 +102,10 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.insertTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.ROW)
-      }, t('Insert_Row')), /*#__PURE__*/React.createElement("button", {
+      }, t('Insert_row')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.removeTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.ROW)
-      }, t('Remove_Row')));
+      }, t('Remove_row')));
     };
     return _this;
   }
@@ -115,8 +116,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
         editor = _this$props.editor,
         isRichEditor = _this$props.isRichEditor,
         className = _this$props.className;
-      var isAllInTable = editor.isAllInTable && editor.isAllInTable();
-      if (!isAllInTable) return null;
+      if (!isAllInTable(editor)) return null;
       var menuConfig = MENUS_CONFIG_MAP[REMOVE_TABLE];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,

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

@@ -9,6 +9,8 @@ import ObjectUtils from '../../../../../utils/object-utils';
 import { TABLE_ELEMENT, TABLE_ELEMENT_POSITION, ELEMENT_TYPE } from '../../../../constants';
 import InsertTableElement from './insert-table-element';
 import { getSelectedNodeByType } from '../../../../core';
+import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS } from '../../constants';
+import { insertTableElement, removeTableElement } from '../../helpers';
 import './index.css';
 var ContextMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(ContextMenu, _React$Component);
@@ -21,9 +23,10 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
       var menuHeight = _this.menu.offsetHeight;
 
       // get height of context menu when the menu is drawing completed in this page
-      // if (menuHeight === 0) {
-      //   requestAnimationFrame(this.updateMenuPosition);
-      // }
+      if (menuHeight === 0) {
+        requestAnimationFrame(_this.updateMenuPosition);
+        return;
+      }
       var top = 0;
       if (_this.position.top + menuHeight > document.body.clientHeight) {
         top = document.body.clientHeight - menuHeight - 5;
@@ -40,11 +43,11 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
     };
     _this.insertTableElement = function (type, position, count) {
       var editor = _this.props.editor;
-      editor.insertTableElement(type, position, count);
+      insertTableElement(editor, type, position, count);
     };
     _this.removeTableElement = function (type) {
       var editor = _this.props.editor;
-      editor.removeTableElement(type);
+      removeTableElement(editor, type);
     };
     _this.renderRemoveBtn = function (type, title) {
       return /*#__PURE__*/React.createElement("button", {
@@ -88,6 +91,11 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
       var currentRow = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_ROW);
       var currentRowsCount = currentTable.children.length;
       var currentColumnsCount = currentRow.children.length;
+      var tableSelectedRange = editor.tableSelectedRange;
+      var selectedRows = tableSelectedRange.maxRowIndex - tableSelectedRange.minRowIndex + 1;
+      var selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
+      var canAddRowsCount = currentRowsCount + selectedRows > TABLE_MAX_ROWS ? TABLE_MAX_ROWS - currentRowsCount : selectedRows;
+      var canAddColsCount = currentColumnsCount + selectedCols > TABLE_MAX_COLUMNS ? TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
       return /*#__PURE__*/React.createElement("div", {
         style: contextStyle,
         ref: function ref(_ref) {
@@ -96,27 +104,31 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
         className: "sdoc-table-context-menu dropdown-menu"
       }, /*#__PURE__*/React.createElement(InsertTableElement, {
         type: TABLE_ELEMENT.ROW,
+        count: canAddRowsCount,
         currentCount: currentRowsCount,
         position: TABLE_ELEMENT_POSITION.BEFORE,
         insertTableElement: this.insertTableElement
       }), /*#__PURE__*/React.createElement(InsertTableElement, {
         type: TABLE_ELEMENT.ROW,
+        count: canAddRowsCount,
         currentCount: currentRowsCount,
         position: TABLE_ELEMENT_POSITION.AFTER,
         insertTableElement: this.insertTableElement
       }), /*#__PURE__*/React.createElement(InsertTableElement, {
         type: TABLE_ELEMENT.COLUMN,
+        count: canAddColsCount,
         currentCount: currentColumnsCount,
         position: TABLE_ELEMENT_POSITION.BEFORE,
         insertTableElement: this.insertTableElement
       }), /*#__PURE__*/React.createElement(InsertTableElement, {
         type: TABLE_ELEMENT.COLUMN,
+        count: canAddColsCount,
         currentCount: currentColumnsCount,
         position: TABLE_ELEMENT_POSITION.AFTER,
         insertTableElement: this.insertTableElement
       }), /*#__PURE__*/React.createElement("div", {
         className: 'seafile-divider dropdown-divider'
-      }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Remove_Row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Remove_Column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Remove_table'));
+      }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Remove_row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Remove_column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Remove_table'));
     }
   }]);
   return ContextMenu;

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

@@ -56,7 +56,7 @@ var InsertTableElement = /*#__PURE__*/function (_Component) {
       });
     };
     _this.state = {
-      count: 1
+      count: props.count || 1
     };
     _this.maxCount = props.type === TABLE_ELEMENT.ROW ? TABLE_MAX_ROWS : TABLE_MAX_COLUMNS;
     return _this;