@seafile/sdoc-editor 0.1.88 → 0.1.89

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

@@ -14,6 +14,8 @@
   background-color: #fff;
   user-select: none;
   border-bottom: 1px solid #e5e6e8;
+  position: relative;
+  z-index: 102;
 }
 
 .sdoc-editor-container .sdoc-editor-content {

package/dist/basic-sdk/editor.js

@@ -1,7 +1,7 @@
 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 } from './extension';
+import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextToolbar } from './extension';
 import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
@@ -232,7 +232,7 @@ var SDocEditor = function SDocEditor(_ref) {
     editor: editor,
     value: slateValue,
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement("div", {
     className: "article",
     ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {

package/dist/basic-sdk/extension/commons/{modal-portal → 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/index.js

@@ -72,7 +72,8 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'Highlight_color',
   type: HIGHLIGHT_COLOR,
   isColor: true,
-  localStorageKey: 'sdoc-recent-used-highlight-colors'
+  recentUsedColorsKey: 'sdoc-recent-used-highlight-colors',
+  lastUsedColorKey: 'sdoc-last-used-highlight-color'
 }, {
   id: "sdoc-font-".concat(COLOR),
   iconClass: 'sdocfont sdoc-font-color',
@@ -80,7 +81,8 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   type: COLOR,
   defaultColor: DEFAULT_FONT_COLOR,
   isColor: true,
-  localStorageKey: 'sdoc-recent-used-font-colors'
+  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',

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

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

package/dist/basic-sdk/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/extension/menu/color-menu/index.css

@@ -1,31 +1,45 @@
-.menu-group .sdoc-color-menu {
-  width: 48px;
+.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;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 
-.menu-group .sdoc-color-menu.disabled {
-  width: 30px;
+.menu-group .sdoc-color-menu .last-used-color-container.disabled {
+  padding-right: 0;
 }
 
-.menu-group .sdoc-color-menu.disabled .sdoc-color-toggle-icon {
-  display: none;
+.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);
 }
 
-.sdoc-color-menu .sdoc-color-toggle-icon {
-  font-size: 14px;
-  transform: scale(.8);
+.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;
@@ -33,7 +47,7 @@
 }
 
 .sdoc-color-menu-popover .popover {
-  left: -26px !important;
+  left: -30px !important;
 }
 
 .sdoc-color-menu-popover .sdoc-color-dropdown-menu {
@@ -64,6 +78,7 @@
 }
 
 .sdoc-color-menu-popover .sdoc-color-item {
+  position: relative;
   height: 20px;
   width: 20px;
   margin-right: 3px;
@@ -71,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);
 }
@@ -131,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/extension/menu/color-menu/index.js

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { UncontrolledPopover, UncontrolledTooltip } from 'reactstrap';
 import { ChromePicker } from 'react-color';
-import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, TRANSPARENT } from '../../constants';
+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';
@@ -14,44 +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;
@@ -59,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();
@@ -84,7 +92,8 @@ 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,
@@ -104,28 +113,30 @@ var ColorMenu = function ColorMenu(_ref) {
     id: buttonId,
     disabled: disabled
   }, /*#__PURE__*/React.createElement("div", {
-    className: classnames('d-flex flex-column justify-content-center h-100 pt-1', {
-      'mr-1': !disabled
+    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: "sdoc-color-toggle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-  })), text && /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    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,
@@ -150,7 +161,7 @@ var ColorMenu = function ColorMenu(_ref) {
     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"
@@ -163,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"
@@ -202,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/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/code-block/hover-menu/index.js

@@ -1,7 +1,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 ElementPopover from '../../../commons/element-popover';
 import { genCodeLangs } from '../prismjs';
 import './index.css';
 var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
@@ -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/link/render-elem.js

@@ -3,6 +3,7 @@ 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 { Range } from '@seafile/slate';
 import { unWrapLinkNode } from './helpers';
 import AddLinkDialog from './menu/add-link-dialog';
 import LinkHoverComponent from './menu/hover-link-dialog';
@@ -96,7 +97,7 @@ var LinkHoverMenuComponent = /*#__PURE__*/function (_React$Component) {
         url: element.href,
         title: element.title,
         onLinkDialogToggle: this.onLinkDialogToggle
-      }), isShowLinkMenu && /*#__PURE__*/React.createElement(LinkHoverComponent, {
+      }), isShowLinkMenu && Range.isCollapsed(editor.selection) && /*#__PURE__*/React.createElement(LinkHoverComponent, {
         menuPosition: menuPosition,
         editor: editor,
         href: element.href,

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/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,11 +1,20 @@
 .sdoc-table-menu-group.menu-group .menu-group-item:not(.sdoc-remove-table) {
-  width: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 36px;
 }
 
-.sdoc-table-menu-group .sdoc-drop-down,
-.sdoc-table-menu-group .sdoc-caret-up {
-  transform: scale(.8);
+.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

@@ -57,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;
         }
@@ -82,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;
         }
@@ -98,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;
         }
@@ -144,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/table-context-menu/index.js

@@ -6,12 +6,12 @@ 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 ModalPortal from '../../../../commons/modal-portal';
+import InsertTableElement from './insert-table-element';
 import './index.css';
 var TableContextMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(TableContextMenu, _React$Component);
@@ -98,7 +98,7 @@ var TableContextMenu = /*#__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(ModalPortal, {
+      return /*#__PURE__*/React.createElement(ElementPopover, {
         className: "sdoc-context-menu"
       }, /*#__PURE__*/React.createElement("div", {
         style: contextStyle,

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

@@ -48,7 +48,7 @@ var TableCell = function TableCell(_ref) {
   }
   if (ObjectUtils.hasProperty(element.style, STYLE_KEY.BG_COLOR)) {
     var color = element.style[STYLE_KEY.BG_COLOR];
-    if (color && (color !== 'transparent' || color !== 'unset')) {
+    if (color && color !== 'transparent' && color !== 'unset') {
       style['backgroundColor'] = isSelected ? colorBlend(SELECTED_TABLE_CELL_BG_COLOR, color, 0.9) : color;
     }
   }
@@ -88,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/text-align/menu/index.js

@@ -1,116 +1,87 @@
-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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useCallback } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 import { getAlignType, isMenuDisabled, setAlignType } from '../helpers';
 import { TEXT_ALIGN, MENUS_CONFIG_MAP } from '../../../constants';
-import './style.css';
-var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextAlignMenu, _React$Component);
-  var _super = _createSuper(TextAlignMenu);
-  function TextAlignMenu(props) {
-    var _this;
-    _classCallCheck(this, TextAlignMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu, true);
-    };
-    _this.onHideTextAlignMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.getCurrentType = function () {
-      var editor = _this.props.editor;
-      return getAlignType(editor);
-    };
-    _this.isActive = function (type) {
-      return _this.getCurrentType() === type;
-    };
-    _this.isDisabled = function () {
-      var editor = _this.props.editor;
-      return isMenuDisabled(editor);
-    };
-    _this.onToggleClick = function (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
-      if (isDropdownMenuOpen) {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.registerEventHandler();
-        });
-      } else {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.unregisterEventHandler();
-        });
+var TextAlignMenu = function TextAlignMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var popoverRef = useRef(null);
+  var disabled = isMenuDisabled(editor);
+  var buttonId = 'sdoc-button-text-align';
+  var toggle = useCallback(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var getCurrentType = useCallback(function () {
+    return getAlignType(editor);
+  }, [editor]);
+  var setType = useCallback(function (type) {
+    setAlignType(editor, type);
+    toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowMenu]);
+  var validClassName = classnames(className, '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,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  var curType = getCurrentType();
+  var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
+    return item.type === curType;
+  })[0].iconClass;
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: curIcon
+  })), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: caretIconClass
+  }))), !disabled && /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pt-2 pb-2"
+  }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "sdoc-dropdown-menu-item",
+      onClick: function onClick() {
+        return setType(item.type);
       }
