@seafile/sdoc-editor 0.1.86 → 0.1.88-beta

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

@@ -4,6 +4,9 @@
   font-size: 0.75rem;
   border-right: 1px solid #e5e6e8;
   color: #555555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .menu-group .menu-group-item {
@@ -11,7 +14,7 @@
   height: 30px;
   line-height: 30px;
   margin-right: 10px;
-  border: 1px solid transparent;
+  border: none !important;
   color: #555555;
   background-color: #fff;
 }
@@ -32,3 +35,51 @@
 .menu-group .menu-group-item .sdocfont {
   font-size: 14px;
 }
+
+/* sdoc-menu-with-dropdown */
+.menu-group .menu-group-item.sdoc-menu-with-dropdown {
+  width: 36px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0 !important;
+  padding: 0 !important;
+  margin-right: 10px;
+  overflow: hidden;
+}
+
+.menu-group .menu-group-item.sdoc-menu-with-dropdown.disabled {
+  color: #999;
+  width: 24px !important;
+}
+
+.sdoc-menu-with-dropdown:not(.disabled):hover {
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
+  width: 24px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon .sdocfont {
+  font-size: 14px;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
+  width: 12px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle .sdoc-menu-with-dropdown-triangle-icon {
+  font-size: 14px;
+  transform: scale(.8);
+}

package/dist/basic-sdk/extension/plugins/clear-format/helpers.js

@@ -0,0 +1,56 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Editor, Text } from '@seafile/slate';
+import { CODE_BLOCK, CODE_LINE } from '../../constants';
+import { getNodeType } from '../../core';
+export var isMenuDisabled = function isMenuDisabled(editor) {
+  if (editor.selection == null) return true;
+  var _Editor$nodes = Editor.nodes(editor, {
+      match: function match(n) {
+        var type = getNodeType(n);
+        if ([CODE_BLOCK, CODE_LINE].includes(type)) return true; // code-block
+        if (Editor.isVoid(editor, n)) return true; // void node
+
+        return false;
+      },
+      universal: true
+    }),
+    _Editor$nodes2 = _slicedToArray(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (match) return true;
+  return false;
+};
+var removeMarks = function removeMarks(editor, textNode) {
+  // Iterate text node properties, clearing styles
+  var keys = Object.keys(textNode);
+  keys.forEach(function (key) {
+    if (key === 'text') {
+      // Keep only the text attribute （Text attributes are necessary）
+      return;
+    }
+    // All other attributes are deleted
+    Editor.removeMark(editor, key);
+  });
+};
+export var clearStyles = function clearStyles(editor) {
+  var nodeEntries = Editor.nodes(editor, {
+    match: function match(n) {
+      return Text.isText(n);
+    },
+    universal: true
+  });
+  var _iterator = _createForOfIteratorHelper(nodeEntries),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var nodeEntry = _step.value;
+      // single text node
+      var n = nodeEntry[0];
+      removeMarks(editor, n);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};

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

@@ -0,0 +1,25 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback } from 'react';
+import { CLEAR_FORMAT, MENUS_CONFIG_MAP } from '../../../constants';
+import { MenuItem } from '../../../menu';
+import { isMenuDisabled, clearStyles } from '../helpers';
+var menuConfig = MENUS_CONFIG_MAP[CLEAR_FORMAT];
+var ClearFormatMenu = function ClearFormatMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var onMouseDown = useCallback(function () {
+    clearStyles(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var props = _objectSpread(_objectSpread({
+    isRichEditor: isRichEditor,
+    className: className
+  }, menuConfig), {}, {
+    disabled: isMenuDisabled(editor),
+    isActive: false,
+    'onMouseDown': onMouseDown
+  });
+  return /*#__PURE__*/React.createElement(MenuItem, props);
+};
+export default ClearFormatMenu;

package/dist/{components/code-block-hover-menu → basic-sdk/extension/plugins/code-block/hover-menu}/index.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { withTranslation } from 'react-i18next';
-import { genCodeLangs } from '../../basic-sdk/utils/prismjs';
+import ElementPopover from '../../../commons/element-popover';
+import { genCodeLangs } from '../prismjs';
 import './index.css';
 var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
   var style = _ref.style,
@@ -68,7 +68,7 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     }).text;
     setSelectedLanguageText(selectedLanguageText);
   }, [language]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-code-block-hover-menu-container",
     style: menuPosition
   }, /*#__PURE__*/React.createElement("div", {
@@ -110,6 +110,6 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     }, /*#__PURE__*/React.createElement("i", {
       className: "sdocfont sdoc-check-square icon-font"
     })), item.text);
