@seafile/sdoc-editor 0.1.87 → 0.1.88-beta

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/assets/css/dropdown-menu.css

@@ -16,8 +16,14 @@
   width: 100%;
   padding: 4px 24px;
   user-select: none;
+  display: flex;
+  align-items: center;
 }
 
 .sdoc-dropdown-menu .sdoc-dropdown-menu-item:hover {
   background-color: rgb(245, 245, 245);
 }
+
+.sdoc-dropdown-menu .sdoc-dropdown-menu-item .sdocfont {
+  font-size: 14px;
+}

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/{components/modal-portal.js → basic-sdk/extension/commons/element-popover/index.js}

@@ -4,12 +4,12 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import ReactDOM from 'react-dom';
-var ModalPortal = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalPortal, _React$Component);
-  var _super = _createSuper(ModalPortal);
-  function ModalPortal(props) {
+var ElementPopover = /*#__PURE__*/function (_React$Component) {
+  _inherits(ElementPopover, _React$Component);
+  var _super = _createSuper(ElementPopover);
+  function ElementPopover(props) {
     var _this;
-    _classCallCheck(this, ModalPortal);
+    _classCallCheck(this, ElementPopover);
     _this = _super.call(this, props);
     _this.state = {
       isMounted: false
@@ -18,9 +18,12 @@ var ModalPortal = /*#__PURE__*/function (_React$Component) {
     if (props.className) {
       _this.el.className = props.className;
     }
+    if (props.style) {
+      _this.el.style = props.style;
+    }
     return _this;
   }
-  _createClass(ModalPortal, [{
+  _createClass(ElementPopover, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       document.body.appendChild(this.el);
@@ -36,6 +39,6 @@ var ModalPortal = /*#__PURE__*/function (_React$Component) {
       return ReactDOM.createPortal(this.props.children, this.el);
     }
   }]);
-  return ModalPortal;
+  return ElementPopover;
 }(React.Component);
-export default ModalPortal;
+export default ElementPopover;

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,23 @@ 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,
+  recentUsedColorsKey: 'sdoc-recent-used-highlight-colors',
+  lastUsedColorKey: 'sdoc-last-used-highlight-color'
+}, {
+  id: "sdoc-font-".concat(COLOR),
+  iconClass: 'sdocfont sdoc-font-color',
+  text: 'Font_color',
+  type: COLOR,
+  defaultColor: DEFAULT_FONT_COLOR,
+  isColor: true,
+  recentUsedColorsKey: 'sdoc-recent-used-font-colors',
+  lastUsedColorKey: 'sdoc-last-used-font-color'
 }]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [{
   id: STRIKETHROUGH,
   iconClass: 'sdocfont sdoc-strikethrough',
@@ -107,6 +124,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 +150,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/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/color-item.js

@@ -4,10 +4,10 @@ import classnames from 'classnames';
 var ColorItem = function ColorItem(_ref) {
   var t = _ref.t,
     color = _ref.color,
-    recentUsedColor = _ref.recentUsedColor;
+    lastUsedColor = _ref.lastUsedColor;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-color-item', {
-      'selected': recentUsedColor === color.value
+      'selected': lastUsedColor === color.value
     }),
     style: {
       backgroundColor: color.value

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

@@ -1,17 +1,55 @@
+.menu-group .sdoc-color-menu.menu-show {
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container.disabled {
+  padding-right: 0;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle:hover,
+.menu-group .sdoc-color-menu .last-used-color-container:not(.disabled):hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.menu-group .sdoc-color-menu.disabled .sdoc-color-toggle {
+  display: none;
+}
+
 .sdoc-color-menu .sdoc-color-icon {
   font-size: 12px !important;
   height: 12px;
+  width: 12px;
   line-height: 12px;
 }
 
-.sdoc-color-menu .recent-used-color {
-  width: 12px;
+.sdoc-color-menu .last-used-color {
+  width: 14px;
   height: 3px;
   border-radius: 1px;
   margin-top: 2px;
   border: 1px solid rgba(0, 0, 0, .08);
 }
 
+.sdoc-color-menu-popover .popover {
+  left: -30px !important;
+}
+
 .sdoc-color-menu-popover .sdoc-color-dropdown-menu {
   width: 251px;
   padding: 0 0 12px 0;
@@ -40,6 +78,7 @@
 }
 
 .sdoc-color-menu-popover .sdoc-color-item {
+  position: relative;
   height: 20px;
   width: 20px;
   margin-right: 3px;
@@ -47,17 +86,24 @@
   border: 0.5px solid rgba(0, 0, 0, .08);
 }
 
-.sdoc-color-menu-popover .sdoc-color-item.selected {
-  position: relative;
+.sdoc-color-menu-popover .sdoc-color-item:not(.selected):hover::before {
+  content: '';
+  position: absolute;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, .24);
 }
 
 .sdoc-color-menu-popover .sdoc-color-item.selected::after {
   content: '';
   position: absolute;
-  width: calc(100% + 4px);
-  height: calc((100% + 4px));
-  top: -2px;
-  left: -2px;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
   pointer-events: none;
   border: 1px solid rgba(0, 0, 0, .88);
 }
@@ -87,7 +133,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;
@@ -107,3 +153,9 @@
 .sdoc-more-colors-popover .popover {
   left: 10px !important;
 }
+
+/* commission */
+.menu-group #button-sdoc-highlight-color .sdoc-color-icon {
+  position: relative;
+  left: 1px;
+}

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 } 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) {
@@ -14,41 +14,52 @@ var ColorMenu = function ColorMenu(_ref) {
     id = _ref.id,
     isRichEditor = _ref.isRichEditor,
     className = _ref.className,
+    popoverClassName = _ref.popoverClassName,
     disabled = _ref.disabled,
     t = _ref.t,
     setColor = _ref.setColor,
-    localStorageKey = _ref.localStorageKey;
+    recentUsedColorsKey = _ref.recentUsedColorsKey,
+    lastUsedColorKey = _ref.lastUsedColorKey,
+    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)),
+  var _useState = useState(LocalStorage.getItem(lastUsedColorKey, '')),
     _useState2 = _slicedToArray(_useState, 2),
-    recentUsedColors = _useState2[0],
-    setRecentUsedColors = _useState2[1];
-  var _useState3 = useState(false),
+    lastUsedColor = _useState2[0],
+    setLastUseColor = _useState2[1];
+  var _useState3 = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_COLORS)),
     _useState4 = _slicedToArray(_useState3, 2),
-    isShowMenu = _useState4[0],
-    setMenuShow = _useState4[1];
+    recentUsedColors = _useState4[0],
+    setRecentUsedColors = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isPickerShow = _useState6[0],
-    setPickerShow = _useState6[1];
+    isShowMenu = _useState6[0],
+    setMenuShow = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isPickerShow = _useState8[0],
+    setPickerShow = _useState8[1];
   var onSetColor = useCallback(function (color) {
     var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var validColor = color || 'transparent';
+    var validColor = color || '';
     setColor(validColor);
-    if (validColor !== 'transparent' && recentUsedColors[0] !== validColor) {
+    if (validColor !== '' && recentUsedColors[0] !== validColor) {
       var newRecentUsedColors = recentUsedColors.slice(0, 9);
       newRecentUsedColors.unshift(validColor);
-      LocalStorage.setItem(localStorageKey, newRecentUsedColors);
+      LocalStorage.setItem(recentUsedColorsKey, newRecentUsedColors);
       setRecentUsedColors(newRecentUsedColors);
     }
+    LocalStorage.setItem(lastUsedColorKey, validColor);
+    setLastUseColor(validColor);
     if (shouldClose) {
       popoverRef.current.toggle();
       setMenuShow(!isShowMenu);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recentUsedColors, localStorageKey, isShowMenu, isPickerShow]);
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
   var setColorProxy = useCallback(function (event) {
     if (event.target.className.includes('sdoc-color-item')) {
       var color = event.target.dataset.color;
@@ -56,7 +67,7 @@ var ColorMenu = function ColorMenu(_ref) {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recentUsedColors, localStorageKey, isShowMenu, isPickerShow]);
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
   var toggle = useCallback(function () {
     if (isPickerShow) return;
     popoverRef.current.toggle();
@@ -81,7 +92,9 @@ var ColorMenu = function ColorMenu(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var validClassName = classnames(className, 'sdoc-color-menu', {
+  var validClassName = classnames(className, 'sdoc-color-menu sdoc-menu-with-dropdown', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
     'rich-icon-btn d-flex': isRichEditor,
     'rich-icon-btn-disabled': isRichEditor && disabled,
     'rich-icon-btn-hover': isRichEditor && !disabled,
@@ -93,25 +106,37 @@ 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('last-used-color-container sdoc-menu-with-dropdown-icon', {
+      'disabled': disabled
+    }),
     onClick: setRecentUsedColor
   }, /*#__PURE__*/React.createElement("i", {
     className: classnames(iconClass, 'sdoc-color-icon')
   }), /*#__PURE__*/React.createElement("div", {
-    className: "recent-used-color",
+    className: "last-used-color",
     style: {
-      backgroundColor: recentUsedColors[0] || 'transparent'
+      backgroundColor: lastUsedColor || 'unset'
     }
-  })), /*#__PURE__*/React.createElement("i", {
+  })), /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    className: "sdoc-color-toggle sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdoc-menu-with-dropdown-triangle-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",
+    className: classnames('sdoc-color-menu-popover', popoverClassName),
     trigger: "legacy",
     placement: "bottom-start",
     hideArrow: true,
@@ -127,16 +152,16 @@ 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) {
     return /*#__PURE__*/React.createElement(ColorItem, {
       key: "default-color-".concat(index),
       color: color,
-      recentUsedColor: recentUsedColors[0]
+      lastUsedColor: lastUsedColor
     });
   })), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-standard-colors-container"
@@ -149,7 +174,7 @@ var ColorMenu = function ColorMenu(_ref) {
     return /*#__PURE__*/React.createElement(ColorItem, {
       key: "standard-color-".concat(index),
       color: color,
-      recentUsedColor: recentUsedColors[0]
+      lastUsedColor: lastUsedColor
     });
   }))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-color-recent-used-colors-container"
@@ -188,7 +213,7 @@ var ColorMenu = function ColorMenu(_ref) {
     onClick: onClick
   }, /*#__PURE__*/React.createElement(ChromePicker, {
     disableAlpha: true,
-    color: recentUsedColors[0] || '',
+    color: lastUsedColor || '',
     onChange: onChange
   }))))));
 };

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)));