-    };
-    _this.setType = function (type) {
-      var editor = _this.props.editor;
-      setAlignType(editor, type);
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
-    };
-    _this.state = {
-      isDropdownMenuOpen: false
-    };
-    return _this;
-  }
-  _createClass(TextAlignMenu, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
-      var caretIconClass = "caret-icon sdocfont sdoc-".concat(isDropdownMenuOpen ? 'caret-up' : 'drop-down');
-      var curType = this.getCurrentType();
-      var curIcon = MENUS_CONFIG_MAP[TEXT_ALIGN].filter(function (item) {
-        return item.type == curType;
-      })[0].iconClass;
-      var disabled = this.isDisabled();
-      return /*#__PURE__*/React.createElement("div", {
-        className: "align-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames('align-toggle px-2', {
-          'align-toggle-disabled': disabled
-        }),
-        onClick: disabled ? function () {} : this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "mr-1 ".concat(curIcon)
-      }), !disabled && /*#__PURE__*/React.createElement("span", {
-        className: caretIconClass
-      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "align-popover sdoc-dropdown-menu"
-      }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
-        return /*#__PURE__*/React.createElement("span", {
-          key: index,
-          className: "sdoc-dropdown-menu-item ".concat(item.iconClass),
-          onClick: _this2.setType.bind(_this2, item.type)
-        });
-      })));
-    }
-  }]);
-  return TextAlignMenu;
-}(React.Component);
+    }, /*#__PURE__*/React.createElement("i", {
+      className: item.iconClass
+    }));
+  }))));
+};
+TextAlignMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
 export default withTranslation('sdoc-editor')(TextAlignMenu);

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