-  })))))), document.body));
+  }))))));
 };
 export default withTranslation('sdoc-editor')(CodeBlockHoverMenu);

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

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
-import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
+import CodeBlockHoverMenu from './hover-menu';
 import { setClipboardData } from './helpers';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {

package/dist/basic-sdk/extension/plugins/html/rules/code-block.js

@@ -1,6 +1,6 @@
 import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE } from '../../../constants';
-import { genCodeLangs } from '../../../../utils/prismjs';
+import { genCodeLangs } from '../../code-block/prismjs';
 var codeBlockRule = function codeBlockRule(element, parseChild) {
   var nodeName = element.nodeName,
     childNodes = element.childNodes;

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

@@ -20,4 +20,5 @@ export var TABLE_ELEMENT_SPAN = (_TABLE_ELEMENT_SPAN = {}, _defineProperty(_TABL
 export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
-};
+};
+export var SELECTED_TABLE_CELL_BG_COLOR = '#dee8fe';

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

@@ -5,8 +5,8 @@ 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 { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS } from '../../constants';
+import NumberInput from './number-input';
 import './index.css';
 var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
   _inherits(CustomTableSizeDialog, _Component);

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

@@ -1,5 +1,5 @@
 import { TABLE } from '../../constants';
-import { TableMenu, ContextMenu } from './menu';
+import { TableMenu } from './menu';
 import Table from './model';
 import withTable from './plugin';
 import { renderTable, renderTableRow, renderTableCell } from './render-elem';
@@ -9,7 +9,6 @@ var TablePlugin = {
   model: Table,
   editorMenus: [TableMenu],
   editorPlugin: withTable,
-  renderElements: [renderTable, renderTableRow, renderTableCell],
-  contextMenu: ContextMenu
+  renderElements: [renderTable, renderTableRow, renderTableCell]
 };
 export default TablePlugin;

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

@@ -17,9 +17,9 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
         className = _this$props.className,
         disabled = _this$props.disabled;
       var itemClass = 'btn btn-icon btn-secondary btn-active d-flex';
-      if (!isRichEditor) return itemClass + ' ' + className;
+      if (!isRichEditor) return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
       itemClass = "rich-icon-btn d-flex ".concat(disabled ? 'rich-icon-btn-disabled' : 'rich-icon-btn-hover');
-      return itemClass + ' ' + className;
+      return itemClass + ' ' + className + ' sdoc-menu-with-dropdown';
     };
     _this.hidePopover = function () {
       _this.ref && _this.ref.toggle && _this.ref.toggle();
@@ -53,11 +53,15 @@ var CommonMenu = /*#__PURE__*/function (_Component) {
         id: id,
         type: "button",
         className: className
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-menu-with-dropdown-icon"
       }, /*#__PURE__*/React.createElement("i", {
         className: iconClass
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-      })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-menu-with-dropdown-triangle"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
+      }))), /*#__PURE__*/React.createElement(UncontrolledPopover, {
         target: id,
         className: "sdoc-common-menu-popover",
         trigger: "legacy",

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

@@ -1,4 +1,20 @@
-.sdoc-table-menu-group .sdoc-drop-down,
-.sdoc-table-menu-group .sdoc-caret-up {
-  transform: scale(.8);
+.sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
+  width: 36px;
+}
+
+.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
+  width: 24px;
+}
+
+.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
+  width: 12px;
+}
+
+.sdoc-table-menu-group .sdoc-color-menu .last-used-color-container {
+  height: 100%;
+  padding-top: 2px;
+}
+
+.sdoc-color-menu-popover.sdoc-table-cell-bg-colors-popover .popover {
+  left: -24px !important;
 }

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

