@seafile/sdoc-editor 0.1.91 → 0.1.92

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

@@ -472,16 +472,14 @@ export var getCellColumn = function getCellColumn(editor, cellElement) {
   var tablePath = cellPath.slice(0, -2);
   var tableElement = getNode(editor, tablePath);
   var columns = tableElement.columns;
+  var columnsCount = tableElement.children[0].children.length;
+  var pageEditAreaWidth = editor.width || PAGE_EDIT_AREA_WIDTH;
   if (columns) {
     column = columns[cellIndex];
-  } else {
-    var columnsCount = tableElement.children[0].children.length;
-    var pageEditAreaWidth = editor.width || PAGE_EDIT_AREA_WIDTH;
-    column = {
-      width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(pageEditAreaWidth / columnsCount))
-    };
   }
-  return column;
+  return column || {
+    width: Math.max(TABLE_CELL_MIN_WIDTH, parseInt(pageEditAreaWidth / columnsCount))
+  };
 };
 export var getFirstTableCell = function getFirstTableCell(element) {
   var tableCellElement = element;
@@ -712,19 +710,42 @@ export var focusCell = function focusCell(editor, event) {
     rowIndex = _getSelectedInfo8.rowIndex,
     cellIndex = _getSelectedInfo8.cellIndex,
     cell = _getSelectedInfo8.cell;
-  var tableIndex = tablePath[0];
+  var tableParentPath = tablePath.slice(0, -1);
+  var tableIndex = tablePath[tablePath.length - 1];
   var selection = editor.selection;
   var focus = selection.focus;
   if (keyboardName === KEYBOARD.UP) {
-    if (!isCursorAtCellStart(focus.offset)) return;
+    if (!isCursorAtCellStart(focus.offset)) {
+      setTimeout(function () {
+        if (getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE)) {
+          var _getSelectedInfo9 = getSelectedInfo(editor),
+            newCellIndex = _getSelectedInfo9.cellIndex;
+          if (Math.abs(newCellIndex - cellIndex) !== 0) {
+            if (rowIndex === 0) {
+              if (tableIndex !== 0) {
+                focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex - 1]));
+              }
+              return;
+            }
+            focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex - 1, cellIndex]));
+            var _newFocus = editor.selection.focus;
+            Transforms.select(editor, {
+              focus: _newFocus,
+              anchor: _newFocus
+            });
+          }
+        }
+      }, 2);
+      return;
+    }
     event.preventDefault();
     if (rowIndex === 0) {
       if (tableIndex !== 0) {
-        focusEditor(editor, [tableIndex - 1]);
+        focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex - 1]));
       }
       return;
     }
-    focusEditor(editor, [tableIndex, rowIndex - 1, cellIndex]);
+    focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex - 1, cellIndex]));
     var newFocus = editor.selection.focus;
     Transforms.select(editor, {
       focus: newFocus,
@@ -735,13 +756,13 @@ export var focusCell = function focusCell(editor, event) {
     if (!isCursorAtCellEnd(cell, focus.offset)) return;
     event.preventDefault();
     if (rowIndex === tableSize[0] - 1 && cellIndex === tableSize[1] - 1) {
-      focusEditor(editor, [tableIndex + 1]);
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex + 1]));
       return;
     }
     if (cellIndex === tableSize[1] - 1) {
-      focusEditor(editor, [tableIndex, rowIndex + 1, 0]);
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex + 1, 0]));
     } else {
-      focusEditor(editor, [tableIndex, rowIndex, cellIndex + 1]);
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex, cellIndex + 1]));
     }
     var newAnchor = editor.selection.anchor;
     Transforms.select(editor, {
@@ -750,17 +771,41 @@ export var focusCell = function focusCell(editor, event) {
     });
   }
   if (keyboardName === KEYBOARD.DOWN) {
-    if (!isCursorAtCellEnd(cell, focus.offset)) return;
+    if (!isCursorAtCellEnd(cell, focus.offset)) {
+      setTimeout(function () {
+        if (getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE)) {
+          var _getSelectedInfo10 = getSelectedInfo(editor),
+            newCellIndex = _getSelectedInfo10.cellIndex;
+          if (Math.abs(newCellIndex - cellIndex) !== 0) {
+            if (rowIndex === tableSize[0] - 1) {
+              var nextNode = getNode(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex + 1]));
+              if (!nextNode) return;
+              focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex + 1]));
+              return;
+            }
+            focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex + 1, cellIndex]));
+            var _newAnchor = editor.selection.anchor;
+            Transforms.select(editor, {
+              focus: _newAnchor,
+              anchor: _newAnchor
+            });
+          }
+        }
+      }, 2);
+      return;
+    }
     event.preventDefault();
     if (rowIndex === tableSize[0] - 1) {
-      focusEditor(editor, [tableIndex + 1]);
+      var nextNode = getNode([].concat(_toConsumableArray(tableParentPath), [tableIndex + 1]));
+      if (!nextNode) return;
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex + 1]));
       return;
     }
