@seafile/sdoc-editor 3.0.183 → 3.0.185

package/dist/extension/plugins/image/menu/index.js

@@ -56,12 +56,13 @@ var ImageMenu = function ImageMenu(_ref) {
   })), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-image-menu-popover",
+    className: "sdoc-sub-dropdown-menu sdoc-insert-image-menu-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     placement: "right-start",
     hideArrow: true,
     fade: false
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-insert-image-menu-popover-container sdoc-dropdown-menu-container"
+    className: "sdoc-insert-image-menu-popover-container sdoc-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openInsertLocalImage

package/dist/extension/plugins/link/hover/index.css

@@ -1,12 +1,12 @@
 .link-op-menu {
-  height: 36px;
-  padding: 7px 8px;
+  height: 40px;
+  padding: 8px;
   display: flex;
   position: absolute;
   background-color: #fff;
-  border: 1px solid #e5e5e5;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.1);
   z-index: 101;
 }
 

package/dist/extension/plugins/sdoc-link/hover-menu/index.css

@@ -6,15 +6,15 @@
 }
 
 .sdoc-link-hover-menu-container .hover-menu-container {
-  height: 36px;
-  padding: 7px 8px;
+  height: 40px;
+  padding: 8px;
   background-color: #fff;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  border: 1px solid #e8e8e8;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.10);
 }
 
 .sdoc-link-hover-menu-container .hover-menu-container>span:not(:last-of-type) {

package/dist/extension/plugins/table/menu/color-selector-popover/index.js

@@ -108,7 +108,7 @@ var ColorSelectorPopover = function ColorSelectorPopover(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu sdoc-color-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "p-3 d-flex flex-column"
+    className: "py-3 d-flex flex-column"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-color-no-color-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/dist/extension/plugins/table/menu/horizontal-align-popover/index.js

@@ -37,13 +37,12 @@ var HorizontalAlignPopover = function HorizontalAlignPopover(_ref) {
     target: target.current,
     trigger: "hover",
     placement: "right-start",
+    popperClassName: "sdoc-popover-box-shadow",
     hideArrow: true,
     fade: false,
     offset: [0, 8]
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu sdoc-table-alignment-menu"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onMouseDown: function onMouseDown() {
@@ -73,6 +72,6 @@ var HorizontalAlignPopover = function HorizontalAlignPopover(_ref) {
     className: (0, _classnames["default"])('sdocfont sdoc-check-mark', {
       active: horizontalAlign === 'right'
     })
-  }), /*#__PURE__*/_react["default"].createElement("span", null, t('Right'))))));
+  }), /*#__PURE__*/_react["default"].createElement("span", null, t('Right')))));
 };
 var _default = exports["default"] = HorizontalAlignPopover;

package/dist/extension/plugins/table/menu/vertical-align-popover/index.js

@@ -39,13 +39,12 @@ var VerticalAlignPopover = function VerticalAlignPopover(_ref) {
     target: target.current,
     trigger: "hover",
     placement: "right-start",
+    popperClassName: "sdoc-popover-box-shadow",
     hideArrow: true,
     fade: false,
     offset: [0, 8]
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu sdoc-table-alignment-menu"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onMouseDown: function onMouseDown() {
@@ -75,6 +74,6 @@ var VerticalAlignPopover = function VerticalAlignPopover(_ref) {
     className: (0, _classnames["default"])('sdocfont sdoc-check-mark', {
       active: verticalAlign === 'flex-end'
     })
-  }), /*#__PURE__*/_react["default"].createElement("span", null, t('Bottom_align'))))));
+  }), /*#__PURE__*/_react["default"].createElement("span", null, t('Bottom_align')))));
 };
 var _default = exports["default"] = VerticalAlignPopover;

package/dist/extension/plugins/table/menu/vertical-align-popover/style.css

