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

package/dist/constants/event-types.js

@@ -18,6 +18,7 @@ const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
 const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
   ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
   ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
+  ON_COMMENT_PANEL_TOGGLE: 'on_comment_panel_toggle',
   ON_LINK_CLICK: 'on_link_click',
   ON_INSERT_IMAGE: 'on_insert_image',
   INSERT_ATTACHMENTS: 'insert_attachments',

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",
+    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",
+    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/containers/{article-info → side-panel}/style.css

@@ -1,4 +1,4 @@
-.sf-article-info-container-wrapper {
+.sf-panel-wrapper {
   display: flex;
   flex-direction: row;
   max-width: 620px;
@@ -7,16 +7,16 @@
   height: 100%;
 }
 
-.sf-article-info-container {
+.sf-panel-container {
   height: 100%;
 }
 
-.sf-article-info-container[style*="display: none"] {
+.sf-panel-container[style*="display: none"] {
   opacity: 0;
   pointer-events: none;
 }
 
-.sf-article-info-container[style*="display: block"] {
+.sf-panel-container[style*="display: block"] {
   opacity: 1;
   pointer-events: auto;
 }

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

@@ -11,7 +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 _articleInfo = _interopRequireDefault(require("../../../containers/side-panel/article-info"));
+var _comment = _interopRequireDefault(require("../../../containers/side-panel/comment"));
 require("./style.css");
 function EditorHelp(_ref) {
   let {
@@ -19,32 +20,57 @@ function EditorHelp(_ref) {
   } = _ref;
   const [isShowHelpInfo, setIsShowHelpInfo] = (0, _react.useState)(false);
   const [isShowArticleInfo, setIsShowArticleInfo] = (0, _react.useState)(false);
-  const updateArticleInfoState = (0, _react.useCallback)(() => {
-    setIsShowArticleInfo(prevState => !prevState);
+  const [isShowCommentPanel, setIsShowCommentPanel] = (0, _react.useState)(false);
+  const closeAllPanels = (0, _react.useCallback)(() => {
     setIsShowHelpInfo(false);
-  }, []);
-  const updateHelpInfoState = (0, _react.useCallback)(state => {
-    setIsShowHelpInfo(state);
     setIsShowArticleInfo(false);
+    setIsShowCommentPanel(false);
     const eventBus = _eventBus.default.getInstance();
     eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
   }, []);
+  const updateArticleInfoState = (0, _react.useCallback)(details => {
+    if (details === null) {
+      setIsShowArticleInfo(false);
+    } else {
+      closeAllPanels();
+      setIsShowArticleInfo(true);
+    }
+  }, [closeAllPanels]);
+  const updateHelpInfoState = (0, _react.useCallback)(state => {
+    if (isShowHelpInfo && state === false) {
+      setIsShowHelpInfo(false);
+    } else if (!isShowHelpInfo && state !== false) {
+      closeAllPanels();
+      setIsShowHelpInfo(true);
+    }
+  }, [isShowHelpInfo, closeAllPanels]);
+  const updateCommentPanelState = (0, _react.useCallback)(config => {
+    if (config === null) {
+      setIsShowCommentPanel(false);
+    } else {
+      closeAllPanels();
+      setIsShowCommentPanel(true);
+    }
+  }, [closeAllPanels]);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
     const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
+    const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, updateCommentPanelState);
     return () => {
       unsubscribeHelpInfo();
       unsubscribeArticleInfo();
+      unsubscribeCommentPanel();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updateArticleInfoState, updateHelpInfoState]);
+  }, [updateArticleInfoState, updateHelpInfoState, updateCommentPanelState]);
   const containerClass = (0, _classnames.default)('sf-markdown-help-wrapper', {
-    'active': isShowArticleInfo || isShowHelpInfo
+    'active': isShowArticleInfo || isShowHelpInfo || isShowCommentPanel
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     className: containerClass
   }, /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
     isVisible: isShowArticleInfo
-  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null));
+  }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null), /*#__PURE__*/_react.default.createElement(_comment.default, {
+    isVisible: isShowCommentPanel
+  }));
 }

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

@@ -1,5 +1,5 @@
 .menu-group-item.sf-insert-toolbar-btn {
-  width: 76px;
+  width: 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -50,7 +50,8 @@
   font-size: 14px;
 }
 
-.menu-group-item.sf-insert-toolbar-btn .md-arrow-down {
+.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/package.json

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