-    focusEditor(editor, [tableIndex, rowIndex + 1, cellIndex]);
-    var _newAnchor = editor.selection.anchor;
+    focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex + 1, cellIndex]));
+    var _newAnchor2 = editor.selection.anchor;
     Transforms.select(editor, {
-      focus: _newAnchor,
-      anchor: _newAnchor
+      focus: _newAnchor2,
+      anchor: _newAnchor2
     });
   }
   if (keyboardName === KEYBOARD.LEFT) {
@@ -768,35 +813,45 @@ export var focusCell = function focusCell(editor, event) {
     event.preventDefault();
     if (rowIndex === 0 && cellIndex === 0) {
       if (tableIndex !== 0) {
-        focusEditor(editor, [tableIndex - 1]);
+        focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex - 1]));
       }
       return;
     }
     if (cellIndex === 0) {
-      focusEditor(editor, [tableIndex, rowIndex - 1, tableSize[1] - 1]);
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex - 1, tableSize[1] - 1]));
     } else {
-      focusEditor(editor, [tableIndex, rowIndex, cellIndex - 1]);
+      focusEditor(editor, [].concat(_toConsumableArray(tableParentPath), [tableIndex, rowIndex, cellIndex - 1]));
     }
-    var _newFocus = editor.selection.focus;
+    var _newFocus2 = editor.selection.focus;
     Transforms.select(editor, {
-      focus: _newFocus,
-      anchor: _newFocus
+      focus: _newFocus2,
+      anchor: _newFocus2
     });
   }
 };
 export var isLastTableCell = function isLastTableCell(editor, cellNode) {
   if (cellNode[0].type !== ELEMENT_TYPE.TABLE_CELL) return false;
-  var _getSelectedInfo9 = getSelectedInfo(editor),
-    tableSize = _getSelectedInfo9.tableSize;
+  var _getSelectedInfo11 = getSelectedInfo(editor),
+    tableSize = _getSelectedInfo11.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 getValidColor = function getValidColor(color) {
+  if (!color) return '';
+  var validColor = color.length === 4 ? '#' + color.slice(1, 4).repeat(2) : color;
+  return validColor.toUpperCase();
+};
 export var colorBlend = function colorBlend(c1, c2, ratio) {
-  var color1 = c1.length === 4 ? '#' + c1.slice(1, 4).repeat(2) : c1;
-  var color2 = c2.length === 4 ? '#' + c2.slice(1, 4).repeat(2) : c2;
+  var color1 = getValidColor(c1);
+  var color2 = getValidColor(c2);
+  if (!color1 && !color2) return 'unset';
+  if (color1 && !color2) return color1;
+  if (!color1 && color2) return color2;
+  if (color1 === '#FFFFFF') return color2;
+  if (color2 === '#FFFFFF') return color1;
   var validRatio = Math.max(Math.min(Number(ratio), 1), 0);
   var r1 = parseInt(color1.substring(1, 3), 16);
   var g1 = parseInt(color1.substring(3, 5), 16);

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-bg-color-menu.js

@@ -0,0 +1,35 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import { ColorMenu } from '../../../../commons';
+import { MENUS_CONFIG_MAP, BG_COLOR, RECENT_USED_TABLE_CELL_BG_COLORS_KEY } from '../../../../constants';
+import { setCellStyle } from '../../helpers';
+import { useColorContext } from '../../../../../hooks/use-color-context';
+var CellBgColorMenu = function CellBgColorMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var _useColorContext = useColorContext(),
+    lastUsedTableCellBgColor = _useColorContext.lastUsedTableCellBgColor,
+    updateLastUsedTableCellBgColor = _useColorContext.updateLastUsedTableCellBgColor;
+  var menuConfig = MENUS_CONFIG_MAP[BG_COLOR];
+  var setColor = useCallback(function (color) {
+    setCellStyle(editor, {
+      bg_color: color
+    });
+  }, [editor]);
+  var props = _objectSpread(_objectSpread({
+    isRichEditor: isRichEditor,
+    className: className,
+    disabled: false,
+    isActive: false
+  }, menuConfig), {}, {
+    onMouseDown: function onMouseDown() {},
+    setColor: setColor,
+    recentUsedColorsKey: RECENT_USED_TABLE_CELL_BG_COLORS_KEY,
+    lastUsedColor: lastUsedTableCellBgColor,
+    updateLastUsedColor: updateLastUsedTableCellBgColor,
+    popoverClassName: 'sdoc-table-cell-bg-colors-popover'
+  });
+  return /*#__PURE__*/React.createElement(ColorMenu, props);
+};
+export default CellBgColorMenu;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-text-align-menu.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import CommonMenu from './common-menu';
+import { setCellStyle } from '../../helpers';
+var CellTextAlignMenu = function CellTextAlignMenu(_ref) {
+  var editor = _ref.editor;
+  var textAlignRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var setTextAlignStyle = useCallback(function (textAlign) {
+    setCellStyle(editor, {
+      textAlign: textAlign
+    });
+    textAlignRef.current && textAlignRef.current.hidePopover();
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(CommonMenu, {
+    id: "text-align",
+    iconClass: "sdocfont sdoc-align-left",
+    ref: textAlignRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return setTextAlignStyle('left');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-align-left mr-2"
+  }), t('Left')), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return setTextAlignStyle('center');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-align-center mr-2"
+  }), t('Center')), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return setTextAlignStyle('right');
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-align-right mr-2"
+  }), t('Right')));
+};
+export default CellTextAlignMenu;

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

