@seafile/seafile-editor 3.0.7-alpha.2 → 3.0.8-alpha.1

package/dist/containers/hotkeys-helper/style.css

@@ -1,5 +1,5 @@
 .sf-editor-helper {
-  z-index:101;
+  z-index: 101;
   position: relative;
   width: 300px;
   height: 100%;
@@ -12,7 +12,7 @@
 
 .sf-editor-helper__header {
   height: 50px;
-  background-color: rgb(250,250,249);
+  background-color: rgb(250, 250, 249);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -40,7 +40,7 @@
 }
 
 .sf-editor-helper__header .help-close:hover {
-  background-color: #E5E5E5;
+  background-color: #EFEFEF;
 }
 
 .sf-editor-helper__content {

package/dist/containers/loading/style.css

@@ -21,7 +21,7 @@
 
 .lds-ripple div {
   position: absolute;
-  border: 4px solid #eb8205;
+  border: 4px solid #ED7109;
   opacity: 1;
   border-radius: 50%;
   animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -39,6 +39,7 @@
     height: 0;
     opacity: 1;
   }
+
   100% {
     top: -1px;
     left: -1px;

package/dist/containers/outline/style.css

@@ -44,7 +44,7 @@
 }
 
 .sf-editor-outline-header_close:hover {
-  color: #555;
+  color: #666;
 }
 
 .sf-editor-outline-list-container {
@@ -66,13 +66,13 @@
 }
 
 .sf-editor-outline-item.active {
-  color: #eb8205;
+  color: #ED7109;
 }
 
 .sf-editor-outline-menu {
   line-height: 1;
   font-size: 14px;
-  color: #888;
+  color: #999;
   cursor: pointer;
   width: 28px;
   height: 28px;
@@ -84,7 +84,7 @@
   justify-content: center;
   position: absolute;
   top: 20px;
-  left: -15px;;
+  left: -15px;
   pointer-events: all;
 }
 
@@ -115,7 +115,7 @@
 }
 
 .sf-editor-outline-menu:not(.disabled):hover {
-  color: #333;
+  color: #666;
 }
 
 .sf-editor-outline .empty-container {

package/dist/containers/side-panel/article-info.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _eventTypes = require("../../constants/event-types");
+const ArticleInfo = _ref => {
+  let {
+    isVisible
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    isVisible: isVisible,
+    eventType: _eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE,
+    storageKey: "panelWidth",
+    containerClassName: "sf-article-info-container"
+  });
+};
+var _default = exports.default = ArticleInfo;

package/dist/containers/side-panel/comment.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = _interopRequireDefault(require("."));
+var _eventTypes = require("../../constants/event-types");
+const CommentPanel = _ref => {
+  let {
+    isVisible
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_.default, {
+    isVisible: isVisible,
+    eventType: _eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE,
+    storageKey: "panelWidth",
+    containerClassName: "sf-comment-panel-container"
+  });
+};
+var _default = exports.default = CommentPanel;

package/dist/containers/{article-info → side-panel}/index.js

@@ -14,12 +14,15 @@ var _eventTypes = require("../../constants/event-types");
 require("./style.css");
 const MIN_PANEL_WIDTH = 360;
 const MAX_PANEL_WIDTH = 620;
-const ArticleInfo = _ref => {
+const SidePanel = _ref => {
   let {
-    isVisible
+    isVisible,
+    eventType,
+    storageKey,
+    containerClassName
   } = _ref;
   const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
-  const [fileDetails, setFileDetails] = (0, _react.useState)({});
+  const [config, setConfig] = (0, _react.useState)({});
   const containerWrapperStyle = (0, _react.useMemo)(() => {
     const style = {
       width,
@@ -33,48 +36,46 @@ const ArticleInfo = _ref => {
     }
     return style;
   }, [width, isVisible]);
-  const resizeWidth = (0, _react.useCallback)(width => {
-    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
-      setWidth(width);
+  const resizeWidth = (0, _react.useCallback)(newWidth => {
+    if (newWidth >= MIN_PANEL_WIDTH && newWidth <= MAX_PANEL_WIDTH) {
+      setWidth(newWidth);
     }
   }, []);
-  const resizeWidthEnd = (0, _react.useCallback)(width => {
+  const resizeWidthEnd = (0, _react.useCallback)(newWidth => {
     const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
     window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
-      panelWidth: width
+      [storageKey]: newWidth
     })));
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
-  }, []);
+  }, [storageKey]);
   (0, _react.useEffect)(() => {
-    const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
-    const {
-      panelWidth
-    } = settings;
-    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
+    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
+    const storedWidth = settings[storageKey];
+    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(storedWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
     setWidth(width);
-  }, []);
-  const handleFileDetails = (0, _react.useCallback)(fileDetails => {
-    setFileDetails(fileDetails);
+  }, [storageKey]);
+  const handleConfig = (0, _react.useCallback)(configData => {
+    setConfig(configData);
   }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
-    const unsubscribeArticleInfoDetail = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, handleFileDetails);
+    const unsubscribePanel = eventBus.subscribe(eventType, handleConfig);
     return () => {
-      unsubscribeArticleInfoDetail();
+      unsubscribePanel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
-  }, [isVisible, fileDetails]);
+  }, [isVisible, config]);
   const {
-    component: fileDetailsComponent,
-    props: fileDetailsProps
-  } = fileDetails || {};
+    component: panelComponent,
+    props: panelProps
+  } = config || {};
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-article-info-container-wrapper sf-panel-wrapper",
+    className: "sf-panel-wrapper",
     style: containerWrapperStyle
   }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
     minWidth: MIN_PANEL_WIDTH,
