@seafile/seafile-editor 3.0.35 → 3.0.36

package/dist/extension/commons/dropdown-menu-item/index.css

@@ -21,16 +21,6 @@
   padding: 3px 12px;
 }
 
-.sf-dropdown-menu .sf-dropdown-menu-item {
-  align-items: center;
-  display: flex;
-  height: 30px;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 100%
-}
-
 .sf-dropdown-menu .sf-dropdown-menu-item .sf-dropdown-item-content {
   align-items: center;
   display: flex;
@@ -48,6 +38,6 @@
 }
 
 .sf-dropdown-menu .sf-dropdown-item-content .sf-dropdown-item-content-icon {
-  margin-right: 10px;
+  margin-right: 12px;
   vertical-align: 1px;
 }

package/dist/extension/commons/dropdown-menu-item/index.js

@@ -11,6 +11,7 @@ var _reactI18next = require("react-i18next");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../../constants");
 var _menuShortcutIndicator = _interopRequireDefault(require("../menu-shortcut-indicator"));
+require("./menu.css");
 require("./index.css");
 const DropdownMenuItem = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {

package/dist/extension/{plugins/image/menu/index.css → commons/dropdown-menu-item/menu.css}

@@ -1,18 +1,18 @@
-.sf-insert-image-menu-popover-container {
-  padding: 8px 0;
-}
-
-.sf-insert-video-menu-popover-container {
-  padding: 8px 0;
+.sf-dropdown-menu,
+.sf-dropdown-menu .sf-dropdown-menu-container {
+  width: fit-content;
+  min-width: 200px;
+  max-width: 240px;
+  max-height: 600px;
+  overflow: visible;
 }
 
 .sf-dropdown-menu .sf-dropdown-menu-container {
-  min-width: 12rem;
-  z-index: 1500;
+  padding: 8px;
 }
 
 .sf-sub-dropdown-menu .popover {
-  left: -8px !important;
+  left: 0px !important;
   z-index: 1070;
 }
 
@@ -21,7 +21,7 @@
 }
 
 .sf-dropdown-menu .sf-dropdown-menu-item {
-  height: 30px;
+  height: 32px;
   width: 100%;
   padding: 3px 12px;
   user-select: none;
@@ -31,6 +31,7 @@
 
 .sf-sub-dropdown-menu:hover,
 .sf-dropdown-menu .sf-dropdown-menu-item:hover {
-  background-color: rgb(245, 245, 245);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
   cursor: pointer;
 }

package/dist/extension/commons/menu/menu.css

@@ -91,10 +91,10 @@
   align-items: flex-start;
   z-index: 1000;
   align-items: center;
-  padding: 8px 0;
+  padding: 8px;
   background-color: #fff;
   border: 1px solid #e5e6e8;
-  border-radius: 2px;
+  border-radius: 8px;
   box-shadow: 0 0 10px #ccc;
 }
 

package/dist/extension/commons/select/menu/menu.js

@@ -18,7 +18,7 @@ class Menu extends _react.default.Component {
         width
       } = position;
       return {
-        marginLeft: width - 10,
+        marginLeft: width - 8,
         marginTop: '30px'
       };
     });

package/dist/extension/commons/select/menu/style.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   width: 150px;
-  padding: 8px 0;
+  padding: 8px;
   min-width: 80px;
   overflow-y: auto;
   overflow-x: hidden;
@@ -26,6 +26,7 @@
 
 .sf-menu-container .sf-menu-item:hover {
   background-color: #f5f5f5;
+  border-radius: 4px;
 }
 
 .sf-menu-container .sf-menu-item .menu-item-icon {

package/dist/extension/commons/select/style.css

@@ -62,17 +62,17 @@
   min-width: 120px;
   max-height: 265px;
   margin-top: 4px;
-  padding: 8px 0;
+  padding: 8px;
   flex-direction: column;
   border: 1px solid #e5e5e5;
   box-shadow: 0 4px 10px #eee;
-  border-radius: 4px;
+  border-radius: 8px;
   background: #fff;
   z-index: 10;
 }
 
 .select-popover .option-item-divider {
-  margin-top: 8px;
+  margin: 8px 0;
   border-top: 1px solid #EFEFEF;
 }
 
@@ -122,11 +122,7 @@
 
 .select-popover .option-item:hover {
   background-color: #F5F5F5;
-}
-
-.select-popover .option-item.active {
-  background-color: #39A0FF;
-  color: #fff;
+  border-radius: 4px;
 }
 
 .select-popover .option-item.disable {
@@ -140,10 +136,6 @@
   cursor: default;
 }
 