@@ -1,174 +1,34 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
+import React from 'react';
 import { withTranslation } from 'react-i18next';
-import classnames from 'classnames';
-import { ColorMenu, MenuGroup, MenuItem } from '../../../../commons';
-import CommonMenu from './common-menu';
-import { MENUS_CONFIG_MAP, REMOVE_TABLE, BG_COLOR, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR } from '../../../../constants';
-import { setCellStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
-import { TABLE_ELEMENT } from '../../constants';
+import { MenuGroup } from '../../../../commons';
+import { isAllInTable } from '../../helpers';
+import CellBgColorMenu from './cell-bg-color-menu';
+import CellTextAlignMenu from './cell-text-align-menu';
+import RemoveTable from './remove-table-menu';
+import TableColumnMenu from './table-column-menu';
+import TableRowMenu from './table-row-menu';
 import './index.css';
-var ActiveTableMenu = /*#__PURE__*/function (_Component) {
-  _inherits(ActiveTableMenu, _Component);
-  var _super = _createSuper(ActiveTableMenu);
-  function ActiveTableMenu(_props) {
-    var _this;
-    _classCallCheck(this, ActiveTableMenu);
-    _this = _super.call(this, _props);
-    _this.updateLastUsedColor = function (color) {
-      if (_this.state.lastUsedColor === color) return;
-      _this.setState({
-        lastUsedColor: color
-      });
-    };
-    _this.setTextAlignStyle = function (textAlign) {
-      var editor = _this.props.editor;
-      setCellStyle(editor, {
-        textAlign: textAlign
-      });
-      _this.textAlignRef.hidePopover();
-    };
-    _this.insertTableElement = function (type) {
-      var editor = _this.props.editor;
-      insertTableElement(editor, type);
-      if (type === TABLE_ELEMENT.ROW) {
-        _this.tableRowRef.hidePopover();
-        return;
-      }
-      _this.tableColumnRef.hidePopover();
-    };
-    _this.removeTableElement = function (type) {
-      var editor = _this.props.editor;
-      removeTableElement(editor, type);
-      if (type === TABLE_ELEMENT.ROW) {
-        _this.tableRowRef.hidePopover();
-        return;
-      }
-      _this.tableColumnRef.hidePopover();
-    };
-    _this.removeTable = function () {
-      var editor = _this.props.editor;
-      removeTableElement(editor, TABLE_ELEMENT.TABLE);
-    };
-    _this.renderTextAlign = function () {
-      var t = _this.props.t;
-      return /*#__PURE__*/React.createElement(CommonMenu, {
-        id: "text-align",
-        iconClass: "sdocfont sdoc-align-left",
-        ref: function ref(_ref) {
-          return _this.textAlignRef = _ref;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'left')
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-align-left mr-2"
-      }), t('Left')), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'center')
-      }, /*#__PURE__*/React.createElement("i", {
-        className: "sdocfont sdoc-align-center mr-2"
-      }), t('Center')), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.setTextAlignStyle.bind(_assertThisInitialized(_this), 'right')
-      }, /*#__PURE__*/React.createElement("i", {
-        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: "sdocfont sdoc-column",
-        ref: function ref(_ref2) {
-          return _this.tableColumnRef = _ref2;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.insertTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.COLUMN)
-      }, t('Insert_column')), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.removeTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.COLUMN)
-      }, t('Remove_column')));
-    };
-    _this.renderTableRow = function () {
-      var t = _this.props.t;
-      return /*#__PURE__*/React.createElement(CommonMenu, {
-        id: "table-row",
-        iconClass: "sdocfont sdoc-row",
-        ref: function ref(_ref3) {
-          return _this.tableRowRef = _ref3;
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.insertTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.ROW)
-      }, t('Insert_row')), /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-dropdown-menu-item",
-        onClick: _this.removeTableElement.bind(_assertThisInitialized(_this), TABLE_ELEMENT.ROW)
-      }, t('Remove_row')));
-    };
-    _this.renderRemoveTable = function () {
-      var _this$props = _this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className;
-      var menuConfig = MENUS_CONFIG_MAP[REMOVE_TABLE];
-      var props = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: classnames(className, 'sdoc-remove-table menu-group-item'),
-        disabled: false,
-        isActive: false
-      }, menuConfig), {}, {
-        onMouseDown: _this.removeTable
-      });
-      return /*#__PURE__*/React.createElement(MenuItem, props);
-    };
-    _this.setColor = function (color) {
-      var editor = _this.props.editor;
-      setCellStyle(editor, {
-        bg_color: color
-      });
-    };
-    _this.renderBgColor = function () {
-      var _this$props2 = _this.props,
-        isRichEditor = _this$props2.isRichEditor,
-        className = _this$props2.className;
-      var menuConfig = MENUS_CONFIG_MAP[BG_COLOR];
-      var lastUsedColor = _this.state.lastUsedColor;
-      var props = _objectSpread(_objectSpread({
-        isRichEditor: isRichEditor,
-        className: className,
-        disabled: false,
-        isActive: false
-      }, menuConfig), {}, {
-        onMouseDown: function onMouseDown() {},
-        setColor: _this.setColor,
-        recentUsedColorsKey: RECENT_USED_TABLE_CELL_BG_COLORS_KEY,
-        lastUsedColor: lastUsedColor,
-        updateLastUsedColor: _this.updateLastUsedColor,
-        popoverClassName: 'sdoc-table-cell-bg-colors-popover'
-      });
-      return /*#__PURE__*/React.createElement(ColorMenu, props);
-    };
-    _this.state = {
-      lastUsedColor: DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR
-    };
-    return _this;
-  }
-  _createClass(ActiveTableMenu, [{
-    key: "render",
-    value: function render() {
-      var editor = this.props.editor;
-      if (!isAllInTable(editor)) return null;
-      return /*#__PURE__*/React.createElement(MenuGroup, {
-        className: "menu-group sdoc-table-menu-group"
-      }, this.renderTextAlign(), this.renderTableColumn(), this.renderTableRow(), this.renderBgColor(), this.renderRemoveTable());
-    }
-  }]);
-  return ActiveTableMenu;
-}(Component);
+var ActiveTableMenu = function ActiveTableMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  if (!isAllInTable(editor)) return null;
+  return /*#__PURE__*/React.createElement(MenuGroup, {
+    className: "menu-group sdoc-table-menu-group"
+  }, /*#__PURE__*/React.createElement(CellTextAlignMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableColumnMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableRowMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(CellBgColorMenu, {
+    editor: editor,
+    isRichEditor: isRichEditor,
+    className: className
+  }), /*#__PURE__*/React.createElement(RemoveTable, {
+    editor: editor,
+    isRichEditor: isRichEditor,
+    className: className
+  }));
+};
 export default withTranslation('sdoc-editor')(ActiveTableMenu);

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