@@ -4,11 +4,7 @@
 }
 
 .sdoc-table-alignment-menu {
-    min-width: 80px !important;
-}
-
-.sdoc-table-alignment-menu .sdoc-dropdown-menu-container {
-    min-width: 80px !important;
+    min-width: 96px !important;
 }
 
 .sdoc-table-alignment-menu .sdoc-dropdown-menu-item {

package/dist/extension/plugins/table/popover/table-size-popover/index.css

@@ -1,20 +1,29 @@
-.sdoc-selected-table-size-popover .popover {
-  background-color: #fff;
-  min-width: 100px;
-  min-height: 100px;
-  max-width: 222px;
-  border-radius: 8px;
+.sdoc-selected-table-size-container .sdoc-selected-table-tools-container {
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #eee;
 }
 
-.sdoc-selected-table-size-popover .sdoc-selected-table-size-tip {
-  text-align: center;
-  height: 35px;
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 12px;
+  min-height: 32px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
+  cursor: pointer;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom .sdocfont {
   font-size: 14px;
-  padding: 5px 10px 10px;
 }
 
 .sdoc-selected-table-size-popover .sdoc-table-size-select {
-  padding: 0 10px;
+  padding: 0 12px;
 }
 
 .sdoc-selected-table-size-popover .sdoc-table-size-row {
@@ -41,29 +50,9 @@
   background-color: #ffa94d;
 }
 
-.sdoc-selected-table-size-popover .sdoc-table-size-select {
-  margin-top: 5px;
-}
-
-.sdoc-selected-table-size-container .sdoc-selected-table-tools-container {
-  padding: 10px 0;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #eee;
-}
-
-.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 10px;
-  min-height: 32px;
-}
-
-.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
-  cursor: pointer;
-  background: #f5f5f5;
-}
-
-.sdoc-selected-table-size-popover .sdoc-selected-table-size-custom .sdocfont {
+.sdoc-selected-table-size-popover .sdoc-selected-table-size-tip {
+  text-align: center;
+  height: 35px;
   font-size: 14px;
+  padding: 8px 12px 8px;
 }

package/dist/extension/plugins/table/popover/table-size-popover/index.js

@@ -225,16 +225,16 @@ var TableSizePopover = function TableSizePopover(_ref) {
   }, [displaySize, selectedSize]);
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: target,
-    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu",
     trigger: trigger,
     placement: placement,
     hideArrow: true,
     fade: false,
     ref: ref,
-    popperClassName: popperClassName,
+    popperClassName: "".concat(popperClassName, " sdoc-popover-box-shadow"),
     offset: offset
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
+    className: "sdoc-dropdown-menu sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-selected-table-tools-container"
   }, /*#__PURE__*/_react["default"].createElement(MenuItem, {

package/dist/extension/plugins/table/popover/table-template/index.js

@@ -118,9 +118,9 @@ var TableTemplate = function TableTemplate(_ref) {
     fade: false,
     className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
     innerClassName: "sdoc-table-template-inner-popover",
-    popperClassName: "sdoc-table-template-popover-wrapper",
+    popperClassName: "sdoc-table-template-popover-wrapper sdoc-popover-box-shadow",
     ref: ref,
-    offset: [0, 0]
+    offset: [0, 8]
   }, tableTemplatePreviewList.map(function (alternateColor, index) {
     return /*#__PURE__*/_react["default"].createElement(_sampleTable["default"], {
       key: alternateColor + index,

package/dist/extension/plugins/text-align/menu/index.css

@@ -1,5 +1,5 @@
-.sdoc-text-align-dropdown .sdoc-dropdown-menu-container {
-    min-width: 80px !important;
+.sdoc-text-align-dropdown .sdoc-dropdown-menu {
+    min-width: 96px !important;
 }
 
 .sdoc-text-align-dropdown .sdocfont.sdoc-check-mark {
@@ -11,4 +11,5 @@
 .sdoc-text-align-dropdown .sdoc-dropdown-menu-item {
     font-size: 14px;
     padding: 4px 12px 4px 38px;
+    position: relative;
 }

package/dist/extension/plugins/text-align/menu/index.js

@@ -78,7 +78,8 @@ var TextAlignMenu = function TextAlignMenu(_ref) {
     target: buttonId
   }, t('Alignment_type')), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: buttonId,
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-text-align-dropdown",
+    className: "sdoc-text-align-dropdown",
+    popperClassName: "sdoc-popover-box-shadow",
     trigger: "legacy",
     placement: "bottom-start",
     hideArrow: true,
@@ -86,7 +87,7 @@ var TextAlignMenu = function TextAlignMenu(_ref) {
     fade: false,
     ref: popoverRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container pt-2 pb-2"
+    className: "sdoc-dropdown-menu pt-2 pb-2"
   }, _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].map(function (item, index) {
     var isSelected = curType === item.id;
     return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/extension/plugins/video/hover-menu/index.css

@@ -6,15 +6,15 @@
 }
 
 .video-hover-menu-container .hover-menu-container {
-  height: 36px;
-  padding: 7px 8px;
+  height: 40px;
+  padding: 8px;
   background-color: #fff;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  border: 1px solid #e8e8e8;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.10);
 }
 
 .video-hover-menu-container .hover-menu-container>span:not(:last-of-type) {

package/dist/extension/plugins/video/menu/index.js

@@ -53,12 +53,13 @@ var VideoMenu = function VideoMenu(_ref) {
   })), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+    className: "sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     placement: "right-start",
     hideArrow: true,
     fade: false
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container"
+    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openLocalVideoDialog

package/dist/extension/plugins/whiteboard/hover-menu/index.css

@@ -6,14 +6,15 @@
 }
 
 .sdoc-whiteboard-hover-menu-container .hover-menu-container {
-  height: 36px;
+  height: 40px;
+  padding: 8px;
   background-color: #fff;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  border: 1px solid #e8e8e8;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.10);
 }
 
 .sdoc-whiteboard-hover-menu-container .hover-menu-container>span {

package/dist/extension/plugins/whiteboard/menu/index.js

@@ -42,12 +42,13 @@ var WhiteboardMenu = function WhiteboardMenu(_ref) {
   })), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-whiteboard-menu-popover",
+    className: "sdoc-sub-dropdown-menu sdoc-insert-whiteboard-menu-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     placement: "right-start",
     hideArrow: true,
     fade: false
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-insert-whiteboard-menu-popover-container sdoc-dropdown-menu-container"
+    className: "sdoc-insert-whiteboard-menu-popover-container sdoc-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: openSelectWhiteboardFileDialog

package/dist/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -92,15 +92,17 @@ var InsertToolbar = function InsertToolbar(_ref) {
     target: insertToolbarId
   }, t('Insert')), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: insertToolbarId,
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-insert-menu-popover",
+    className: "sdoc-insert-menu-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     trigger: "legacy",
     placement: "bottom-start",
     hideArrow: true,
     toggle: toggle,
     fade: false,
-    ref: popoverRef
+    ref: popoverRef,
+    offset: [-9, 8]
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-insert-menu-container sdoc-dropdown-menu-container",
+    className: "sdoc-insert-menu-container sdoc-dropdown-menu",
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }

package/dist/extension/toolbar/insert-element-toolbar/index.js

@@ -391,13 +391,14 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     }), /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
       target: "sdoc-side-menu-item-video",
       trigger: "hover",