-.select-popover .option-item.active .item-icon {
-  color: #fff;
-}
-
 .select-popover .option-item .label {
   margin: 0 5px;
 }

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

@@ -14,6 +14,8 @@ var _tooltip = _interopRequireDefault(require("../../../commons/tooltip"));
 var _keyboard = require("../../../constants/keyboard");
 var _constants = require("../../../constants");
 var _constants2 = require("../../../../constants");
+var _core = require("../../../core");
+var _elementTypes = require("../../../constants/element-types");
 require("./style.css");
 const headerPopoverShowerList = [_constants.ELementTypes.PARAGRAPH, ..._constants.HEADERS];
 const HeaderMenu = _ref => {
@@ -27,7 +29,15 @@ const HeaderMenu = _ref => {
   const {
     t
   } = (0, _reactI18next.useTranslation)(_constants2.TRANSLATE_NAMESPACE);
-  const currentHeaderType = (0, _helper.getHeaderType)(editor);
+  const getCurrentType = () => {
+    let type = (0, _helper.getHeaderType)(editor);
+    if (!type) {
+      const selectNode = (0, _core.getSelectedNodeByType)(editor, _elementTypes.PARAGRAPH);
+      type = selectNode && selectNode.type;
+    }
+    return type;
+  };
+  const currentHeaderType = getCurrentType();
   const isDisabled = (0, _helper.isMenuDisabled)(editor, readonly);
   const onHideHeaderMenu = (0, _react.useCallback)(e => {
     const menu = headerPopoverRef.current;

package/dist/extension/plugins/header/menu/style.css

@@ -73,11 +73,11 @@
   position: absolute;
   top: 32px;
   left: 8px;
-  padding: 8px 0;
+  padding: 8px;
   width: 100%;
   background-color: #fff;
   border: 1px solid #e5e6e8;
-  border-radius: 2px;
+  border-radius: 8px;
   box-shadow: 0 0 10px #ccc;
   display: flex;
   flex-direction: column;
@@ -88,18 +88,19 @@
 .sf-header-menu .sf-header-popover .sf-dropdown-menu-item {
   font-size: 14px;
   height: auto;
-  padding: 9px 16px 9px 28px;
+  padding: 9px 16px 9px 38px;
   width: 100%;
   line-height: 1;
 }
 
 .sf-header-menu .sf-header-popover .sf-dropdown-menu-item:hover {
   background-color: #EFEFEF;
+  border-radius: 4px;
 }
 
 .sf-header-menu .sf-header-popover .sf-dropdown-menu-item .md-check-mark {
   position: absolute;
-  left: 8px;
+  left: 12px;
   color: #666;
   font-size: 14px;
 }

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

@@ -14,7 +14,6 @@ var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdow
 var _reactstrap = require("reactstrap");
 var _reactI18next = require("react-i18next");
 var _constants = require("../../../../constants");
-require("./index.css");
 const menuConfig = _menusConfig.MENUS_CONFIG_MAP[_elementTypes.IMAGE];
 const ImageMenu = _ref => {
   var _editor$api;

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

@@ -41,38 +41,33 @@ const HorizontalAlignPopover = _ref => {
     placement: "right-start",
     hideArrow: true,
     fade: false,
-    offset: [0, 0]
+    offset: [0, 8],
+    popperClassName: "sf-table-alignment-popover"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-dropdown-menu sf-table-alignment-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-dropdown-menu-item",
     onMouseDown: () => setTextAlignStyle('left')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-checked"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _classnames.default)('mdfont md-check-mark', {
       active: !horizontalAlign || horizontalAlign === 'left'
     })
-  })), /*#__PURE__*/_react.default.createElement("span", {
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "active"
   }, t('Left'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-dropdown-menu-item",
     onMouseDown: () => setTextAlignStyle('center')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-checked"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _classnames.default)('mdfont md-check-mark', {
       active: horizontalAlign === 'center'
     })
-  })), /*#__PURE__*/_react.default.createElement("span", null, t('Center'))), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('Center'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-dropdown-menu-item",
     onMouseDown: () => setTextAlignStyle('right')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-checked"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _classnames.default)('mdfont md-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/context-menu/horizontal-align-popover/style.css

@@ -1,24 +1,25 @@
+
+
 .sf-context-menu .sf-dropdown-menu {
   display: flex;
   flex-direction: column;
 }
+.sf-table-alignment-popover {
+  z-index: 2000;
 
+}
 .sf-table-alignment-menu {
-  padding: 8px 0;
+  padding: 8px;
+  min-width: 80px;
 }
 
 .sf-table-alignment-menu .sf-dropdown-menu-item {
-  padding: 4px 50px 4px 10px !important;
-}
-
-.sf-table-alignment-menu .sf-dropdown-menu-item .sf-checked {
-  margin-right: 6px;
-  height: 21px;
-  line-height: 21px;
-  width: 12px;
+  padding: 4px 12px 4px 38px !important;
 }
 
 .sf-table-alignment-menu .sf-dropdown-menu-item .md-check-mark {
+  position: absolute;
+  left: 20px;
   color: #666;
   display: none;
   font-size: 12px !important;

package/dist/extension/plugins/table/context-menu/style.css

@@ -63,12 +63,6 @@
   transition: none;
 }
 
-.sf-context-menu .sf-context-menu-item:hover .insert-number-input {
-  background-color: transparent;
-  border: 1px solid #fff;
-  color: #fff;
-}
-
 .sf-context-menu .sf-context-menu-item:disabled .insert-number-input {
   color: #adb5bd;
 }
@@ -81,13 +75,11 @@
 .side-extendable .md-arrow-right {
   color: #666;
   font-size: 12px;
-}
-
-.side-extendable:hover .md-arrow-right {
-  color: #fff;
+  line-height: 12px;
 }
 
 .sf-context-menu .sf-dropdown-menu-item:hover {
-  color: #fff;
-  background-color: #20a0ff;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  cursor: pointer;
 }

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
 var _constants = require("../../../constants");
 var _elementTypes = require("../../../constants/element-types");
 var _helper = require("../helper");
@@ -20,26 +21,25 @@ const TableMenu = _ref => {
     readonly,
     toggle
   } = _ref;
-  const [isOpenTableSizeSelector, setIsOpenTableSizeSelector] = (0, _react.useState)(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const disabled = (0, _react.useMemo)(() => (0, _helper.isDisabled)(editor, readonly), [editor.selection, readonly]);
-  const tablePopoverRef = (0, _react.useRef)(null);
-  const handleMouseEnter = () => setIsOpenTableSizeSelector(true);
-  const handleMouseLeave = () => setIsOpenTableSizeSelector(false);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "table-menu-container",
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
     disabled: disabled,
     menuConfig: menuConfig,
     className: "pr-2"
   }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
     className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
-  })), !disabled && isOpenTableSizeSelector && /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
-    ref: tablePopoverRef,
+  })), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: menuConfig.id,
+    trigger: "hover",
+    className: "sf-dropdown-menu sf-sub-dropdown-menu sf-table-size-selector-popover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    offset: [0, 8]
+  }, /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
     editor: editor,
     onHideSelector: toggle
