@seafile/seafile-editor 0.3.78 → 0.3.82

package/dist/components/click-outside.js

@@ -0,0 +1,58 @@
+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 from 'react';
+
+var ClickOutside = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClickOutside, _React$Component);
+
+  var _super = _createSuper(ClickOutside);
+
+  function ClickOutside(props) {
+    var _this;
+
+    _classCallCheck(this, ClickOutside);
+
+    _this = _super.call(this, props);
+
+    _this.handleDocumentMouseDown = function () {
+      if (_this.isClickedInside) {
+        _this.isClickedInside = false;
+        return;
+      }
+
+      _this.props.clickOutside();
+    };
+
+    _this.handleMouseDown = function (e) {
+      _this.isClickedInside = true;
+    };
+
+    _this.isClickedInside = false;
+    return _this;
+  }
+
+  _createClass(ClickOutside, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return React.cloneElement(React.Children.only(this.props.children), {
+        onMouseDownCapture: this.handleMouseDown
+      });
+    }
+  }]);
+
+  return ClickOutside;
+}(React.Component);
+
+export default ClickOutside;

package/dist/components/table-button.js

@@ -0,0 +1,155 @@
+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 ClickOutside from './click-outside';
+import IconButton from './topbar-component/icon-button';
+
+var TableButton = /*#__PURE__*/function (_Component) {
+  _inherits(TableButton, _Component);
+
+  var _super = _createSuper(TableButton);
+
+  function TableButton(props) {
+    var _this;
+
+    _classCallCheck(this, TableButton);
+
+    _this = _super.call(this, props);
+
+    _this.toggleCard = function () {
+      _this.setState({
+        showCard: !_this.state.showCard,
+        columnCount: -1,
+        rowCount: -1
+      });
+    };
+
+    _this.createTableCells = function () {
+      var rows = [];
+      var _this$state = _this.state,
+          columnCount = _this$state.columnCount,
+          rowCount = _this$state.rowCount,
+          currentMaxColumnCount = _this$state.currentMaxColumnCount,
+          currentMaxRowCount = _this$state.currentMaxRowCount;
+
+      var _loop = function _loop(rowIndex) {
+        var cells = [];
+
+        var _loop2 = function _loop2(columnIndex) {
+          var isActive = columnIndex <= columnCount - 1 && rowIndex <= rowCount - 1;
+          var vDom = /*#__PURE__*/React.createElement("div", {
+            onMouseEnter: function onMouseEnter() {
+              return _this.onTableCellMouseEnter(rowIndex, columnIndex);
+            },
+            key: "table-row-".concat(rowIndex, "-").concat(columnIndex),
+            className: "sf-editor-table-card-cell ".concat(isActive ? 'sf-editor-table-card-active-cell' : '')
+          });
+          cells.push(vDom);
+        };
+
+        for (var columnIndex = 0; columnIndex < currentMaxColumnCount; columnIndex++) {
+          _loop2(columnIndex);
+        }
+
+        var row = /*#__PURE__*/React.createElement("div", {
+          key: "table-row-".concat(rowIndex),
+          className: "sf-editor-table-card-row"
+        }, cells);
+        rows.push(row);
+      };
+
+      for (var rowIndex = 0; rowIndex < currentMaxRowCount; rowIndex++) {
+        _loop(rowIndex);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(event) {
+          return _this.onAddTable(event, rowCount, columnCount);
+        },
+        className: "sf-editor-table-card"
+      }, rows);
+    };
+
+    _this.onAddTable = function (event, rowCount, columnCount) {
+      _this.props.onAddTable(event, rowCount, columnCount);
+
+      _this.toggleCard();
+    };
+
+    _this.onTableCellMouseEnter = function (rowIndex, columnIndex) {
+      var columnCount = columnIndex + 1,
+          rowCount = rowIndex + 1;
+      var currentMaxRowCount = rowCount + 1,
+          currentMaxColumnCount = columnCount + 1;
+
+      if (currentMaxColumnCount > 10) {
+        currentMaxColumnCount = 10;
+      } else if (currentMaxColumnCount < 4) {
+        currentMaxColumnCount = 4;
+      }
+
+      if (currentMaxRowCount > 10) {
+        currentMaxRowCount = 10;
+      } else if (currentMaxRowCount < 4) {
+        currentMaxRowCount = 4;
+      }
+
+      _this.setState({
+        columnCount: columnCount,
+        rowCount: rowCount,
+        currentMaxColumnCount: currentMaxColumnCount,
+        currentMaxRowCount: currentMaxRowCount
+      });
+    };
+
+    _this.state = {
+      showCard: false,
+      currentMaxColumnCount: 4,
+      currentMaxRowCount: 4,
+      columnCount: -1,
+      rowCount: -1
+    };
+    return _this;
+  }
+
+  _createClass(TableButton, [{
+    key: "createTableScaleCard",
+    value: function createTableScaleCard(props) {
+      var _this$state2 = this.state,
+          columnCount = _this$state2.columnCount,
+          rowCount = _this$state2.rowCount;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-count-card"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-cells-header"
+      }, "".concat(columnCount < 0 ? 0 : columnCount, " x ").concat(rowCount < 0 ? 0 : rowCount)), this.createTableCells());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          isRichEditor = _this$props.isRichEditor,
+          text = _this$props.text;
+      var showCard = this.state.showCard;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-btn-wrapper"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        disabled: disabled,
+        isRichEditor: isRichEditor,
+        text: text,
+        id: 'tableButton',
+        icon: 'iconfont icon-table',
+        onMouseDown: this.toggleCard
+      }), showCard && /*#__PURE__*/React.createElement(ClickOutside, {
+        clickOutside: this.toggleCard
+      }, this.createTableScaleCard()));
+    }
+  }]);
+
+  return TableButton;
+}(Component);
+
+export default TableButton;