@@ -82,12 +83,17 @@ const ArticleInfo = _ref => {
     resizeWidth: resizeWidth,
     resizeWidthEnd: resizeWidthEnd
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-article-info-container sf-panel-container",
+    className: "sf-panel-container ".concat(containerClassName),
     style: {
       width
     }
-  }, fileDetailsComponent && /*#__PURE__*/_react.default.createElement(fileDetailsComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, fileDetailsProps), {}, {
+  }, panelComponent && panelProps && /*#__PURE__*/_react.default.createElement(panelComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, panelProps), {}, {
     width
   }))));
 };
-var _default = exports.default = ArticleInfo;
+SidePanel.defaultProps = {
+  eventType: _eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE,
+  storageKey: 'panelWidth',
+  containerClassName: 'sf-article-info-container'
+};
+var _default = exports.default = SidePanel;

package/dist/editors/slate-editor/editor-help/index.js

@@ -11,8 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _eventTypes = require("../../../constants/event-types");
 var _hotkeysHelper = _interopRequireDefault(require("../../../containers/hotkeys-helper"));
-var _articleInfo = _interopRequireDefault(require("../../../containers/article-info"));
-var _commentPanel = _interopRequireDefault(require("../../../containers/comment-panel"));
+var _articleInfo = _interopRequireDefault(require("../../../containers/side-panel/article-info"));
+var _comment = _interopRequireDefault(require("../../../containers/side-panel/comment"));
 require("./style.css");
 function EditorHelp(_ref) {
   let {
@@ -70,7 +70,7 @@ function EditorHelp(_ref) {
     className: containerClass
   }, /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
     isVisible: isShowArticleInfo
-  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null), /*#__PURE__*/_react.default.createElement(_commentPanel.default, {
+  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null), /*#__PURE__*/_react.default.createElement(_comment.default, {
     isVisible: isShowCommentPanel
   }));
 }

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

