@seafile/sdoc-editor 0.1.53 → 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;

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

@@ -5,14 +5,18 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import isHotkey from 'is-hotkey';
 import { Editor, Transforms, Point, Path, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, isLastNode, genEmptyParagraph, getSelectedElems, replaceNodeChildren, focusEditor } from '../../core';
-import { getNodePathById } from '../../../socket/helpers';
+import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, isLastNode, genEmptyParagraph, replaceNodeChildren, focusEditor, getNode } from '../../core';
 import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, KEYBOARD } from '../../constants';
-import { generateTableRow, generateTableCell } from './helpers';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS } from './constants';
+import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE } from './constants';
+import ObjectUtils from '../../../utils/object-utils';
+import { getSelectedInfo } from './helpers';
 var deleteHandler = function deleteHandler(editor) {
-  var selection = editor.selection;
-  if (selection == null) return false;
+  var selection = editor.selection,
+    tableSelectedRange = editor.tableSelectedRange;
+  if (selection == null) return '';
+  if (!ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE)) {
+    return 'range';
+  }
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {
         var type = getNodeType(n);
@@ -30,10 +34,10 @@ var deleteHandler = function deleteHandler(editor) {
       cellPath = _cellNodeEntry[1];
     var start = Editor.start(editor, cellPath);
     if (Point.equals(selection.anchor, start)) {
-      return true;
+      return 'default';
     }
   }
-  return false;
+  return '';
 };
 var isTableLocation = function isTableLocation(editor, location) {
   var tables = Editor.nodes(editor, {
@@ -63,43 +67,12 @@ var isTableLocation = function isTableLocation(editor, location) {
   }
   return hasTable;
 };
-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]
-  };
-};
-var removeTable = function removeTable(editor, path) {
-  var validPath = path;
-  if (!validPath) {
-    var _getSelectedInfo = getSelectedInfo(editor),
-      tablePath = _getSelectedInfo.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);
-};
 var isCursorAtCellEnd = function isCursorAtCellEnd(cell) {
   var cursor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   if (!cell) return false;
-  var textCount = cell.children[0].text.length;
+  var childrenCount = cell.children.length;
+  var lastChildren = cell.children[childrenCount - 1];
+  var textCount = lastChildren.text.length;
   return cursor === textCount;
 };
 var isCursorAtCellStart = function isCursorAtCellStart() {
@@ -108,12 +81,12 @@ var isCursorAtCellStart = function isCursorAtCellStart() {
 };
 var focusCell = function focusCell(editor, event) {
   var keyboardName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  var _getSelectedInfo2 = getSelectedInfo(editor),
-    tableSize = _getSelectedInfo2.tableSize,
-    tablePath = _getSelectedInfo2.tablePath,
-    rowIndex = _getSelectedInfo2.rowIndex,
-    cellIndex = _getSelectedInfo2.cellIndex,
-    cell = _getSelectedInfo2.cell;
+  var _getSelectedInfo = getSelectedInfo(editor),
+    tableSize = _getSelectedInfo.tableSize,
+    tablePath = _getSelectedInfo.tablePath,
+    rowIndex = _getSelectedInfo.rowIndex,
+    cellIndex = _getSelectedInfo.cellIndex,
+    cell = _getSelectedInfo.cell;
   var tableIndex = tablePath[0];
   var selection = editor.selection;
   var focus = selection.focus;
@@ -188,8 +161,8 @@ var focusCell = function focusCell(editor, event) {
 };
 var isLastTableCell = function isLastTableCell(editor, cellNode) {
   if (cellNode[0].type !== ELEMENT_TYPE.TABLE_CELL) return false;
-  var _getSelectedInfo3 = getSelectedInfo(editor),
-    tableSize = _getSelectedInfo3.tableSize;
+  var _getSelectedInfo2 = getSelectedInfo(editor),
+    tableSize = _getSelectedInfo2.tableSize;
   var lastRowIndex = tableSize[0] - 1;
   var lastColumnIndex = tableSize[1] - 1;
   var cellNodePath = cellNode[1];
@@ -203,9 +176,9 @@ var withTable = function withTable(editor) {
     insertData = editor.insertData,
     selectAll = editor.selectAll,
     normalizeNode = editor.normalizeNode,
-    deleteFragment = editor.deleteFragment,
     handleTab = editor.handleTab;
   var newEditor = editor;
+  newEditor.tableSelectedRange = EMPTY_SELECTED_RANGE;
   newEditor.tableOnKeyDown = function (event) {
     // Handle special keyboard events
 
@@ -239,8 +212,38 @@ var withTable = function withTable(editor) {
     insertBreak();
   };
   newEditor.deleteBackward = function (unit) {
-    var res = deleteHandler(newEditor);
-    if (res) return;
+    var deleteType = deleteHandler(newEditor);
+
+    // range selection delete
+    if (deleteType === 'range') {
+      var tableSelectedRange = newEditor.tableSelectedRange;
+      var minRowIndex = tableSelectedRange.minRowIndex,
+        maxRowIndex = tableSelectedRange.maxRowIndex,
+        minColIndex = tableSelectedRange.minColIndex,
+        maxColIndex = tableSelectedRange.maxColIndex;
+      var _getSelectedInfo3 = getSelectedInfo(newEditor),
+        tablePath = _getSelectedInfo3.tablePath;
+      for (var i = minRowIndex; i <= maxRowIndex; i++) {
+        for (var j = minColIndex; j <= maxColIndex; j++) {
+          var path = [].concat(_toConsumableArray(tablePath), [i, j]);
+          var node = getNode(newEditor, path);
+          var firstNode = node.children[0];
+          for (var m = 1; m < node.children.length; m++) {
+            Transforms.removeNodes(editor, {
+              at: [].concat(_toConsumableArray(path), [m])
+            });
+          }
+          replaceNodeChildren(newEditor, {
+            at: path,
+            nodes: _objectSpread(_objectSpread({}, firstNode), {}, {
+              text: ''
+            })
+          });
+        }
+      }
+      return;
+    }
+    if (deleteType === 'default') return;
     var selection = newEditor.selection;
     if (selection) {
       var before = Editor.before(newEditor, selection);
@@ -325,74 +328,6 @@ var withTable = function withTable(editor) {
     }
   };
 
-  // range selection delete
-  newEditor.deleteFragment = function (fragment) {
-    if (newEditor.isAllInTable()) {
-      var selectedNodes = getSelectedElems(newEditor);
-      var selectedNodesCount = selectedNodes.length;
-
-      // Some text is selected in a cell
-      if (selectedNodesCount === 3) {
-        var _getSelectedInfo4 = getSelectedInfo(newEditor),
-          cell = _getSelectedInfo4.cell,
-          cellPath = _getSelectedInfo4.cellPath;
-        var selection = newEditor.selection;
-        var focus = selection.focus,
-          anchor = selection.anchor;
-        var oldText = cell.children[0].text;
-        replaceNodeChildren(newEditor, {
-          at: cellPath,
-          nodes: _objectSpread(_objectSpread({}, cell.children[0]), {}, {
-            text: oldText.slice(0, focus.offset) + oldText.slice(anchor.offset)
-          })
-        });
-        Transforms.select(newEditor, {
-          focus: focus,
-          anchor: focus
-        });
-        return;
-      }
-      var firstSelectedNode = selectedNodes[0];
-
-      // select all table elements
-      if (selectedNodesCount === 1 + firstSelectedNode.children.length * (1 + firstSelectedNode.children[0].children.length)) {
-        Transforms.removeNodes(newEditor, {
-          match: function match(n) {
-            return n.id === firstSelectedNode.id;
-          }
-        });
-        return;
-      }
-
-      // clear cell value
-      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(newEditor, {
-            at: path,
-            nodes: _objectSpread(_objectSpread({}, targetNode), {}, {
-              text: ''
-            })
-          });
-        }
-      });
-      if (firstTableCellNodePath) {
-        var start = Editor.start(newEditor, firstTableCellNodePath);
-        var end = Editor.end(newEditor, firstTableCellNodePath);
-        var newSelection = {
-          anchor: start,
-          focus: end
-        };
-        Transforms.select(newEditor, newSelection);
-      }
-      return;
-    }
-    deleteFragment(fragment);
-  };
-
   // Jump to the next cell when pressing tab in the table
   newEditor.handleTab = function (event) {
     var selectedNode = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE);
@@ -412,9 +347,9 @@ var withTable = function withTable(editor) {
 
     // Add row to the last cell
     if (isLastTableCell(newEditor, above)) {
-      var _getSelectedInfo5 = getSelectedInfo(newEditor),
-        tablePath = _getSelectedInfo5.tablePath,
-        tableSize = _getSelectedInfo5.tableSize;
+      var _getSelectedInfo4 = getSelectedInfo(newEditor),
+        tablePath = _getSelectedInfo4.tablePath,
+        tableSize = _getSelectedInfo4.tableSize;
       if (tableSize[0] === TABLE_MAX_ROWS) return;
       newEditor.insertTableElement(TABLE_ELEMENT.ROW, TABLE_ELEMENT_POSITION.AFTER);
       Transforms.select(newEditor, [].concat(_toConsumableArray(tablePath), [tableSize[0], 0]));
@@ -425,11 +360,11 @@ var withTable = function withTable(editor) {
     // The default behavior, the cursor is in the middle of the text, and the current text content is selected
     // Change to jump to next cell
     if (selection.anchor.offset === selection.focus.offset) {
-      var _getSelectedInfo6 = getSelectedInfo(newEditor),
-        _tableSize = _getSelectedInfo6.tableSize,
-        _tablePath = _getSelectedInfo6.tablePath,
-        rowIndex = _getSelectedInfo6.rowIndex,
-        cellIndex = _getSelectedInfo6.cellIndex;
+      var _getSelectedInfo5 = getSelectedInfo(newEditor),
+        _tableSize = _getSelectedInfo5.tableSize,
+        _tablePath = _getSelectedInfo5.tablePath,
+        rowIndex = _getSelectedInfo5.rowIndex,
+        cellIndex = _getSelectedInfo5.cellIndex;
       var lastColumnIndex = _tableSize[1] - 1;
       var nextCell = [rowIndex, cellIndex + 1];
       if (lastColumnIndex < nextCell[1]) {
@@ -441,133 +376,6 @@ var withTable = function withTable(editor) {
     var next = Editor.next(newEditor);
     Transforms.select(newEditor, next[1]);
   };
-
-  // specific business logic
-  newEditor.isInTable = function () {
-    var selectedNodes = getSelectedElems(newEditor);
-    if (!selectedNodes.some(function (node) {
-      return node.type === ELEMENT_TYPE.TABLE;
-    })) return false;
-    var firstSelectedNode = selectedNodes[0];
-    return firstSelectedNode.type === ELEMENT_TYPE.TABLE;
-  };
-  newEditor.isAllInTable = function () {
-    var selectedNodes = getSelectedElems(newEditor);
-    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
-  };
-
-  newEditor.setTextStyle = function (style) {
-    var selectedNodes = getSelectedElems(newEditor);
-    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(newEditor, {
-          at: path,
-          nodes: _objectSpread(_objectSpread({}, targetNode), style)
-        });
-      }
-    });
-    if (firstTableCellNodePath) {
-      var start = Editor.start(newEditor, firstTableCellNodePath);
-      var end = Editor.end(newEditor, firstTableCellNodePath);
-      var newSelection = {
-        anchor: start,
-        focus: end
-      };
-      Transforms.select(newEditor, newSelection);
-    }
-  };
-  newEditor.insertTableElement = function (type) {
-    var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TABLE_ELEMENT_POSITION.AFTER;
-    var count = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    var _getSelectedInfo7 = getSelectedInfo(newEditor),
-      tablePath = _getSelectedInfo7.tablePath,
-      tableSize = _getSelectedInfo7.tableSize,
-      rowIndex = _getSelectedInfo7.rowIndex,
-      cellIndex = _getSelectedInfo7.cellIndex;
-    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(newEditor, 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(newEditor, _focusPath);
-      return;
-    }
-  };
-  newEditor.removeTableElement = function (type) {
-    var _getSelectedInfo8 = getSelectedInfo(newEditor),
-      tablePath = _getSelectedInfo8.tablePath,
-      tableSize = _getSelectedInfo8.tableSize,
-      rowPath = _getSelectedInfo8.rowPath,
-      rowIndex = _getSelectedInfo8.rowIndex,
-      cellIndex = _getSelectedInfo8.cellIndex;
-    if (type === TABLE_ELEMENT.TABLE) {
-      removeTable(newEditor, tablePath);
-      return;
-    }
-    if (type === TABLE_ELEMENT.ROW) {
-      if (tableSize[0] === 1) {
-        removeTable(newEditor, tablePath);
-        return;
-      }
-      Transforms.removeNodes(newEditor, {
-        at: rowPath
-      });
-      var focusRowIndex = rowIndex === tableSize[0] - 1 ? rowIndex - 1 : rowIndex;
-      var focusPath = [].concat(_toConsumableArray(tablePath), [focusRowIndex, cellIndex, 0]);
-      focusEditor(newEditor, focusPath);
-      return;
-    }
-    if (type === TABLE_ELEMENT.COLUMN) {
-      if (tableSize[1] === 1) {
-        removeTable(newEditor, tablePath);
-        return;
-      }
-      for (var i = 0; i < tableSize[0]; i++) {
-        var cellPath = [].concat(_toConsumableArray(tablePath), [i, cellIndex]);
-        Transforms.removeNodes(newEditor, {
-          at: cellPath
-        });
-      }
-      var focusCellIndex = cellIndex === tableSize[1] - 1 ? cellIndex - 1 : cellIndex;
-      var _focusPath2 = [].concat(_toConsumableArray(tablePath), [rowIndex, focusCellIndex, 0]);
-      focusEditor(newEditor, _focusPath2);
-      return;
-    }
-  };
   return newEditor;
 };
 export default withTable;

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

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export var TableContext = createContext();
+export var useTableContext = function useTableContext() {
+  return useContext(TableContext);
+};

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

@@ -1,32 +1,51 @@
 import React from 'react';
 import classnames from 'classnames';
-import { useSelected } from '@seafile/slate-react';
+import { useSlateStatic } from '@seafile/slate-react';
 import ObjectUtils from '../../../../utils/object-utils';
 import { STYLE_KEY } from '../../../constants';
-function TableCell(props) {
-  var attributes = props.attributes,
-    element = props.element,
-    children = props.children,
-    isSelected = props.isSelected;
+import { getNodePathById } from '../../../../socket/helpers';
+import { useTableContext } from './context';
+var TableCell = function TableCell(_ref) {
+  var attributes = _ref.attributes,
+    element = _ref.element,
+    children = _ref.children;
+  var editor = useSlateStatic();
+  var selectedRange = useTableContext();
+  var cellPath = getNodePathById(editor, element.id);
+  if (!cellPath) return null;
   var cellValue = element.children[0];
   var style = attributes.style || {};
   if (ObjectUtils.hasProperty(cellValue, STYLE_KEY.TEXT_ALIGN)) {
     style[STYLE_KEY.TEXT_ALIGN] = cellValue[STYLE_KEY.TEXT_ALIGN];
   }
+  var pathLength = cellPath.length;
+  var rowIndex = cellPath[pathLength - 2];
+  var cellIndex = cellPath[pathLength - 1];
+  var minColIndex = selectedRange.minColIndex,
+    maxColIndex = selectedRange.maxColIndex,
+    minRowIndex = selectedRange.minRowIndex,
+    maxRowIndex = selectedRange.maxRowIndex;
+  var isRowSelected = rowIndex >= minRowIndex && rowIndex <= maxRowIndex;
+  var isSelected = isRowSelected && cellIndex >= minColIndex && cellIndex <= maxColIndex;
+  var isSelectedFirstCell = isSelected && cellIndex === minColIndex;
+  var isSelectedLastCell = isSelected && cellIndex === maxColIndex;
+  var isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
+  var isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
   return /*#__PURE__*/React.createElement("td", Object.assign({}, attributes, {
     style: style,
     className: classnames('', attributes.className, {
-      'cell-selected': isSelected
+      '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
+    "data-id": element.id,
+    "row-index": rowIndex,
+    "cell-index": cellIndex
   }), children);
-}
-function renderTableCell(props, editor) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var isSelected = useSelected();
-  return /*#__PURE__*/React.createElement(TableCell, Object.assign({}, props, {
-    editor: editor,
-    isSelected: isSelected
-  }));
+};
+function renderTableCell(props) {
+  return /*#__PURE__*/React.createElement(TableCell, props);
 }
 export default renderTableCell;

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

@@ -1,24 +1,15 @@
 import React from 'react';
 import classnames from 'classnames';
-import { useSelected } from '@seafile/slate-react';
-function TableRow(props) {
-  var attributes = props.attributes,
-    element = props.element,
-    children = props.children,
-    isSelected = props.isSelected;
+var TableRow = function TableRow(_ref) {
+  var attributes = _ref.attributes,
+    element = _ref.element,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement("tr", Object.assign({}, attributes, {
-    className: classnames('', attributes.className, {
-      'row-selected': isSelected
-    }),
+    className: classnames('', attributes.className),
     "data-id": element.id
   }), children);
-}
+};
 function renderTableRow(props, editor) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  var isSelected = useSelected();
-  return /*#__PURE__*/React.createElement(TableRow, Object.assign({}, props, {
-    editor: editor,
-    isSelected: isSelected
-  }));
+  return /*#__PURE__*/React.createElement(TableRow, props);
 }
 export default renderTableRow;

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

@@ -36,3 +36,37 @@
 .article .sdoc-table-wrapper td {
   min-width: 35px;
 }
+
+.sdoc-table-wrapper .cell-selected {
+  caret-color: transparent;
+  background-color: #fff4e6;
+  position: relative;
+}
+
+.sdoc-table-wrapper .cell-light-height-top-border::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-top: 1px double #ffa94d;
+}
+
+.sdoc-table-wrapper .cell-light-height-bottom-border {
+  border-bottom: 1px double #ffa94d;
+}
+
+.sdoc-table-wrapper .cell-light-height-left-border::after {
+  content: '';
+  position: absolute;
+  top: 0px;
+  left: -1px;
+  width: 2px;
+  height: 100%;
+  border-left: 1px double #ffa94d;
+}
+
+.sdoc-table-wrapper .cell-light-height-right-border {
+  border-right: 1px double #ffa94d;
+}

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

@@ -1,35 +1,88 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect } from 'react';
 import classnames from 'classnames';
+import throttle from 'lodash.throttle';
 import { useSelected } from '@seafile/slate-react';
+import { EMPTY_SELECTED_RANGE } from '../../constants';
+import { TableContext } from '../context';
+import EventBus from '../../../../../utils/event-bus';
+import { EXTERNAL_EVENT } from '../../../../../../constants';
+import { setTableSelectedRange } from '../../helpers';
+import ObjectUtils from '../../../../../utils/object-utils';
 import './index.css';
-var Table = /*#__PURE__*/function (_Component) {
-  _inherits(Table, _Component);
-  var _super = _createSuper(Table);
-  function Table() {
-    _classCallCheck(this, Table);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Table, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        attributes = _this$props.attributes,
-        children = _this$props.children,
-        isSelected = _this$props.isSelected;
-      return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-        className: classnames('sdoc-table-wrapper', attributes.className, className, {
-          'sdoc-table-selected': isSelected
-        })
-      }), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, children)));
+var Table = function Table(_ref) {
+  var className = _ref.className,
+    attributes = _ref.attributes,
+    children = _ref.children,
+    isSelected = _ref.isSelected,
+    editor = _ref.editor;
+  var table = useRef(null);
+  var startRowIndex = 0;
+  var startColIndex = 0;
+  var _selectedRange = EMPTY_SELECTED_RANGE;
+  var _useState = useState(EMPTY_SELECTED_RANGE),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRange = _useState2[0],
+    setSelectedRange = _useState2[1];
+  var eventBus = EventBus.getInstance();
+  useEffect(function () {
+    var cancelTableSelectRangeSubscribe = eventBus.subscribe(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+    return function () {
+      cancelTableSelectRangeSubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var clearRange = function clearRange() {
+    _selectedRange = EMPTY_SELECTED_RANGE;
+    setSelectedRange(EMPTY_SELECTED_RANGE);
+  };
+  var onMouseMove = throttle(function (event) {
+    // if  event.target not in the table, clear the mouseMove event
+    if (event.target.nodeName === 'TBODY' || !table.current.contains(event.target)) {
+      return;
     }
-  }]);
-  return Table;
-}(Component);
+    var endRowIndex = Number(event.target.getAttribute('row-index'));
+    var endColIndex = Number(event.target.getAttribute('cell-index'));
+    var newSelectedRange = {
+      minRowIndex: Math.min(startRowIndex, endRowIndex),
+      maxRowIndex: Math.max(startRowIndex, endRowIndex),
+      minColIndex: Math.min(startColIndex, endColIndex),
+      maxColIndex: Math.max(startColIndex, endColIndex)
+    };
+
+    // same cell
+    if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) return;
+    _selectedRange = newSelectedRange;
+    setSelectedRange(newSelectedRange);
+    setTableSelectedRange(editor, newSelectedRange);
+  }, 200);
+  var onMouseUp = function onMouseUp(event) {
+    if (!ObjectUtils.isSameObject(_selectedRange, EMPTY_SELECTED_RANGE)) {
+      window.getSelection().collapseToEnd();
+    }
+    window.document.removeEventListener('mousemove', onMouseMove);
+    window.document.removeEventListener('mouseup', onMouseUp);
+  };
+  var onMouseDown = function onMouseDown(event) {
+    if (event.button !== 0) return; // right click not deal
+    startRowIndex = Number(event.target.getAttribute('row-index'));
+    startColIndex = Number(event.target.getAttribute('cell-index'));
+    setSelectedRange(EMPTY_SELECTED_RANGE);
+    setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
+    window.document.addEventListener('mousemove', onMouseMove);
+    window.document.addEventListener('mouseup', onMouseUp);
+  };
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: selectedRange
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    className: classnames('sdoc-table-wrapper', attributes.className, className, {
+      'sdoc-table-selected': isSelected
+    })
+  }), /*#__PURE__*/React.createElement("table", {
+    onMouseDown: onMouseDown,
+    ref: table
+  }, /*#__PURE__*/React.createElement("tbody", null, children))));
+};
 function renderTable(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var isSelected = useSelected();

package/dist/constants/index.js

@@ -1,3 +1,4 @@
 export var EXTERNAL_EVENT = {
-  INTERNAL_LINK_CLICK: 'internal_link_click'
+  INTERNAL_LINK_CLICK: 'internal_link_click',
+  CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -13,6 +13,7 @@
     "ahooks": "3.7.7",
     "classnames": "2.3.2",
     "deep-copy": "1.4.2",
+    "lodash.throttle": "4.1.1",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",
     "randomcolor": "0.6.2",

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

@@ -37,14 +37,9 @@
   "Remove_table": "Remove table",
   "column": "Column",
   "row": "Row",
-  "Insert_Row_Before": "Insert Row Before",
-  "Insert_Row_After": "Insert Row After",
-  "Insert_Column_Before": "Insert Column Before",
-  "Insert_Column_After": "Insert Column After",
-  "Remove_Row": "Remove Row",
-  "Remove_Column": "Remove Column",
-  "Insert_Row": "Insert Row",
-  "Insert_Column": "Insert Column",
+  "Remove_row": "Remove row",
+  "Remove_column": "Remove column",
+  "Insert_row": "Insert row",
   "set_align": "Set align",
   "left": "Left",
   "center": "Center",

package/public/locales/zh-CN/sdoc-editor.json

@@ -35,14 +35,14 @@
   "Remove_table": "删除表格",
   "column": "列",
   "row": "行",
-  "Insert_Row_Before": "上方插入行",
+  "Insert_row_before": "上方插入行",
   "Insert_Row_After": "下方插入行",
   "Insert_Column_Before": "左边插入列",
   "Insert_Column_After": "右边插入列",
-  "Remove_Row": "删除当前行",
-  "Remove_Column": "删除当前列",
-  "Insert_Row": "插入行",
-  "Insert_Column": "插入列",
+  "Remove_row": "删除当前行",
+  "Remove_column": "删除当前列",
+  "Insert_row": "插入行",
+  "Insert_column": "插入列",
   "set_align": "对齐方式",
   "left": "左对齐",
   "center": "居中",

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,12 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="unlink" unicode="&#58938;" d="M252.8 435.2c0-32 6.4-60.8 16-92.8 3.2-9.6 0-19.2-6.4-28.8l-25.6-25.6c-48-48-51.2-128-3.2-179.2 48-48 131.2-51.2 179.2 0l96 96 99.2-99.2-89.6-89.6c-102.4-102.4-272-102.4-377.6 0s-102.4 272 0 377.6l60.8 60.8c19.2 16 51.2 6.4 51.2-19.2z m60.8-35.2l156.8-156.8-12.8-12.8c-6.4-9.6-22.4-9.6-32-6.4l-3.2 3.2c-9.6 9.6-25.6 19.2-35.2 32-38.4 41.6-64 89.6-73.6 140.8z m192 355.2c102.4 102.4 272 102.4 377.6 0s102.4-272 0-374.4l-67.2-67.2c-16-16-48-6.4-48 19.2 0 32-6.4 60.8-16 92.8-3.2 9.6 0 19.2 6.4 28.8l19.2 19.2c51.2 51.2 51.2 131.2 3.2 179.2s-131.2 48-179.2 0L512 563.2l-99.2 99.2 92.8 92.8z m89.6-217.6c16-6.4 28.8-16 41.6-28.8 41.6-41.6 64-89.6 73.6-140.8l-156.8 156.8 9.6 9.6c6.4 9.6 22.4 9.6 32 3.2zM195.2 700.8c25.6 25.6 64 25.6 89.6 0l544-544c25.6-25.6 25.6-64 0-89.6-25.6-25.6-64-25.6-89.6 0l-544 544c-25.6 25.6-25.6 64 0 89.6z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="more-level" unicode="&#58936;" d="M777.6 384c0 64 54.4 118.4 118.4 118.4S1014.4 448 1014.4 384 960 265.6 896 265.6 777.6 320 777.6 384zM384 384c0 64 54.4 118.4 118.4 118.4S620.8 448 620.8 384s-54.4-118.4-118.4-118.4S384 320 384 384zM0 384c0 64 41.6 118.4 108.8 118.4s128-54.4 128-118.4-60.8-118.4-128-118.4S0 320 0 384z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="plus-square" unicode="&#58937;" d="M809.6 345.6v76.8c0 9.6-3.2 19.2-9.6 25.6s-16 9.6-25.6 9.6H588.8V646.4c0 9.6-3.2 19.2-9.6 25.6-6.4 6.4-16 9.6-25.6 9.6h-76.8c-9.6 0-19.2-3.2-25.6-9.6-6.4-6.4-12.8-16-12.8-25.6v-185.6H249.6c-9.6 0-19.2-3.2-25.6-9.6s-9.6-16-9.6-25.6v-76.8c0-9.6 3.2-19.2 9.6-25.6s16-9.6 25.6-9.6h185.6v-188.8c0-9.6 3.2-19.2 9.6-25.6 6.4-6.4 16-9.6 25.6-9.6h76.8c9.6 0 19.2 3.2 25.6 9.6 6.4 6.4 9.6 16 9.6 25.6V310.4h188.8c9.6 0 19.2 3.2 25.6 9.6 9.6 6.4 12.8 12.8 12.8 25.6z m150.4 320v-560c0-44.8-16-86.4-48-118.4S838.4-64 793.6-64H230.4c-44.8 0-86.4 16-118.4 48s-48 70.4-48 115.2V665.6c0 44.8 16 86.4 48 118.4s73.6 48 118.4 48h560c44.8 0 86.4-16 118.4-48S960 710.4 960 665.6z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-delete-table" unicode="&#58935;" d="M800 352c124.8 0 224-102.4 224-220.8S921.6-96 800-96s-224 102.4-224 220.8 99.2 227.2 224 227.2z m128 448c35.2 0 60.8-25.6 64-60.8v-396.8c-35.2 32-80 54.4-128 67.2V544h-288v-160h92.8C576 336 512 240 512 128c0-60.8 19.2-115.2 48-160H96c-35.2 0-60.8 25.6-64 60.8V736c0 35.2 25.6 60.8 60.8 64H928z m-38.4-640h-176c-25.6 0-38.4-12.8-38.4-32 0-12.8 19.2-32 38.4-32h176c25.6 0 38.4 12.8 38.4 32 0 12.8-16 32-38.4 32zM448 256H160v-160h288v160z m0 288H160v-160h288v160z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-caret-up" unicode="&#58934;" d="M870.4 137.6H153.6c-51.2 0-73.6 60.8-38.4 96L473.6 592c22.4 22.4 57.6 22.4 80 0L912 233.6c35.2-38.4 9.6-96-41.6-96z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -16,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-unlink:before {
+  content: "\e63a";
+}
+
 .sdoc-delete-table:before {
   content: "\e637";
 }