@seafile/sdoc-editor 0.1.55 → 0.1.57-test0

package/dist/basic-sdk/editor.js

@@ -42,10 +42,6 @@ var SDocEditor = function SDocEditor(_ref) {
     setMenuPosition = _useState6[1];
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    forceUpdateValue = _useState8[0],
-    setForceUpdateValue = _useState8[1];
 
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -94,21 +90,17 @@ var SDocEditor = function SDocEditor(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onSelect = useCallback(function () {
-    setForceUpdateValue({});
-  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    editor: editor,
-    forceUpdateValue: forceUpdateValue
+    editor: editor
   }), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-content"
   }, /*#__PURE__*/React.createElement(SDocOutline, {
     doc: slateValue,
     docUuid: config.docUuid
   }), /*#__PURE__*/React.createElement("div", {
-    className: "flex-fill o-auto"
+    className: "flex-fill o-auto sdoc-editor-article-container"
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue,
@@ -121,8 +113,7 @@ var SDocEditor = function SDocEditor(_ref) {
     onKeyDown: eventProxy.onKeyDown,
     cursors: cursors,
     onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown,
-    onSelect: onSelect
+    onMouseDown: onMouseDown
   })))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
     editor: editor,
     contextMenuPosition: menuPosition

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

@@ -28,4 +28,8 @@ export var TABLE_CELL = 'table-cell';
 export var FORMULA = 'formula';
 export var COLUMN = 'column';
 export var TEXT_STYLE = 'text-style';
-export var BOLD_ITALIC = 'bold-italic';
+export var BOLD_ITALIC = 'bold-italic';
+export var TEXT_ALIGN = 'text-align';
+export var ALIGN_LEFT = 'align-left';
+export var ALIGN_RIGHT = 'align-right';
+export var ALIGN_CENTER = 'align-center';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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';
+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, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER } from './element-type';
 import KEYBOARD from './keyboard';
 
 // history
@@ -69,6 +69,18 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   iconClass: 'sdocfont sdoc-strikethrough',
   text: 'strikethrough',
   type: 'STRIKETHROUGH'
+}]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_ALIGN, [{
+  id: ALIGN_LEFT,
+  iconClass: 'sdocfont sdoc-align-left',
+  type: 'left'
+}, {
+  id: ALIGN_CENTER,
+  iconClass: 'sdocfont sdoc-align-center',
+  type: 'center'
+}, {
+  id: ALIGN_RIGHT,
+  iconClass: 'sdocfont sdoc-align-right',
+  type: 'right'
 }]), _defineProperty(_MENUS_CONFIG_MAP, UNDO, {
   id: UNDO,
   iconClass: 'sdocfont sdoc-revoke',
@@ -101,4 +113,4 @@ export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
 };
-export { 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, ELEMENT_TYPE, KEYBOARD };
+export { 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, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };

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

@@ -5,6 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["at"];
 import { Editor, Text, Path, Span, Element, Node, Range } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
 import { match } from '../utils';
 import ObjectUtils from '../../../utils/object-utils';
 
@@ -22,6 +23,13 @@ export var getQueryOptions = function getQueryOptions(editor, options) {
     match: newMatch
   });
 };
+export var findPath = function findPath(editor, node, defaultPath) {
+  try {
+    return ReactEditor.findPath(editor, node);
+  } catch (_unused) {
+    return defaultPath;
+  }
+};
 
 // get node
 export var getNode = function getNode(editor, path) {

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

@@ -3,8 +3,13 @@ var renderBlockquote = function renderBlockquote(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
+  var style = {
+    textAlign: element.align
+  };
   return /*#__PURE__*/React.createElement("blockquote", Object.assign({
     "data-id": element.id
-  }, attributes), children);
+  }, attributes, {
+    style: style
+  }), children);
 };
 export default renderBlockquote;

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

@@ -43,13 +43,17 @@ var CheckListItem = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props2 = this.props,
         attributes = _this$props2.attributes,
         children = _this$props2.children,