@@ -1,6 +1,6 @@
 /* insert element dropdown item */
 .sf-dropdown-item-with-left-icon .sf-dropdown-item-content .sf-dropdown-item-content-icon {
-  color: #444;
+  color: #666;
 }
 
 .sf-link-dropdown-menu-item .sf-dropdown-item-content {
@@ -12,7 +12,8 @@
 }
 
 .sf-dropdown-menu .sf-dropdown-item-right-icon {
-  color: #999;
+  color: #666;
+  font-size: 12px !important;
 }
 
 .sf-dropdown-menu .sf-dropdown-item-with-left-icon {
@@ -43,7 +44,7 @@
 }
 
 .sf-dropdown-menu .sf-dropdown-item-right-icon {
-  color: #999;
+  color: #666;
 }
 
 .sf-dropdown-menu .sf-dropdown-item-content .sf-dropdown-item-content-icon {

package/dist/extension/commons/menu/menu-drop-down.js

@@ -65,7 +65,7 @@ const MenuDropDown = props => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-menu-with-dropdown-triangle"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowDropDown ? 'drop-down' : 'caret-up')
+    className: "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowDropDown ? 'arrow-down' : 'arrow-up')
   })), !!isShowDropDown && /*#__PURE__*/_react.default.createElement("div", {
     ref: menuDropdownRef,
     className: "sf-dropdown-list "

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

@@ -3,7 +3,7 @@
   padding: 6px 0 6px 8px;
   font-size: 0.75rem;
   border-right: 1px solid #e5e6e8;
-  color: #555;
+  color: #666;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,21 +16,22 @@
   line-height: 24px;
   margin-right: 8px;
   border: none !important;
-  color: #555;
+  color: #666;
   background-color: #fcfcfc;
+  padding-inline: 0;
 }
 
 .sf-menu-group .sf-menu-group-item:disabled {
-  color: #BDBDBD;
+  color: #C2C2C2;
 }
 
 .sf-menu-group .sf-menu-group-item:hover {
-  background-color: #F2F2F2;
+  background-color: #EFEFEF;
   border-radius: 2px;
 }
 
 .sf-menu-group .sf-menu-group-item[data-active='true'] {
-  color: #eb8205;
+  color: #ED7109;
 }
 
 .sf-menu-group .sf-menu-group-item .mdfont {
@@ -51,12 +52,12 @@
 }
 
 .sf-menu-group .sf-menu-group-item.sf-menu-with-dropdown.disabled {
-  color: #999;
+  color: #C2C2C2;
   width: 24px !important;
 }
 
 .sf-menu-with-dropdown:not(.disabled):hover {
-  background: #F2F2F2;
+  background: #EFEFEF;
   border-radius: 2px;
 }
 
@@ -78,7 +79,7 @@
 
 .sf-menu-with-dropdown .sf-menu-with-dropdown-triangle .sf-menu-with-dropdown-triangle-icon {
   font-size: 12px;
-  color: #999;
+  color: #666;
 }
 
 .sf-dropdown-list {

package/dist/extension/commons/more-menu/index.css

@@ -20,7 +20,7 @@
 
 .sf-editor-menu-popover .popover-inner .sf-slate-help-info-control .md-use-help {
   font-size: 13px;
-  color: #555;
+  color: #666;
 }
 
 .sf-editor-menu-popover .bs-popover-auto[x-placement^=bottom] {

package/dist/extension/commons/select/field-setting.js

@@ -91,7 +91,7 @@ class FieldSetting extends _react.default.Component {
     }, t('Font_style')), /*#__PURE__*/_react.default.createElement("span", {
       className: "icon-container"
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "mdfont md-caret-up op-icon"
+      className: "mdfont md-arrow-up op-icon"
     })), isShowMenu && /*#__PURE__*/_react.default.createElement(_menu.default, {
       position: this.state.position
     }, /*#__PURE__*/_react.default.createElement(_menu.default.Item, {

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

@@ -116,7 +116,7 @@ class Select extends _react.default.Component {
     }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {
       className: "operation"
     }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "mdfont md-drop-down arrow"
+      className: "mdfont md-arrow-down arrow"
     }))), isShowSelector && /*#__PURE__*/_react.default.createElement("span", {
       className: "select-popover"
     }, /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {

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

@@ -31,7 +31,7 @@
 
 .select-container .control-container .control-icon {
   font-size: 13px;
-  color: rgb(170, 170, 170);
+  color: #aaaaaa;
   cursor: default;
   margin-right: 5px;
 }

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

@@ -76,7 +76,7 @@ const HeaderMenu = _ref => {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "active"
   }, t(_constants.HEADER_TITLE_MAP[currentHeaderType !== null && currentHeaderType !== void 0 ? currentHeaderType : _constants.ELementTypes.PARAGRAPH])), !isDisabled && /*#__PURE__*/_react.default.createElement("span", {
-    className: "mdfont md-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down')
+    className: "mdfont md-".concat(isShowHeaderPopover ? 'arrow-up' : 'arrow-down')
   })), isShowHeaderPopover && /*#__PURE__*/_react.default.createElement("div", {
     ref: headerPopoverRef,
     className: "sf-header-popover"
@@ -92,7 +92,7 @@ const HeaderMenu = _ref => {
       }),
       onClick: () => onMouseDown(item)
     }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