@@ -12,7 +12,8 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
-    className = _ref.className;
+    className = _ref.className,
+    idPrefix = _ref.idPrefix;
   var isActive = useCallback(function (type) {
     var isMark = getValue(editor, type);
     return !!isMark;
@@ -59,7 +60,9 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
         };
         itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
       }
-      return _objectSpread(_objectSpread({}, itemProps), item);
+      return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
+        id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id
+      });
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -0,0 +1,10 @@
+.sdoc-context-toolbar {
+  position: absolute;
+  width: auto;
+  height: 42px;
+  z-index: 101;
+  background-color: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px #0000001f;
+}

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

@@ -0,0 +1,55 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useFocused, useSlateStatic, useReadOnly } from '@seafile/slate-react';
+import { Editor, Range } from '@seafile/slate';
+import { MenuGroup } from '../../menu';
+import TextStyleMenuList from '../../plugins/text-style/menu';
+import { useScrollContext } from '../../../hooks/use-scroll-context';
+import { getSelectedNodeByType } from '../../core';
+import { CODE_BLOCK } from '../../constants';
+import './index.css';
+var ContextToolbar = function ContextToolbar() {
+  var ref = useRef(null);
+  var editor = useSlateStatic();
+  var scrollRef = useScrollContext();
+  var inFocus = useFocused();
+  var readOnly = useReadOnly();
+  var setContextToolbarPosition = useCallback(function () {
+    var el = ref.current;
+    var domSelection = window.getSelection();
+    var domRange = domSelection.getRangeAt(0);
+    var rect = domRange.getBoundingClientRect();
+    el.style.top = "".concat(rect.top - el.offsetHeight, "px");
+    el.style.left = "".concat(rect.left, "px");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = useCallback(function (e) {
+    setContextToolbarPosition();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var el = ref.current;
+    var selection = editor.selection;
+    if (!el) {
+      return;
+    }
+    if (readOnly || !selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === '' || getSelectedNodeByType(editor, CODE_BLOCK)) {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+      el.removeAttribute('style');
+      return;
+    }
+    scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+    setContextToolbarPosition();
+  });
+  return createPortal( /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "sdoc-context-toolbar",
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault(); // prevent toolbar from taking focus away from editor
+    }
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+    editor: editor,
+    idPrefix: 'sdoc_context_toolar'
+  }))), document.body);
+};
+export default ContextToolbar;

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -17,9 +17,17 @@ export var useSelectionPosition = function useSelectionPosition() {
     x: 0,
     y: 0
   };
-  var domNode = ReactEditor.toDOMNode(editor, node[0]);
-  var rect = domNode.getBoundingClientRect();
-  return rect;
+  try {
+    var domNode = ReactEditor.toDOMNode(editor, node[0]);
+    var rect = domNode.getBoundingClientRect();
+    return rect;
+  } catch (error) {
+    // A new node has not yet been indexed, it cannot be retrieved, and the new node has no comment information, just do not display it
+    return {
+      x: 0,
+      y: 0
+    };
+  }
 };
 export var useCommentListPosition = function useCommentListPosition() {
   var selectionPosition = useSelectionPosition();

package/dist/components/more-dropdown/index.js

@@ -1,75 +1,38 @@
-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 './style.css';
-var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(MoreDropdownMenu, _React$Component);
-  var _super = _createSuper(MoreDropdownMenu);
-  function MoreDropdownMenu(props) {
-    var _this;
-    _classCallCheck(this, MoreDropdownMenu);
-    _this = _super.call(this, props);
-    _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideMoreDropdownMenu, true);
-    };
-    _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideMoreDropdownMenu, true);
-    };
-    _this.onHideMoreDropdownMenu = function (e) {
-      var menu = _this.menu;
-      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-      if (clickIsInMenu) return;
-      _this.setState({
-        isDropdownMenuOpen: false
-      }, function () {
-        _this.unregisterEventHandler();
-      });
-    };
-    _this.onToggleClick = function (event) {
-      event.stopPropagation();
-      event.nativeEvent.stopImmediatePropagation();
-      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
-      if (isDropdownMenuOpen) {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.registerEventHandler();
-        });
-      } else {
-        _this.setState({
-          isDropdownMenuOpen: isDropdownMenuOpen
-        }, function () {
-          _this.unregisterEventHandler();
-        });
-      }
-    };
-    _this.setMenuRef = function (ref) {
-      _this.menu = ref;
-    };
-    _this.state = {
-      isDropdownMenuOpen: false
-    };
-    return _this;
-  }
-  _createClass(MoreDropdownMenu, [{
-    key: "render",
-    value: function render() {
-      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-more-menu"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "more-toggle px-2",
-        onClick: this.onToggleClick
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "sdocfont sdoc-more"
-      })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
-        ref: this.setMenuRef,
-        className: "more-popover"
-      }, this.props.children));
-    }
-  }]);
-  return MoreDropdownMenu;
-}(React.Component);
+import classnames from 'classnames';
+import { UncontrolledPopover } from 'reactstrap';
+var MoreDropdownMenu = function MoreDropdownMenu(_ref) {
+  var className = _ref.className,
+    disabled = _ref.disabled,
+    isRichEditor = _ref.isRichEditor,
+    children = _ref.children;
+  var validClassName = classnames(className, 'sdoc-more-text-button', {
+    'disabled': disabled,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active': !isRichEditor
+  });
+  var buttonId = 'sdoc-more-text-operations';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: validClassName,
+    type: "button",
+    id: buttonId
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-more"
+  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu",
+    trigger: "legacy",
+    placement: "bottom-end",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "menu-group"
+  }, children)));
+};
+MoreDropdownMenu.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
 export default MoreDropdownMenu;