-        style = _this$props2.style,
-        node = _this$props2.element;
-      var _ref = node || {},
+        element = _this$props2.element;
+      var _ref = element || {},
+        id = _ref.id,
+        align = _ref.align,
         _ref$checked = _ref.checked,
         checked = _ref$checked === void 0 ? false : _ref$checked;
+      var style = {
+        textAlign: align
+      };
       return /*#__PURE__*/React.createElement("div", Object.assign({
-        "data-id": node.id
+        "data-id": id
       }, attributes, {
         style: style
       }), /*#__PURE__*/React.createElement("span", {

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

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { Node } from '@seafile/slate';
 import { Placeholder } from '../../core';
@@ -9,6 +10,9 @@ var renderHeader = function renderHeader(props, editor) {
   var type = element.type;
   var level = type.split('header')[1];
   var Tag = "h".concat(level);
+  var style = {
+    textAlign: element.align
+  };
   var isShowPlaceHolder = false;
   var firstChild = editor.children[0];
   if (firstChild.id === element.id && Node.string(element) === '' && !isComposing) {
@@ -18,9 +22,9 @@ var renderHeader = function renderHeader(props, editor) {
     id: element.id,
     "data-id": element.id
   }, attributes, {
-    style: {
+    style: _objectSpread({
       position: isShowPlaceHolder ? 'relative' : ''
-    }
+    }, style)
   }), isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
     title: 'Please_enter_title'
   }), children);

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

@@ -3,13 +3,15 @@ var withHtml = function withHtml(editor) {
   var insertData = editor.insertData;
   var newEditor = editor;
   newEditor.insertData = function (data) {
-    var htmlContent = data.getData('text/html') || '';
-    if (htmlContent) {
-      var content = deserializeHtml(htmlContent);
-      editor.insertFragment(content);
-      return;
+    if (!newEditor.insertFragmentData(data)) {
+      var htmlContent = data.getData('text/html') || '';
+      if (htmlContent) {
+        var content = deserializeHtml(htmlContent);
+        editor.insertFragment(content);
+        return;
+      }
+      insertData(data);
     }
-    insertData(data);
   };
   return newEditor;
 };

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

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

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

@@ -7,16 +7,30 @@ var renderList = function renderList(props, editor) {
   var Tag = node.type === ORDERED_LIST ? 'ol' : 'ul';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({
     "data-id": node.id,
-    className: "list-container"
+    className: "list-container d-flex flex-column"
   }, attributes), children);
 };
 var renderListItem = function renderListItem(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     element = props.element;
+  var align = element.children[0].align;
+  var className = '';
+  switch (align) {
+    case 'center':
+      className = 'align-self-center';
+      break;
+    case 'right':
+      className = 'align-self-end';
+      break;
+    default:
+      className = '';
+  }
   return /*#__PURE__*/React.createElement("li", Object.assign({
     "data-id": element.id
-  }, attributes), children);
+  }, attributes, {
+    className: className
+  }), children);
 };
 var renderListLic = function renderListLic(props, editor) {
   var attributes = props.attributes,

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

@@ -5,4 +5,8 @@ export var EMPTY_SELECTED_RANGE = {
   maxRowIndex: -1,
   minColIndex: -1,
   maxColIndex: -1
-};
+};
+export var TABLE_MAX_WIDTH = 672; // 673 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
+
+export var TABLE_ROW_MIN_HEIGHT = 42;
+export var TABLE_CELL_MIN_WIDTH = 35;

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

@@ -3,10 +3,9 @@ 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 { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, replaceNodeChildren, focusEditor } from '../../core';
-import { getNodePathById } from '../../../socket/helpers';
+import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath } from '../../core';
 import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