-      className: "sf-font sf-check-mark"
+      className: "mdfont md-check-mark"
     }), /*#__PURE__*/_react.default.createElement("span", null, t(_constants.HEADER_TITLE_MAP[item]))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       target: id,
       placement: "right"

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

@@ -2,7 +2,7 @@
   display: flex;
   height: 100%;
   width: 140px;
-  padding: 6px 8px;
+  padding: 6px 8px 6px 0;
   position: relative;
   align-items: center;
   color: #212529;
@@ -31,6 +31,7 @@
   justify-content: space-between;
   align-items: center;
   padding-left: 5px;
+  padding-right: 5px;
   height: 24px;
   cursor: pointer;
 }
@@ -41,7 +42,7 @@
 }
 
 .sf-header-menu .header-toggle-disabled {
-  color: #BDBDBD;
+  color: #C2C2C2;
   cursor: unset;
 }
 
@@ -57,14 +58,14 @@
 }
 
 .sf-header-menu .sf-header-toggle .mdfont {
-  color: #999;
+  color: #666;
   width: 12px;
   height: 24px;
   margin-left: 8px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
   cursor: pointer;
 }
 
@@ -93,12 +94,11 @@
 }
 
 .sf-header-menu .sf-header-popover .sf-dropdown-menu-item:hover {
-  background-color: #F2F2F2;
+  background-color: #EFEFEF;
 }
 
-.sf-header-menu .sf-header-popover .sf-dropdown-menu-item .sf-check-mark {
+.sf-header-menu .sf-header-popover .sf-dropdown-menu-item .md-check-mark {
   position: absolute;
   left: 8px;
-  transform: scale(.8);
-  color: #798d99;
+  color: #666;
 }

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

@@ -45,7 +45,7 @@ const ImageMenu = _ref => {
     menuConfig: menuConfig,
     className: "pr-2"
   }, !readonly && /*#__PURE__*/_react.default.createElement("i", {
-    className: "mdfont md-right-slide sf-dropdown-item-right-icon"
+    className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
   })), !readonly && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
     target: menuConfig.id,
     trigger: "hover",

package/dist/extension/plugins/image/render-element/style.css

@@ -42,6 +42,7 @@
   user-select: none !important;
   z-index: 100;
   cursor: pointer;
+  color: #666;
 }
 
 .sf-image-wrapper .full-screen:hover {

package/dist/extension/plugins/link/render-elem/style.css

@@ -1,5 +1,5 @@
 .sf-virtual-link {
-  color: #eb8205;
+  color: #ED7109;
 }
 
 .sf-virtual-link:hover {
@@ -27,7 +27,6 @@
   font-size: 12px;
   color: #212529;
   padding: 0 5px;
-  border-right: 1p solid #f1f1f1;
   line-height: 20px;
 }
 
@@ -49,7 +48,7 @@
   margin-left: 8px;
   display: flex;
   align-items: center;
-  color: #555;
+  color: #666;
 }
 
 .sf-link-op-icon .mdfont {
@@ -58,5 +57,5 @@
 }
 
 .sf-link-op-icon:hover {
-  background: #f2f2f2;
+  background: #EFEFEF;
 }

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

@@ -114,7 +114,7 @@ const ContextMenu = _ref => {
     ref: horizontalAlignRef,
     className: "sf-context-menu-item sf-dropdown-menu-item side-extendable"
   }, /*#__PURE__*/_react.default.createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react.default.createElement("i", {
-    className: "mdfont md-right-slide"
+    className: "mdfont md-arrow-right"
   })), horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
     target: horizontalAlignRef,
     editor: editor,

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