package/dist/components/toolbar.js

@@ -6,6 +6,7 @@ import React from 'react';
 import HeaderList from '../components/topbar-component/header-list';
 import ButtonGroup from '../components/topbar-component/button-group';
 import IconButton from '../components/topbar-component/icon-button';
+import TableButton from '../components/table-button';
 import { withTranslation } from 'react-i18next';
 import AddLinkDialog from './add-link-dialog';
 import AddImageDialog from './add-image-dialog';
@@ -168,13 +169,13 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
           return _this2.editorUtils.onClickBlock(event, 'code_block');
         },
         isActive: isCodeActive && !readOnly
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(TableButton, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive,
         isRichEditor: true,
         text: t('insert_table'),
         id: 'tableButton',
         icon: 'iconfont icon-table',
-        onMouseDown: this.editorUtils.onAddTable
+        onAddTable: this.editorUtils.onAddTable
       }), window.canInsertFormula && /*#__PURE__*/React.createElement(IconButton, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive || isListActive,
         isRichEditor: true,

package/dist/css/topbar.css

@@ -102,6 +102,58 @@
   margin-left:10px;
 }
 
+.sf-editor-table-btn-wrapper {
+  position: relative;
+}
+
+.sf-editor-table-count-card {
+  background-color: #ffffff;
+  min-width: 100px;
+  min-height: 100px;
+  position: absolute;
+  top: 101%;
+  left: 0;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  z-index: 100;
+  padding: 5px 10px 10px 10px;
+  border-radius: 2px;
+}
+
+.sf-editor-table-cells-header {
+  text-align: center;
+  height: 20px;
+  font-size: 14px;
+}
+
+.sf-editor-table-card {
+  margin-top: 5px;
+}
+
+.sf-editor-table-card-row {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-row:first-child {
+  border-top: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-cell {
+  border-right: 1px solid #cccccc;
+  width: 20px;
+  height: 15px;
+}
+
+.sf-editor-table-card-row .sf-editor-table-card-cell:first-child {
+  border-left: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-active-cell {
+  background-color: #ffa94d;
+}
+
 /*topbar style*/
 
 .menu {

package/dist/editor/controller/block-element-controller.js

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor } from 'slate';
 import ListUtils from '../editor-utils/block-element-utils/list-utils';
@@ -146,6 +146,27 @@ var withBlock = function withBlock(editor) {
 
           if (firstFragmentNode.type === 'paragraph') {
             Editor.insertFragment(editor, fragment);
+            return;
+          }
+          /** 
+           * if the first fragment element is a list, get normalized list items with function getNormalizedListItems and insert
+           */
+
+
+          if (firstFragmentNode.type.includes('_list')) {
+            var listItems = listUtils.getNormalizedListItems(firstFragmentNode);
+            var newFragment = fragment.slice(1);
+            Editor.insertNodes(editor, [{
+              type: firstFragmentNode.type,
+              children: listItems
+            }].concat(_toConsumableArray(newFragment)));
+
+            if (SfEditor.isEmptyParagraph(currentBlock)) {
+              Editor.delete(editor, {
+                at: path
+              });
+            }
+
             return;
           } // if current node is an empty paragraph, insert the fragment and
           // delete the empty paragraph
@@ -247,15 +268,16 @@ var withBlock = function withBlock(editor) {
             }
           });
         } else {
-          var listItems = Editor.nodes(editor, {
+          var _listItems = Editor.nodes(editor, {
             at: editor.selection,
             match: {
               type: 'list_item'
             }
           });
+
           var nearestItem;
 
-          var _iterator = _createForOfIteratorHelper(listItems),
+          var _iterator = _createForOfIteratorHelper(_listItems),
               _step;
 
           try {
@@ -325,7 +347,7 @@ var withBlock = function withBlock(editor) {
         break;
 
       case 'insert_table':
-        tableUtils.insertTable();
+        tableUtils.insertTable(data);
         break;
 
       case 'remove_table':
@@ -356,6 +378,14 @@ var withBlock = function withBlock(editor) {
         tableUtils.exitTable();
         break;
 
+      case 'focus_next_table_cell':
+        tableUtils.focusNextTableCell();
+        break;
+
+      case 'focus_previous_table_cell':
+        tableUtils.focusPreviousTableCell();
+        break;
+
       case 'insert_formula':
         formulaUtils.insertFormula(command.data);
         break;

package/dist/editor/controller/shortcut-controller.js

@@ -327,34 +327,54 @@ var withMarkdownShortcut = function withMarkdownShortcut(editor) {
           if (listUtils.isInlist()) {
             var _Editor$nodes9 = Editor.nodes(editor, {
               match: [{
-                type: 'ordered_list'
-              }, {
-                type: 'unordered_list'
+                type: 'list_item'
               }]
             }),
                 _Editor$nodes10 = _slicedToArray(_Editor$nodes9, 1),
                 _node3 = _Editor$nodes10[0];
 
-            var listNode = _node3[0];
+            var listItemPath = _node3[1];
+            var listNode = Node.parent(editor, listItemPath); // Unwrap the list item when the selection is at the first list item of the first node of document
 
-            if (listNode.children.length === 1 && Node.text(listNode).length === 0) {
+            if (anchor.path[0] === 0 && anchor.path[1] === 0) {
               listUtils.unwrapList();
               return;
-            } // Unwrap the list item when the selection is at the first list item of the first node of document
+            } // unwrap an empty list
 
 
-            if (anchor.path[0] === 0 && anchor.path[1] === 0) {
+            if (listNode.children.length === 1 && Node.text(listNode).length === 0) {
               listUtils.unwrapList();
               return;
+            } // list items with mutiple chidren
+
+
+            var currentChildBlockIndex = anchor.path[anchor.path.length - 2];
+            var currentListItem;
+
+            for (var i = anchor.path.length - 1; i > 0; i--) {
+              var _node4 = Node.get(editor, anchor.path.slice(0, i));
+
+              if (_node4.type === 'list_item') {
+                currentListItem = _node4;
+                break;
+              }
+            }
+
+            if (currentChildBlockIndex === 0 && currentListItem.children.length > 1) {
+              Editor.withoutNormalizing(editor, function (editor) {
+                listUtils.unwrapList();
+                exec(command);
+              });
+              return;
             }
           }
 
           if (codeUtils.isInCodeBlock()) {
-            var _node4 = Editor.match(editor, editor.selection, {
+            var _node5 = Editor.match(editor, editor.selection, {
               type: 'code_block'
             });
 
-            var codeBlock = _node4[0];
+            var codeBlock = _node5[0];
             var children = codeBlock.children;
             var text = Node.text(codeBlock);
 

package/dist/editor/editor-plugin.js

@@ -65,6 +65,12 @@ var Plugin = function Plugin(_editor) {
           type: "unwrap_".concat(type)
         });
       }
+
+      if (_this.tableUtils.isInTable()) {
+        _this.editor.exec({
+          type: 'focus_previous_table_cell'
+        });
+      }
     }
 
     if (isHotKey('mod+s', event)) {
@@ -86,6 +92,12 @@ var Plugin = function Plugin(_editor) {
           type: 'increase_list_item_depth'
         });
       }
+
+      if (_this.tableUtils.isInTable()) {
+        _this.editor.exec({
+          type: 'focus_next_table_cell'
+        });
+      }
     }
 
     if (isHotKey('mod+b', event)) {

package/dist/editor/editor-utils/block-element-utils/list-utils.js

@@ -2,7 +2,7 @@ import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIt
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import { Node, Range, Path } from 'slate';
+import { Node, Range, Path, Editor } from 'slate';
 import { SfEditor } from '../../custom/custom';
 import getEventTransfer from '../../custom/get-event-transfer';
 import { htmlDeserializer } from '../../../utils/deserialize-html';
@@ -14,117 +14,153 @@ var LitsUtils = function LitsUtils(editor) {
   _classCallCheck(this, LitsUtils);
 
   this.unwrapList = function () {
-    normailizeSelection(_this.editor); // selected list item
+    // defer normalization util the unwrap operartions completed
+    SfEditor.withoutNormalizing(_this.editor, function () {
+      normailizeSelection(_this.editor); // selected list item
 
-    var selectedListItem = _this.getCurrentListItem(); // first selected item path and node
+      var selectedListItem = _this.getCurrentListItem(); // first selected item path and node
 
 
-    var firstSelectedItem = selectedListItem[0];
-    var firstSelectedItemPath = firstSelectedItem[1]; // get selected list and the path of the list
+      var firstSelectedItem = selectedListItem[0];
+      var firstSelectedItemPath = firstSelectedItem[1]; // get selected list and the path of the list
 
-    var selectedListPath = firstSelectedItemPath.slice(0, firstSelectedItemPath.length - 1);
-    var selectedList = Node.get(_this.editor, selectedListPath); // get the node and path of parent of selected list
+      var selectedListPath = firstSelectedItemPath.slice(0, firstSelectedItemPath.length - 1);
+      var selectedList = Node.get(_this.editor, selectedListPath); // get the node and path of parent of selected list
 
-    var listParent = Node.parent(_this.editor, selectedListPath);
-    var listParentPath = selectedListPath.slice(0, selectedListPath.length - 1); // unwrap list of selected list item
-    // if the type of parent of selected list is a list and it should be a list item
+      var listParent = Node.parent(_this.editor, selectedListPath);
+      var listParentPath = selectedListPath.slice(0, selectedListPath.length - 1); // unwrap list of selected list item
+      // if the type of parent of selected list is a list and it should be a list item
 
-    if (listParent.type && listParent.type.includes('list')) {
-      // get the path of parent of listParent
-      var ancesstorPath = listParentPath.slice(0, listParentPath.length - 1);
-      var lastSelectedListItem = selectedListItem.slice(-1)[0];
-      var lastSelectedListItemPath = lastSelectedListItem[1];
-      var lastSelectedListItemIndex = lastSelectedListItemPath.slice(-1)[0];
-      var unSelectedListItem = selectedList.children.slice(selectedListItem.slice(-1)[0][1].slice(-1)[0] + 1); // insert a new list to the last selected list item
+      if (listParent.type && listParent.type.includes('list')) {
+        // get the path of parent of listParent
+        var ancesstorPath = listParentPath.slice(0, listParentPath.length - 1);
+        var lastSelectedListItem = selectedListItem.slice(-1)[0];
+        var lastSelectedListItemPath = lastSelectedListItem[1];
+        var lastSelectedListItemIndex = lastSelectedListItemPath.slice(-1)[0];
+        var unSelectedListItem = selectedList.children.slice(selectedListItem.slice(-1)[0][1].slice(-1)[0] + 1); // insert a new list to the last selected list item
 
-      if (!(lastSelectedListItemIndex === selectedList.children.length - 1)) {
-        SfEditor.insertNodes(_this.editor, {
-          type: selectedList.type,
-          children: []
-        }, {
-          at: [].concat(_toConsumableArray(lastSelectedListItemPath), [lastSelectedListItem[0].children.length])
-        });
-      } // move the unselected list item to the new created list
+        if (!(lastSelectedListItemIndex === selectedList.children.length - 1)) {
+          SfEditor.insertNodes(_this.editor, {
+            type: selectedList.type,
+            children: []
+          }, {
+            at: [].concat(_toConsumableArray(lastSelectedListItemPath), [lastSelectedListItem[0].children.length])
+          });
+        } // move the unselected list item to the new created list
 
 
-      unSelectedListItem.forEach(function (item, index) {
-        SfEditor.moveNodes(_this.editor, {
-          at: [].concat(_toConsumableArray(lastSelectedListItemPath.slice(0, -1)), [lastSelectedListItemIndex + 1]),
-          to: [].concat(_toConsumableArray(lastSelectedListItemPath), [lastSelectedListItem[0].children.length, index])
+        unSelectedListItem.forEach(function (item, index) {
+          SfEditor.moveNodes(_this.editor, {
+            at: [].concat(_toConsumableArray(lastSelectedListItemPath.slice(0, -1)), [lastSelectedListItemIndex + 1]),
+            to: [].concat(_toConsumableArray(lastSelectedListItemPath), [lastSelectedListItem[0].children.length, index])
+          });
         });
-      });
-      var currentItemPath = firstSelectedItemPath;
-      var startIndexOfItemInNewList = listParentPath[listParentPath.length - 1] + 1; // move item to outer list by path
-
-      selectedListItem.forEach(function (item, index) {
-        var itemTargetPath = [].concat(_toConsumableArray(ancesstorPath), [index + startIndexOfItemInNewList]);
-        SfEditor.moveNodes(_this.editor, {
-          at: currentItemPath,
-          to: itemTargetPath
+        var currentItemPath = firstSelectedItemPath;
+        var startIndexOfItemInNewList = listParentPath[listParentPath.length - 1] + 1; // move item to outer list by path
+
+        selectedListItem.forEach(function (item, index) {
+          var itemTargetPath = [].concat(_toConsumableArray(ancesstorPath), [index + startIndexOfItemInNewList]);
+          SfEditor.moveNodes(_this.editor, {
+            at: currentItemPath,
+            to: itemTargetPath
+          });
         });
-      });
-      var currentList = Node.get(_this.editor, selectedListPath); // delete empty list
+        var currentList = Node.get(_this.editor, selectedListPath); // delete empty list
 
-      if (!currentList.children[0] || currentList.children[0].type !== 'list_item') {
-        SfEditor.removeNodes(_this.editor, {
-          at: selectedListPath
+        if (!currentList.children[0] || currentList.children[0].type !== 'list_item') {
+          SfEditor.removeNodes(_this.editor, {
+            at: selectedListPath
+          });
+        }
+      } else {
+        // unwrap list item if the selected list is the outest of the root
+        var firstListItemIndex = firstSelectedItem[1].slice(-1)[0];
+        var restCount = 0;
+        selectedListItem.forEach(function (item) {
+          SfEditor.unwrapNodesByTypeAtRange(_this.editor, {
+            match: {
+              type: 'list_item'
+            },
+            mode: 'highest',
+            at: [].concat(_toConsumableArray(selectedListPath), [firstListItemIndex + restCount])
+          });
+          restCount += item[0].children.length;
         });
-      }
-    } else {
-      // unwrap list item if the selected list is the outest of the root
-      SfEditor.unwrapNodesByTypeAtRange(_this.editor, {
-        match: [{
-          type: selectedList.type
-        }],
-        split: true,
-        mode: 'highest'
-      });
-      var firstListItemIndex = firstSelectedItem[1].slice(-1)[0];
-
-      var _listParentPath = Path.parent(selectedListPath);
-
-      var selectedListIndex = selectedListPath.slice(-1)[0];
-      var startIndex = firstListItemIndex === 0 ? selectedListIndex : selectedListIndex + 1;
-      selectedListItem.forEach(function (item, index) {
+        var startItemRange = Editor.range(_this.editor, [].concat(_toConsumableArray(selectedListPath), [firstListItemIndex]));
+        var endItemRange = Editor.range(_this.editor, [].concat(_toConsumableArray(selectedListPath), [firstListItemIndex + restCount - 1]));
         SfEditor.unwrapNodesByTypeAtRange(_this.editor, {
-          match: {
-            type: 'list_item'
-          },
+          match: [{
+            type: selectedList.type
+          }],
+          split: true,
           mode: 'highest',
-          at: [].concat(_toConsumableArray(_listParentPath), [startIndex + index])
+          at: {
+            anchor: startItemRange.anchor,
+            focus: endItemRange.focus
+          }
         });
-      });
-    }
+      }
+    });
   };
 
   this.wrapList = function (type) {
     normailizeSelection(_this.editor);
-    var nodes = SfEditor.nodes(_this.editor, {
-      match: 'block'
-    });
-    SfEditor.wrapNodes(_this.editor, {
-      type: type,
-      children: []
-    }, {
-      split: false
-    }); // Get selected block node from an iterator.
-    // Modified according to the function *nodes from slate/src/interface/node.ts
-
-    var items = Array.from(nodes); // wrap selected nodes into list_item
-
-    for (var _i = 0, _items = items; _i < _items.length; _i++) {
-      var _items$_i = _slicedToArray(_items[_i], 2),
-          node = _items$_i[0],
-          path = _items$_i[1];
-
-      SfEditor.wrapNodes(_this.editor, {
-        type: 'list_item',
-        children: [node],
-        data: {}
-      }, {
-        at: path
+    var selection = _this.editor.selection;
+    var focusPath = selection.focus.path;
+    var anchorPath = selection.anchor.path;
+
+    if (Path.equals(focusPath, anchorPath)) {
+      var _SfEditor$match = SfEditor.match(_this.editor, _this.editor.selection, 'block'),
+          _SfEditor$match2 = _slicedToArray(_SfEditor$match, 2),
+          block = _SfEditor$match2[0],
+          path = _SfEditor$match2[1];
+
+      Editor.withoutNormalizing(_this.editor, function (editor) {
+        SfEditor.wrapNodes(_this.editor, {
+          type: 'list_item',
+          children: [block],
+          data: {}
+        }, {
+          at: path
+        });
+        SfEditor.wrapNodes(_this.editor, {
+          type: type,
+          children: []
+        }, {
+          split: false,
+          at: path
+        });
       });
+      return;
     }
+
+    var commonPath = Path.common(focusPath, anchorPath);
+    var commonAncestor = Node.get(_this.editor, commonPath);
+    var startIndex = anchorPath[commonPath.length];
+    var endIndex = focusPath[commonPath.length]; // get hightest selected commonAncestor block items
+
+    var selectedBlock = commonAncestor.children.slice(startIndex, endIndex + 1);
+    Editor.withoutNormalizing(_this.editor, function (editor) {
+      selectedBlock.forEach(function (blockItem, index) {
+        // wrap block into list
+        if (!blockItem.type.includes('list')) {
+          SfEditor.wrapNodes(_this.editor, {
+            type: 'list_item',
+            children: [blockItem],
+            data: {}
+          }, {
+            at: [].concat(_toConsumableArray(commonPath), [startIndex + index])
+          });
+          SfEditor.wrapNodes(_this.editor, {
+            type: type,
+            children: []
+          }, {
+            split: false,
+            at: [].concat(_toConsumableArray(commonPath), [startIndex + index])
+          });
+        }
+      });
+    });
   };
 
   this.getCurrentListItem = function () {
@@ -224,34 +260,6 @@ var LitsUtils = function LitsUtils(editor) {
       return [[commonAncestor, commonPath]];
     }
 
-    if (commonPath.length === 0) {
-      var listNodes = SfEditor.nodes(_this.editor, {
-        match: [{
-          type: 'list_item'
-        }, {
-          type: 'list_item'
-        }],
-        mode: 'highest'
-      });
-      var list = [];
-
-      var _iterator2 = _createForOfIteratorHelper(listNodes),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var iterator = _step2.value;
-          list.push(iterator);
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-
-      return list;
-    }
-
     return [];
   };
 
@@ -263,19 +271,19 @@ var LitsUtils = function LitsUtils(editor) {
     });
     var node; //get the nearest list_item of current selection
 
-    var _iterator3 = _createForOfIteratorHelper(listNodes),
-        _step3;
+    var _iterator2 = _createForOfIteratorHelper(listNodes),
+        _step2;
 
     try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var item = _step3.value;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var item = _step2.value;
         node = item;
       } // if current list item is the first child of the list return
 
     } catch (err) {
-      _iterator3.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator3.f();
+      _iterator2.f();
     }
 
     var listItemPath = _toConsumableArray(node[1]);
@@ -287,18 +295,21 @@ var LitsUtils = function LitsUtils(editor) {
     var previousListItem = listNode.children[listItemIndex - 1];
     var previousListItemPath = [].concat(_toConsumableArray(listNodePath), [listItemIndex - 1]);
     var lastIndex = previousListItem.children.length;
-    var newListPath = [].concat(_toConsumableArray(previousListItemPath), [lastIndex]);
-    SfEditor.insertNodes(_this.editor, {
-      type: listNode.type,
-      children: []
-    }, {
-      at: newListPath,
-      split: true
-    });
-    var newListItemPath = [].concat(_toConsumableArray(newListPath), [0]);
-    SfEditor.moveNodes(_this.editor, {
-      at: node[1],
-      to: newListItemPath
+    var newListPath = [].concat(_toConsumableArray(previousListItemPath), [lastIndex]); // Deferring normalization list untils after operations completes.
+
+    SfEditor.withoutNormalizing(_this.editor, function () {
+      SfEditor.insertNodes(_this.editor, {
+        type: listNode.type,
+        children: []
+      }, {
+        at: newListPath,
+        split: true
+      });
+      var newListItemPath = [].concat(_toConsumableArray(newListPath), [0]);
+      SfEditor.moveNodes(_this.editor, {
+        at: node[1],
+        to: newListItemPath
+      });
     });
   };
 
@@ -333,8 +344,6 @@ var LitsUtils = function LitsUtils(editor) {
         type = _getEventTransfer.type,
         html = _getEventTransfer.html;
 
-    console.log(fragment);
-
     if (type === 'text' && !fragment) {
       var newText = text.replace(/\r\n|\n/g, ' ');
       SfEditor.insertText(_this.editor, newText);

package/dist/editor/editor-utils/block-element-utils/table-utils.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import { SfEditor } from '../../custom/custom';
-import { Node } from 'slate';
+import { Node, Editor } from 'slate';
 import { generateTable, generateTableRow, generateTableCell } from '../../element-model/table';
 import getEventTransfer from '../../custom/get-event-transfer';
 import { htmlDeserializer } from '../../../utils/deserialize-html';
@@ -28,8 +28,67 @@ var TableUtils = function TableUtils(_editor) {
     return false;
   };
 
-  this.insertTable = function () {
-    var tableElement = generateTable();
+  this.focusNextTableCell = function () {
+    var position = _this.getTablePosition();
+
+    var rowIndex = position.rowIndex,
+        cellIndex = position.cellIndex,
+        row = position.row,
+        table = position.table;
+    var nextCellIndex, nextRowIndex;
+
+    if (cellIndex < row.children.length - 1) {
+      nextCellIndex = cellIndex + 1;
+      nextRowIndex = rowIndex;
+    } else {
+      if (rowIndex < table.children.length - 1) {
+        nextCellIndex = 0;
+        nextRowIndex = rowIndex + 1;
+      } else {
+        _this.insertRow();
+
+        nextCellIndex = 0;
+        nextRowIndex = rowIndex + 1;
+      }
+    }
+
+    _this.selectCellByPosition(nextRowIndex, nextCellIndex);
+  };
+
+  this.focusPreviousTableCell = function () {
+    var position = _this.getTablePosition();
+
+    var rowIndex = position.rowIndex,
+        cellIndex = position.cellIndex,
+        row = position.row;
+    var nextCellIndex, nextRowIndex;
+
+    if (cellIndex > 0) {
+      nextCellIndex = cellIndex - 1;
+      nextRowIndex = rowIndex;
+    } else {
+      if (rowIndex > 0) {
+        nextRowIndex = rowIndex - 1;
+        nextCellIndex = row.children.length - 1;
+      } else {
+        nextCellIndex = 0;
+        nextRowIndex = 0;
+      }
+    }
+
+    _this.selectCellByPosition(nextRowIndex, nextCellIndex);
+  };
+
+  this.selectCellByPosition = function (rowIndex, cellIndex) {
+    var _this$getTablePositio = _this.getTablePosition(),
+        tablePath = _this$getTablePositio.tablePath;
+
+    var cellRange = Editor.range(_this.editor, [].concat(_toConsumableArray(tablePath), [rowIndex, cellIndex]));
+    Editor.select(_this.editor, cellRange.focus);
+  };
+
+  this.insertTable = function (data) {
+    var tableElement = generateTable(data);
     SfEditor.insertNodes(_this.editor, tableElement); // get the first cell path of the table and move selection to it;
 
     var table = SfEditor.match(_this.editor, _this.editor.selection, {

package/dist/editor/editor-utils/common-editor-utils.js

@@ -417,11 +417,15 @@ var EditorUtils = /*#__PURE__*/function () {
       });
     };
 
-    this.onAddTable = function (event) {
+    this.onAddTable = function (event, rowCount, columnCount) {
       event.preventDefault();
 
       _this.editor.exec({
-        type: 'insert_table'
+        type: 'insert_table',
+        data: {
+          rowCount: rowCount,
+          columnCount: columnCount
+        }
       });
     };
 

package/dist/editor/element-model/table.js

@@ -6,7 +6,20 @@ var Table = function Table() {
   _classCallCheck(this, Table);
 
   this.type = options.type || 'table';
-  this.children = options.children || [generateTableRow(), generateTableRow()];
+  var rowCount = options.rowCount,
+      columnCount = options.columnCount;
+  var children = options.children;
+
+  if (rowCount) {
+    var list = new Array(rowCount).fill('');
+    children = list.map(function () {
+      return generateTableRow({
+        columnCount: columnCount
+      });
+    });
+  }
+
+  this.children = children;
 };
 
 var TableRow = function TableRow() {
@@ -15,7 +28,17 @@ var TableRow = function TableRow() {
   _classCallCheck(this, TableRow);
 
   this.type = options.type || 'table_row';
-  this.children = options.children || [generateTableCell(), generateTableCell()];
+  var columnCount = options.columnCount;
+  var children = options.children;
+
+  if (columnCount) {
+    var list = new Array(columnCount).fill('');
+    children = list.map(function () {
+      return generateTableCell();
+    });
+  }
+
+  this.children = children;
 };
 
 var TableCell = function TableCell() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.78",
+  "version": "0.3.82",
   "private": false,
   "dependencies": {
     "@seafile/slate-react": "^0.54.13",