@seafile/sdoc-editor 1.0.66-beta1 → 1.0.66-beta2

package/dist/basic-sdk/comment/components/global-comment/index.css

@@ -1,11 +1,6 @@
 .sdoc-comment-drawer {
-  position: relative;
-  width: 360px;
-  min-width: 360px;
-  max-width: 620px;
-  border-left: 1px solid #e2e3e6;
-  /* Prevent the image menu from still appearing above the comment drawer when scrolled hidden. */
-  z-index: 102;
+  width: 100%;
+  height: 100%;
 }
 
 .sdoc-comment-drawer .comments-panel-wrapper {

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -20,96 +20,34 @@ var _globalCommentEditor = _interopRequireDefault(require("./global-comment-edit
 var _constants2 = require("../../../constants");
 var _core = require("../../../extension/core");
 require("./index.css");
+var _hooks = require("../../../../hooks");
 const GlobalComment = _ref => {
   let {
     deleteUnseenNotifications,
     editor
   } = _ref;
   const [activeComment, setActiveComment] = (0, _react.useState)(null);
-  const [isShowCommentList, setShowCommentList] = (0, _react.useState)(false);
   const [showEditor, setShowEditor] = (0, _react.useState)(false);
-  const [draggerStyle, setDraggerStyle] = (0, _react.useState)({});
   const [isScrollDisplayed, setIsScrollDisplayed] = (0, _react.useState)(false);
   const commentRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
-  const commentDrawerRef = (0, _react.useRef)(null);
-  const isResizingRef = (0, _react.useRef)(false);
-  const commentResizeHandler = (0, _react.useRef)(null);
   const {
     commentList,
     commentType,
     setCommentType
   } = (0, _useCommentList.default)();
-  const setArticleContainerStyle = (0, _react.useCallback)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_constants2.INTERNAL_EVENT.OUTLINE_STATE_CHANGED, {
-      scrollIntoArticle: true
-    });
-  }, []);
-  (0, _react.useEffect)(() => {
-    if (isShowCommentList) {
-      setArticleContainerStyle();
-    }
-  }, [isShowCommentList, setArticleContainerStyle]);
-  const toggle = (0, _react.useCallback)(() => {
-    if (isShowCommentList) {
-      setActiveComment(null);
-      setShowCommentList(false);
-      setShowEditor(false);
-      return;
-    }
-    setShowCommentList(true);
-  }, [isShowCommentList]);
-  const handleHideDragger = (0, _react.useCallback)(event => {
-    if (isResizingRef.current) return;
-    setDraggerStyle({
-      display: 'none'
-    });
-  }, []);
-  const handleResizeEnd = (0, _react.useCallback)(e => {
-    isResizingRef.current = false;
-    document.removeEventListener('mouseup', handleResizeEnd);
-    handleHideDragger();
-  }, [handleHideDragger]);
+  const {
+    closePlugin
+  } = (0, _hooks.usePlugins)();
   const detectScroll = (0, _react.useCallback)(() => {
     if (!contentRef.current) return;
     const contentContainer = contentRef.current;
     const isShowScroll = contentContainer.scrollHeight > contentContainer.clientHeight;
     setIsScrollDisplayed(isShowScroll);
   }, []);
-  const handleResizing = (0, _react.useCallback)(e => {
-    const commentDrawer = commentDrawerRef.current;
-    if (isResizingRef.current && commentDrawer) {
-      let width = commentDrawer.offsetWidth - e.movementX;
-      // Limit the width of the comment drawer
-      width = Math.min(width, 620);
-      width = Math.max(width, 360);
-      commentDrawer.style.width = `${width}px`;
-      const isShrink = e.movementX > 0;
-      setArticleContainerStyle({
-        width,
-        isShrink
-      });
-      detectScroll();
-    }
-  }, [detectScroll, setArticleContainerStyle]);
-  const handleResizeStart = (0, _react.useCallback)(e => {
-    isResizingRef.current = true;
-    document.addEventListener('mouseup', handleResizeEnd);
-    document.addEventListener('mousemove', handleResizing);
-  }, [handleResizeEnd, handleResizing]);
-  (0, _react.useEffect)(() => {
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribe = eventBus.subscribe(_constants2.INTERNAL_EVENT.COMMENT_LIST_CLICK, toggle);
-    return () => {
-      unsubscribe();
-      document.removeEventListener('mousemove', handleResizing);
-      eventBus.dispatch(_constants2.INTERNAL_EVENT.OUTLINE_STATE_CHANGED);
-    };
-  }, [handleResizing, toggle]);
   (0, _react.useEffect)(() => {
     detectScroll();
-  }, [commentList, detectScroll, isShowCommentList]);
+  }, [commentList, detectScroll]);
   const updateScrollPosition = (0, _react.useCallback)(() => {
     const resolvedDom = document.querySelector('.sdoc-resolved');
     contentRef.current.scrollTo({
@@ -174,44 +112,18 @@ const GlobalComment = _ref => {
   const hiddenCommentEditor = (0, _react.useCallback)(() => {
     setShowEditor(false);
   }, []);
-  const handleDisplayDragger = (0, _react.useCallback)(event => {
-    if (isShowCommentList) {
-      const {
-        pageY
-      } = event;
-      const {
-        top
-      } = commentResizeHandler.current.getBoundingClientRect();
-      // 15 is the half height of the dragger
-      const topSize = pageY - top - 15;
-      setDraggerStyle({
-        top: `${topSize}px`,
-        display: 'block'
-      });
-    }
-  }, [isShowCommentList]);
   const isClickCommentPanelBody = (0, _react.useCallback)(event => {
     if (contentRef.current && contentRef.current.contains(event.target)) return true;
     return false;
   }, []);
-  if (!isShowCommentList) return null;
+  console.log(commentList);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-comment-drawer",
-    ref: commentDrawerRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: commentResizeHandler,
-    className: "sdoc-comment-resize-handler",
-    onMouseDown: handleResizeStart,
-    onMouseLeave: handleHideDragger,
-    onMouseMove: handleDisplayDragger
+    className: "sdoc-comment-drawer"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: draggerStyle,
-    className: "sdoc-comment-move-dragger"
-  })), /*#__PURE__*/_react.default.createElement("div", {
     ref: commentRef,
     className: "comments-panel-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_globalCommentHeader.default, {
-    toggle: toggle,
+    toggle: closePlugin,
     toggleGlobalCommentEditor: toggleGlobalCommentEditor
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "comments-panel-body"
@@ -226,6 +138,7 @@ const GlobalComment = _ref => {
     id: "global-comment-list-container",
     className: "sdoc-comment-list-container"
   }, Array.isArray(commentList) && commentList.map(comment => {
+    console.log(comment);
     const elementId = comment.detail.element_id;
     const element = elementId !== _constants.DOC_COMMENT_ELEMENT_ID ? (0, _core.getNodeById)(editor.children, elementId) : null;
     const isActive = activeComment && activeComment.id === comment.id;

package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js

@@ -13,9 +13,10 @@ const useCommentList = () => {
   } = (0, _useCommentContext.useCommentContext)();
   const {
     comment_list
-  } = commentsInfo || [];
+  } = commentsInfo || {};
+  console.log(comment_list);
   const [commentType, setCommentType] = (0, _react.useState)(_constants.COMMENT_TYPES.ALL);
-  const [commentList, setCommentList] = (0, _react.useState)([comment_list]);
+  const [commentList, setCommentList] = (0, _react.useState)([]);
   (0, _react.useEffect)(() => {
     if (commentType === _constants.COMMENT_TYPES.ALL) {
       setCommentList(comment_list);

package/dist/basic-sdk/constants/index.js

@@ -33,7 +33,6 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   OUTLINE_STATE_CHANGED: 'outline_state_changed',
   RELOAD_IMAGE: 'reload_image',
   ARTICLE_CLICK: 'hidden_comment',
-  COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
   CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
   OPEN_SEARCH_REPLACE_MODAL: 'open_search_replace_modal',

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -22,7 +22,6 @@ var _editableArticle = _interopRequireDefault(require("./editable-article"));
 var _useColorContext = require("../hooks/use-color-context");
 var _readonlyArticle = _interopRequireDefault(require("../views/readonly-article"));
 var _utils = require("../../utils");
-var _hooks = require("../../hooks");
 var _basicSdk = require("../../basic-sdk");
 var _constants2 = require("../../constants");
 const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -159,7 +158,7 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     return /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
       editor: validEditor,
       readonly: isFreezed
-    }, /*#__PURE__*/_react.default.createElement(_hooks.CollaboratorsProvider, null, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
+    }, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
       editor: validEditor,
       readonly: isFreezed
     }), /*#__PURE__*/_react.default.createElement(_layout.EditorContent, {
@@ -172,13 +171,12 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       editor: validEditor,
       slateValue: slateValue,
       showComment: true
-    })))));
+    }))));
   }
   const isShowComment = typeof showComment === 'boolean' ? showComment : true;
