@seafile/comment-editor 0.0.1-alpha.0 → 0.0.1-alpha.1

package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js

@@ -9,10 +9,9 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
 var _constants = require("../../../../comment/constants");
-var _useParticipants = require("../../../../comment/hooks/use-participants");
 var _utils = require("../../../../comment/utils");
 var _constants2 = require("../../../../constants");
-var _useCollaborators = require("../../../../hooks/use-collaborators");
+var _useComment = require("../../../../hooks/use-comment");
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _mouseEvent = require("../../../../utils/mouse-event");
 var _commons = require("../../../commons");
@@ -27,12 +26,10 @@ const ParticipantPopover = _ref => {
   } = _ref;
   const collaboratorsPopoverRef = (0, _react.useRef)(null);
   const {
-    collaborators
-  } = (0, _useCollaborators.useCollaborators)();
-  const {
+    collaborators,
     addParticipants,
     participants
-  } = (0, _useParticipants.useParticipantsContext)();
+  } = (0, _useComment.useComment)();
   const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
   const [activeCollaboratorIndex, setActiveCollaboratorIndex] = (0, _react.useState)(-1);
   const [validCollaborators, setValidCollaborators] = (0, _react.useState)([]);

package/dist/basic-sdk/extension/render/render-comment-editor-element.js

@@ -21,7 +21,7 @@ const RenderCommentEditorCustomRenderElement = props => {
         const parentNode = (0, _core.getParentNode)(editor.children, element.id);
         const _props = {
           ...props,
-          className: 'sdoc-comment-editor-paragraph'
+          className: 'comment-editor-paragraph'
         };
         if (parentNode && parentNode.type === _constants.LIST_ITEM) {
           const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js

@@ -27,9 +27,9 @@ const CommentEditorToolbar = _ref => {
   (0, _useSelectionUpdate.default)();
   const eventBus = _eventBus.default.getInstance();
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-comment-editor-toolbar"
+    className: "comment-editor-toolbar"
   }, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
-    className: "menu-group sdoc-comment-editor-menu-group"
+    className: "menu-group comment-editor-menu-group"
   }, /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
     editor: editor,
     readonly: readonly
@@ -53,7 +53,7 @@ const CommentEditorToolbar = _ref => {
     readonly: readonly,
     eventBus: eventBus
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-comment-editor-toolbar-right"
+    className: "comment-editor-toolbar-right"
   }, /*#__PURE__*/_react.default.createElement(_postComment.default, {
     editor: editor,
     onSubmit: onSubmit,

package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/index.js

@@ -25,12 +25,12 @@ const PostCommentBtn = _ref => {
   }, [onCancel]);
   return /*#__PURE__*/_react.default.createElement("div", {
     role: "button",
-    id: "sdoc-comment-editor-comment-btn"
+    id: "comment-editor-comment-btn"
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-save sdoc-comment-btn",
     onClick: onSubmit
   }), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    target: "sdoc-comment-editor-comment-btn"
+    target: "comment-editor-comment-btn"
   }, submitBtnText));
 };
 var _default = exports.default = PostCommentBtn;

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

