@seafile/sdoc-editor 0.1.43 → 0.1.45

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

@@ -18,3 +18,7 @@
   margin-left: 0.5rem;
   color: #333;
 }
+
+.sdoc-editor-page-header .doc-info .sdocfont {
+  font-size: 18px;
+}

package/dist/basic-sdk/assets/css/outline.css

@@ -1,4 +1,5 @@
 .display-outline-icon {
+  line-height: 1;
   font-size: 14px;
   color: #888;
   cursor: pointer;

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -10,7 +10,7 @@
 }
 
 /* image */
-.sdoc-editor-container .article .sdoc-image {
+.sdoc-editor-container .article .sdoc-image-wrapper {
   position: relative;
   display: inline-block;
   margin: 0 3px;

package/dist/basic-sdk/assets/css/textlink-hovermenu.css

@@ -50,8 +50,8 @@
   align-items: center;
 }
 
-.link-op-icon .iconfont {
-  font-size: 12px;
+.link-op-icon .sdocfont {
+  font-size: 14px;
 }
 
 .link-op-icon:hover {

package/dist/basic-sdk/cursor/decorate.js

@@ -0,0 +1,35 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Text, Path, Range } from '@seafile/slate';
+export var getDecorate = function getDecorate(editor) {
+  return function (nodeEntry) {
+    var ranges = [];
+    var _nodeEntry = _slicedToArray(nodeEntry, 2),
+      node = _nodeEntry[0],
+      path = _nodeEntry[1];
+    var cursors = Object.values(editor.cursors || {});
+    if (Text.isText(node) && (cursors === null || cursors === void 0 ? void 0 : cursors.length)) {
+      cursors.forEach(function (cursor) {
+        if (Range.includes(cursor, path)) {
+          var focus = cursor.focus,
+            anchor = cursor.anchor,
+            isForward = cursor.isForward;
+          var isFocusNode = Path.equals(focus.path, path);
+          var isAnchorNode = Path.equals(anchor.path, path);
+          ranges.push(_objectSpread(_objectSpread({}, cursor), {}, {
+            isCaret: isFocusNode,
+            anchor: {
+              path: path,
+              offset: isAnchorNode ? anchor.offset : isForward ? 0 : node.text.length
+            },
+            focus: {
+              path: path,
+              offset: isFocusNode ? focus.offset : isForward ? node.text.length : 0
+            }
+          }));
+        }
+      });
+    }
+    return ranges;
+  };
+};

package/dist/basic-sdk/cursor/helper.js

@@ -0,0 +1,40 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Range } from '@seafile/slate';
+import randomColor from 'randomcolor';
+
+// selection: { anchor, focus }
+// cursor: { anchor, focus }
+
+export var setCursor = function setCursor(id, editor, operations, cursorData) {
+  var cursorOps = operations.filter(function (operation) {
+    return operation.type === 'set_selection';
+  });
+  if (!editor.cursors) editor.cursors = {};
+  var oldCursor = editor.cursors[id] ? editor.cursors[id] : {};
+  var lastCursorOp = cursorOps[cursorOps.length - 1];
+  var selection = editor.selection;
+  if (selection) {
+    var newCursor = lastCursorOp && lastCursorOp.newProperties || {};
+    var newCursorData = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldCursor), newCursor), selection), _objectSpread(_objectSpread({}, cursorData), {}, {
+      isForward: Range.isForward(selection)
+    }));
+    editor.cursors[id] = newCursorData;
+  } else {
+    delete editor.cursors[id];
+  }
+  return editor;
+};
+export var generateCursorData = function generateCursorData(config) {
+  var user = config.user;
+  var options = {
+    luminosity: 'dark',
+    format: 'rgba',
+    alpha: 1
+  };
+  var color = randomColor(options);
+  return {
+    name: user.name,
+    color: color,
+    alphaColor: color.slice(0, -2) + '0.2)'
+  };
+};

package/dist/basic-sdk/editor.js

@@ -4,14 +4,16 @@ 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 from 'react';
+import { Node } from '@seafile/slate';
 import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import { Editor } from '@seafile/slate';
 import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
-import { SocketManager, withSocketIO } from './socket';
+import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { focusEditor } from './extension/core';
+import { getDecorate } from './cursor/decorate';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
@@ -21,9 +23,6 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, SDocEditor);
     _this = _super.call(this, props);