-  const Provider = isShowComment ? _hooks.CollaboratorsProvider : _react.Fragment;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
     editor: validEditor
-  }, /*#__PURE__*/_react.default.createElement(Provider, null, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
     editor: validEditor
   }), /*#__PURE__*/_react.default.createElement(_layout.EditorContent, {
     docValue: slateValue,
@@ -190,7 +188,7 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     slateValue: slateValue,
     updateSlateValue: onValueChange,
     showComment: isShowComment
-  }))))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
+  })))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
     editor: validEditor
   }));
 });

package/dist/basic-sdk/layout/editor-content.js

@@ -10,9 +10,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _useScrollContext = require("../hooks/use-scroll-context");
 var _outline = _interopRequireDefault(require("../outline"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _comment = _interopRequireDefault(require("../comment"));
 var _provider = _interopRequireDefault(require("../comment/provider"));
 var _useParticipants = require("../comment/hooks/use-participants");
+var _rightPanel = _interopRequireDefault(require("../right-panel"));
 const EditorContent = _ref => {
   let {
     readonly,
@@ -34,30 +34,7 @@ const EditorContent = _ref => {
     'readonly': readonly,
     'no-outline': !showOutline
   });
-  if (!showComment) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sdoc-content-wrapper"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: scrollRef,
-      className: "sdoc-scroll-container",
-      onScroll: onWrapperScroll,
-      id: "sdoc-scroll-container"
-    }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
-      value: {
-        scrollRef
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, showOutline && /*#__PURE__*/_react.default.createElement(_outline.default, {
-      scrollLeft: scrollLeft,
-      doc: docValue
-    }), children))));
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-content-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_provider.default, {
-    editor: editor
-  }, /*#__PURE__*/_react.default.createElement(_useParticipants.ParticipantsProvider, null, /*#__PURE__*/_react.default.createElement("div", {
+  const dom = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: scrollRef,
     className: "sdoc-scroll-container",
     onScroll: onWrapperScroll,
@@ -71,10 +48,19 @@ const EditorContent = _ref => {
   }, showOutline && /*#__PURE__*/_react.default.createElement(_outline.default, {
     scrollLeft: scrollLeft,
     doc: docValue
-  }), children))), /*#__PURE__*/_react.default.createElement(_comment.default, {
-    editor: editor,
-    type: "global"
-  }))));
+  }), children))), /*#__PURE__*/_react.default.createElement(_rightPanel.default, {
+    editor: editor
+  }));
+  if (!showComment) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-content-wrapper"
+    }, dom);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-content-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_provider.default, {
+    editor: editor
+  }, /*#__PURE__*/_react.default.createElement(_useParticipants.ParticipantsProvider, null, dom)));
 };
 EditorContent.defaultProps = {
   readonly: false,

package/dist/basic-sdk/right-panel/index.css

@@ -0,0 +1,14 @@
+.sdoc-content-right-panel-wrapper {
+  display: flex;
+  flex-direction: row;
+  max-width: 620px;
+  min-width: 360px;
+  position: relative;
+}
+
+.sdoc-content-right-panel-wrapper .sdoc-content-right-panel {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-left: 1px solid #d8d8d8;
+}

package/dist/basic-sdk/right-panel/index.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _resizeWidth = _interopRequireDefault(require("./resize-width"));
+var _comment = _interopRequireDefault(require("../comment"));
+require("./index.css");
+const MIN_PANEL_WIDTH = 360;
+const MAX_PANEL_WIDTH = 620;
+const RightPanel = _ref => {
+  let {
+    editor
+  } = _ref;
+  const {
+    plugins,
+    displayPluginName
+  } = (0, _hooks.usePlugins)();
+  const panelWrapperRef = (0, _react.useRef)(null);
+  const {
+    collaborators
+  } = (0, _hooks.useCollaborators)();
+  const panelWrapperStyle = (0, _react.useMemo)(() => {
+    if (!displayPluginName) return null;
+    const panelWidth = JSON.parse(window.localStorage.getItem('sdoc-panel-width', '{}')) || {};
+    console.log(panelWidth);
+    const width = panelWidth[displayPluginName] || MIN_PANEL_WIDTH;
+    let style = {
+      width,
+      zIndex: 101
+    };
+    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;
+  }, [displayPluginName]);
+  const resizeWidth = (0, _react.useCallback)(width => {
+    if (panelWrapperRef.current) {
+      panelWrapperRef.current.style.width = `${width}px`;
+    }
+  }, [panelWrapperRef]);
+  const resizeWidthEnd = (0, _react.useCallback)(width => {
+    const panelWidth = JSON.parse(window.localStorage.getItem('sdoc-panel-width', '{}'));
+    window.localStorage.setItem('sdoc-panel-width', JSON.stringify({
+      ...panelWidth,
+      [displayPluginName]: width
+    }));
+  }, [displayPluginName]);
+  if (!displayPluginName) return null;
+  const plugin = plugins.find(p => p.name === displayPluginName);
+  if (!plugin) return null;
+  const Component = plugin.Component;
+  if (!Component) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-content-right-panel-wrapper",
+    ref: panelWrapperRef,
+    style: panelWrapperStyle
+  }, plugin.resizable_width && /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH,
+    resizeWidth: resizeWidth,
+    resizeWidthEnd: resizeWidthEnd
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-content-right-panel",
+    id: "sdoc-content-right-panel"
+  }, /*#__PURE__*/_react.default.createElement(Component, {
+    editor: editor,
+    type: "global",
+    collaborators: collaborators
+  })));
+};
+var _default = exports.default = RightPanel;