@@ -78,9 +78,9 @@
   color: #adb5bd;
 }
 
-.side-extendable .md-right-slide {
+.side-extendable .md-arrow-right {
   color: #fff;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .sf-context-menu .sf-dropdown-menu-item:hover {

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

@@ -35,7 +35,7 @@ const TableMenu = _ref => {
     menuConfig: menuConfig,
     className: "pr-2"
   }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
-    className: "mdfont md-right-slide sf-dropdown-item-right-icon"
+    className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
   })), !disabled && isOpenTableSizeSelector && /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
     ref: tablePopoverRef,
     editor: editor,

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

@@ -53,7 +53,7 @@ const InsertToolbar = _ref => {
     'rich-icon-btn-hover': isRichEditor && !disabled,
     'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
   });
-  const caretIconClass = "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  const caretIconClass = "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowMenu ? 'arrow-up' : 'arrow-down');
   const {
     bottom
   } = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {

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

@@ -1,20 +1,24 @@
 .menu-group-item.sf-insert-toolbar-btn {
-  width: 76px;
+  width: 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: transparent;
-  color: #444
+  color: #666
+}
+
+.menu-group-item.sf-insert-toolbar-btn .text-truncate {
+  color: #212529;
 }
 
 .menu-group-item.sf-insert-toolbar-btn:not(.disable):hover {
-  background-color: #F2F2F2;
+  background-color: #EFEFEF;
 }
 
 .menu-group-item.sf-insert-toolbar-btn.disabled {
   /* 64: 76 - 12 */
   width: 64px !important;
-  color: #BDBDBD;
+  color: #c2c2c2;
 }
 
 .sf-insert-toolbar-btn .sf-menu-with-dropdown-icon {
@@ -45,3 +49,9 @@
 .menu-group-item.sf-insert-toolbar-btn .mdfont {
   font-size: 14px;
 }
+
+.menu-group-item.sf-insert-toolbar-btn .md-arrow-down,
+.menu-group-item.sf-insert-toolbar-btn .md-arrow-up {
+  font-size: 12px;
+  margin-right: 6px;
+}

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

@@ -11,11 +11,11 @@
   display: flex;
   justify-content: center;
   cursor: pointer;
-  color: #555;
+  color: #666;
 }
 
 .sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
-  background-color: #e5e5e5;
+  background-color: #EFEFEF;
 }
 
 .sf-slate-editor-toolbar .sf-slate-help-info-control {
@@ -27,12 +27,12 @@
   display: flex;
   justify-content: center;
   cursor: pointer;
-  color: #555;
+  color: #666;
 }
 
 .sf-slate-editor-toolbar .sf-slate-help-info-control>span:hover {
   cursor: pointer;
-  color: #333;
+  color: #999;
 }
 
 .sf-slate-editor-toolbar .sf-slate-article-info-control .mdfont {

package/dist/extension/toolbar/inline-toolbar/index.css

@@ -11,11 +11,11 @@
   display: flex;
   justify-content: center;
   cursor: pointer;
-  color: #555;
+  color: #666;
 }
 
 .sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
