@seafile/sdoc-editor 0.1.86 → 0.1.88

package/dist/assets/css/simple-editor.css

@@ -29,3 +29,14 @@
 .sdoc-editor-page-header .doc-state {
   font-size: 0.8125rem;
 }
+
+/* reset common css */
+.sdoc-editor-page-wrapper  .dropdown-item,
+.sdoc-context-menu .dropdown-item {
+  color: #212529;
+}
+
+.sdoc-editor-page-wrapper  .dropdown-item:hover,
+.sdoc-context-menu .dropdown-item:hover {
+  color: #fff;
+}

package/dist/basic-sdk/editor.js

@@ -1,22 +1,21 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
-import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
+import defaultEditor, { renderLeaf, renderElement, Toolbar } from './extension';
 import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { useCursors } from './cursor/use-cursors';
-import EventBus from './utils/event-bus';
 import { EXTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../constants';
-import { isAllInTable } from './extension/plugins/table/helpers';
 import { SetNodeToDecorations } from './highlight-decorate/setNodeToDecorations';
 import { ScrollContext } from './hooks/use-scroll-context';
 import CommentContextProvider from './comment/comment-context-provider';
 import CommentWrapper from './comment';
 import { usePipDecorate } from './decorates';
 import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
+import EventBus from './utils/event-bus';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import './assets/css/dropdown-menu.css';
@@ -39,14 +38,6 @@ var SDocEditor = function SDocEditor(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     slateValue = _useState2[0],
     setSlateValue = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isShowContextMenu = _useState4[0],
-    setContextMenu = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    menuPosition = _useState6[0],
-    setMenuPosition = _useState6[1];
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
   var scrollRef = useRef(null);
@@ -58,7 +49,6 @@ var SDocEditor = function SDocEditor(_ref) {
   var eventProxy = useMemo(function () {
     return new EventProxy(editor);
   }, []);
-  var eventBus = EventBus.getInstance();
 
   // useMount: init socket connection
   useEffect(function () {
@@ -81,26 +71,14 @@ var SDocEditor = function SDocEditor(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var onContextMenu = useCallback(function (event) {
-    if (isAllInTable(editor)) {
-      event.preventDefault();
-      var contextMenuPosition = {
-        left: event.clientX,
-        top: event.clientY
-      };
-      setContextMenu(true);
-      setMenuPosition(contextMenuPosition);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var onChange = useCallback(function (slateValue) {
     setSlateValue(slateValue);
-    setContextMenu(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onMouseDown = useCallback(function (event) {
     if (event.button === 0) {
       editor.reSetTableSelectedRange();
+      var eventBus = EventBus.getInstance();
       eventBus.dispatch(EXTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -195,10 +173,10 @@ var SDocEditor = function SDocEditor(_ref) {
     eventProxy.onKeyDown(event);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    containerStyle = _useState8[0],
-    setContainerStyle = _useState8[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    containerStyle = _useState4[0],
+    setContainerStyle = _useState4[1];
   var handleWindowResize = useCallback(function () {
     var rect = scrollRef.current.getBoundingClientRect();
     var articleRect = articleRef.current.getBoundingClientRect();
@@ -217,10 +195,10 @@ var SDocEditor = function SDocEditor(_ref) {
       window.removeEventListener('resize', handleWindowResize);
     };
   }, [handleWindowResize]);
-  var _useState9 = useState(0),
-    _useState10 = _slicedToArray(_useState9, 2),
-    scrollLeft = _useState10[0],
-    setScrollLeft = _useState10[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    scrollLeft = _useState6[0],
+    setScrollLeft = _useState6[1];
   var onWrapperScroll = useCallback(function (event) {
     var scrollLeft = event.target.scrollLeft;
     setScrollLeft(scrollLeft);
@@ -262,13 +240,9 @@ var SDocEditor = function SDocEditor(_ref) {
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: onKeyDown,
-    onContextMenu: onContextMenu,
     onMouseDown: onMouseDown,
     decorate: decorate,
     onCut: eventProxy.onCut
-  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
-    editor: editor,
-    contextMenuPosition: menuPosition
-  }));
+  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))))));
 };
 export default SDocEditor;

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

@@ -262,4 +262,5 @@ export var STANDARD_COLORS = [{
 }];
 
 // Initialize the most recently used colors
-export var DEFAULT_RECENT_USED_COLORS = new Array(10).fill('');
+export var DEFAULT_RECENT_USED_COLORS = new Array(10).fill('');
+export var DEFAULT_FONT_COLOR = '#333333';

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

@@ -5,6 +5,8 @@ export var UNDERLINE = 'underline';
 export var STRIKETHROUGH = 'strikethrough';
 export var SUPERSCRIPT = 'superscript';
 export var SUBSCRIPT = 'subscript';
+export var COLOR = 'color';
+export var HIGHLIGHT_COLOR = 'highlight-color';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
 export var HEADER2 = 'header2';
@@ -35,4 +37,5 @@ 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';
+export var ALIGN_CENTER = 'align-center';
+export var CLEAR_FORMAT = 'clear-format';

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

@@ -2,9 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, 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, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, 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, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, CLEAR_FORMAT, COLOR, HIGHLIGHT_COLOR } from './element-type';
 import KEYBOARD from './keyboard';
-import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS } from './color';
+import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, DEFAULT_FONT_COLOR } from './color';
 
 // history
 export var UNDO = 'undo';
@@ -66,6 +66,21 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   iconClass: 'sdocfont sdoc-underline',
   text: 'Underline',
   type: 'UNDERLINE'
+}, {
+  id: "sdoc-".concat(HIGHLIGHT_COLOR),
+  iconClass: 'sdocfont sdoc-highlight-color',
+  text: 'Highlight_color',
+  type: HIGHLIGHT_COLOR,
+  isColor: true,
+  localStorageKey: 'sdoc-recent-used-highlight-colors'
+}, {
+  id: "sdoc-font-".concat(COLOR),
+  iconClass: 'sdocfont sdoc-font-color',
+  text: 'Font_color',
+  type: COLOR,
+  defaultColor: DEFAULT_FONT_COLOR,
+  isColor: true,
+  localStorageKey: 'sdoc-recent-used-font-colors'
 }]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [{
   id: STRIKETHROUGH,
   iconClass: 'sdocfont sdoc-strikethrough',
@@ -107,6 +122,10 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   id: "sdoc_".concat(BG_COLOR),
   iconClass: 'sdocfont sdoc-bg-color',
   text: 'Background_color'
+}), _defineProperty(_MENUS_CONFIG_MAP, CLEAR_FORMAT, {
+  id: "sdoc_".concat(CLEAR_FORMAT),
+  iconClass: 'sdocfont sdoc-format-clear',
+  text: 'Clear_format'
 }), _MENUS_CONFIG_MAP);
 export var HEADER_TITLE_MAP = (_HEADER_TITLE_MAP = {}, _defineProperty(_HEADER_TITLE_MAP, HEADER1, 'Header_one'), _defineProperty(_HEADER_TITLE_MAP, HEADER2, 'Header_two'), _defineProperty(_HEADER_TITLE_MAP, HEADER3, 'Header_three'), _defineProperty(_HEADER_TITLE_MAP, HEADER4, 'Header_four'), _defineProperty(_HEADER_TITLE_MAP, HEADER5, 'Header_five'), _defineProperty(_HEADER_TITLE_MAP, HEADER6, 'Header_six'), _defineProperty(_HEADER_TITLE_MAP, PARAGRAPH, 'Paragraph'), _HEADER_TITLE_MAP);
 export var DIFF_TYPE = {
@@ -129,4 +148,5 @@ export var ADDED_STYLE = {
 };
 export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'header5', 'header6'];
 export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
-export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, 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, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS };
+export var TRANSPARENT = 'transparent';
+export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, 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, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, CLEAR_FORMAT, DEFAULT_FONT_COLOR };

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

@@ -445,7 +445,7 @@ export var isRangeAcrossBlocks = function isRangeAcrossBlocks(editor) {
 };
 export var isAncestorEmpty = function isAncestorEmpty(editor, node) {
   return !Node.string(node) && !node.children.some(function (n) {
-    return Editor.isInline(editor, node);
+    return Editor.isInline(editor, n);
   });
 };
 export var isBlockAboveEmpty = function isBlockAboveEmpty(editor) {

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

@@ -5,7 +5,6 @@ import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import Toolbar from './toolbar';
-import { ContextMenu } from './menu';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -15,4 +14,4 @@ var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   return editor;
 }, baseEditor);
 export default defaultEditor;
-export { renderLeaf, renderElement, Toolbar, ContextMenu };
+export { renderLeaf, renderElement, Toolbar };

package/dist/basic-sdk/{comment → extension/menu}/color-menu/index.css

@@ -1,3 +1,23 @@
+.menu-group .sdoc-color-menu {
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .sdoc-color-menu.disabled {
+  width: 30px;
+}
+
+.menu-group .sdoc-color-menu.disabled .sdoc-color-toggle-icon {
+  display: none;
+}
+
+.sdoc-color-menu .sdoc-color-toggle-icon {
+  font-size: 14px;
+  transform: scale(.8);
+}
+
 .sdoc-color-menu .sdoc-color-icon {
   font-size: 12px !important;
   height: 12px;
@@ -12,6 +32,10 @@
   border: 1px solid rgba(0, 0, 0, .08);
 }
 
+.sdoc-color-menu-popover .popover {
+  left: -26px !important;
+}
+
 .sdoc-color-menu-popover .sdoc-color-dropdown-menu {
   width: 251px;
   padding: 0 0 12px 0;
@@ -87,7 +111,7 @@
 .sdoc-color-menu-popover .sdoc-more-colors {
   display: flex;
   align-items: center;
-  justify-content: baseline;
+  justify-content: space-between;
   height: 30px;
   font-size: 12px;
   padding: 0 12px;

package/dist/basic-sdk/{comment → extension/menu}/color-menu/index.js

@@ -2,11 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { UncontrolledPopover } from 'reactstrap';
+import { UncontrolledPopover, UncontrolledTooltip } from 'reactstrap';
 import { ChromePicker } from 'react-color';
-import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS } from '../../extension/constants';
-import { LocalStorage } from '../../../utils';
-import { eventStopPropagation } from '../../utils/mouse-event';
+import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, TRANSPARENT } from '../../constants';
+import { LocalStorage } from '../../../../utils';
+import { eventStopPropagation } from '../../../utils/mouse-event';
 import ColorItem from './color-item';
 import './index.css';
 var ColorMenu = function ColorMenu(_ref) {
@@ -17,7 +17,10 @@ var ColorMenu = function ColorMenu(_ref) {
     disabled = _ref.disabled,
     t = _ref.t,
     setColor = _ref.setColor,
-    localStorageKey = _ref.localStorageKey;
+    localStorageKey = _ref.localStorageKey,
+    text = _ref.text,
+    defaultColorTip = _ref.defaultColorTip,
+    defaultColor = _ref.defaultColor;
   var popoverRef = useRef(null);
   var moreColorsPopoverRef = useRef(null);
   var _useState = useState(LocalStorage.getItem(localStorageKey, DEFAULT_RECENT_USED_COLORS)),
@@ -34,9 +37,9 @@ var ColorMenu = function ColorMenu(_ref) {
     setPickerShow = _useState6[1];
   var onSetColor = useCallback(function (color) {
     var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var validColor = color || 'transparent';
+    var validColor = color || TRANSPARENT;
     setColor(validColor);
-    if (validColor !== 'transparent' && recentUsedColors[0] !== validColor) {
+    if (validColor !== TRANSPARENT && recentUsedColors[0] !== validColor) {
       var newRecentUsedColors = recentUsedColors.slice(0, 9);
       newRecentUsedColors.unshift(validColor);
       LocalStorage.setItem(localStorageKey, newRecentUsedColors);
@@ -82,6 +85,7 @@ var ColorMenu = function ColorMenu(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var validClassName = classnames(className, 'sdoc-color-menu', {
+    'disabled': disabled,
     'rich-icon-btn d-flex': isRichEditor,
     'rich-icon-btn-disabled': isRichEditor && disabled,
     'rich-icon-btn-hover': isRichEditor && !disabled,
@@ -93,23 +97,33 @@ var ColorMenu = function ColorMenu(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [recentUsedColors]);
+  var buttonId = "button-".concat(id);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: validClassName
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
   }, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex flex-column justify-content-center h-100 mr-1 pt-1",
+    className: classnames('d-flex flex-column justify-content-center h-100 pt-1', {
+      'mr-1': !disabled
+    }),
     onClick: setRecentUsedColor
   }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass, 'sdoc-color-icon')
   }), /*#__PURE__*/React.createElement("div", {
     className: "recent-used-color",
     style: {
-      backgroundColor: recentUsedColors[0] || 'transparent'
+      backgroundColor: recentUsedColors[0] || TRANSPARENT
     }
   })), /*#__PURE__*/React.createElement("i", {
     id: id,
-    className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    className: "sdoc-color-toggle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
+  })), text && /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    target: buttonId,
+    fade: false,
+    placement: "bottom",
+    delay: 0
+  }, t(text)), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: id,
     className: "sdoc-color-menu-popover",
     trigger: "legacy",
@@ -127,9 +141,9 @@ var ColorMenu = function ColorMenu(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-no-color-content",
     onClick: function onClick() {
-      return onSetColor();
+      return onSetColor(defaultColor);
     }
-  }, t('No_color'))), /*#__PURE__*/React.createElement("div", {
+  }, defaultColorTip || t('No_color'))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-default-colors-container",
     onClick: setColorProxy
   }, DEFAULT_COLORS.map(function (color, index) {

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

@@ -1,5 +1,4 @@
 import MenuGroup from './menu-group';
 import MenuItem from './menu-item';
-import ContextMenu from './context-menu';
 import './menu.css';
-export { MenuGroup, MenuItem, ContextMenu };
+export { MenuGroup, MenuItem };

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

@@ -68,6 +68,7 @@ var MenuItem = /*#__PURE__*/function (_React$Component) {
         target: id,
         isOpen: isShowToolTip,
         delay: delay,
+        fade: false,
         placement: "bottom",
         toggle: this.toggle
       }, t(text)));

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

@@ -2,7 +2,7 @@ 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 { genCodeLangs } from '../prismjs';
 import './index.css';
 var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
   var style = _ref.style,

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/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/index.css

@@ -1,3 +1,10 @@
+.sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .sdoc-table-menu-group .sdoc-drop-down,
 .sdoc-table-menu-group .sdoc-caret-up {
   transform: scale(.8);

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);
@@ -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), {}, {

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

@@ -11,13 +11,14 @@ 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 ModalPortal from '../../../../commons/modal-portal';
 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(ModalPortal, {
+        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;
+      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) {

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;

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

@@ -1,80 +1,80 @@
 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 _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP } from '../../../constants';
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Editor } from '@seafile/slate';
+import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import { focusEditor } from '../../../core';
 import { MenuItem } from '../../../menu';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
 import MoreDropdown from '../../../../../components/more-dropdown';
-var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextStyleMenuList, _React$Component);
-  var _super = _createSuper(TextStyleMenuList);
-  function TextStyleMenuList() {
-    var _this;
-    _classCallCheck(this, TextStyleMenuList);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+import ColorMenu from '../../../menu/color-menu';
+var TextStyleMenuList = function TextStyleMenuList(_ref) {
+  var editor = _ref.editor,
+    t = _ref.t,
+    isRichEditor = _ref.isRichEditor,
+    className = _ref.className;
+  var isActive = useCallback(function (type) {
+    var isMark = getValue(editor, type);
+    return !!isMark;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var isDisabled = useCallback(function () {
+    return isMenuDisabled(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var onMouseDown = useCallback(function (event, type) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isDisabled()) return;
+    var active = isActive(type);
+    if (active) {
+      removeMark(editor, type);
+    } else {
+      addMark(editor, type);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.isActive = function (editor, type) {
-      var isMark = getValue(editor, type);
-      return !!isMark;
-    };
-    _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
-    };
-    _this.onMouseDown = function (e, type) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (_this.isDisabled()) return;
-      var editor = _this.props.editor;
-      var active = _this.isActive(editor, type);
-      if (active) {
-        removeMark(editor, type);
-      } else {
-        addMark(editor, type);
-      }
-      focusEditor(editor);
-    };
-    _this.getTextStyleList = function (key) {
-      var _this$props = _this.props,
-        isRichEditor = _this$props.isRichEditor,
-        className = _this$props.className,
-        editor = _this$props.editor;
-      var list = MENUS_CONFIG_MAP[key].map(function (item) {
-        var itemProps = {
-          isRichEditor: isRichEditor,
-          className: className,
-          disabled: _this.isDisabled(),
-          isActive: _this.isActive(editor, item.type),
-          onMouseDown: _this.onMouseDown
+    focusEditor(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var setColor = useCallback(function (type, color) {
+    Editor.addMark(editor, type, color);
+    focusEditor(editor);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var getTextStyleList = useCallback(function (key) {
+    return MENUS_CONFIG_MAP[key].map(function (item) {
+      var itemProps = {
+        isRichEditor: isRichEditor,
+        className: className,
+        disabled: isDisabled(),
+        isActive: isActive(item.type),
+        onMouseDown: item.isColor ? function () {} : onMouseDown
+      };
+      if (item.isColor) {
+        itemProps['setColor'] = function (color) {
+          return setColor(item.type, color);
         };
-        return _objectSpread(_objectSpread({}, itemProps), item);
-      });
-      return list;
-    };
-    return _this;
-  }
-  _createClass(TextStyleMenuList, [{
-    key: "render",
-    value: function render() {
-      var list = this.getTextStyleList(TEXT_STYLE);
-      var dropdownList = this.getTextStyleList(TEXT_STYLE_MORE);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {
-        return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
-          key: index
-        }, itemProps));
-      }), /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map(function (itemProps, index) {
-        return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
-          key: index
-        }, itemProps));
-      })));
-    }
-  }]);
-  return TextStyleMenuList;
-}(React.Component);
-export default TextStyleMenuList;
+        itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
+      }
+      return _objectSpread(_objectSpread({}, itemProps), item);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor]);
+  var list = getTextStyleList(TEXT_STYLE);
+  var dropdownList = getTextStyleList(TEXT_STYLE_MORE);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {
+    var Component = itemProps.isColor ? ColorMenu : MenuItem;
+    return /*#__PURE__*/React.createElement(Component, Object.assign({
+      key: index
+    }, itemProps));
+  }), /*#__PURE__*/React.createElement(MoreDropdown, null, dropdownList.map(function (itemProps, index) {
+    return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
+      key: index
+    }, itemProps));
+  })));
+};
+export default withTranslation('sdoc-editor')(TextStyleMenuList);

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