package/dist/basic-sdk/right-panel/resize-width/index.css

@@ -0,0 +1,38 @@
+.sdoc-resize-width-handler {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 6px;
+}
+
+.sdoc-resize-width-handler.resize-handler-placement-right {
+  left: 0;
+  right: auto;
+}
+
+.sdoc-resize-width-handler:hover {
+  cursor: col-resize;
+}
+
+.sdoc-resize-width-handler .sdoc-resize-width-handler-content {
+  background-color: initial;
+  height: 100%;
+  position: relative;
+  width: 2px;
+}
+
+.sdoc-resize-width-handler:hover .sdoc-resize-width-handler-content {
+  background-color: #ccc;
+}
+
+.sdoc-resize-width-handler .sdoc-resize-width-handler-bar {
+  background-color: #2d7ff9;
+  border-radius: 3px;
+  content: "";
+  left: 50%;
+  margin-left: -3px;
+  position: absolute;
+  width: 6px;
+}
+

package/dist/basic-sdk/right-panel/resize-width/index.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+const ResizeWidth = _ref => {
+  let {
+    minWidth,
+    maxWidth,
+    resizeWidth: resizeWidthAPI,
+    resizeWidthEnd
+  } = _ref;
+  const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
+  const [drag, setDrag] = (0, _react.useState)(null);
+  const handlerRef = (0, _react.useRef)(null);
+  const handlerBarRef = (0, _react.useRef)(null);
+  const setHandlerBarTop = handlerTop => {
+    if (!handlerBarRef.current || handlerTop < 0) return;
+    handlerBarRef.current.style.top = handlerTop + 'px';
+  };
+  const setHandlerBarPosition = event => {
+    if (!handlerRef.current) return;
+    const {
+      top
+    } = handlerRef.current.getBoundingClientRect();
+    const handlerTop = event.pageY - top - 26 / 2;
+    setHandlerBarTop(handlerTop);
+  };
+  const getWidthFromMouseEvent = event => {
+    return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
+  };
+  const calculateResizedWidth = event => {
+    const width = getWidthFromMouseEvent(event);
+    const resizedWidth = document.body.clientWidth - width;
+    if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
+    return resizedWidth;
+  };
+  const onResizeWidth = event => {
+    const resizedWidth = calculateResizedWidth(event);
+    if (resizedWidth < 0) return;
+    if (resizeWidthAPI) {
+      resizeWidthAPI(resizedWidth);
+    }
+  };
+  const onDrag = event => {
+    onResizeWidth(event);
+  };
+  const onDragStart = (0, _react.useCallback)(event => {
+    if (event && event.dataTransfer && event.dataTransfer.setData) {
+      event.dataTransfer.setData('text/plain', 'dummy');
+    }
+  }, []);
+  const onDragEnd = event => {
+    onResizeWidth(event);
+  };
+  const onMouseLeave = () => {
+    setIsShowHandlerBar(false);
+  };
+  const onMouseEnter = event => {
+    setIsShowHandlerBar(true);
+    setHandlerBarPosition(event);
+    if (handlerRef.current) {
+      handlerRef.current.addEventListener('mouseleave', onMouseLeave);
+    }
+  };
+  const onMouseOver = (0, _react.useCallback)(event => {
+    setHandlerBarPosition(event);
+  }, [setHandlerBarPosition]);
+  const onMouseDown = event => {
+    event.preventDefault && event.preventDefault();
+    const currDrag = onDragStart(event);
+    if (currDrag === null && event.button !== 0) return;
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('mousemove', onMouseMove);
+    if (handlerRef.current) {
+      handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
+    }
+    setDrag(currDrag);
+  };
+  const onMouseMove = event => {
+    event.preventDefault && event.preventDefault();
+    if (!drag === null) return;
+    onDrag(event);
+  };
+  const onMouseUp = event => {
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('mousemove', onMouseMove);
+    onDragEnd(event, drag);
+    setHandlerBarTop(-9999);
+    setDrag(null);
+    setIsShowHandlerBar(false);
+    if (resizeWidthEnd) {
+      const resizeWidth = calculateResizedWidth(event);
+      if (resizeWidth < 0) return;
+      resizeWidthEnd(resizeWidth);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    return () => {
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+
+    // eslint-disable-next-line
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-resize-width-handler resize-handler-placement-right",
+    ref: handlerRef,
+    onMouseDown: onMouseDown,
+    onMouseOver: onMouseOver,
+    onMouseEnter: onMouseEnter,
+    onDrag: onDrag,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    style: {
+      zIndex: 4
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-resize-width-handler-content"
+  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-resize-width-handler-bar",
+    ref: handlerBarRef,
+    style: {
+      height: 26
+    }
+  })));
+};
+var _default = exports.default = ResizeWidth;