-      className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+      className: "sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+      popperClassName: "sdoc-popover-box-shadow",
       placement: "right-start",
       hideArrow: true,
       fade: false,
       offset: [0, 6]
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container"
+      className: "sdoc-insert-video-menu-popover-container"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "sdoc-dropdown-menu-item",
       onClick: onInsertVideoToggle
@@ -619,7 +620,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     onChange(e);
   }, [onChange]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container sdoc-insert-element-toolbar"
+    className: "sdoc-insert-element-toolbar"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-side-menu-search-wrapper"
   }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
@@ -631,10 +632,12 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-insert-element-content-wrapper",
     ref: downDownWrapperRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-side-menu-inner-container"
   }, Object.keys(dropDownItems).map(function (key) {
     return dropDownItems[key];
   }), Object.keys(quickInsertMenuSearchMap).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item-no-results"
-  }, t('No_results'))));
+  }, t('No_results')))));
 };
 var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(QuickInsertBlockMenu);

package/dist/extension/toolbar/insert-element-toolbar/style.css

@@ -5,4 +5,5 @@
 .sdoc-insert-element-toolbar .sdoc-insert-element-content-wrapper {
   max-height: 278px;
   overflow-y: auto;
+  padding: 0 8px 8px;
 }

package/dist/extension/toolbar/linked-repo-popover/index.js