package/dist/layout/layout.css

@@ -20,6 +20,9 @@ html, body {
   border-bottom: 1px solid #e5e6e8;
   flex-shrink: 0;
   height: 56px;
+  position: relative;
+  z-index: 102;
+  background-color: #fff;
 }
 
 .sdoc-editor-page-wrapper .sdoc-editor-page-content {

package/dist/utils/local-storage-utils.js

@@ -7,12 +7,26 @@ var LocalStorage = /*#__PURE__*/function () {
   _createClass(LocalStorage, null, [{
     key: "setItem",
     value: function setItem(key, value) {
-      return window.localStorage.setItem(key, JSON.stringify(value));
+      var savedValue;
+      var valueType = typeof value;
+      if (valueType === 'string') {
+        savedValue = value;
+      } else if (valueType === 'number') {
+        savedValue = value + '';
+      } else {
+        savedValue = JSON.stringify(value);
+      }
+      return window.localStorage.setItem(key, savedValue);
     }
   }, {
     key: "getItem",
     value: function getItem(key, defaultValue) {
-      return JSON.parse(window.localStorage.getItem(key)) || defaultValue;
+      var value = window.localStorage.getItem(key);
+      try {
+        return JSON.parse(value) || defaultValue;
+      } catch (_unused) {
+        return value || defaultValue;
+      }
     }
   }, {
     key: "removeItem",

package/package.json

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

package/dist/basic-sdk/extension/plugins/text-align/menu/style.css

@@ -1,53 +0,0 @@
-.align-menu {
-  display: flex;
-  position: relative;
-  margin-right: 10px;
-  border: 1px solid transparent;
-  padding: 1px 0px;
-}
-
-.align-menu .align-toggle {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 30px;
-  line-height: 30px;
-}
-
-.align-menu .align-toggle-disabled {
-  color: #999;
-}
-
-.align-menu .align-toggle:not(.align-toggle-disabled):hover {
-  background: #e5e5e5;
-  border-radius: 2px;
-}
-
-.align-menu .align-toggle .sdocfont {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.align-menu .align-toggle .caret-icon {
-  transform: scale(.8);
-}
-
-.align-menu .align-popover {
-  position: absolute;
-  top: 37px;
-  left: 0;
-  padding: 8px 0;
-  background-color: #fff;
-  border: 1px solid #e5e6e8;
-  border-radius: 2px;
-  box-shadow: 0 0 10px #ccc;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  z-index: 101;
-}

package/dist/components/more-dropdown/style.css

@@ -1,64 +0,0 @@
-.sdoc-more-menu {
-  display: flex;
-  position: relative;
-  margin-right: 10px;
-  border: 1px solid transparent;
-  padding: 1px 0px;
-}
-
-.sdoc-more-menu .more-toggle {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 30px;
-  line-height: 30px;
-}
-
-.sdoc-more-menu .more-toggle-disabled {
-  color: #999;
-}
-
-.sdoc-more-menu .more-toggle:not(.more-toggle-disabled):hover {
-  background: #e5e5e5;
-  border-radius: 2px;
-}
-
-.sdoc-more-menu .more-toggle .sdocfont {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.sdoc-more-menu .more-toggle .caret-icon {
-  transform: scale(.8);
-}
-
-.sdoc-more-menu .more-popover {
-  position: absolute;
-  top: 37px;
-  right: 0;
-  height: 48px;
-  padding: 8px 0 8px 10px;
-  background-color: #fff;
-  border: 1px solid #e5e6e8;
-  border-radius: 2px;
-  box-shadow: 0 0 10px #ccc;
-  display: flex;
-  z-index: 101;
-}
-
-.sdoc-more-menu .more-popover .more-menu-item {
-  cursor: pointer;
-  height: 30px;
-  width: 100%;
-  padding: 4px 24px;
-  user-select: none;
-}
-
-.sdoc-more-menu .more-popover .more-menu-item:hover {
-  background-color: rgb(245, 245, 245);
-}