package/dist/components/doc-operations/index.js

@@ -11,7 +11,6 @@ var _context = _interopRequireDefault(require("../../context"));
 var _revisionOperations = _interopRequireDefault(require("./revision-operations"));
 var _collaboratorsOperation = _interopRequireDefault(require("./collaborators-operation"));
 var _moreOperations = _interopRequireDefault(require("./more-operations"));
-var _commentsOperation = _interopRequireDefault(require("./comments-operation"));
 var _shareOperation = _interopRequireDefault(require("./share-operation"));
 var _pluginsOperations = _interopRequireDefault(require("./plugins-operations"));
 var _utils = require("../../utils");
@@ -40,6 +39,6 @@ const DocOperations = _ref => {
     handleViewChangesToggle: handleViewChangesToggle,
     handleRevisionMerged: handleRevisionMerged,
     handleRevisionPublished: handleRevisionPublished
-  }), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_pluginsOperations.default, null), !isPublished && /*#__PURE__*/_react.default.createElement(_commentsOperation.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_shareOperation.default, null), !isPublished && /*#__PURE__*/_react.default.createElement(_collaboratorsOperation.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_moreOperations.default, null));
+  }), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_pluginsOperations.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_shareOperation.default, null), !isPublished && /*#__PURE__*/_react.default.createElement(_collaboratorsOperation.default, null), !isSdocRevision && /*#__PURE__*/_react.default.createElement(_moreOperations.default, null));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(DocOperations);

