@seafile/sdoc-editor 0.1.39 → 0.1.41

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

@@ -42,7 +42,7 @@
 }
 
 .outline-item {
-  line-height: 30px;
+  padding: 4px 0;
   cursor: pointer;
 }
 

package/dist/basic-sdk/extension/constants/element-type.js

@@ -21,8 +21,8 @@ export var CODE_BLOCK = 'code-block';
 export var CODE_LINE = 'code-line';
 export var IMAGE = 'image';
 export var TABLE = 'table';
-export var TABLE_CELL = 'table-cell';
 export var TABLE_ROW = 'table-row';
+export var TABLE_CELL = 'table-cell';
 export var FORMULA = 'formula';
 export var COLUMN = 'column';
 export var TEXT_STYLE = 'text-style';

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

@@ -3,11 +3,15 @@ var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
 import { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
+import KEYBOARD from './keyboard';
 
 // history
 export var UNDO = 'undo';
 export var REDO = 'redo';
 
+// remove
+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),
@@ -37,6 +41,14 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: "sdoc_".concat(IMAGE),
   iconClass: 'iconfont icon-image',
   text: 'insert_image'
+}), _defineProperty(_MENUS_CONFIG_MAP, TABLE, {
+  id: "sdoc_".concat(TABLE),
+  iconClass: 'iconfont icon-table',
+  text: 'insert_table'
+}), _defineProperty(_MENUS_CONFIG_MAP, REMOVE_TABLE, {
+  id: "sdoc_".concat(REMOVE_TABLE),
+  iconClass: 'iconfont icon-delete-table',
+  text: 'remove_table'
 }), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
   id: ITALIC,
   iconClass: 'iconfont icon-italic',
@@ -65,4 +77,17 @@ export var DIFF_TYPE = {
   MODIFY: 'modify',
   COMMON: 'common'
 };
-export { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE };
+export var STYLE_KEY = {
+  TEXT_ALIGN: 'textAlign'
+};
+export var TABLE_ELEMENT = {
+  TABLE: 'table',
+  ROW: 'row',
+  COLUMN: 'column',
+  CELL: 'cell'
+};
+export var TABLE_ELEMENT_POSITION = {
+  AFTER: 'after',
+  BEFORE: 'before'
+};
+export { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE, KEYBOARD };

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

@@ -0,0 +1,7 @@
+var KEYBOARD = {
+  UP: 'up',
+  RIGHT: 'right',
+  DOWN: 'down',
+  LEFT: 'left'
+};
+export default KEYBOARD;

package/dist/basic-sdk/extension/core/queries/index.js

@@ -6,6 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["at"];
 import { Editor, Text, Path, Span, Element, Node, Range } from '@seafile/slate';
 import { match } from '../utils';