@@ -6,12 +6,13 @@ 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 classnames from 'classnames';
 import { MenuGroup, MenuItem } from '../../../../menu';
 import CommonMenu from './common-menu';
 import { MENUS_CONFIG_MAP, REMOVE_TABLE, BG_COLOR } from '../../../../constants';
 import { setCellStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
 import { TABLE_ELEMENT } from '../../constants';
-import ColorMenu from '../../../../../comment/color-menu';
+import ColorMenu from '../../../../menu/color-menu';
 import './index.css';
 var ActiveTableMenu = /*#__PURE__*/function (_Component) {
   _inherits(ActiveTableMenu, _Component);
@@ -56,7 +57,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "text-align",
-        iconClass: "sdocfont sdoc-align-left mr-1",
+        iconClass: "sdocfont sdoc-align-left",
         ref: function ref(_ref) {
           return _this.textAlignRef = _ref;
         }
@@ -81,7 +82,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-column",
-        iconClass: "sdocfont sdoc-column mr-1",
+        iconClass: "sdocfont sdoc-column",
         ref: function ref(_ref2) {
           return _this.tableColumnRef = _ref2;
         }
@@ -97,7 +98,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var t = _this.props.t;
       return /*#__PURE__*/React.createElement(CommonMenu, {
         id: "table-row",
-        iconClass: "sdocfont sdoc-row mr-1",
+        iconClass: "sdocfont sdoc-row",
         ref: function ref(_ref3) {
           return _this.tableRowRef = _ref3;
         }
@@ -116,7 +117,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       var menuConfig = MENUS_CONFIG_MAP[REMOVE_TABLE];
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,
-        className: className,
+        className: classnames(className, 'sdoc-remove-table menu-group-item'),
         disabled: false,
         isActive: false
       }, menuConfig), {}, {
@@ -143,7 +144,9 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       }, menuConfig), {}, {
         onMouseDown: function onMouseDown() {},
         setColor: _this.setColor,
-        localStorageKey: 'sdoc-recent-used-bg-colors'
+        recentUsedColorsKey: 'sdoc-recent-used-bg-colors',
+        lastUsedColorKey: 'sdoc-last-used-bg-colors',
+        popoverClassName: 'sdoc-table-cell-bg-colors-popover'
       });
       return /*#__PURE__*/React.createElement(ColorMenu, props);
     };

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

@@ -1,4 +1,4 @@
 import TableMenu from './table-menu';
 import ActiveTableMenu from './active-table-menu';
-import ContextMenu from './context-menu';
-export { TableMenu, ActiveTableMenu, ContextMenu };
+import TableContextMenu from './table-context-menu';
+export { TableMenu, ActiveTableMenu, TableContextMenu };

package/dist/basic-sdk/extension/plugins/table/menu/{context-menu → table-context-menu}/index.js

@@ -6,18 +6,19 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import ObjectUtils from '../../../../../utils/object-utils';
+import ElementPopover from '../../../../commons/element-popover';
 import { ELEMENT_TYPE } from '../../../../constants';
-import InsertTableElement from './insert-table-element';
 import { getSelectedNodeByType } from '../../../../core';
 import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';
 import { insertTableElement, removeTableElement } from '../../helpers';
+import InsertTableElement from './insert-table-element';
 import './index.css';
-var ContextMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(ContextMenu, _React$Component);
-  var _super = _createSuper(ContextMenu);
-  function ContextMenu(props) {
+var TableContextMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(TableContextMenu, _React$Component);
+  var _super = _createSuper(TableContextMenu);
+  function TableContextMenu(props) {
     var _this;
-    _classCallCheck(this, ContextMenu);
+    _classCallCheck(this, TableContextMenu);
     _this = _super.call(this, props);
     _this.updateMenuPosition = function () {
       var menuHeight = _this.menu.offsetHeight;
@@ -61,7 +62,7 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
     _this.position = null;
     return _this;
   }
-  _createClass(ContextMenu, [{
+  _createClass(TableContextMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.position = this.props.contextMenuPosition;
@@ -88,6 +89,7 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
       var contextStyle = this.state.contextStyle;
       var editor = this.props.editor;
       var currentTable = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE);
+      if (!currentTable) return null;
       var currentRow = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_ROW);
       var currentRowsCount = currentTable.children.length;
       var currentColumnsCount = currentRow.children.length;
@@ -96,7 +98,9 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
       var selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
       var canAddRowsCount = currentRowsCount + selectedRows > TABLE_MAX_ROWS ? TABLE_MAX_ROWS - currentRowsCount : selectedRows;
       var canAddColsCount = currentColumnsCount + selectedCols > TABLE_MAX_COLUMNS ? TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(ElementPopover, {
+        className: "sdoc-context-menu"
+      }, /*#__PURE__*/React.createElement("div", {
         style: contextStyle,
         ref: function ref(_ref) {
           return _this2.menu = _ref;
@@ -128,9 +132,9 @@ var ContextMenu = /*#__PURE__*/function (_React$Component) {
         insertTableElement: this.insertTableElement
       }), /*#__PURE__*/React.createElement("div", {
         className: 'seafile-divider dropdown-divider'
-      }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Delete_table'));
+      }), this.renderRemoveBtn(TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(TABLE_ELEMENT.TABLE, 'Delete_table')));
     }
   }]);
-  return ContextMenu;
+  return TableContextMenu;
 }(React.Component);