package/dist/components/doc-operations/plugins-operations.js

@@ -14,15 +14,15 @@ const PluginsOperations = _ref => {
   let {} = _ref;
   const {
     plugins,
-    updateDisplayPluginKey
+    updateDisplayPlugin
   } = (0, _hooks.usePlugins)();
-  const onClick = (0, _react.useCallback)((event, pluginKey) => {
+  const onClick = (0, _react.useCallback)((event, pluginName) => {
     (0, _mouseEvent.eventStopPropagation)(event);
-    updateDisplayPluginKey(pluginKey);
-  }, []);
+    updateDisplayPlugin(pluginName);
+  }, [updateDisplayPlugin]);
   return plugins.map(plugin => {
     const {
-      key,
+      name,
       icon
     } = plugin;
     let iconDom = '';
@@ -35,8 +35,8 @@ const PluginsOperations = _ref => {
     }
     return /*#__PURE__*/_react.default.createElement("span", {
       className: "op-item sdoc-plugin-operation-btn-container",
-      onClick: e => onClick(e, key),
-      key: key
+      onClick: e => onClick(e, name),
+      key: name
     }, iconDom);
   });
 };

package/dist/hooks/use-plugins.js

@@ -1,38 +1,55 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePlugins = exports.PluginsProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _basicSdk = require("../basic-sdk");
 var _constants = require("../basic-sdk/constants");