@@ -26,7 +26,8 @@ function LinkRepoPopover(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: "sdoc-side-menu-item-file-view",
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-menu-file-view-popover",
+    className: "sdoc-sub-dropdown-menu sdoc-insert-menu-file-view-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     placement: placement,
     hideArrow: true,
     fade: false

package/dist/extension/toolbar/linked-repo-popover/link-repo-list.js

@@ -27,7 +27,7 @@ var LinkedRepoList = function LinkedRepoList(_ref) {
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: repoRef,
-    className: "sdoc-dropdown-menu-container sdoc-linked-repo-list-wrapper"
+    className: "sdoc-dropdown-menu sdoc-linked-repo-list-wrapper"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-linked-repo-list-tip"
   }, t('Show_files_from_a_linked_library')), /*#__PURE__*/_react["default"].createElement("div", {

package/dist/extension/toolbar/side-toolbar/insert-below-menu.js

@@ -15,14 +15,15 @@ var InsertBelowMenu = function InsertBelowMenu(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     boundariesElement: "viewport",
     target: target,
-    className: "sdoc-side-menu-insert-below-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    className: "sdoc-side-menu-insert-below-popover sdoc-sub-dropdown-menu",
+    popperClassName: "sdoc-popover-box-shadow",
     trigger: "hover",
     placement: "right-start",
     hideArrow: true,
     fade: false,
     offset: [0, 6]
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container"
+    className: "sdoc-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement(_insertBlockMenu["default"], {
     insertPosition: _constants.INSERT_POSITION.AFTER,
     slateNode: slateNode

package/dist/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -224,13 +224,14 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
   }), /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     target: "sdoc-side-menu-item-video",
     trigger: "hover",
-    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+    className: "sdoc-sub-dropdown-menu sdoc-insert-video-menu-popover",
+    popperClassName: "sdoc-popover-box-shadow",
     placement: "right-start",
     hideArrow: true,
     fade: false,
     offset: [0, 6]
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu-container"
+    className: "sdoc-insert-video-menu-popover-container sdoc-dropdown-menu"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item",
     onClick: onInsertVideoToggle

package/dist/extension/toolbar/side-toolbar/side-menu.css

@@ -3,26 +3,45 @@
 }
 
 .sdoc-side-menu {
+  padding: 0;
   position: absolute;
-  width: 200px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .12);
-  border-radius: 4px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  box-shadow: 0 6px 14px 0px rgba(0, 0, 0, .1);
   transform: translateX(-200px);
-  box-shadow: 0 2px 12px 2px rgba(68, 73, 77, .16);
   z-index: 999;
 }
 
 .sdoc-side-menu .sdoc-side-menu-search-wrapper {
-  padding: 12px;
+  padding: 8px 16px 8px;
 }
 
 .sdoc-side-menu .sdoc-side-menu-search-wrapper input {
-  max-height: 30px;
+  max-height: 32px;
+  font-size: 14px;
+}
+
+.sdoc-side-menu .sdoc-side-menu-search-wrapper input {
+  max-height: 32px;
+  font-size: 14px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.sdoc-side-menu .sdoc-side-menu-search-wrapper input:focus {
+  border: 1px solid #3E84F7;
+  box-shadow: none;
+}
+
+
+.sdoc-side-menu .sdoc-side-menu-search-wrapper input::placeholder {
+  color: #868e96;
   font-size: 14px;
 }
 
 .sdoc-side-menu .sdoc-side-menu-insert-wrapper {
+  padding: 0 8px 8px;
   max-height: 278px;
   overflow-y: auto;
 }
@@ -34,6 +53,6 @@
   cursor: pointer;
 }
 