-import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE } from './constants';
+import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_MAX_WIDTH } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT } from '../../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
@@ -60,7 +59,10 @@ export var generateTableRow = function generateTableRow(colsCount) {
   return {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE_ROW,
-    children: children
+    children: children,
+    style: {
+      minHeight: TABLE_ROW_MIN_HEIGHT
+    }
   };
 };
 export var generateEmptyTable = function generateEmptyTable() {
@@ -72,10 +74,18 @@ export var generateEmptyTable = function generateEmptyTable() {
     var tableRow = generateTableRow(colsCount);
     children.push(tableRow);
   }
+  var columnWidth = Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / colsCount));
+  var columns = [];
+  for (var _i = 0; _i < colsCount; _i++) {
+    columns.push({
+      width: columnWidth
+    });
+  }
   return {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE,
-    children: children
+    children: children,
+    columns: columns
   };
 };
 export var insertTable = function insertTable(editor, size, selection) {
@@ -90,16 +100,16 @@ 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);
+  var currentCellPath = findPath(editor, currentCell);
   return {
     table: currentTable,
-    tablePath: getNodePathById(editor, currentTable.id),
+    tablePath: findPath(editor, currentTable),
     tableSize: [currentTable.children.length, currentRow.children.length],
     row: currentRow,
-    rowPath: getNodePathById(editor, currentRow.id),
+    rowPath: findPath(editor, currentRow),
     rowIndex: currentCellPath[currentCellPath.length - 2],
     cell: currentCell,
-    cellPath: getNodePathById(editor, currentCell.id),
+    cellPath: findPath(editor, currentCell),
     cellIndex: currentCellPath[currentCellPath.length - 1]
   };
 };
@@ -128,13 +138,15 @@ export var setTextStyle = function setTextStyle(editor, style) {
   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)
-      });
+      var path = findPath(editor, node);
+      if (path) {
+        firstTableCellNodePath = firstTableCellNodePath ? firstTableCellNodePath : path;
+        Transforms.setNodes(editor, {
+          style: _objectSpread(_objectSpread({}, node.style), style)
+        }, {
+          at: path
+        });
+      }
     }
   });
   if (firstTableCellNodePath) {
@@ -151,6 +163,7 @@ 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),
+    table = _getSelectedInfo.table,
     tablePath = _getSelectedInfo.tablePath,
     tableSize = _getSelectedInfo.tableSize,
     rowIndex = _getSelectedInfo.rowIndex,
@@ -175,9 +188,11 @@ export var insertTableElement = function insertTableElement(editor, type) {
     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);