-  background-color: #e5e5e5;
+  background-color: #EFEFEF;
 }
 
 .sf-slate-editor-toolbar .sf-slate-help-info-control {
@@ -27,12 +27,12 @@
   display: flex;
   justify-content: center;
   cursor: pointer;
-  color: #555;
+  color: #666;
 }
 
 .sf-slate-editor-toolbar .sf-slate-help-info-control>span:hover {
   cursor: pointer;
-  color: #333;
+  color: #999;
 }
 
 .sf-slate-editor-toolbar .sf-slate-article-info-control .mdfont {

package/dist/extension/toolbar/user-help/style.css

@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
   margin-top: 3px;
-  background-color: rgb(248, 248, 248);
+  background-color: #f8f8f8;
 }
 
 .keyboard-shortcut-title {
@@ -38,8 +38,8 @@
 
 .keyboard-shortcut kbd {
   font: inherit;
-  background-color: hsla(0,0%,100%,0.25);
-  border-color: rgba(0,0,0,0.1);
+  background-color: hsla(0, 0%, 100%, 0.25);
+  border-color: rgba(0, 0, 0, 0.1);
   text-transform: uppercase;
   text-align: center;
   border-radius: 3px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "3.0.7-alpha.2",
+  "version": "3.0.8-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/public/media/seafile-editor-font/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "mdfont"; /* Project id 5080543 */
-  src: url('iconfont.eot?t=1764915317581'); /* IE9 */
-  src: url('iconfont.eot?t=1764915317581#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1764915317581') format('woff2'),
-       url('iconfont.woff?t=1764915317581') format('woff'),
-       url('iconfont.ttf?t=1764915317581') format('truetype'),
-       url('iconfont.svg?t=1764915317581#mdfont') format('svg');
+  src: url('iconfont.eot?t=1768372232343'); /* IE9 */
+  src: url('iconfont.eot?t=1768372232343#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1768372232343') format('woff2'),
+       url('iconfont.woff?t=1768372232343') format('woff'),
+       url('iconfont.ttf?t=1768372232343') format('truetype'),
+       url('iconfont.svg?t=1768372232343#mdfont') format('svg');
 }
 
 .mdfont {
@@ -16,6 +16,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.md-arrow-down:before {
+  content: "\e6ce";
+}
+
+.md-arrow-up:before {
+  content: "\e6cb";
+}
+
+.md-arrow-left:before {
+  content: "\e6cc";
+}
+
+.md-arrow-right:before {
+  content: "\e6cd";
+}
+
 .md-outline:before {
   content: "\e6bd";
 }

package/public/media/seafile-editor-font/iconfont.svg

@@ -14,6 +14,14 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="arrow-down" unicode="&#59086;" d="M513.92 128l385.952 385.92L832 581.824l-318.08-318.08-318.048 318.08L128 513.92 513.92 128z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-up" unicode="&#59083;" d="M513.92 640l385.952-385.92-67.84-67.904-318.08 318.08-318.08-318.08-67.84 67.904L513.92 640z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-left" unicode="&#59084;" d="M285.12 384l385.92-385.92 67.84 67.84L420.864 384l318.08 318.08-67.872 67.84L285.12 384z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-right" unicode="&#59085;" d="M738.88 384L352.96-1.92l-67.84 67.84L603.136 384l-318.08 318.08 67.872 67.84L738.88 384z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="outline" unicode="&#59069;" d="M835.808 184.384a124.192 124.192 0 0 0 0-248.384h-228.576a124.192 124.192 0 0 0 0 248.384h228.576z m-228.576-96a28.192 28.192 0 0 1 0-56.384h228.576a28.192 28.192 0 0 1 0 56.384h-228.576zM351.456 670.688H160v-230.528h278.528v-96H160v-213.216c0-21.568 17.472-39.104 39.04-39.104h239.488v-96H199.04A135.104 135.104 0 0 0 64 130.944V766.688h287.456v-96zM835.808 489.152a124.224 124.224 0 0 0 0-248.384h-228.576a124.16 124.16 0 0 0 0 248.384h228.576z m-228.576-96a28.192 28.192 0 0 1 0-56.384h228.576a28.192 28.192 0 0 1 0 56.384h-228.576zM835.776 832a124.224 124.224 0 1 0 0-248.384h-304.736a124.192 124.192 0 0 0 0 248.384h304.736z m-304.736-96a28.192 28.192 0 0 1 0-56.384h304.736a28.224 28.224 0 1 1 0 56.384h-304.736z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sm-close" unicode="&#59070;" d="M929.696 734.208L579.744 384.064 929.92 33.824l-67.904-67.872-350.176 350.176L161.92-34.048l-67.904 67.84L443.968 384 94.08 733.952l67.904 67.904 349.92-349.952L861.824 802.048l67.872-67.84z"  horiz-adv-x="1024" />

package/public/media/seafile-editor-font.css

@@ -1,14 +1,14 @@
 @font-face {
   font-family: "mdfont";
   /* Project id 5080543 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1764915317581');
+  src: url('./seafile-editor-font/iconfont.eot?t=1768372232343');
   /* IE9 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1764915317581#iefix') format('embedded-opentype'),
+  src: url('./seafile-editor-font/iconfont.eot?t=1768372232343#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('./seafile-editor-font/iconfont.woff2?t=1764915317581') format('woff2'),
-    url('./seafile-editor-font/iconfont.woff?t=1764915317581') format('woff'),
-    url('./seafile-editor-font/iconfont.ttf?t=1764915317581') format('truetype'),
-    url('./seafile-editor-font/iconfont.svg?t=1764915317581#mdfont') format('svg');
+    url('./seafile-editor-font/iconfont.woff2?t=1768372232343') format('woff2'),
+    url('./seafile-editor-font/iconfont.woff?t=1768372232343') format('woff'),
+    url('./seafile-editor-font/iconfont.ttf?t=1768372232343') format('truetype'),
+    url('./seafile-editor-font/iconfont.svg?t=1768372232343#mdfont') format('svg');
 }
 
 .mdfont {
@@ -19,6 +19,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.md-arrow-down:before {
+  content: "\e6ce";
+}
+
+.md-arrow-up:before {
+  content: "\e6cb";
+}
+
+.md-arrow-left:before {
+  content: "\e6cc";
+}
+
+.md-arrow-right:before {
+  content: "\e6cd";
+}
+
 .md-outline:before {
   content: "\e6bd";
 }

package/dist/containers/comment-panel/index.js

@@ -1,93 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _resizeWidth = _interopRequireDefault(require("../article-info/resize-width"));
-var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _eventTypes = require("../../constants/event-types");
-require("../article-info/style.css");
-const MIN_PANEL_WIDTH = 360;
-const MAX_PANEL_WIDTH = 620;
-const CommentPanel = _ref => {
-  let {
-    isVisible
-  } = _ref;
-  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
-  const [commentConfig, setCommentConfig] = (0, _react.useState)({});
-  const containerWrapperStyle = (0, _react.useMemo)(() => {
-    const style = {
-      width,
-      zIndex: 101,
-      display: isVisible ? 'block' : 'none'
-    };
-    if (!style.width || style.width < MIN_PANEL_WIDTH) {
-      style.width = MIN_PANEL_WIDTH;
-    } else if (style.width > MAX_PANEL_WIDTH) {
-      style.width = MAX_PANEL_WIDTH;
-    }
-    return style;
-  }, [width, isVisible]);
-  const resizeWidth = (0, _react.useCallback)(width => {
-    if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
-      setWidth(width);
-    }
-  }, []);
-  const resizeWidthEnd = (0, _react.useCallback)(width => {
-    const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
-    window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
-      commentPanelWidth: width
-    })));
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
-  }, []);
-  (0, _react.useEffect)(() => {
-    const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
-    const {
-      commentPanelWidth
-    } = settings;
-    const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(commentPanelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
-    setWidth(width);
-  }, []);
-  const handleCommentConfig = (0, _react.useCallback)(config => {
-    setCommentConfig(config);
-  }, []);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, handleCommentConfig);
-    return () => {
-      unsubscribeCommentPanel();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
-  }, [isVisible, commentConfig]);
-  const {
-    component: commentComponent,
-    props: commentProps
-  } = commentConfig || {};
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-comment-panel-wrapper sf-panel-wrapper",
-    style: containerWrapperStyle
-  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
-    minWidth: MIN_PANEL_WIDTH,
-    maxWidth: MAX_PANEL_WIDTH,
-    resizeWidth: resizeWidth,
-    resizeWidthEnd: resizeWidthEnd
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-comment-panel-container sf-panel-container",
-    style: {
-      width
-    }
-  }, commentComponent && commentProps && /*#__PURE__*/_react.default.createElement(commentComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commentProps), {}, {
-    width
-  }))));
-};
-var _default = exports.default = CommentPanel;