@@ -0,0 +1,26 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { MenuItem } from '../../../../commons';
+import { MENUS_CONFIG_MAP, REMOVE_TABLE } from '../../../../constants';
+import { removeTableElement } from '../../helpers';
+import { TABLE_ELEMENT } from '../../constants';
+var RemoveTable = function RemoveTable(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var removeTable = useCallback(function () {
+    removeTableElement(editor, TABLE_ELEMENT.TABLE);
+  }, [editor]);
+  var menuConfig = MENUS_CONFIG_MAP[REMOVE_TABLE];
+  var props = _objectSpread(_objectSpread({
+    isRichEditor: isRichEditor,
+    className: classnames(className, 'sdoc-remove-table menu-group-item'),
+    disabled: false,
+    isActive: false
+  }, menuConfig), {}, {
+    onMouseDown: removeTable
+  });
+  return /*#__PURE__*/React.createElement(MenuItem, props);
+};
+export default RemoveTable;

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

@@ -0,0 +1,35 @@
+import React, { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import CommonMenu from './common-menu';
+import { insertTableElement, removeTableElement } from '../../helpers';
+import { TABLE_ELEMENT } from '../../constants';
+var TableColumnMenu = function TableColumnMenu(_ref) {
+  var editor = _ref.editor;
+  var tableColumnRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var insertColumn = useCallback(function (type) {
+    insertTableElement(editor, type);
+    tableColumnRef.current && tableColumnRef.current.hidePopover();
+  }, [editor]);
+  var removeColumn = useCallback(function (type) {
+    removeTableElement(editor, type);
+    tableColumnRef.current && tableColumnRef.current.hidePopover();
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(CommonMenu, {
+    id: "table-column",
+    iconClass: "sdocfont sdoc-column",
+    ref: tableColumnRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return insertColumn(TABLE_ELEMENT.COLUMN);
+    }
+  }, t('Insert_column')), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return removeColumn(TABLE_ELEMENT.COLUMN);
+    }
+  }, t('Remove_column')));
+};
+export default TableColumnMenu;

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