-    _this.getSocketManager = function () {
-      return _this.socketManager;
-    };
     _this.onChange = function (slateValue) {
       var onValueChanged = _this.props.onValueChanged;
       _this.setState({
@@ -55,7 +54,12 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     _this.socketManager = null;
     _this.editor = withNodeId(editor);
     if (props.isOpenSocket) {
-      _this.editor = withSocketIO(_this.editor);
+      var document = props.document,
+        config = props.config;
+      _this.editor = withSocketIO(_this.editor, {
+        document: document,
+        config: config
+      });
     }
     _this.eventProxy = new EventProxy(_this.editor);
     return _this;
@@ -63,21 +67,16 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
   _createClass(SDocEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props = this.props,
-        isOpenSocket = _this$props.isOpenSocket,
-        document = _this$props.document,
-        config = _this$props.config;
-      if (isOpenSocket) {
-        this.socketManager = SocketManager.getInstance(this.editor, document, config);
+      this.editor.openConnection();
+      if (Node.string(editor) === '') {
+        var firstNodePath = ReactEditor.findPath(editor, this.editor.children[0]);
+        focusEditor(this.editor, firstNodePath);
       }
-      var firstNodepath = ReactEditor.findPath(editor, this.editor.children[0]);
-      focusEditor(this.editor, firstNodepath);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.socketManager.closeSocketConnect();
-      this.socketManager = null;
+      this.editor.closeConnection();
     }
   }, {
     key: "render",
@@ -86,6 +85,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       var slateValue = this.state.slateValue;
       var config = this.props.config;
       var docUuid = config.docUuid;
+      var decorate = getDecorate(editor);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -111,7 +111,8 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
           return _renderLeaf(props, _this2.editor);
         },
         onKeyDown: this.eventProxy.onKeyDown,
-        onDOMBeforeInput: this.onDOMBeforeInput
+        onDOMBeforeInput: this.onDOMBeforeInput,
+        decorate: decorate
       }))))));
     }
   }]);

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

@@ -15,58 +15,58 @@ export var REMOVE_TABLE = 'remove_table';
 // menus config
 export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CONFIG_MAP, BLOCKQUOTE, {
   id: "sdoc_".concat(BLOCKQUOTE),
-  iconClass: 'iconfont icon-quote-left',
+  iconClass: 'sdocfont sdoc-quote-left',
   text: 'quote'
 }), _defineProperty(_MENUS_CONFIG_MAP, ORDERED_LIST, {
   id: ORDERED_LIST,
-  iconClass: 'iconfont icon-list-ol',
+  iconClass: 'sdocfont sdoc-list-ol',
   text: 'ordered_list'
 }), _defineProperty(_MENUS_CONFIG_MAP, UNORDERED_LIST, {
   id: UNORDERED_LIST,
-  iconClass: 'iconfont icon-list-ul',
+  iconClass: 'sdocfont sdoc-list-ul',
   text: 'unordered_list'
 }), _defineProperty(_MENUS_CONFIG_MAP, CHECK_LIST, {
   id: CHECK_LIST,
-  iconClass: 'iconfont icon-check-square',
+  iconClass: 'sdocfont sdoc-check-square',
   text: 'check_list_item'
 }), _defineProperty(_MENUS_CONFIG_MAP, CODE_BLOCK, {
   id: CODE_BLOCK,
-  iconClass: 'iconfont icon-code-block',
+  iconClass: 'sdocfont sdoc-code-block',
   text: 'code_block'
 }), _defineProperty(_MENUS_CONFIG_MAP, LINK, {
   id: "sdoc_".concat(LINK),
-  iconClass: 'iconfont icon-link',
+  iconClass: 'sdocfont sdoc-link',
   text: 'insert_link'
 }), _defineProperty(_MENUS_CONFIG_MAP, IMAGE, {
   id: "sdoc_".concat(IMAGE),
-  iconClass: 'iconfont icon-image',
+  iconClass: 'sdocfont sdoc-image',
   text: 'insert_image'
 }), _defineProperty(_MENUS_CONFIG_MAP, TABLE, {
   id: "sdoc_".concat(TABLE),
-  iconClass: 'iconfont icon-table',
+  iconClass: 'sdocfont sdoc-table',
   text: 'insert_table'
 }), _defineProperty(_MENUS_CONFIG_MAP, REMOVE_TABLE, {
   id: "sdoc_".concat(REMOVE_TABLE),
-  iconClass: 'iconfont icon-delete-table',
+  iconClass: 'sdocfont sdoc-delete-table',
   text: 'remove_table'
 }), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
   id: ITALIC,