-export default withTranslation('sdoc-editor')(ContextMenu);
+export default withTranslation('sdoc-editor')(TableContextMenu);

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

@@ -1,4 +1,6 @@
-import { createContext, useContext } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { useScrollContext } from '../../../../hooks/use-scroll-context';
 export var TableRootContext = createContext();
 export var useTableRootContext = function useTableRootContext() {
   return useContext(TableRootContext);
@@ -18,4 +20,52 @@ export var useSettingSelectRangeContext = function useSettingSelectRangeContext(
 export var TableRootScrollLeftContext = createContext();
 export var useTableRootScrollLeftContext = function useTableRootScrollLeftContext() {
   return useContext(TableRootScrollLeftContext);
+};
+export var useContextMenu = function useContextMenu(tableScrollWrapper) {
+  var scrollRef = useScrollContext();
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowContextMenu = _useState2[0],
+    setShowContextMenu = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuPosition = _useState4[0],
+    setMenuPosition = _useState4[1];
+  var onContextMenu = useCallback(function (event) {
+    event.preventDefault();
+    var menuPosition = {
+      left: event.clientX,
+      top: event.clientY
+    };
+    setShowContextMenu(true);
+    setMenuPosition(menuPosition);
+  }, []);
+  var hideContextMenu = useCallback(function (e) {
+    if (isShowContextMenu) {
+      setShowContextMenu(false);
+    }
+  }, [isShowContextMenu]);
+  var hideByContextmenuEvent = useCallback(function (e) {
+    var table = tableScrollWrapper.current;
+    var clickIsInCurrentTable = table && table.contains(e.target) && table !== e.target;
+    if (!clickIsInCurrentTable) {
+      setShowContextMenu(false);
+    }
+  }, [tableScrollWrapper]);
+  useEffect(function () {
+    document.addEventListener('mousedown', hideContextMenu);
+    document.addEventListener('contextmenu', hideByContextmenuEvent, true);
+    scrollRef.current && scrollRef.current.addEventListener('scroll', hideContextMenu);
+    return function () {
+      document.removeEventListener('mousedown', hideContextMenu);
+      document.removeEventListener('contextmenu', hideByContextmenuEvent, true);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', hideContextMenu);
+    };
+  }, [hideContextMenu, hideByContextmenuEvent, scrollRef]);
+  return {
+    isShowContextMenu: isShowContextMenu,
+    menuPosition: menuPosition,
+    onContextMenu: onContextMenu
+  };
 };

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

@@ -65,43 +65,9 @@
 
 .sdoc-table-wrapper .cell-selected {
   caret-color: transparent;
-  background-color: #fff4e6;
   position: relative;
 }
 
-.sdoc-table-wrapper .cell-light-height-top-border::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  left: 0;
-  width: calc(100% + 1px);
-  height: 2px;
-  border-top: 1px double #ffa94d !important;
-}
-
-.sdoc-table-wrapper .cell-light-height-top-border:first-child:before {
-  left: -1px;
-  width: calc(100% + 2px);
-}
-
-.sdoc-table-wrapper .cell-light-height-bottom-border {
-  border-bottom: 1px double #ffa94d !important;
-}
-
-.sdoc-table-wrapper .cell-light-height-left-border::after {
-  content: '';
-  position: absolute;
-  top: 0px;
-  left: -1px;
-  width: 2px;
-  height: calc(100% + 1px);
-  border-left: 1px double #ffa94d !important;
-}
-
-.sdoc-table-wrapper .cell-light-height-right-border {
-  border-right: 1px double #ffa94d !important;
-}
-
 .sdoc-table-wrapper .table-row-height-just {
   width: 100%;
   height: 5px;

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

@@ -1,12 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React from 'react';
+import React, { useCallback } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
 import ObjectUtils from '../../../../utils/object-utils';
 import { STYLE_KEY } from '../../../constants';
-import { findPath } from '../../../core';
+import { findPath, focusEditor } from '../../../core';
 import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
-import { EMPTY_SELECTED_RANGE } from '../constants';
+import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BG_COLOR } from '../constants';
 import { getTableColumns, getCellColumn, colorBlend } from '../helpers';
 var TableCell = function TableCell(_ref) {
   var attributes = _ref.attributes,
@@ -31,14 +32,24 @@ var TableCell = function TableCell(_ref) {
   var isSelectedLastCell = isSelected && cellIndex === maxColIndex;
   var isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
   var isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
+  var onContextMenu = useCallback(function (event) {
+    var path = findPath(editor, element);
+    focusEditor(editor, path);
+    Transforms.collapse(editor, {
+      edge: 'end'
+    });
+  }, [editor, element]);
   var style = attributes.style || {};
   if (ObjectUtils.hasProperty(element.style, STYLE_KEY.TEXT_ALIGN)) {
     style[STYLE_KEY.TEXT_ALIGN] = element.style[STYLE_KEY.TEXT_ALIGN];
   }
+  if (isSelected) {
+    style['backgroundColor'] = SELECTED_TABLE_CELL_BG_COLOR;
+  }
   if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR)) {
     var color = element.style[STYLE_KEY.BG_COLOR];
-    if (color && (color !== 'transparent' || color !== 'unset')) {
-      style['backgroundColor'] = isSelected ? colorBlend('#fff4e6', color, 0.9) : color;
+    if (color && color !== 'transparent' && color !== 'unset') {
+      style['backgroundColor'] = isSelected ? colorBlend(SELECTED_TABLE_CELL_BG_COLOR, color, 0.9) : color;
     }
   }
   return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
@@ -55,7 +66,8 @@ var TableCell = function TableCell(_ref) {
     }),
     "data-id": element.id,
     "row-index": rowIndex,
-    "cell-index": cellIndex
+    "cell-index": cellIndex,
+    onContextMenu: onContextMenu
   }), children);
 };
 function renderTableCell(props) {
@@ -76,7 +88,7 @@ function renderTableCell(props) {
     if (ObjectUtils.hasProperty(element, STYLE_KEY.TEXT_ALIGN)) {
       style[STYLE_KEY.TEXT_ALIGN] = element[STYLE_KEY.TEXT_ALIGN];
     }
-    if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR)) {
+    if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR) && element.style[STYLE_KEY.BG_COLOR]) {
       style['backgroundColor'] = element.style[STYLE_KEY.BG_COLOR];
     }
     var column = getCellColumn(editor, element);

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

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic } from '@seafile/slate-react';
-import { TableRootContext, TableRootScrollLeftContext } from './hooks';
+import { TableRootContext, TableRootScrollLeftContext, useContextMenu } from './hooks';
+import { TableContextMenu } from '../menu';
 var TableRoot = function TableRoot(_ref) {
   var attributes = _ref.attributes,
     _ref$columns = _ref.columns,
@@ -21,6 +22,10 @@ var TableRoot = function TableRoot(_ref) {
   var onScroll = useCallback(function (event) {
     setScrollLeft(event.target.scrollLeft);
   }, []);
+  var _useContextMenu = useContextMenu(tableScrollWrapper),
+    isShowContextMenu = _useContextMenu.isShowContextMenu,
+    menuPosition = _useContextMenu.menuPosition,
+    onContextMenu = _useContextMenu.onContextMenu;
   return /*#__PURE__*/React.createElement(TableRootContext.Provider, {
     value: tableScrollWrapper.current
   }, /*#__PURE__*/React.createElement(TableRootScrollLeftContext.Provider, {
@@ -39,7 +44,11 @@ var TableRoot = function TableRoot(_ref) {
       'scroll-at-left': scrollLeft === 0
     }),
     ref: tableScrollWrapper,
-    onScroll: onScroll
-  }, children))));
+    onScroll: onScroll,
+    onContextMenu: onContextMenu
+  }, children)), isShowContextMenu && /*#__PURE__*/React.createElement(TableContextMenu, {
+    editor: editor,
+    contextMenuPosition: menuPosition
+  })));
 };
 export default TableRoot;