+import ObjectUtils from '../../../utils/object-utils';
 
 // options
 export var getQueryOptions = function getQueryOptions(editor, options) {
@@ -35,6 +36,28 @@ export var getNode = function getNode(editor, path) {
 export var getNodeType = function getNodeType(node) {
   return Element.isElement(node) ? node.type : '';
 };
+export var isTextNode = function isTextNode(node) {
+  if (!node) return false;
+  if (!ObjectUtils.hasProperty(node, 'children') && ObjectUtils.hasProperty(node, 'text')) return true;
+};
+export var getParentNode = function getParentNode(nodes, nodeId) {
+  var parentNode;
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+    var childrenNodes = node.children;
+    if (!Array.isArray(childrenNodes)) continue;
+    if (childrenNodes.find(function (node) {
+      return node.id === nodeId;
+    })) {
+      parentNode = node;
+    } else {
+      parentNode = getParentNode(childrenNodes, nodeId);
+    }
+    if (!parentNode) continue;
+    break;
+  }
+  return parentNode;
+};
 export var getNodes = function getNodes(node, options) {
   return Node.nodes(node, options);
 };

package/dist/basic-sdk/extension/menu/menu-item.js

@@ -16,9 +16,9 @@ var MenuItem = /*#__PURE__*/function (_React$Component) {
       if (_this.props.disabled) return;
       _this.props.onMouseDown(event, _this.props.type);
     };
-    _this.onClick = function (event) {
-      event.stopPropagation();
-    };
+    // onClick = (event) => {
+    //   event.stopPropagation();
+    // }
     _this.toggle = function () {
       _this.setState({
         isShowToolTip: !_this.state.isShowToolTip
@@ -55,17 +55,16 @@ var MenuItem = /*#__PURE__*/function (_React$Component) {
         show: 0,
         hide: 0
       };
-      return /*#__PURE__*/React.createElement("button", {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+        id: id,
         type: "button",
         className: className,
         disabled: disabled,
         "data-active": isActive,
-        onClick: this.onClick,
-        onMouseDown: this.onMouseDown
+        onClick: this.onMouseDown
       }, /*#__PURE__*/React.createElement("i", {
-        id: id,
         className: iconClass
-      }), /*#__PURE__*/React.createElement(Tooltip, {
+      })), /*#__PURE__*/React.createElement(Tooltip, {
         target: id,
         isOpen: isShowToolTip,
         delay: delay,

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

@@ -25,7 +25,7 @@ var QuoteMenu = /*#__PURE__*/function (_React$Component) {
       var editor = _this.props.editor;
       return isMenuDisabled(editor);
     };
-    _this.onMouseDown = function () {
+    _this.onMouseDown = function (e) {
       var editor = _this.props.editor;
       var active = _this.isActive(editor);
       var newType = active ? PARAGRAPH : BLOCKQUOTE;

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

@@ -1,11 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Element, Point, Transforms, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
-import { generateEmptyElement } from '../../core';
+import { generateEmptyElement, getSelectedNodeByType, isSelectionAtBlockStart } from '../../core';
 import { BLOCKQUOTE, PARAGRAPH } from '../../constants';
+import { setBlockQuoteType } from './helpers';
 var withBlockquote = function withBlockquote(editor) {
   var insertBreak = editor.insertBreak,
-    insertText = editor.insertText;
+    insertText = editor.insertText,
+    deleteBackward = editor.deleteBackward;
   var newEditor = editor;
   newEditor.insertBreak = function () {
     var selection = editor.selection;
@@ -41,6 +43,21 @@ var withBlockquote = function withBlockquote(editor) {
     // In other cases, insert a newline
     insertText('\n');
   };
+  newEditor.deleteBackward = function (unit) {
+    var selection = newEditor.selection;
+    if (selection === null) {
+      deleteBackward(unit);
+      return;
+    }
+    var node = getSelectedNodeByType(editor, BLOCKQUOTE);
+    if (node) {
+      if (isSelectionAtBlockStart(editor)) {
+        setBlockQuoteType(editor, PARAGRAPH);
+        return;
+      }
+    }
+    deleteBackward(unit);
+  };
   return newEditor;
 };
 export default withBlockquote;

package/dist/basic-sdk/extension/plugins/check-list/helpers.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { Transforms, Editor, Element } from '@seafile/slate';
-import { CHECK_LIST_ITEM, PARAGRAPH } from '../../constants';
+import { CHECK_LIST_ITEM, PARAGRAPH, ELEMENT_TYPE } from '../../constants';
 import { getSelectedNodeByType } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   if (editor.selection == null) return true;
@@ -26,7 +26,12 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
   var notMatch = selectedElements.some(function (element) {
     if (Editor.isVoid(editor, element) && Editor.isBlock(editor, element)) return true;
     var type = element.type;
-    if (['code-line', 'code-block', 'list-item'].includes(type)) return true;
+    if (type === ELEMENT_TYPE.CODE_LINE) return true;
+    if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
+    if (type === ELEMENT_TYPE.LIST_ITEM) return true;
+    if (type === ELEMENT_TYPE.TABLE) return true;
+    if (type === ELEMENT_TYPE.TABLE_ROW) return true;
+    if (type === ELEMENT_TYPE.TABLE_CELL) return true;
     return false;
   });
   if (notMatch) return true;

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

@@ -1,12 +1,19 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { Editor, Transforms } from '@seafile/slate';
-import { getNodeType } from '../../core';
+import { getNodeType, isTextNode, getParentNode } from '../../core';
+import { ELEMENT_TYPE } from '../../constants';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   if (!editor.selection) return true;
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {
         var type = getNodeType(n);
-        if (['code-line', 'code-block', 'paragraph'].includes(type)) return true;
+        if (!type && isTextNode(n) && n.id) {
+          var parentNode = getParentNode(editor.children, n.id);
+          type = getNodeType(parentNode);
+        }
+        if (type === ELEMENT_TYPE.CODE_LINE) return true;
+        if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
+        if (type === ELEMENT_TYPE.PARAGRAPH) return true;
         if (type.startsWith('header')) return true;
         return false;
       },
@@ -14,9 +21,8 @@ export var isMenuDisabled = function isMenuDisabled(editor) {
       mode: 'highest'
     }),
     _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
-    nodeEntry = _Editor$nodes2[0];
-  if (nodeEntry) return false;
-  return true;
+    match = _Editor$nodes2[0];
+  return !match;
 };
 export var getHeaderType = function getHeaderType(editor) {
   var _Editor$nodes3 = Editor.nodes(editor, {

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

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
 import { getHeaderType, isMenuDisabled, setHeaderType } from '../helpers';
 import { HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, HEADER_TITLE_MAP, PARAGRAPH } from '../../../constants';
 import './style.css';
@@ -78,14 +79,17 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       var isShowHeaderPopover = this.state.isShowHeaderPopover;
       var headerIconClass = "iconfont icon-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down');
       var headerType = this.getValue();
+      var disabled = this.isDisabled();
       return /*#__PURE__*/React.createElement("div", {
         className: "header-menu"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "header-toggle",
-        onClick: this.onToggleClick
+        className: classnames('header-toggle', {
+          'header-toggle-disabled': disabled
+        }),
+        onClick: disabled ? function () {} : this.onToggleClick
       }, /*#__PURE__*/React.createElement("span", {
         className: "active"
-      }, t(HEADER_TITLE_MAP[headerType])), /*#__PURE__*/React.createElement("span", {
+      }, t(HEADER_TITLE_MAP[headerType])), !disabled && /*#__PURE__*/React.createElement("span", {
         className: headerIconClass
       })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
         className: "header-popover"

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

@@ -16,7 +16,11 @@
   padding-left: 5px;
 }
 
-.header-menu .header-toggle:hover {
+.header-menu .header-toggle-disabled {
+  color: #999;
+}
+
+.header-menu .header-toggle:not(.header-toggle-disabled):hover {
   background: #e5e5e5;
   border-radius: 2px;
 }

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

@@ -2,8 +2,8 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import urlJoin from 'url-join';
 import { Editor, Range, Transforms } from '@seafile/slate';
-import { BLOCKQUOTE, CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
-import { generateEmptyElement, getNodeType } from '../../core';
+import { BLOCKQUOTE, CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST, ELEMENT_TYPE } from '../../constants';
+import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
 import context from '../../../../context';
 export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
   var selection = editor.selection;
@@ -12,6 +12,13 @@ export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor
   var _Editor$nodes = Editor.nodes(editor, {
       match: function match(n) {
         var type = getNodeType(n);
+        if (!type && isTextNode(n) && n.id) {
+          var parentNode = getParentNode(editor.children, n.id);
+          type = getNodeType(parentNode);
+        }
+        if (type === ELEMENT_TYPE.TABLE) return true;
+        if (type === ELEMENT_TYPE.TABLE_ROW) return true;
+        if (type === ELEMENT_TYPE.TABLE_CELL) return true;
         if (type === CODE_BLOCK) return true;
         if (type === ORDERED_LIST) return true;
         if (type === UNORDERED_LIST) return true;

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

@@ -7,6 +7,7 @@ import CheckListPlugin from './check-list';
 import TextPlugin from './text-style';
 import CodeBlockPlugin from './code-block';
 import ImagePlugin from './image';
-var Plugins = [MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin];
+import TablePlugin from './table';
+var Plugins = [MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, TextPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin };

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

@@ -0,0 +1,7 @@
+.sdoc-custom-table-size-dialog .sdoc-custom-table-size-container {
+  width: 100%;
+}
+
+.sdoc-custom-table-size-dialog .sdoc-custom-table-size-item {
+  width: calc(50% - 16px);
+}

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

@@ -0,0 +1,90 @@
+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 { withTranslation } from 'react-i18next';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label } from 'reactstrap';
+import NumberInput from '../../number-input';
+import './index.css';
+var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
+  _inherits(CustomTableSizeDialog, _Component);
+  var _super = _createSuper(CustomTableSizeDialog);
+  function CustomTableSizeDialog(props) {
+    var _this;
+    _classCallCheck(this, CustomTableSizeDialog);
+    _this = _super.call(this, props);
+    _this.toggle = function () {
+      _this.props.toggle();
+    };
+    _this.handleSubmit = function () {
+      var _this$state = _this.state,
+        rows = _this$state.rows,
+        cols = _this$state.cols;
+      _this.props.submit([parseInt(rows), parseInt(cols)]);
+    };
+    _this.rowsChange = function (event) {
+      var value = event.target.value;
+      if (value === _this.state.rows) return;
+      _this.setState({
+        rows: value
+      });
+    };
+    _this.colsChange = function (event) {
+      var value = event.target.value;
+      if (value === _this.state.cols) return;
+      _this.setState({
+        cols: value
+      });
+    };
+    _this.state = {
+      rows: '0',
+      cols: '0'
+    };
+    return _this;
+  }
+  _createClass(CustomTableSizeDialog, [{
+    key: "render",
+    value: function render() {
+      var t = this.props.t;
+      var _this$state2 = this.state,
+        rows = _this$state2.rows,
+        cols = _this$state2.cols;
+      return /*#__PURE__*/React.createElement(Modal, {
+        isOpen: true,
+        toggle: this.toggle,
+        size: "md",
+        className: "sdoc-custom-table-size-dialog",
+        zIndex: 1111
+      }, /*#__PURE__*/React.createElement(ModalHeader, {
+        toggle: this.toggle
+      }, t('Customize_the_number_of_rows_and_columns')), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+        className: "d-flex sdoc-custom-table-size-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "d-flex flex-column sdoc-custom-table-size-item mr-4"
+      }, /*#__PURE__*/React.createElement(Label, {
+        className: "mb-2"
+      }, t('Rows')), /*#__PURE__*/React.createElement(NumberInput, {
+        max: 50,
+        value: rows,
+        onChange: this.rowsChange
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "d-flex flex-column sdoc-custom-table-size-item"
+      }, /*#__PURE__*/React.createElement(Label, {
+        className: "mb-2"
+      }, t('Columns')), /*#__PURE__*/React.createElement(NumberInput, {
+        max: 50,
+        value: cols,
+        onChange: this.colsChange
+      })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+        color: "secondary",
+        onClick: this.toggle
+      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+        color: "primary",
+        onClick: this.handleSubmit
+      }, t('Submit'))));
+    }
+  }]);
+  return CustomTableSizeDialog;
+}(Component);
+export default withTranslation('sdoc-editor')(CustomTableSizeDialog);

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

@@ -0,0 +1,81 @@
+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';
+export var isTableMenuDisabled = function isTableMenuDisabled(editor) {
+  var selection = editor.selection;
+  if (selection === null) return true;
+  if (!Range.isCollapsed(selection)) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if (!type && isTextNode(n) && n.id) {
+          var parentNode = getParentNode(editor.children, n.id);
+          type = getNodeType(parentNode);
+        }
+        if (type.startsWith('header')) return true;
+        if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
+        if (type === ELEMENT_TYPE.ORDERED_LIST) return true;
+        if (type === ELEMENT_TYPE.UNORDERED_LIST) return true;
+        if (type === ELEMENT_TYPE.BLOCKQUOTE) return true;
+        if (type === ELEMENT_TYPE.LIST_ITEM) return true;
+        if (type === ELEMENT_TYPE.LIST_LIC) return true;
+        if (type === ELEMENT_TYPE.TABLE) return true;
+        if (type === ELEMENT_TYPE.TABLE_CELL) return true;
+        if (type === ELEMENT_TYPE.TABLE_ROW) return true;
+        if (Editor.isVoid(editor, n)) return true;
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+export var generateTableCell = function generateTableCell() {
+  return {
+    id: slugid.nice(),
+    type: ELEMENT_TYPE.TABLE_CELL,
+    children: [{
+      text: '',
+      id: slugid.nice()
+    }]
+  };
+};
+export var generateTableRow = function generateTableRow(colsCount) {
+  var children = [];
+  for (var i = 0; i < colsCount; i++) {
+    var tableCell = generateTableCell();
+    children.push(tableCell);
+  }
+  return {
+    id: slugid.nice(),
+    type: ELEMENT_TYPE.TABLE_ROW,
+    children: children
+  };
+};
+export var generateEmptyTable = function generateEmptyTable() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+  var rowsCount = size[0];
+  var colsCount = size[1];
+  var children = [];
+  for (var i = 0; i < rowsCount; i++) {
+    var tableRow = generateTableRow(colsCount);
+    children.push(tableRow);
+  }
+  return {
+    id: slugid.nice(),
+    type: ELEMENT_TYPE.TABLE,
+    children: children
+  };
+};
+export var insertTable = function insertTable(editor, size, selection) {
+  if (!size) return;
+  if (isTableMenuDisabled(editor)) return;
+  var tableNode = generateEmptyTable(size);
+  Transforms.insertNodes(editor, tableNode, {
+    at: selection
+  });
+};

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

@@ -0,0 +1,14 @@
+import { TABLE } from '../../constants';
+import { TableMenu } from './menu';
+import Table from './model';
+import withTable from './plugin';
+import { renderTable, renderTableRow, renderTableCell } from './render-elem';
+var TablePlugin = {
+  type: TABLE,
+  nodeType: 'element',
+  model: Table,
+  editorMenus: [TableMenu],
+  editorPlugin: withTable,
+  renderElements: [renderTable, renderTableRow, renderTableCell]
+};
+export default TablePlugin;

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

@@ -0,0 +1,78 @@
+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 { UncontrolledPopover } from 'reactstrap';
+var CommonMenu = /*#__PURE__*/function (_Component) {
+  _inherits(CommonMenu, _Component);
+  var _super = _createSuper(CommonMenu);
+  function CommonMenu(props) {
+    var _this;
+    _classCallCheck(this, CommonMenu);
+    _this = _super.call(this, props);
+    _this.getClassName = function () {
+      var _this$props = _this.props,
+        isRichEditor = _this$props.isRichEditor,
+        className = _this$props.className,
+        disabled = _this$props.disabled;
+      var itemClass = 'btn btn-icon btn-secondary btn-active d-flex';
+      if (!isRichEditor) return itemClass + ' ' + className;
+      itemClass = "rich-icon-btn d-flex ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
+      return itemClass + ' ' + className;
+    };
+    _this.hidePopover = function () {
+      _this.ref && _this.ref.toggle && _this.ref.toggle();
+    };
+    _this.setRef = function (ref) {
+      _this.ref = ref;
+      if (!_this.ref) return;
+      var toggle = _this.ref.toggle;
+      _this.ref.toggle = function () {
+        toggle && toggle();
+        _this.setState({
+          isShowMenu: !_this.state.isShowMenu
+        });
+      };
+    };
+    _this.state = {
+      isShowMenu: false
+    };
+    return _this;
+  }
+  _createClass(CommonMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        id = _this$props2.id,
+        iconClass = _this$props2.iconClass,
+        children = _this$props2.children;
+      var isShowMenu = this.state.isShowMenu;
+      var className = this.getClassName();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+        id: id,
+        type: "button",
+        className: className
+      }, /*#__PURE__*/React.createElement("i", {
+        className: iconClass
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "iconfont icon-".concat(isShowMenu ? 'caret-up' : 'drop-down')
+      })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+        target: id,
+        className: "sdoc-common-menu-popover",
+        trigger: "legacy",
+        placement: "bottom-start",
+        hideArrow: true,
+        ref: this.setRef
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-common-menu-popover-container"
+      }, children)));
+    }
+  }]);
+  return CommonMenu;
+}(Component);
+CommonMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
+export default CommonMenu;

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

@@ -0,0 +1,7 @@
+.sdoc-common-menu-popover .sdoc-common-menu-popover-container {
+  padding: 8px 0;
+}
+
+.sdoc-table-menu-group .iconfont {
+  transform: scale(.8);
+}