@@ -0,0 +1,214 @@
+"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.useComment = exports.CommentProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _constants = require("../comment/constants");
+var _useCommentMount = require("../comment/hooks/comment-hooks/use-comment-mount");
+var _notificationHooks = require("../comment/hooks/notification-hooks");
+var _commentReducer = require("../comment/reducer/comment-reducer");
+var _notificationReducer = require("../comment/reducer/notification-reducer");
+var _utils = require("../comment/utils");
+var _toast = _interopRequireDefault(require("../components/toast"));
+var _constants2 = require("../constants");
+var _model = require("../model");
+var _commonUtils = require("../utils/common-utils");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+const CommentContext = /*#__PURE__*/_react.default.createContext(null);
+const CommentProvider = _ref => {
+  let {
+    editor,
+    children,
+    onCloseCommentPanel,
+    api,
+    pluginName,
+    className
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [collaborators, setCollaborators] = (0, _react.useState)([]);
+  const [participants, setParticipants] = (0, _react.useState)([]);
+  const [commentType, setCommentType] = (0, _react.useState)(_constants.COMMENT_TYPES.ALL);
+  const [commentList, setCommentList] = (0, _react.useState)([]);
+  const [commentsInfo, dispatch] = (0, _react.useReducer)(_commentReducer.commentReducer, _commentReducer.initCommentsInfo);
+  (0, _useCommentMount.useCommentsMount)(dispatch, api);
+  const [notificationsInfo, notificationsDispatch] = (0, _react.useReducer)(_notificationReducer.notificationReducer, _notificationReducer.initNotificationsInfo);
+  (0, _notificationHooks.useNotificationsMount)(dispatch, api, collaborators);
+  (0, _react.useEffect)(() => {
+    if (Object.keys(commentsInfo.element_comments_map).length) {
+      editor.element_comments_map = commentsInfo.element_comments_map;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [commentsInfo.element_comments_map]);
+  (0, _react.useEffect)(() => {
+    editor.notifications_map = {
+      ...notificationsInfo.notifications_map
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notificationsInfo]);
+  (0, _react.useEffect)(() => {
+    const {
+      comment_list
+    } = commentsInfo;
+    if (commentType === _constants.COMMENT_TYPES.ALL) {
+      const commentList = comment_list.map(item => {
+        item.replies = item.replies.filter(reply => !['True', 'False'].includes(reply.reply));
+        return item;
+      });
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.RESOLVED) {
+      const commentList = comment_list.filter(item => item.resolved);
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.UNRESOLVED) {
+      const commentList = comment_list.filter(item => !item.resolved);
+      setCommentList(commentList);
+    } else if (commentType === _constants.COMMENT_TYPES.DOC) {
+      const commentList = comment_list.filter(comment => comment.detail.element_id === _constants.DOC_COMMENT_ELEMENT_ID);
+      setCommentList(commentList);
+    }
+  }, [commentType, commentsInfo]);
+
+  // Participants
+  const updateLocalParticipants = (0, _react.useCallback)(function () {
+    let added = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    if (!Array.isArray(added) || added.length === 0) return;
+    let newParticipants = participants.slice(0);
+    added.forEach(participant => {
+      const newParticipant = new _model.User(participant);
+      if (!newParticipants.find(item => item.username === newParticipant.username)) {
+        newParticipants.push(newParticipant);
+      }
+    });
+    setParticipants(newParticipants);
+  }, [participants]);
+  const deleteLocalParticipant = (0, _react.useCallback)(email => {
+    if (!participants.find(participant => participant.username === email)) return;
+    let newParticipants = participants.slice(0);
+    newParticipants = newParticipants.filter(participant => participant.username !== email);
+    setParticipants(newParticipants);
+  }, [participants]);
+  const addParticipants = (0, _react.useCallback)(otherEmail => {
+    if (participants.find(participant => participant.username === otherEmail)) return;
+    api.addParticipants([otherEmail]).then(res => {
+      const {
+        success
+      } = res.data;
+      updateLocalParticipants(success);
+    }).catch(error => {
+      const errorMessage = (0, _commonUtils.getErrorMsg)(error);
+      _toast.default.danger(t(errorMessage));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateLocalParticipants, participants]);
+  const deleteParticipant = (0, _react.useCallback)(email => {
+    if (!participants.find(participant => participant.username === email)) return;
+    api.deleteParticipants(email).then(res => {
+      let newParticipants = participants.slice(0);
+      newParticipants = newParticipants.filter(participant => participant.username !== email);
+      setParticipants(newParticipants);
+    }).catch(error => {
+      const errorMessage = (0, _commonUtils.getErrorMsg)(error);
+      _toast.default.danger(t(errorMessage));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [participants]);
+
+  // Notifications
+  const deleteUnseenNotifications = (0, _react.useCallback)(comment => {
+    let unseenCommentIds = [];
+    let unseenNotificationKeys = [];
+    const commentNotificationKey = (0, _utils.generatorNotificationKey)(comment.id);
+    const commentNotification = notificationsInfo.notifications_map[commentNotificationKey];
+    if (commentNotification) {
+      unseenNotificationKeys.push(commentNotification.key);
+      unseenCommentIds.push(commentNotification.id);
+    }
+    Array.isArray(comment.replies) && comment.replies.forEach(reply => {
+      const replyNotificationKey = (0, _utils.generatorNotificationKey)(reply.comment_id, reply.id);
+      const replyNotification = notificationsInfo.notifications_map[replyNotificationKey];
+      if (replyNotification) {
+        unseenNotificationKeys.push(replyNotification.key);
+        unseenCommentIds.push(replyNotification.id);
+      }
+    });
+    api.deleteUnseenNotifications(unseenCommentIds).then(res => {
+      notificationsDispatch({
+        type: _constants.DOC_NOTIFICATION_REDUCER_TYPE.DEL,
+        payload: unseenNotificationKeys
+      });
+    }).catch(error => {
+      //
+    });
+  }, [api, notificationsInfo.notifications_map]);
+
+  // Mount
+  (0, _react.useEffect)(() => {
+    // get participants
+    api.listParticipants().then(res => {
+      const participants = res.data.participant_list;
+      updateLocalParticipants(participants);
+    }).catch(error => {
+      console.log(error);
+    });
+
+    // get collaborators
+    api.listRelatedUsers().then(res => {
+      const collaborators = [];
+      res.data.related_users.forEach(user => {
+        const collaborator = new _model.User(user);
+        collaborators.push(collaborator);
+      });
+      setCollaborators(collaborators);
+    }).catch(error => {
+      console.log(error);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Listening
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeParticipantAdded = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_ADDED, updateLocalParticipants);
+    const unsubscribeParticipantRemoved = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_REMOVED, deleteLocalParticipant);
+    return () => {
+      unsubscribeParticipantAdded();
+      unsubscribeParticipantRemoved();
+    };
+  }, [updateLocalParticipants, deleteLocalParticipant]);
+  return /*#__PURE__*/_react.default.createElement(CommentContext.Provider, {
+    value: {
+      pluginName,
+      className,
+      api,
+      commentsInfo,
+      commentType,
+      commentList,
+      dispatch,
+      setCommentType,
+      onCloseCommentPanel,
+      collaborators,
+      notificationsInfo,
+      deleteUnseenNotifications,
+      addParticipants,
+      deleteParticipant,
+      participants
+    }
+  }, children);
+};
+exports.CommentProvider = CommentProvider;
+const useComment = () => {
+  const context = (0, _react.useContext)(CommentContext);
+  if (!context) {
+    throw new Error('\'CommentContext\' is null');
+  }
+  return {
+    ...context
+  };
+};
+exports.useComment = useComment;

package/dist/basic-sdk/index.js

@@ -4,10 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CollaboratorsProvider", {
+Object.defineProperty(exports, "CommentLayout", {
   enumerable: true,
   get: function () {
-    return _useCollaborators.CollaboratorsProvider;
+    return _commentLayout.default;
+  }
+});
+Object.defineProperty(exports, "CommentProvider", {
+  enumerable: true,
+  get: function () {
+    return _useComment.CommentProvider;
   }
 });
 Object.defineProperty(exports, "DropdownMenuItem", {
@@ -58,36 +64,12 @@ Object.defineProperty(exports, "MenuShortcutPrompt", {
     return _menuShortcutIndicator.default;
   }
 });
-Object.defineProperty(exports, "Provider", {
-  enumerable: true,
-  get: function () {
-    return _provider.default;
-  }
-});
-Object.defineProperty(exports, "RightPanel", {
-  enumerable: true,
-  get: function () {
-    return _rightPanel.default;
-  }
-});
-Object.defineProperty(exports, "SDocEditor", {
-  enumerable: true,
-  get: function () {
-    return _sdocEditor.default;
-  }
-});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
     return _tooltip.default;
   }
 });
-Object.defineProperty(exports, "WIKI_EDITOR_EDIT_AREA_WIDTH", {
-  enumerable: true,
-  get: function () {
-    return _constants.WIKI_EDITOR_EDIT_AREA_WIDTH;
-  }
-});
 Object.defineProperty(exports, "context", {
   enumerable: true,
   get: function () {
@@ -154,10 +136,10 @@ Object.defineProperty(exports, "toaster", {
     return _toast.default;
   }
 });
-Object.defineProperty(exports, "useCollaborators", {
+Object.defineProperty(exports, "useComment", {
   enumerable: true,
   get: function () {
-    return _useCollaborators.useCollaborators;
+    return _useComment.useComment;
   }
 });
 Object.defineProperty(exports, "withNodeId", {
@@ -172,20 +154,18 @@ Object.defineProperty(exports, "withSocketIO", {
     return _socket.withSocketIO;
   }
 });
-var _provider = _interopRequireDefault(require("./comment/provider"));
 var _fileLoading = _interopRequireDefault(require("./components/file-loading"));
 var _loading = _interopRequireDefault(require("./components/loading"));
 var _toast = _interopRequireDefault(require("./components/toast"));
 var _tooltip = _interopRequireDefault(require("./components/tooltip"));
 var _constants = require("./constants");
 var _context = _interopRequireDefault(require("./context"));
-var _sdocEditor = _interopRequireDefault(require("./editor/sdoc-editor"));
 var _extension = require("./extension");
 var _dropdownMenuItem = _interopRequireDefault(require("./extension/commons/dropdown-menu-item"));
 var _menuShortcutIndicator = _interopRequireDefault(require("./extension/commons/menu-shortcut-indicator"));
-var _useCollaborators = require("./hooks/use-collaborators");
+var _useComment = require("./hooks/use-comment");
+var _commentLayout = _interopRequireDefault(require("./layout/comment-layout"));
 var _nodeId = _interopRequireDefault(require("./node-id"));
-var _rightPanel = _interopRequireDefault(require("./right-panel"));
 var _slateConvert = require("./slate-convert");
 var _socket = require("./socket");
 var _commonUtils = require("./utils/common-utils");

package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.css

@@ -1,4 +1,4 @@
-.sdoc-content-right-panel-wrapper {
+.comment-layout-wrapper {
   display: flex;
   flex-direction: row;
   max-width: 620px;
@@ -7,7 +7,7 @@
   right: 0;
 }
 
-.sdoc-content-right-panel-wrapper .sdoc-content-right-panel {
+.comment-layout-wrapper .sdoc-content-right-panel {
   width: 100%;
   height: 100%;
   overflow: hidden;

package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.js

@@ -7,22 +7,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _comment = _interopRequireDefault(require("../comment"));
-var _constants = require("../constants");
-var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
-var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
+var _comment = _interopRequireDefault(require("../../comment"));
+var _constants = require("../../constants");
+var _useComment = require("../../hooks/use-comment");
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
 var _resizeWidth = _interopRequireDefault(require("./resize-width"));
 require("./index.css");
 const MIN_PANEL_WIDTH = 360;
 const MAX_PANEL_WIDTH = 620;
-const RightPanel = _ref => {
+const CommentLayout = _ref => {
   let {
     editor
   } = _ref;
-  const displayPluginName = 'aa';
+  const {
+    className,
+    pluginName
+  } = (0, _useComment.useComment)();
   const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
   const panelWrapperStyle = (0, _react.useMemo)(() => {
-    if (!displayPluginName) return null;
+    if (!pluginName) return null;
     let style = {
       width,
       zIndex: 101
@@ -33,7 +37,7 @@ const RightPanel = _ref => {
       style.width = MAX_PANEL_WIDTH;
     }
     return style;
-  }, [width, displayPluginName]);
+  }, [width, pluginName]);
   const resizeWidth = (0, _react.useCallback)(width => {
     setWidth(width);
   }, []);
@@ -54,33 +58,18 @@ const RightPanel = _ref => {
     const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
     setWidth(width);
   }, []);
-  (0, _react.useEffect)(() => {
-    const isShowGlobalComments = displayPluginName === 'sdoc-comment' ? true : false;
-    const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
-    _localStorageUtils.default.setItem(_constants.SDOC_STORAGE, {
-      ...settings,
-      isShowGlobalComments
-    });
-    const eventBus = _eventBus.default.getInstance();
-    eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
-  }, [displayPluginName]);
-  const resizable_width = true;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-content-right-panel-wrapper",
+    className: `comment-layout-wrapper ${className}`,
     style: panelWrapperStyle
-  }, resizable_width && /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
+  }, /*#__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(_comment.default, {
+  }), /*#__PURE__*/_react.default.createElement(_comment.default, {
     editor: editor,
     type: "global",
-    onClose: () => {},
     width: width
-  })));
+  }));
 };
-var _default = exports.default = RightPanel;
+var _default = exports.default = CommentLayout;

package/dist/basic-sdk/layout/comment-layout/resize-width/index.css

@@ -0,0 +1,38 @@
+.comment-layout-resize-width-handler {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 6px;
+}
+
+.comment-layout-resize-width-handler.resize-handler-placement-right {
+  left: 0;
+  right: auto;
+}
+
+.comment-layout-resize-width-handler:hover {
+  cursor: col-resize;
+}
+
+.comment-layout-resize-width-handler .comment-layout-resize-width-handler-content {
+  background-color: initial;
+  height: 100%;
+  position: relative;
+  width: 2px;
+}
+
+.comment-layout-resize-width-handler:hover .comment-layout-resize-width-handler-content {
+  background-color: #ccc;
+}
+
+.comment-layout-resize-width-handler .comment-layout-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 → layout/comment-layout}/resize-width/index.js

@@ -108,7 +108,7 @@ const ResizeWidth = _ref => {
     // eslint-disable-next-line
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-resize-width-handler resize-handler-placement-right",
+    className: "comment-layout-resize-width-handler resize-handler-placement-right",
     ref: handlerRef,
     onMouseDown: onMouseDown,
     onMouseOver: onMouseOver,
@@ -120,9 +120,9 @@ const ResizeWidth = _ref => {
       zIndex: 4
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-resize-width-handler-content"
+    className: "comment-layout-resize-width-handler-content"
   }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-resize-width-handler-bar",
+    className: "comment-layout-resize-width-handler-bar",
     ref: handlerBarRef,
     style: {
       height: 26

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

@@ -4,17 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ArticleContainer", {
-  enumerable: true,
-  get: function () {
-    return _articleContainer.default;
-  }
-});
 Object.defineProperty(exports, "EditorContainer", {
   enumerable: true,
   get: function () {
     return _editorContainer.default;
   }
 });
-var _articleContainer = _interopRequireDefault(require("./article-container"));
 var _editorContainer = _interopRequireDefault(require("./editor-container"));

package/dist/index.js

@@ -22,6 +22,18 @@ Object.defineProperty(exports, "SeafileCommentEditor", {
     return _seafileCommentEditor.default;
   }
 });
+Object.defineProperty(exports, "createCommentEditor", {
+  enumerable: true,
+  get: function () {
+    return _basicSdk.createCommentEditor;
+  }
+});
+Object.defineProperty(exports, "withNodeId", {
+  enumerable: true,
+  get: function () {
+    return _basicSdk.withNodeId;
+  }
+});
 var _basicSdk = require("./basic-sdk");
 var _constants = require("./constants");
 var _seafileCommentEditor = _interopRequireDefault(require("./pages/seafile-comment-editor"));

package/dist/pages/seafile-comment-editor.js

@@ -10,60 +10,25 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _basicSdk = require("../basic-sdk");
 var _errorBoundary = _interopRequireDefault(require("../components/error-boundary"));
-var _hooks = require("../hooks");
-require("../assets/css/simple-editor.css");
 const SeafileCommentEditor = _ref => {
   let {
-    isStarred,
-    isDraft,
-    showComment,
-    showDocOperations = true,
-    t,
-    plugins = [],
-    collaborators
+    editor,
+    className = '',
+    pluginName = '',
+    api,
+    onCloseCommentPanel
   } = _ref;
-  _basicSdk.context.initApi();
-  const editorRef = (0, _react.useRef)(null);
-  const {
-    isFirstLoading,
-    isReloading,
-    errorMessage,
-    document,
-    reloadDocument,
-    setErrorMessage
-  } = (0, _hooks.useDocument)();
-  const validEditor = (0, _react.useMemo)(() => {
-    const defaultEditor = (0, _basicSdk.createDefaultEditor)();
-    const editorConfig = _basicSdk.context.getEditorConfig();
-    const newEditor = (0, _basicSdk.withNodeId)((0, _basicSdk.withSocketIO)(defaultEditor, {
-      document,
-      config: editorConfig
-    }));
-    const {
-      cursors
-    } = document;
-    newEditor.cursors = cursors || {};
-    newEditor.width = 672; // default width
-    return newEditor;
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  if (isFirstLoading) {
-    return /*#__PURE__*/_react.default.createElement(_basicSdk.Loading, null);
-  }
-  if (errorMessage) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "error-page"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "error-tip"
-    }, t(errorMessage)));
-  }
-  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_basicSdk.CollaboratorsProvider, {
-    collaborators: collaborators
-  }, /*#__PURE__*/_react.default.createElement(_basicSdk.Provider, {
-    editor: validEditor
-  }, /*#__PURE__*/_react.default.createElement(_basicSdk.RightPanel, {
-    editor: validEditor
-  }))));
+  _basicSdk.context.init();
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.default, null, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentProvider, {
+    pluginName: pluginName,
+    className: className,
+    editor: editor,
+    api: api,
+    onCloseCommentPanel: onCloseCommentPanel
+  }, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentLayout, {
+    editor: editor,
+    className: className,
+    pluginName: pluginName
+  })));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(SeafileCommentEditor);

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@seafile/comment-editor",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.1",
   "private": false,
   "description": "This is a comment editor",
   "main": "dist/index.js",
   "dependencies": {
+    "@seafile/comment-editor": "^0.0.1-alpha.0",
     "@seafile/print-js": "1.6.6",
     "@seafile/react-image-lightbox": "4.0.2",
     "@seafile/sdoc-editor": "2.0.60",