@@ -21,6 +21,9 @@ var renderText = function renderText(props, editor) {
   if (leaf.color) {
     style['color'] = leaf.color;
   }
+  if (leaf['highlight-color']) {
+    style['backgroundColor'] = leaf['highlight-color'];
+  }
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }

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

@@ -13,6 +13,7 @@ import CodeBlockMenu from '../plugins/code-block/menu';
 import TextAlignMenu from '../plugins/text-align/menu';
 import HistoryMenu from './redo-undo';
 import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
+import ClearFormatMenu from '../plugins/clear-format/menu';
 var Toolbar = function Toolbar(_ref) {
   var editor = _ref.editor;
   useSelectionUpdate();
@@ -20,6 +21,8 @@ var Toolbar = function Toolbar(_ref) {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
     editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, {
+    editor: editor
   })), /*#__PURE__*/React.createElement(HeaderMenu, {
     editor: editor
   }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {

package/dist/basic-sdk/highlight-decorate/setNodeToDecorations.js

@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { Node, Element, Editor } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
-import Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../utils/prismjs';
+import Prism, { normalizeTokens, normalizeTokensByLanguageType } from '../extension/plugins/code-block/prismjs';
 import { CODE_BLOCK } from '../extension/constants';
 var mergeMaps = function mergeMaps() {
   var map = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/en/sdoc-editor.json

@@ -305,5 +305,8 @@
   "Standard_light_blue": "Standard light blue",
   "Standard_blue": "Standard blue",
   "Standard_dark_blue": "Standard dark blue",
-  "Standard_purple": "Standard purple"
+  "Standard_purple": "Standard purple",
+  "Highlight_color": "Highlight",
+  "Font_color": "Font color",
+  "Default": "Default"
 }

package/public/locales/zh-CN/sdoc-editor.json

@@ -305,5 +305,8 @@
   "Standard_light_blue": "标准浅蓝",
   "Standard_blue": "标准蓝",
   "Standard_dark_blue": "标准深蓝",
-  "Standard_purple": "标准紫"
+  "Standard_purple": "标准紫",
+  "Highlight_color": "突出显示",
+  "Font_color": "字体颜色",
+  "Default": "默认"
 }

package/public/media/sdoc-editor-font/iconfont.svg

@@ -14,6 +14,12 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-font-color" unicode="&#58886;" d="M960-96h-160l-80 224h-416L224-96H64L403.2 864h211.2L960-96zM512 704l-160-448h320L512 704z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-highlight-color" unicode="&#58885;" d="M992 528L640-67.2l-144 80-64-108.8H32l163.2 278.4L32 275.2 380.8 896 992 528zM198.4 320l406.4-224 233.6 390.4L428.8 736 198.4 320z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="sdoc-format-clear" unicode="&#58883;" d="M519.488 64H279.552L64 279.552 584.448 800l384.64-384.64L617.728 64h-98.176z m64 64l92.608 92.608-288.64 288.64L161.28 282.88 316.16 128h267.328zM128 0h832v-64H128v64z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-bg-color" unicode="&#58884;" d="M906.4-64c60.8 0 105.6 48 105.6 105.6 0 38.4-35.2 124.8-105.6 246.4C836 160 800.8 80 800.8 41.6c0-60.8 48-105.6 105.6-105.6zM512.8 761.6l358.4-352c35.2-35.2 35.2-92.8 0-128l-358.4-352c-35.2-35.2-92.8-35.2-131.2 0l-355.2 352c-35.2 35.2-35.2 92.8 0 128L356 736l-19.2 19.2c-25.6 22.4-25.6 64 0 89.6s64 22.4 89.6 0l86.4-83.2z m-368-400h614.4L452 649.6c0-3.2-307.2-288-307.2-288z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-right-slide" unicode="&#58882;" d="M806.4 438.4L336 812.8c-54.4 44.8-144 9.6-144-54.4v-748.8c0-64 86.4-99.2 144-54.4l470.4 374.4c35.2 28.8 35.2 80 0 108.8z"  horiz-adv-x="1024" />

package/public/media/sdoc-editor-font.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1689838000925'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1689838000925#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1689838000925') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1689838000925') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1689838000925') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1689838000925#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1690191058909'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1690191058909#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1690191058909') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1690191058909') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1690191058909') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1690191058909#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,6 +16,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-font-color:before {
+  content: "\e606";
+}
+
+.sdoc-highlight-color:before {
+  content: "\e605";
+}
+
+.sdoc-format-clear:before {
+  content: "\e603";
+}
+
 .sdoc-bg-color:before {
   content: "\e604";
 }

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

@@ -1 +0,0 @@
-

package/dist/basic-sdk/extension/menu/context-menu/index.js

@@ -1,38 +0,0 @@
-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 ModalPortal from '../../../../components/modal-portal';
-import { TablePlugin } from '../../plugins';
-import { isAllInTable } from '../../plugins/table/helpers';
-var ContextMenu = /*#__PURE__*/function (_Component) {
-  _inherits(ContextMenu, _Component);
-  var _super = _createSuper(ContextMenu);
-  function ContextMenu() {
-    var _this;
-    _classCallCheck(this, ContextMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.renderContextMenu = function () {
-      var editor = _this.props.editor;
-      if (isAllInTable(editor)) {
-        var ContextMenuComponent = TablePlugin.contextMenu;
-        return /*#__PURE__*/React.createElement(ContextMenuComponent, _this.props);
-      }
-    };
-    return _this;
-  }
-  _createClass(ContextMenu, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(ModalPortal, {
-        className: "sdoc-context-menu"
-      }, this.renderContextMenu());
-    }
-  }]);
-  return ContextMenu;
-}(Component);
-export default ContextMenu;