+    var newColumns = getTableColumnsAfterInsertColumn(editor, table, newCellIndex, _validCount);
+    updateColumnWidth(editor, table, newColumns);
     for (var j = 0; j < _validCount; j++) {
-      for (var _i = 0; _i < tableSize[0]; _i++) {
-        var newCellPath = [].concat(_toConsumableArray(tablePath), [_i, newCellIndex]);
+      for (var _i2 = 0; _i2 < tableSize[0]; _i2++) {
+        var newCellPath = [].concat(_toConsumableArray(tablePath), [_i2, newCellIndex]);
         var newCell = generateTableCell();
         Transforms.insertNodes(editor, newCell, {
           at: newCellPath
@@ -207,6 +222,7 @@ var removeTable = function removeTable(editor, path) {
 };
 export var removeTableElement = function removeTableElement(editor, type) {
   var _getSelectedInfo3 = getSelectedInfo(editor),
+    table = _getSelectedInfo3.table,
     tablePath = _getSelectedInfo3.tablePath,
     tableSize = _getSelectedInfo3.tableSize,
     rowPath = _getSelectedInfo3.rowPath,
@@ -261,10 +277,13 @@ export var removeTableElement = function removeTableElement(editor, type) {
         removeTable(editor, tablePath);
         return;
       }
-      for (var _i2 = 0; _i2 < tableSize[0]; _i2++) {
+      var _columns = getTableColumns(editor, table);
+      var _newColumns = [].concat(_toConsumableArray(_columns.slice(0, minColIndex)), _toConsumableArray(_columns.slice(maxColIndex + 1)));
+      updateColumnWidth(editor, table, _newColumns);
+      for (var _i3 = 0; _i3 < tableSize[0]; _i3++) {
         for (var j = minColIndex; j <= maxColIndex; j++) {
           // count
-          var cellPath = [].concat(_toConsumableArray(tablePath), [_i2, minColIndex]);
+          var cellPath = [].concat(_toConsumableArray(tablePath), [_i3, minColIndex]);
           Transforms.removeNodes(editor, {
             at: cellPath
           });
@@ -274,8 +293,12 @@ export var removeTableElement = function removeTableElement(editor, type) {
       focusEditor(editor, _focusPath3);
       return;
     }
-    for (var _i3 = 0; _i3 < tableSize[0]; _i3++) {
-      var _cellPath = [].concat(_toConsumableArray(tablePath), [_i3, cellIndex]);
+    var columns = getTableColumns(editor, table);
+    var newColumns = columns.slice(0);
+    newColumns.splice(cellIndex, 1);
+    updateColumnWidth(editor, table, newColumns);
+    for (var _i4 = 0; _i4 < tableSize[0]; _i4++) {
+      var _cellPath = [].concat(_toConsumableArray(tablePath), [_i4, cellIndex]);
       Transforms.removeNodes(editor, {
         at: _cellPath
       });
@@ -292,4 +315,118 @@ export var setTableSelectedRange = function setTableSelectedRange(editor, range)
     return;
   }
   editor.tableSelectedRange = EMPTY_SELECTED_RANGE;
+};
+export var updateTableRowHeight = function updateTableRowHeight(editor, element, rowHeight) {
+  var path = findPath(editor, element);
+  var targetNode = getNode(editor, path);
+  if (targetNode.style && targetNode.style.minHeight === rowHeight) return;
+  Transforms.setNodes(editor, {
+    style: _objectSpread(_objectSpread({}, targetNode.style), {}, {
+      minHeight: rowHeight
+    })
+  }, {
+    at: path
+  });
+};
+export var updateColumnWidth = function updateColumnWidth(editor, element, columns) {
+  var path = findPath(editor, element);
+  Transforms.setNodes(editor, {
+    columns: columns
+  }, {
+    at: path
+  });
+};
+export var getTableColumnsWidth = function getTableColumnsWidth() {
+  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  if (!Array.isArray(columns) || columns.length === 0) return 0;
+  return columns.reduce(function (pre, cur) {
+    return pre + cur.width;
+  }, 0);
+};
+export var getTableColumnsAfterInsertColumn = function getTableColumnsAfterInsertColumn(editor, element, targetColumnIndex, insertColumnCount) {
+  var columns = getTableColumns(editor, element);
+  var newColumns = columns.slice(0);
+  var totalColumnsWidth = getTableColumnsWidth(columns);
+  var targetColumn = columns[targetColumnIndex] || columns[targetColumnIndex - 1];
+  var targetInsertColumnsWidth = targetColumn.width * insertColumnCount;
+
+  // Currently in scrolling state, insert directly
+  if (totalColumnsWidth > TABLE_MAX_WIDTH) {
+    for (var i = 0; i < insertColumnCount; i++) {
+      newColumns.splice(targetColumnIndex, 0, targetColumn);
+    }
+    return newColumns;
+  }
+
+  // Not currently scrolling
+  // It is not a scroll state after inserting a new column
+  if (totalColumnsWidth + targetInsertColumnsWidth < TABLE_MAX_WIDTH) {
+    for (var _i5 = 0; _i5 < insertColumnCount; _i5++) {
+      newColumns.push(targetColumn);
+    }
+    return newColumns;
+  }
+
+  // After inserting a new column is a scrolling state
+  for (var _i6 = 0; _i6 < insertColumnCount; _i6++) {
+    totalColumnsWidth += targetColumn.width;
+    newColumns.splice(targetColumnIndex, 0, targetColumn);
+  }
+  var proportion = totalColumnsWidth / (TABLE_MAX_WIDTH - 1);
+  return newColumns.map(function (column) {
+    return _objectSpread(_objectSpread({}, column), {}, {
+      width: Math.max(parseInt(column.width / proportion), TABLE_CELL_MIN_WIDTH)
+    });
+  });
+};
+export var getTableColumns = function getTableColumns(editor, element) {
+  if (!element) return [];
+  var tableElement = element;
+  if (element.type === ELEMENT_TYPE.TABLE_CELL) {
+    var cellPath = findPath(editor, element);
+    var tablePath = cellPath.slice(0, -2);
+    tableElement = getNode(editor, tablePath);
+  }
+  var _tableElement = tableElement,
+    columns = _tableElement.columns,
+    children = _tableElement.children;
+  if (columns) return columns;
+  var columnsCount = children[0].children.length;
+  var initColumns = [];
+  for (var i = 0; i < columnsCount; i++) {
+    var column = {
+      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / columnsCount))
+    };
+    initColumns.push(column);
+  }
+  return initColumns;
+};
+export var getCellColumn = function getCellColumn(editor, cellElement) {
+  var column = {
+    width: TABLE_CELL_MIN_WIDTH
+  };
+  if (!editor || !cellElement) return column;
+  var cellPath = findPath(editor, cellElement);
+  if (!cellPath) return column;
+  var pathLength = cellPath.length;
+  var cellIndex = cellPath[pathLength - 1];
+  var tablePath = cellPath.slice(0, -2);
+  var tableElement = getNode(editor, tablePath);
+  var columns = tableElement.columns;
+  if (columns) {
+    column = columns[cellIndex];
+  } else {
+    var columnsCount = tableElement.children[0].children.length;
+    column = {
+      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(TABLE_MAX_WIDTH / columnsCount))
+    };
+  }
+  return column;
+};
+export var getFirstTableCell = function getFirstTableCell(element) {
+  var tableCellElement = element;
+  while (tableCellElement && !(tableCellElement.hasAttribute('row-index') && tableCellElement.hasAttribute('cell-index'))) {
+    tableCellElement = tableCellElement.parentNode;
+  }
+  return tableCellElement;
 };

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

@@ -54,7 +54,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "text-align",
-        iconClass: "sdocfont sdoc-left-alignment mr-1",
+        iconClass: "sdocfont sdoc-align-left mr-1",
         ref: function ref(_ref) {
           return _this.textAlignRef = _ref;
         }
@@ -62,12 +62,12 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'left')
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-left-alignment mr-2"
+        className: "sdocfont sdoc-align-left mr-2"
       }), t('left')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'center')
       }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-center-horizontally mr-2"
+        className: "sdocfont sdoc-align-center mr-2"
       }), t('center')), /*#__PURE__*/React.createElement("button", {
         className: "dropdown-item",
         onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'right')

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

@@ -9,7 +9,7 @@ import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, isLastNo
 import { ELEMENT_TYPE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION, KEYBOARD } from '../../constants';
 import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE } from './constants';
 import ObjectUtils from '../../../utils/object-utils';