-  iconClass: 'iconfont icon-italic',
+  iconClass: 'sdocfont sdoc-italic',
   text: 'italic',
   type: 'ITALIC'
 }, {
   id: BOLD,
-  iconClass: 'iconfont icon-bold',
+  iconClass: 'sdocfont sdoc-bold',
   text: 'bold',
   type: 'BOLD'
 }]), _defineProperty(_MENUS_CONFIG_MAP, UNDO, {
   id: UNDO,
-  iconClass: 'iconfont icon-revoke',
+  iconClass: 'sdocfont sdoc-revoke',
   text: 'undo',
   type: 'undo'
 }), _defineProperty(_MENUS_CONFIG_MAP, REDO, {
   id: REDO,
-  iconClass: 'iconfont icon-redo',
+  iconClass: 'sdocfont sdoc-redo',
   text: 'redo',
   type: 'redo'
 }), _MENUS_CONFIG_MAP);

package/dist/basic-sdk/extension/menu/menu.css

@@ -29,6 +29,6 @@
   color: #eb8205;
 }
 
-.menu-group .menu-group-item .iconfont {
-  font-size: 13px;
+.menu-group .menu-group-item .sdocfont {
+  font-size: 14px;
 }

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

@@ -77,7 +77,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var t = this.props.t;
       var isShowHeaderPopover = this.state.isShowHeaderPopover;
-      var headerIconClass = "iconfont icon-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
+      var headerIconClass = "sdocfont sdoc-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
       var headerType = this.getValue();
       var disabled = this.isDisabled();
       return /*#__PURE__*/React.createElement("div", {

package/dist/basic-sdk/extension/plugins/header/menu/style.css

@@ -25,13 +25,13 @@
   border-radius: 2px;
 }
 
-.header-menu .header-toggle .iconfont {
+.header-menu .header-toggle .sdocfont {
   width: 30px;
   height: 30px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
+  font-size: 14px;
   transform: scale(.8);
   cursor: pointer;
 }

package/dist/basic-sdk/extension/plugins/header/render-elem.js

@@ -21,7 +21,7 @@ var renderHeader = function renderHeader(props, editor) {
       position: isShowPlaceHolder ? 'relative' : ''
     }
   }), isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
-    title: 'Please_enter_the_title'
+    title: 'Please_enter_title'
   }), children);
 };
 export default renderHeader;

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -103,7 +103,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
       var imageClassName = isSelected ? 'image-selected' : '';
       var imageStyle = this.getImageStyle();
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", Object.assign({
-        className: classNames('sdoc-image', className)
+        className: classNames('sdoc-image-wrapper', className)
       }, attributes), /*#__PURE__*/React.createElement("img", {
         className: imageClassName,
         ref: this.setImageRef,
@@ -120,7 +120,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
         contentEditable: false,
         onClick: this.setFullScreen
       }, /*#__PURE__*/React.createElement("i", {
-        className: 'iconfont icon-fullscreen',
+        className: 'sdocfont sdoc-fullscreen',
         title: t('Full_screen')
       }))), isResizing && /*#__PURE__*/React.createElement("span", {
         className: "image-size",

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

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

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

@@ -0,0 +1,2 @@
+export var TABLE_MAX_ROWS = 50;
+export var TABLE_MAX_COLUMNS = 50;

package/dist/basic-sdk/extension/plugins/table/dialog/custom-table-size-dialog/index.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label } from 'reactstrap';
 import NumberInput from '../../number-input';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS } from '../../constants';
 import './index.css';
 var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
   _inherits(CustomTableSizeDialog, _Component);
