@seafile/sdoc-editor 1.0.67 → 1.0.68-beta1

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,17 @@ 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;
   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 +137,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,9 @@ const useCommentList = () => {
   } = (0, _useCommentContext.useCommentContext)();
   const {
     comment_list
-  } = commentsInfo || [];
+  } = commentsInfo || {};
   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

@@ -4,9 +4,23 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Z_INDEX = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
+exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.INTERNAL_EVENT = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = void 0;
+Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
+  enumerable: true,
+  get: function () {
+    return _plugin.PLUGIN_BTN_POSITION;
+  }
+});
+Object.defineProperty(exports, "PLUGIN_DISPLAY_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _plugin.PLUGIN_DISPLAY_TYPE;
+  }
+});
+exports.Z_INDEX = exports.WIKI_EDITOR = exports.REVISION_DIFF_VALUE = exports.REVISION_DIFF_KEY = exports.REBASE_TYPES = exports.REBASE_TYPE = exports.REBASE_ORIGIN = exports.REBASE_MARK_KEY = exports.REBASE_MARKS = void 0;
 var Z_INDEX = _interopRequireWildcard(require("./z-index"));
 exports.Z_INDEX = Z_INDEX;
+var _plugin = require("./plugin");
 const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
   SET_TABLE_SELECT_RANGE: 'set_table_select_range',
@@ -19,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/constants/plugin.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PLUGIN_DISPLAY_TYPE = exports.PLUGIN_BTN_POSITION = void 0;
+const PLUGIN_DISPLAY_TYPE = exports.PLUGIN_DISPLAY_TYPE = {
+  RIGHT_PANEL: 'right-panel',
+  DIALOG: 'dialog'
+};
+const PLUGIN_BTN_POSITION = exports.PLUGIN_BTN_POSITION = {
+  MORE_MENU: 'more-menu',
+  DEFAULT: 'default'
+};

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) => {
@@ -32,7 +31,8 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isReloading,
     showComment,
     isShowHeaderToolbar = true,
-    showOutline = true
+    showOutline = true,
+    plugins = []
   } = _ref;
   const validEditor = (0, _react.useMemo)(() => {
     if (propsEditor) return propsEditor;
@@ -158,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, {
@@ -171,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,
@@ -189,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,82 @@
+"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 _constants = require("../constants");
+require("./index.css");
+const MIN_PANEL_WIDTH = 360;
+const MAX_PANEL_WIDTH = 620;
+const RightPanel = _ref => {
+  let {
+    editor
+  } = _ref;
+  const {
+    plugins,
+    displayPluginName,
+    closePlugin
+  } = (0, _hooks.usePlugins)();
+  const {
+    collaborators
+  } = (0, _hooks.useCollaborators)();
+  const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
+  const panelWrapperStyle = (0, _react.useMemo)(() => {
+    if (!displayPluginName) return null;
+    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;
+  }, [width, displayPluginName]);
+  const resizeWidth = (0, _react.useCallback)(width => {
+    setWidth(width);
+  }, []);
+  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]);
+  (0, _react.useEffect)(() => {
+    const panelWidth = JSON.parse(window.localStorage.getItem('sdoc-panel-width', '{}')) || {};
+    const width = Math.max(parseInt(panelWidth[displayPluginName] || MIN_PANEL_WIDTH), MAX_PANEL_WIDTH);
+    setWidth(width);
+  }, [displayPluginName]);
+  if (!displayPluginName) return null;
+  const plugin = plugins.find(p => p.name === displayPluginName);
+  if (!plugin) return null;
+  if (plugin.display_type && plugin.display_type !== _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL) return null;
+  const Component = plugin.component;
+  if (!Component) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-content-right-panel-wrapper",
+    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,
+    onClose: closePlugin,
+    width: width
+  })));
+};
+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,8 +11,8 @@ 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");
 require("./style.css");
 const DocOperations = _ref => {
@@ -39,6 +39,6 @@ const DocOperations = _ref => {
     handleViewChangesToggle: handleViewChangesToggle,
     handleRevisionMerged: handleRevisionMerged,
     handleRevisionPublished: handleRevisionPublished
-  }), !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

@@ -0,0 +1,43 @@
+"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"));
+var _hooks = require("../../hooks");
+var _mouseEvent = require("../../basic-sdk/utils/mouse-event");
+var _constants = require("../../basic-sdk/constants");
+const PluginsOperations = () => {
+  const {
+    plugins,
+    updateDisplayPlugin
+  } = (0, _hooks.usePlugins)();
+  const onClick = (0, _react.useCallback)((event, pluginName) => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    updateDisplayPlugin(pluginName);
+  }, [updateDisplayPlugin]);
+  return plugins.filter(plugin => !plugin.position || plugin.position === _constants.PLUGIN_BTN_POSITION.DEFAULT).map(plugin => {
+    const {
+      name,
+      icon
+    } = plugin;
+    let iconDom = '';
+    if (typeof icon !== 'string') {
+      iconDom = icon;
+    } else {
+      iconDom = /*#__PURE__*/_react.default.createElement("i", {
+        className: (0, _classnames.default)('sdocfont', icon)
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "op-item sdoc-plugin-operation-btn-container",
+      onClick: e => onClick(e, name),
+      key: name
+    }, iconDom);
+  });
+};
+var _default = exports.default = PluginsOperations;