-import { getSelectedInfo } from './helpers';
+import { getSelectedInfo, insertTableElement } from './helpers';
 var deleteHandler = function deleteHandler(editor) {
   var selection = editor.selection,
     tableSelectedRange = editor.tableSelectedRange;
@@ -352,7 +352,7 @@ var withTable = function withTable(editor) {
         tablePath = _getSelectedInfo4.tablePath,
         tableSize = _getSelectedInfo4.tableSize;
       if (tableSize[0] === TABLE_MAX_ROWS) return;
-      newEditor.insertTableElement(TABLE_ELEMENT.ROW, TABLE_ELEMENT_POSITION.AFTER);
+      insertTableElement(newEditor, TABLE_ELEMENT.ROW, TABLE_ELEMENT_POSITION.AFTER);
       Transforms.select(newEditor, [].concat(_toConsumableArray(tablePath), [tableSize[0], 0]));
       return;
     }

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

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export var TableRootContext = createContext();
+export var useTableRootContext = function useTableRootContext() {
+  return useContext(TableRootContext);
+};
+export var TableContext = createContext();
+export var useTableContext = function useTableContext() {
+  return useContext(TableContext);
+};
+export var ResizeHandlersContext = createContext();
+export var useResizeHandlersContext = function useResizeHandlersContext() {
+  return useContext(ResizeHandlersContext);
+};
+export var SettingSelectRangeContext = createContext();
+export var useSettingSelectRangeContext = function useSettingSelectRangeContext() {
+  return useContext(SettingSelectRangeContext);
+};