@@ -0,0 +1,35 @@
+import React, { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import CommonMenu from './common-menu';
+import { insertTableElement, removeTableElement } from '../../helpers';
+import { TABLE_ELEMENT } from '../../constants';
+var TableRowMenu = function TableRowMenu(_ref) {
+  var editor = _ref.editor;
+  var tableRowRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var insertRow = useCallback(function (type) {
+    insertTableElement(editor, type);
+    tableRowRef.current && tableRowRef.current.hidePopover();
+  }, [editor]);
+  var removeRow = useCallback(function (type) {
+    removeTableElement(editor, type);
+    tableRowRef.current && tableRowRef.current.hidePopover();
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(CommonMenu, {
+    id: "table-row",
+    iconClass: "sdocfont sdoc-row",
+    ref: tableRowRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return insertRow(TABLE_ELEMENT.ROW);
+    }
+  }, t('Insert_row')), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onClick: function onClick() {
+      return removeRow(TABLE_ELEMENT.ROW);
+    }
+  }, t('Remove_row')));
+};
+export default TableRowMenu;

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

@@ -113,6 +113,7 @@ var TableSizePopover = /*#__PURE__*/function (_Component) {
         trigger: "legacy",
         placement: "bottom-start",
         hideArrow: true,
+        fade: false,
         ref: this.setRef
       }, /*#__PURE__*/React.createElement("div", {
         className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"

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

@@ -6,20 +6,18 @@ import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../
 import { focusEditor } from '../../../core';
 import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
-import { useFontColorContext } from '../../../../hooks/use-font-color-context';
-import { useHighlightColorContext } from '../../../../hooks/use-highlight-color-context';
+import { useColorContext } from '../../../../hooks/use-color-context';
 var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
     className = _ref.className,
     idPrefix = _ref.idPrefix;
-  var _useFontColorContext = useFontColorContext(),
-    lastUsedFontColor = _useFontColorContext.color,
-    updateLastUsedFontColor = _useFontColorContext.updateColor;
-  var _useHighlightColorCon = useHighlightColorContext(),
-    lastUsedHighlightColor = _useHighlightColorCon.color,
-    updateLastUsedHighlightColor = _useHighlightColorCon.updateColor;
+  var _useColorContext = useColorContext(),
+    lastUsedFontColor = _useColorContext.lastUsedFontColor,
+    updateLastUsedFontColor = _useColorContext.updateLastUsedFontColor,
+    lastUsedHighlightColor = _useColorContext.lastUsedHighlightColor,
+    updateLastUsedHighlightColor = _useColorContext.updateLastUsedHighlightColor;
   var isActive = useCallback(function (type) {
     var isMark = getValue(editor, type);
     return !!isMark;

package/dist/basic-sdk/hooks/use-color-context.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext, useState } from 'react';
+import { DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR } from '../extension/constants';
+var ColorContext = React.createContext(null);
+export var ColorProvider = function ColorProvider(props) {
+  var _useState = useState(DEFAULT_LAST_USED_FONT_COLOR),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastUsedFontColor = _useState2[0],
+    updateLastUsedFontColor = _useState2[1];
+  var _useState3 = useState(DEFAULT_LAST_USED_HIGHLIGHT_COLOR),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lastUsedHighlightColor = _useState4[0],
+    updateLastUsedHighlightColor = _useState4[1];
+  var _useState5 = useState(DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lastUsedTableCellBgColor = _useState6[0],
+    updateLastUsedTableCellBgColor = _useState6[1];
+  return /*#__PURE__*/React.createElement(ColorContext.Provider, {
+    value: {
+      lastUsedFontColor: lastUsedFontColor,
+      updateLastUsedFontColor: updateLastUsedFontColor,
+      lastUsedHighlightColor: lastUsedHighlightColor,
+      updateLastUsedHighlightColor: updateLastUsedHighlightColor,
+      lastUsedTableCellBgColor: lastUsedTableCellBgColor,
+      updateLastUsedTableCellBgColor: updateLastUsedTableCellBgColor
+    }
+  }, props.children);
+};
+export var useColorContext = function useColorContext() {
+  var context = useContext(ColorContext);
+  if (!context) {
+    throw new Error('\'ColorContext\' is null');
+  }
+  var lastUsedFontColor = context.lastUsedFontColor,
+    lastUsedHighlightColor = context.lastUsedHighlightColor,
+    lastUsedTableCellBgColor = context.lastUsedTableCellBgColor,
+    updateLastUsedFontColor = context.updateLastUsedFontColor,
+    updateLastUsedHighlightColor = context.updateLastUsedHighlightColor,
+    updateLastUsedTableCellBgColor = context.updateLastUsedTableCellBgColor;
+  return {
+    lastUsedFontColor: lastUsedFontColor,
+    updateLastUsedFontColor: updateLastUsedFontColor,
+    lastUsedHighlightColor: lastUsedHighlightColor,
+    updateLastUsedHighlightColor: updateLastUsedHighlightColor,
+    lastUsedTableCellBgColor: lastUsedTableCellBgColor,
+    updateLastUsedTableCellBgColor: updateLastUsedTableCellBgColor
+  };
+};