@seafile/sdoc-editor 0.1.88 → 0.1.90

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 {
@@ -59,7 +61,7 @@
 
 .sdoc-editor-container .sdoc-editor-content .article {
   width: 794px;
-  min-height: 100%;
+  min-height: 800px;
   padding: 40px 60px;
   background-color: #fff;
   border: 1px solid #e5e6e8;

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/{menu → commons}/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 → commons}/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 → commons}/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/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/commons/index.js

@@ -0,0 +1,5 @@
+import ColorMenu from './color-menu';
+import ElementPopover from './element-popover';
+import MoreDropdown from './more-dropdown';
+import { MenuGroup, MenuItem } from './menu';
+export { ColorMenu, ElementPopover, MenuGroup, MenuItem, MoreDropdown };

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

@@ -0,0 +1,85 @@
+.menu-group {
+  height: 100%;
+  padding: 6px 0 6px 10px;
+  font-size: 0.75rem;
+  border-right: 1px solid #e5e6e8;
+  color: #555555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .menu-group-item {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  margin-right: 10px;
+  border: none !important;
+  color: #555555;
+  background-color: #fff;
+}
+
+.menu-group .menu-group-item:disabled {
+  color: #999;
+}
+
+.menu-group .menu-group-item:hover {
+  background-color: #e5e5e5;
+  border-radius: 2px;
+}
+
+.menu-group .menu-group-item[data-active='true'] {
+  color: #eb8205;
+}
+
+.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/commons/more-dropdown/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import classnames from 'classnames';
+import { UncontrolledPopover } from 'reactstrap';
+var MoreDropdown = function MoreDropdown(_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)));
+};
+MoreDropdown.defaultProps = {
+  isRichEditor: true,
+  className: 'menu-group-item'
+};
+export default MoreDropdown;

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',
@@ -149,4 +151,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 var TRANSPARENT = 'transparent';
+export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
 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

@@ -4,7 +4,7 @@ import { withHistory } from '@seafile/slate-history';
 import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
-import Toolbar from './toolbar';
+import { Toolbar, ContextToolbar } from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -14,4 +14,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/plugins/blockquote/menu/index.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { BLOCKQUOTE, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getBlockQuoteType, isMenuDisabled, setBlockQuoteType } from '../helpers';
 var QuoteMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(QuoteMenu, _React$Component);

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

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { CHECK_LIST, CHECK_LIST_ITEM, MENUS_CONFIG_MAP, PARAGRAPH } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { isMenuDisabled, setCheckListItemType, getCheckListItemType } from '../helpers';
 var CheckListMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(CheckListMenu, _React$Component);

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

@@ -1,7 +1,7 @@
 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 { MenuItem } from '../../../commons';
 import { isMenuDisabled, clearStyles } from '../helpers';
 var menuConfig = MENUS_CONFIG_MAP[CLEAR_FORMAT];
 var ClearFormatMenu = function ClearFormatMenu(_ref) {

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/';
 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/code-block/menu/index.js

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { focusEditor } from '../../../core';
 import { CODE_BLOCK, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getSelectCodeElem, isMenuDisabled, changeToCodeBlock, changeToPlainText } from '../helpers';
 var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(CodeBlockMenu, _React$Component);

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

@@ -8,7 +8,7 @@ import { withTranslation } from 'react-i18next';
 import { insertImage, isInsertImageMenuDisabled } from '../helpers';
 import context from '../../../../../context';
 import { IMAGE, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import InsertWebImageDialog from '../dialogs/insert-web-image-dialog';
 import './style.css';
 var ImageMenu = /*#__PURE__*/function (_React$Component) {

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { LINK, MENUS_CONFIG_MAP } from '../../../constants';
 import { getEditorString } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getLinkType, isMenuDisabled } from '../helpers';
 import AddLinkDialog from './add-link-dialog';
 var LinkMenu = /*#__PURE__*/function (_React$Component) {

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,