package/dist/hooks/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "CollaboratorsProvider", {
     return _useCollaborators.CollaboratorsProvider;
   }
 });
+Object.defineProperty(exports, "PluginsProvider", {
+  enumerable: true,
+  get: function () {
+    return _usePlugins.PluginsProvider;
+  }
+});
 Object.defineProperty(exports, "useCollaborators", {
   enumerable: true,
   get: function () {
@@ -21,5 +27,12 @@ Object.defineProperty(exports, "useDocument", {
     return _useDocument.useDocument;
   }
 });
+Object.defineProperty(exports, "usePlugins", {
+  enumerable: true,
+  get: function () {
+    return _usePlugins.usePlugins;
+  }
+});
 var _useCollaborators = require("./use-collaborators");
-var _useDocument = require("./use-document");
+var _useDocument = require("./use-document");
+var _usePlugins = require("./use-plugins");

package/dist/hooks/use-collaborators.js

@@ -10,12 +10,17 @@ var _react = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../context"));
 var _model = require("../model");
 const CollaboratorsContext = /*#__PURE__*/_react.default.createContext(null);
-const CollaboratorsProvider = props => {
+const CollaboratorsProvider = _ref => {
+  let {
+    collaborators: propsCollaborators,
+    children
+  } = _ref;
   const isSdocRevision = _context.default.getSetting('isSdocRevision');
   const isPublished = _context.default.getSetting('isPublished');
-  const [collaborators, setCollaborators] = (0, _react.useState)([]);
+  const [collaborators, setCollaborators] = (0, _react.useState)(propsCollaborators || []);
   (0, _react.useEffect)(() => {
     if (isSdocRevision && isPublished) return;
+    if (propsCollaborators) return;
     _context.default.listRelatedUsers().then(res => {
       const collaborators = [];
       res.data.related_users.forEach(user => {
@@ -34,7 +39,7 @@ const CollaboratorsProvider = props => {
     value: {
       collaborators
     }
-  }, props.children);
+  }, children);
 };
 exports.CollaboratorsProvider = CollaboratorsProvider;
 const useCollaborators = () => {

package/dist/hooks/use-plugins.js

@@ -0,0 +1,63 @@
+"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 _constants = require("../basic-sdk/constants");
+var _comment = _interopRequireDefault(require("../basic-sdk/comment"));
+const PluginsContext = /*#__PURE__*/_react.default.createContext(null);
+const PluginsProvider = _ref => {
+  let {
+    showComment,
+    plugins: propsPlugins,
+    children
+  } = _ref;
+  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',
+        resizable_width: true,
+        display_type: _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL,
+        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.name === name);
+    if ((plugin === null || plugin === void 0 ? void 0 : plugin.display_type) === _constants.PLUGIN_DISPLAY_TYPE.RIGHT_PANEL) {
+      setDisplayName(name);
+    }
+  }, [displayName, plugins]);
+  return /*#__PURE__*/_react.default.createElement(PluginsContext.Provider, {
+    value: {
+      plugins,
+      displayPluginName: displayName,
+      updateDisplayPlugin,
+      closePlugin
+    }
+  }, children);
+};
+exports.PluginsProvider = PluginsProvider;
+const usePlugins = () => {
+  const context = (0, _react.useContext)(PluginsContext);
+  if (!context) {
+    throw new Error('\'PluginsContext\' is null');
+  }
+  return context;
+};
+exports.usePlugins = usePlugins;

package/dist/pages/simple-editor.js

@@ -26,7 +26,9 @@ const SimpleEditor = _ref => {
     showComment,
     showDocOperations = true,
     showFileTags = true,
-    t
+    t,
+    plugins = [],
+    collaborators
   } = _ref;
   _context.default.initApi();
   const editorRef = (0, _react.useRef)(null);
@@ -140,7 +142,12 @@ const SimpleEditor = _ref => {
       className: "error-tip"
     }, t(errorMessage)));
   }
-  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_layout.default, null, /*#__PURE__*/_react.default.createElement(_layout.Header, null, /*#__PURE__*/_react.default.createElement(_docInfo.default, {
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_hooks.CollaboratorsProvider, {
+    collaborators: collaborators
+  }, /*#__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,
     showFileTags: showFileTags,
@@ -153,6 +160,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.67",
+  "version": "1.0.68beta1",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

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

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="sdoc-info" unicode="&#58999;" d="M512 896c281.6 0 512-230.4 512-512s-230.4-512-512-512S0 102.4 0 384 230.4 896 512 896z m0-96C281.6 800 96 614.4 96 384s185.6-416 416-416 416 185.6 416 416c0 108.8-44.8 217.6-121.6 294.4S620.8 800 512 800z m32-352c19.2 0 32-12.8 32-32v-256c0-19.2-12.8-32-32-32h-64c-19.2 0-32 12.8-32 32V416c0 19.2 12.8 32 32 32h64z m-19.2 192c9.6 0 16-3.2 22.4-9.6 3.2-3.2 6.4-6.4 9.6-6.4 25.6-25.6 25.6-64 0-89.6-3.2-3.2-6.4-6.4-9.6-6.4-6.4-3.2-16-6.4-22.4-9.6h-25.6c-9.6 0-16 3.2-22.4 9.6-3.2 3.2-6.4 6.4-9.6 6.4-25.6 25.6-25.6 64 0 89.6 3.2 3.2 6.4 6.4 9.6 6.4 6.4 3.2 16 6.4 22.4 9.6h25.6z"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="sdoc-inline-code" unicode="&#58998;" d="M1024 384l-272-288-67.2 70.4 204.8 217.6-204.8 217.6L752 672l272-288zM0 384l272-288 67.2 70.4L134.4 384l204.8 217.6L272 672 0 384z m451.2-512l-99.2 3.2L579.2 896h99.2l-227.2-1024z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="sdoc-sort" unicode="&#58996;" d="M294.4 790.4l201.6-204.8c19.2-19.2 19.2-51.2 0-73.6-19.2-19.2-51.2-19.2-70.4 0L320 620.8v-604.8c0-25.6-22.4-48-48-48S224-9.6 224 16V620.8L118.4 512c-19.2-19.2-48-19.2-67.2-3.2l-3.2 3.2c-19.2 19.2-19.2 51.2 0 73.6l201.6 204.8c12.8 12.8 32 12.8 44.8 0zM752 800c25.6 0 48-22.4 48-48v-604.8l105.6 108.8c19.2 19.2 51.2 19.2 70.4 0 19.2-19.2 19.2-51.2 0-73.6l-201.6-204.8c-12.8-12.8-32-12.8-44.8 0l-201.6 204.8c-19.2 19.2-19.2 51.2 0 73.6l3.2 3.2c19.2 16 48 16 67.2-3.2l105.6-108.8V752c0 25.6 22.4 48 48 48z"  horiz-adv-x="1024" />

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

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "sdocfont"; /* Project id 4097705 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1724747529924'); /* IE9 */
-  src: url('./sdoc-editor-font/iconfont.eot?t=1724747529924#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('./sdoc-editor-font/iconfont.woff2?t=1724747529924') format('woff2'),
-       url('./sdoc-editor-font/iconfont.woff?t=1724747529924') format('woff'),
-       url('./sdoc-editor-font/iconfont.ttf?t=1724747529924') format('truetype'),
-       url('./sdoc-editor-font/iconfont.svg?t=1724747529924#sdocfont') format('svg');
+  src: url('./sdoc-editor-font/iconfont.eot?t=1725002301707'); /* IE9 */
+  src: url('./sdoc-editor-font/iconfont.eot?t=1725002301707#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./sdoc-editor-font/iconfont.woff2?t=1725002301707') format('woff2'),
+       url('./sdoc-editor-font/iconfont.woff?t=1725002301707') format('woff'),
+       url('./sdoc-editor-font/iconfont.ttf?t=1725002301707') format('truetype'),
+       url('./sdoc-editor-font/iconfont.svg?t=1725002301707#sdocfont') format('svg');
 }
 
 .sdocfont {
@@ -16,6 +16,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sdoc-info:before {
+  content: "\e677";
+}
+
 .sdoc-inline-code:before {
   content: "\e676";
 }

package/dist/components/doc-operations/comments-operation/index.css

@@ -1,14 +0,0 @@
-.sdoc-notification-container .sdoc-notification-count {
-  position: absolute;
-  color: #fff;
-  font-size: 12px;
-  top: -7px;
-  right: -10px;
-  padding: 2px;
-  background: #fc6440;
-  border-radius: 50%;
-  min-width: 20px;
-  min-height: 20px;
-  transform: scale(.7);
-  text-align: center;
-}

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

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CommentsOperation;
-var _react = _interopRequireWildcard(require("react"));
-var _basicSdk = require("../../../basic-sdk");
-var _mouseEvent = require("../../../basic-sdk/utils/mouse-event");
-var _constants = require("../../../basic-sdk/constants");
-require("./index.css");
-function CommentsOperation() {
-  const [unseenNotificationsCount, setUnseenNotificationsCount] = (0, _react.useState)(0);
-  const onCommentsToggle = (0, _react.useCallback)(event => {
-    (0, _mouseEvent.eventStopPropagation)(event);
-    const eventBus = _basicSdk.EventBus.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_LIST_CLICK);
-  }, []);
-  (0, _react.useEffect)(() => {
-    const eventBus = _basicSdk.EventBus.getInstance();
-    const unsubscribeUnseenNotificationsCount = eventBus.subscribe(_constants.INTERNAL_EVENT.UNSEEN_NOTIFICATIONS_COUNT, count => setUnseenNotificationsCount(count));
-    return () => {
-      unsubscribeUnseenNotificationsCount();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "op-item sdoc-notification-container",
-    onClick: onCommentsToggle
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-comments"
-  }), unseenNotificationsCount > 0 && /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdoc-notification-count"
-  }, unseenNotificationsCount));
-}