-  }));
+  })));
 };
 var _default = exports.default = TableMenu;

package/dist/extension/plugins/table/menu/style.css

@@ -1,15 +1,16 @@
-.sf-table-menu-item {
-  position: relative;
+.sf-table-size-selector-popover {
+  min-width: auto !important;
+}
+
+.sf-table-size-selector-popover .popover {
+  max-width: none;
+  border-radius: 8px;
 }
 
 .sf-table-size-selector-card {
-  position: absolute;
-  z-index: 1;
-  top: 30px;
-  padding: 5px 12px;
+  border-radius: 8px;
+  padding: 8px 12px;
   background-color: #fff;
-  border: 1px solid #0028641f;
-  left: 100%;
 }
 
 .sf-table-size-selector-card .sf-table-grid-info {

package/dist/extension/plugins/table/menu/table-size-selector.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _helper = require("../helper");
 require("./style.css");
-const TableSizeSelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TableSizeSelector = _ref => {
   let {
     editor,
     onHideSelector
@@ -81,10 +81,9 @@ const TableSizeSelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const tableGridElement = (0, _react.useMemo)(() => generateTableGrid(showingGridInfo.row, showingGridInfo.column), [generateTableGrid]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-table-size-selector-card",
-    ref: ref
+    className: "sf-table-size-selector-card"
   }, /*#__PURE__*/_react.default.createElement("p", {
     className: "sf-table-grid-info"
   }, "".concat(selectedGridInfo.row, " x ").concat(selectedGridInfo.column)), tableGridElement);
-});
+};
 var _default = exports.default = TableSizeSelector;

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

@@ -41,10 +41,6 @@
   z-index: 1070;
 }
 
-.sf-insert-menu-popover .sf-insert-menu-container {
-  padding: 8px 0;
-}
-
 .menu-group-item.sf-menu-with-dropdown {
   border: 0 !important;
   height: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "3.0.35",
+  "version": "3.0.36",
   "description": "",
   "main": "dist/index.js",
   "scripts": {