@@ -65,7 +66,7 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Label, {
         className: "mb-2"
       }, t('Rows')), /*#__PURE__*/React.createElement(NumberInput, {
-        max: 50,
+        max: TABLE_MAX_ROWS,
         value: rows,
         onChange: this.rowsChange
       })), /*#__PURE__*/React.createElement("div", {
@@ -73,7 +74,7 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Label, {
         className: "mb-2"
       }, t('Columns')), /*#__PURE__*/React.createElement(NumberInput, {
-        max: 50,
+        max: TABLE_MAX_COLUMNS,
         value: cols,
         onChange: this.colsChange
       })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {

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

@@ -56,7 +56,7 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement("i", {
         className: iconClass
       }), /*#__PURE__*/React.createElement("span", {
-        className: "iconfont icon-".concat(isShowMenu ? 'caret-up' : 'drop-down')
+        className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
       })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
         target: id,
         className: "sdoc-common-menu-popover",

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

@@ -2,6 +2,6 @@
   padding: 8px 0;
 }
 
-.sdoc-table-menu-group .iconfont {
+.sdoc-table-menu-group .sdocfont {
   transform: scale(.8);
 }

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

@@ -53,7 +53,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "text-align",
-        iconClass: "iconfont icon-left-alignment mr-1",
+        iconClass: "sdocfont sdoc-left-alignment mr-1",
         ref: function ref(_ref) {
           return _this.textAlignRef = _ref;
         }
@@ -61,24 +61,24 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'left')
       }, /*#__PURE__*/React.createElement("i", {
-        className: "iconfont icon-left-alignment mr-2"
+        className: "sdocfont sdoc-left-alignment mr-2"
       }), t('left')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'center')
       }, /*#__PURE__*/React.createElement("i", {
-        className: "iconfont icon-center-horizontally mr-2"
+        className: "sdocfont sdoc-center-horizontally mr-2"
       }), t('center')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'right')
       }, /*#__PURE__*/React.createElement("i", {
-        className: "iconfont icon-align-right mr-2"
+        className: "sdocfont sdoc-align-right mr-2"
       }), t('right')));
     };
     _this.renderTableColumn = function () {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-column",
-        iconClass: "iconfont icon-column mr-1",
+        iconClass: "sdocfont sdoc-column mr-1",
         ref: function ref(_ref2) {
           return _this.tableColumnRef = _ref2;
         }
@@ -94,7 +94,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-row",
-        iconClass: "iconfont icon-row mr-1",
+        iconClass: "sdocfont sdoc-row mr-1",
         ref: function ref(_ref3) {
           return _this.tableRowRef = _ref3;
         }

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

@@ -9,6 +9,7 @@ import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, isLastNo
 import { getNodePathById } from '../../../socket/helpers';
 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';
 var deleteHandler = function deleteHandler(editor) {
   var selection = editor.selection;
   if (selection == null) return false;
@@ -185,6 +186,16 @@ 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 lastRowIndex = tableSize[0] - 1;
+  var lastColumnIndex = tableSize[1] - 1;
+  var cellNodePath = cellNode[1];
+  var cellNodePathDeep = cellNodePath.length;
+  return cellNodePath[cellNodePathDeep - 1] === lastColumnIndex && cellNodePath[cellNodePathDeep - 2] === lastRowIndex;
+};
 var withTable = function withTable(editor) {
   var insertBreak = editor.insertBreak,
     deleteBackward = editor.deleteBackward,
@@ -192,7 +203,8 @@ var withTable = function withTable(editor) {
     insertData = editor.insertData,
     selectAll = editor.selectAll,
     normalizeNode = editor.normalizeNode,
-    deleteFragment = editor.deleteFragment;
+    deleteFragment = editor.deleteFragment,
+    handleTab = editor.handleTab;
   var newEditor = editor;
   newEditor.tableOnKeyDown = function (event) {
     // Handle special keyboard events
@@ -214,6 +226,9 @@ var withTable = function withTable(editor) {
     if (isHotkey(KEYBOARD.LEFT, event)) {
       focusCell(newEditor, event, KEYBOARD.LEFT);
     }
+    if (isHotkey('tab', event)) {
+      event.preventDefault();
+    }
   };
   newEditor.insertBreak = function () {
     var selectedNode = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE);
@@ -318,9 +333,9 @@ var withTable = function withTable(editor) {
 
       // Some text is selected in a cell
       if (selectedNodesCount === 3) {
-        var _getSelectedInfo3 = getSelectedInfo(newEditor),
-          cell = _getSelectedInfo3.cell,
-          cellPath = _getSelectedInfo3.cellPath;
+        var _getSelectedInfo4 = getSelectedInfo(newEditor),
+          cell = _getSelectedInfo4.cell,
+          cellPath = _getSelectedInfo4.cellPath;
         var selection = newEditor.selection;
         var focus = selection.focus,
           anchor = selection.anchor;
@@ -378,6 +393,55 @@ var withTable = function withTable(editor) {
     deleteFragment(fragment);
   };
 
+  // Jump to the next cell when pressing tab in the table
+  newEditor.handleTab = function (event) {
+    var selectedNode = getSelectedNodeByType(newEditor, ELEMENT_TYPE.TABLE);
+    if (!selectedNode) {
+      handleTab(event);
+      return;
+    }
+    var above = Editor.above(newEditor);
+
+    // Select multiple cells, jump to the first selected cell
+    if (above[0].type === ELEMENT_TYPE.TABLE) {
+      var _selection = newEditor.selection;
+      var anchor = _selection.anchor;
+      Transforms.select(newEditor, _toConsumableArray(anchor.path.slice(0, -1)));
+      return;
+    }
+
+    // Add row to the last cell
+    if (isLastTableCell(newEditor, above)) {
+      var _getSelectedInfo5 = getSelectedInfo(newEditor),
+        tablePath = _getSelectedInfo5.tablePath,
+        tableSize = _getSelectedInfo5.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]));
+      return;
+    }
+    var selection = newEditor.selection;
+
+    // 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 lastColumnIndex = _tableSize[1] - 1;
+      var nextCell = [rowIndex, cellIndex + 1];
+      if (lastColumnIndex < nextCell[1]) {
+        nextCell = [rowIndex + 1, 0];
+      }
+      Transforms.select(newEditor, [].concat(_toConsumableArray(_tablePath), _toConsumableArray(nextCell)));
+      return;
+    }
+    var next = Editor.next(newEditor);
+    Transforms.select(newEditor, next[1]);
+  };
+
   // specific business logic
   newEditor.isInTable = function () {
     var selectedNodes = getSelectedElems(newEditor);
@@ -425,12 +489,13 @@ var withTable = function withTable(editor) {
   };
   newEditor.insertTableElement = function (type) {
     var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TABLE_ELEMENT_POSITION.AFTER;
-    var _getSelectedInfo4 = getSelectedInfo(newEditor),
-      tablePath = _getSelectedInfo4.tablePath,
-      tableSize = _getSelectedInfo4.tableSize,
-      rowIndex = _getSelectedInfo4.rowIndex,
-      cellIndex = _getSelectedInfo4.cellIndex;
+    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 row = generateTableRow(tableSize[1]);
       Transforms.insertNodes(editor, row, {
@@ -441,6 +506,7 @@ var withTable = function withTable(editor) {
       return;
     }
     if (type === TABLE_ELEMENT.COLUMN) {
+      if (tableSize[1] === TABLE_MAX_COLUMNS) return;
       var newCellIndex = position === TABLE_ELEMENT_POSITION.AFTER ? cellIndex + 1 : cellIndex;
       for (var i = 0; i < tableSize[0]; i++) {
         var newCellPath = [].concat(_toConsumableArray(tablePath), [i, newCellIndex]);
@@ -455,12 +521,12 @@ var withTable = function withTable(editor) {
     }
   };
   newEditor.removeTableElement = function (type) {
-    var _getSelectedInfo5 = getSelectedInfo(newEditor),
-      tablePath = _getSelectedInfo5.tablePath,
-      tableSize = _getSelectedInfo5.tableSize,
-      rowPath = _getSelectedInfo5.rowPath,
-      rowIndex = _getSelectedInfo5.rowIndex,
-      cellIndex = _getSelectedInfo5.cellIndex;
+    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;

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

@@ -21,10 +21,10 @@
   border-bottom: none;
 }
 
-.sdoc-table tr:first-child {
+.sdoc-table-wrapper tr:first-child {
   font-weight: unset;
 }
 
-.sdoc-table tr:nth-child(2n+1) {
+.sdoc-table-wrapper tr:nth-child(2n+1) {
   background-color: unset;
 }

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

@@ -22,7 +22,7 @@ var Table = /*#__PURE__*/function (_Component) {
         children = _this$props.children,
         isSelected = _this$props.isSelected;
       return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
-        className: classnames('sdoc-table', attributes.className, className, {
+        className: classnames('sdoc-table-wrapper', attributes.className, className, {
           'sdoc-table-selected': isSelected
         })
       }), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, children)));