+var _comment = _interopRequireDefault(require("../basic-sdk/comment"));
 const PluginsContext = /*#__PURE__*/_react.default.createContext(null);
 const PluginsProvider = _ref => {
   let {
-    plugins,
+    showComment,
+    plugins: propsPlugins,
     children
   } = _ref;
-  const [displayKey, setDisplayKey] = (0, _react.useState)('');
-  const updateDisplayPluginKey = (0, _react.useCallback)(key => {
-    console.log('updateDisplayPluginKey: ', key);
-    if (!key || displayKey === key) {
-      setDisplayKey('');
+  const [displayName, setDisplayName] = (0, _react.useState)('');
+  const closePlugin = (0, _react.useCallback)(() => {
+    setDisplayName('');
+  }, []);
+  const plugins = (0, _react.useMemo)(() => {
+    const allPlugins = propsPlugins;
+    if (showComment) {
+      allPlugins.push({
+        name: 'sdoc-comment',
+        icon: 'sdoc-comments',
+        position: '',
+        resizable_width: true,
+        display_type: 'inlay-right',
+        Component: _comment.default
+      });
+    }
+    return allPlugins;
+  }, [showComment, propsPlugins]);
+  const updateDisplayPlugin = (0, _react.useCallback)(name => {
+    if (!name || displayName === name) {
+      setDisplayName('');
       return;
     }
-    const plugin = plugins.find(plugin => plugin.key === key);
-    if (plugin.display_type === _constants.PLUGIN_DISPLAY_TYPE.INLAY_RIGHT) {
-      const eventBus = _basicSdk.EventBus.getInstance();
-      eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_LIST_CLICK);
-      setDisplayKey(key);
+    const plugin = plugins.find(plugin => plugin.name === name);
+    if ((plugin === null || plugin === void 0 ? void 0 : plugin.display_type) === _constants.PLUGIN_DISPLAY_TYPE.INLAY_RIGHT) {
+      setDisplayName(name);
     }
-  }, [displayKey, plugins]);
+  }, [displayName, plugins]);
   return /*#__PURE__*/_react.default.createElement(PluginsContext.Provider, {
     value: {
       plugins,
-      displayPluginKey: displayKey,
-      updateDisplayPluginKey
+      displayPluginName: displayName,
+      updateDisplayPlugin,
+      closePlugin
     }
   }, children);
 };

package/dist/pages/simple-editor.js

@@ -141,8 +141,9 @@ const SimpleEditor = _ref => {
       className: "error-tip"
     }, t(errorMessage)));
   }
-  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_hooks.PluginsProvider, {
-    plugins: plugins
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_hooks.CollaboratorsProvider, null, /*#__PURE__*/_react.default.createElement(_hooks.PluginsProvider, {
+    plugins: plugins,
+    showComment: showComment
   }, /*#__PURE__*/_react.default.createElement(_layout.default, null, /*#__PURE__*/_react.default.createElement(_layout.Header, null, /*#__PURE__*/_react.default.createElement(_docInfo.default, {
     isStarred: isStarred,
     isDraft: isDraft,
@@ -156,6 +157,6 @@ const SimpleEditor = _ref => {
     handleViewChangesToggle: handleViewChangesToggle,
     handleRevisionMerged: handleRevisionMerged,
     handleRevisionPublished: handleRevisionPublished
-  })), /*#__PURE__*/_react.default.createElement(_layout.Content, null, renderEditor()))));
+  })), /*#__PURE__*/_react.default.createElement(_layout.Content, null, renderEditor())))));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(SimpleEditor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.66beta1",
+  "version": "1.0.66beta2",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",