-.sdoc-side-menu-insert-below-popover .sdoc-dropdown-menu-container {
+.sdoc-side-menu-insert-below-popover .sdoc-dropdown-menu {
   overflow: auto;
 }

package/dist/extension/toolbar/side-toolbar/side-menu.js

@@ -160,8 +160,6 @@ var SideMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-side-menu sdoc-dropdown-menu",
     ref: sideMenuRef
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-side-menu-search-wrapper"
   }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
@@ -173,11 +171,16 @@ var SideMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   })), isNodeEmpty && /*#__PURE__*/_react["default"].createElement("div", {
     id: "sdoc-side-menu-insert-wrapper",
     className: "sdoc-side-menu-insert-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-side-menu-inner-container"
   }, /*#__PURE__*/_react["default"].createElement(_insertBlockMenu["default"], {
     isNodeEmpty: isNodeEmpty,
     slateNode: slateNode,
     insertMenuSearchMap: insertMenuSearchMap
-  })), !isNodeEmpty && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, transformMenuSearchMap['searching'] && isDisplayCategoryTitle(transformMenuSearchMap, insertBelowMenuSearchMap) && /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+  }))), !isNodeEmpty && /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sdoc-side-menu-insert-wrapper",
+    className: "sdoc-side-menu-insert-wrapper"
+  }, transformMenuSearchMap['searching'] && isDisplayCategoryTitle(transformMenuSearchMap, insertBelowMenuSearchMap) && /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
     menuConfig: {
       text: 'Transform_to'
     },
@@ -263,6 +266,6 @@ var SideMenu = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isHidden: !otherOperatonsMenuSearchMap['DELETE']
   }), transformMenuSearchMap['searching'] && Object.keys((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, transformMenuSearchMap), insertBelowMenuSearchMap), otherOperatonsMenuSearchMap)).length === 1 && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-item-no-results"
-  }, t('No_results'))))));
+  }, t('No_results')))));
 });
 var _default = exports["default"] = SideMenu;

package/dist/extension/toolbar/side-toolbar/transform-menus.js

@@ -18,14 +18,15 @@ var TransformMenus = function TransformMenus(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
     boundariesElement: "viewport",
     target: target,
-    className: "sdoc-side-operation-translate-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    className: "sdoc-side-operation-translate-popover sdoc-sub-dropdown-menu",
+    popperClassName: "sdoc-popover-box-shadow",
     trigger: "hover",
     placement: "right-start",
     hideArrow: true,
     fade: false,
     offset: [0, 6]
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "sdoc-dropdown-menu-container"
+    className: "sdoc-dropdown-menu"
   }, (0, _helpers.getTransformMenusConfig)(editor, slateNode).map(function (item) {
     return /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
       key: item.id,

package/dist/layout/editor-container.js

@@ -14,6 +14,7 @@ require("../assets/css/sdoc-editor-article.css");
 require("../assets/css/sdoc-editor-plugins.css");
 require("../assets/css/sdoc-comment-editor-plugin.css");
 require("../assets/css/dropdown-menu.css");
+require("../assets/css/popover.css");
 var EditorContainer = function EditorContainer(_ref) {
   var children = _ref.children,
     readonly = _ref.readonly,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.183",
+  "version": "3.0.185",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -17,7 +17,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@seafile/comment-editor": "1.0.27",
+    "@seafile/comment-editor": "1.0.28",
     "@seafile/print-js": "1.6.6",
     "@seafile/react-image-lightbox": "^5.0.6",
     "@seafile/sdoc-file-view": "0.0.63",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "22ea1c0c151bd18ee57d391db197735963b34af5"
+  "gitHead": "7757dcd0169d411ec4ea7cce55c66a7a1514f97b"
 }