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

package/README.md

@@ -17,7 +17,6 @@ comment-editor/
     assets                  // css 文件, 图片文件
     commons                 // 公共组件
     components              // 应用组件
-    containers              // 容器组件
     pages                   // 页面组件
     app.js                  // 应用对象
     index.html              // 主页
@@ -27,11 +26,10 @@ comment-editor/
     setting.local.dist      // 用户基于 setting.local.dist.js copy 一份的配置文件
   src/(组件库)
     assets                  // css 文件, 资源文件
+    basic-sdk               // 编辑器元素包
     components              // 封装的视图组件
-    editor                  // 封装的编辑器组件
-    lib                     // 底层接口
     utils                   // 工具接口
-    viewer                  // 封装的视图组件
+    pages                   // 封装的视图组件
     index.js                // 组件库导出内容入口文件
   tests                     // 测试
   webpack                   // site 打包文件   

package/dist/basic-sdk/assets/css/layout.css

@@ -142,7 +142,7 @@
   transform: scale(.75);
 }
 
-.sdoc-comment-editor-toolbar {
+.comment-editor-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -154,7 +154,7 @@
   margin-top: 5px;
 }
 
-.sdoc-comment-editor-menu-group {
+.comment-editor-menu-group {
   border-right: none;
   padding-left: 0 !important;
 }

package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css

@@ -1,19 +1,19 @@
 /* List */
-.sdoc-editor-container .sdoc-comment-editor .list-container {
+.sdoc-editor-container .comment-editor .list-container {
   padding-left: 2em !important; 
 }
 
-.sdoc-comment-editor .list-container li p {
+.comment-editor .list-container li p {
   margin: 0 !important;
 }
 
 /* Paragraph */
-.sdoc-comment-editor .sdoc-comment-editor-paragraph {
+.comment-editor .comment-editor-paragraph {
   margin: 0.8em 0 !important;
   padding: 0 !important;
 }
 
 /* Image */
-.sdoc-comment-editor .sdoc-image-wrapper  {
+.comment-editor .sdoc-image-wrapper  {
   padding: 1px !important;
 }

package/dist/basic-sdk/comment/components/comment-all-participants/index.css

@@ -1,4 +1,4 @@
-.sdoc-comment-drawer .comments-panel-body__header .comments-participants-container {
+.comment-drawer .comments-panel-body__header .comments-participants-container {
   width: fit-content;
   max-width: 100%;
   height: 42px;
@@ -8,7 +8,7 @@
   position: relative;
 }
 
-.sdoc-comment-drawer .comments-panel-body__header .comments-participants-editor-target {
+.comment-drawer .comments-panel-body__header .comments-participants-editor-target {
   position: absolute;
   left: -1px;
   top: 0;
@@ -18,13 +18,13 @@
   background-color: transparent;
 }
 
-.sdoc-comment-drawer .comments-panel-body__header .comment-participant-avatar {
+.comment-drawer .comments-panel-body__header .comment-participant-avatar {
   border-radius: 50%;
   vertical-align: middle;
   margin-right: -0.5rem;
 }
 
-.sdoc-comment-drawer .comments-panel-body__header .comment-participant-avatar img {
+.comment-drawer .comments-panel-body__header .comment-participant-avatar img {
   width: 28px;
   height: 28px;
   border: 2px solid #fff;
@@ -41,7 +41,7 @@
   user-select: none;
 }
 
-.sdoc-comment-drawer .comments-panel-body__header .add-comments-participants {
+.comment-drawer .comments-panel-body__header .add-comments-participants {
   position: relative;
   bottom: -3px;
   cursor: pointer;
@@ -56,13 +56,13 @@
   justify-content: center;
 }
 
-.sdoc-comment-drawer .add-comments-participants .sdocfont {
+.comment-drawer .add-comments-participants .sdocfont {
   font-size: 16px;
   color: #ff8000;
   border-radius: 50%;
 }
 
-.sdoc-comment-drawer .comment-participants-more {
+.comment-drawer .comment-participants-more {
   position: absolute;
   top: 0;
   left: 0;
@@ -77,7 +77,7 @@
   border: 2px solid #fff;
 }
 
-.sdoc-comment-drawer .comment-participants-more .sdocfont {
+.comment-drawer .comment-participants-more .sdocfont {
   color: #fff;
   font-size: 12px;
 }

package/dist/basic-sdk/comment/components/comment-editor.js

@@ -11,17 +11,25 @@ var _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
 var _constants = require("../../constants");
 var _context = _interopRequireDefault(require("../../context"));
-var _sdocCommentEditor = _interopRequireDefault(require("../../editor/sdoc-comment-editor"));
+var _useCursors = require("../../cursor/use-cursors");
+var _decorates = require("../../decorates");
 var _extension = require("../../extension");
 var _constants2 = require("../../extension/constants");
 var _core = require("../../extension/core");
+var _renderCommentEditorElement = _interopRequireDefault(require("../../extension/render/render-comment-editor-element"));
+var _commentEditorToolbar = _interopRequireDefault(require("../../extension/toolbar/comment-editor-toolbar"));
+var _useComment = require("../../hooks/use-comment");
+var _useScrollContext = require("../../hooks/use-scroll-context");
+var _layout = require("../../layout");
 var _nodeId = _interopRequireDefault(require("../../node-id"));
 var _mdToSlate = _interopRequireDefault(require("../../slate-convert/md-to-slate"));
 var _slateToMd = _interopRequireDefault(require("../../slate-convert/slate-to-md"));
 var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
-var _useParticipants = require("../hooks/use-participants");
+var _eventHandler = _interopRequireDefault(require("../../utils/event-handler"));
 const getSubmitTip = (type, content) => {
   if (content) return 'Save';
   return type === 'comment' ? 'Comment' : 'Reply';
@@ -49,7 +57,7 @@ const CommentEditor = _ref => {
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const {
     addParticipants
-  } = (0, _useParticipants.useParticipantsContext)();
+  } = (0, _useComment.useComment)();
   const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
   const userInfo = _context.default.getUserInfo();
   const document = (0, _react.useMemo)(() => {
@@ -63,6 +71,8 @@ const CommentEditor = _ref => {
       cursor
     };
   }, [placeholder]);
+  const [slateValue, setSlateValue] = (0, _react.useState)(document.elements);
+  const commentEditorContainerRef = (0, _react.useRef)(null);
   const editor = (0, _react.useMemo)(() => {
     const defaultEditor = (0, _extension.createCommentEditor)();
     const newEditor = (0, _nodeId.default)(defaultEditor);
@@ -74,6 +84,13 @@ const CommentEditor = _ref => {
     newEditor.editorType = _constants.COMMENT_EDITOR;
     return newEditor;
   }, [document]);
+  const {
+    cursors
+  } = (0, _useCursors.useCursors)(editor);
+  const decorate = (0, _decorates.usePipDecorate)(editor);
+  // init eventHandler
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
   const updateValue = (0, _react.useCallback)(value => {
     if (!value || value.trim() === '') return;
     if (!content) return insertContent(value);
@@ -139,6 +156,75 @@ const CommentEditor = _ref => {
     editor.children = children;
     _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
   }, [editor, content, commentContent]);
+
+  // useMount: focus editor
+  (0, _react.useEffect)(() => {
+    const [firstNode] = editor.children;
+    if (firstNode) {
+      const [firstNodeFirstChild] = firstNode.children;
+      if (firstNodeFirstChild) {
+        const endOfFirstNode = _slate.Editor.end(editor, [0, 0]);
+        const range = {
+          anchor: endOfFirstNode,
+          focus: endOfFirstNode
+        };
+        (0, _core.focusEditor)(editor, range);
+      }
+      // Force refresh to fix comment list
+      setSlateValue([...editor.children]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleFocusEditor = e => {
+    if (e.target === commentEditorContainerRef.current) {
+      const focusPoint = _slate.Editor.end(editor, []);
+      (0, _core.focusEditor)(editor, focusPoint);
+    }
+  };
+  const handleScrollIntoView = (0, _react.useCallback)((editor, domRange) => {
+    try {
+      const {
+        selection
+      } = editor;
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = _slate.Editor.nodes(editor, {
+        match: n => [_constants2.IMAGE, _constants2.IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
+      const focusedNode = _slate.Node.get(editor, selection.focus.path);
+      const domNode = _slateReact.ReactEditor.toDOMNode(editor, focusedNode);
+      if (!domNode) return;
+      (0, _scrollIntoViewIfNeeded.default)(domNode, {
+        'scrollMode': 'if-needed'
+      });
+    } catch (error) {
+      //
+    }
+  }, []);
+  const onMouseDown = (0, _react.useCallback)(event => {
+    if (event.button === 0) {
+      // Compatible with the editor which unload table plugin
+      editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('enter', event)) {
+      event.preventDefault();
+      const eventBus = _eventBus.default.getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
+      return;
+    }
+    if ((0, _isHotkey.default)('shift+enter', event)) {
+      event.preventDefault();
+      _slate.Editor.insertBreak(editor);
+      return;
+    }
+    eventProxy.onKeyDown(event);
+  }, [eventProxy, editor]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('comment-editor-wrapper', className),
     ref: commentWrapperRef
@@ -153,13 +239,43 @@ const CommentEditor = _ref => {
     width: "100%"
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-editor-user-name"
-  }, userInfo.name)), /*#__PURE__*/_react.default.createElement(_sdocCommentEditor.default, {
+  }, userInfo.name)), /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-editor-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: commentEditorContainerRef,
+    className: "article comment-editor",
+    onClick: handleFocusEditor
+  }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
+    value: {
+      scrollRef: commentEditorContainerRef
+    }
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: setSlateValue
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
+    id: "sdoc-editor",
+    scrollSelectionIntoView: handleScrollIntoView,
+    cursors: cursors,
+    renderElement: props => (0, _renderCommentEditorElement.default)({
+      ...props,
+      commentType: type
+    }),
+    renderLeaf: _extension.renderLeaf,
+    onMouseDown: onMouseDown,
+    decorate: decorate,
+    onCut: eventProxy.onCut,
+    onCopy: eventProxy.onCopy,
+    onCompositionStart: eventProxy.onCompositionStart,
+    onCompositionUpdate: eventProxy.onCompositionUpdate,
+    onCompositionEnd: eventProxy.onCompositionEnd,
+    onKeyDown: onKeyDown,
+    onBeforeInput: eventProxy.onBeforeInput
+  })))), /*#__PURE__*/_react.default.createElement(_commentEditorToolbar.default, {
     editor: editor,
-    type: type,
-    document: document,
     onSubmit: onSubmit,
     submitBtnText: t(submitTip),
     onCancel: onCancel
-  }));
+  }))));
 };
 var _default = exports.default = CommentEditor;

package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js

@@ -12,10 +12,10 @@ var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _useComment = require("../../hooks/use-comment");
 var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
 var _constants = require("../constants");
 var _helper = require("../helper");
-var _notificationHooks = require("../hooks/notification-hooks");
 const CommentItemCollapseWrapper = _ref => {
   var _topLevelComment$deta;
   let {
@@ -30,7 +30,7 @@ const CommentItemCollapseWrapper = _ref => {
   const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
   const {
     notificationsInfo
-  } = (0, _notificationHooks.useNotificationContext)();
+  } = (0, _useComment.useComment)();
   const [commentContent, setCommentContent] = (0, _react.useState)('');
   const [replyContent, setReplyContent] = (0, _react.useState)('');
   const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${topLevelComment.id}`] ? true : false;

package/dist/basic-sdk/comment/components/comment-item-content.js

@@ -12,8 +12,8 @@ var _reactstrap = require("reactstrap");
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
 var _context = _interopRequireDefault(require("../../context"));
+var _useComment = require("../../hooks/use-comment");
 var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
-var _notificationHooks = require("../hooks/notification-hooks");
 var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 const CommentItemContent = _ref => {
   let {
@@ -22,7 +22,7 @@ const CommentItemContent = _ref => {
     comment,
     updateComment,
     updateCommentState,
-    onDeleteComment,
+    onShowDeletePopover,
     t,
     targetId
   } = _ref;
@@ -30,12 +30,8 @@ const CommentItemContent = _ref => {
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
   const {
     notificationsInfo
-  } = (0, _notificationHooks.useNotificationContext)();
+  } = (0, _useComment.useComment)();
   const [editorContent, setEditorContent] = (0, _react.useState)('');
-  const onEditToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    setIsEditing(true);
-  }, []);
   const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${comment.id}`] ? true : false;
   (0, _react.useEffect)(() => {
     transferHtml(comment.comment);
@@ -44,10 +40,6 @@ const CommentItemContent = _ref => {
     const htmlString = await _mdToHtml.default.process(mdString);
     setEditorContent(String(htmlString));
   };
-  const onDeleteToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    onDeleteComment(true);
-  }, [onDeleteComment]);
   const updateContent = (0, _react.useCallback)(content => {
     const commentId = comment.id;
     if (comment.comment !== content) {
@@ -127,11 +119,17 @@ const CommentItemContent = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     tag: "div",
-    onClick: onEditToggle
+    onClick: event => {
+      event.stopPropagation();
+      setIsEditing(true);
+    }
   }, t('Edit')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     tag: "div",
-    onClick: onDeleteToggle
+    onClick: event => {
+      event.stopPropagation();
+      onShowDeletePopover(true);
+    }
   }, t('Delete')), !comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
     className: "sdoc-dropdown-menu-item",
     tag: "div",

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -12,9 +12,9 @@ var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _context = _interopRequireDefault(require("../../context"));
+var _useComment = require("../../hooks/use-comment");
 var _constants = require("../constants");
 var _helper = require("../helper");
-var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
 var _commentItemContent = _interopRequireDefault(require("./comment-item-content"));
 var _commentItemReply = _interopRequireDefault(require("./comment-item-reply"));
@@ -41,37 +41,17 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const listRef = (0, _react.useRef)(null);
   const {
-    dispatch
-  } = (0, _useCommentContext.useCommentContext)();
+    dispatch,
+    api
+  } = (0, _useComment.useComment)();
   const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
   const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
   const commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
   const style = !isGlobalComment && isCollapseCommentEditor ? {
     maxHeight: '341px'
   } : {};
-  const deleteComment = (0, _react.useCallback)(async commentId => {
-    await _context.default.deleteComment(commentId);
-    let {
-      element_id: elementId,
-      element_id_list
-    } = comment.detail;
-    if (element_id_list) {
-      var _comment$detail;
-      elementId = element_id_list[0];
-      (0, _helper.updateCommentedElementsAttrs)(element_id_list, editor, (_comment$detail = comment.detail) === null || _comment$detail === void 0 ? void 0 : _comment$detail.text_comment_id, false, true);
-    }
-    dispatch({
-      type: 'DELETE_COMMENT',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId
-      }
-    });
-    closeComment && closeComment();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comment.detail, dispatch, editor]);
   const updateComment = (0, _react.useCallback)(async (commentId, newComment) => {
-    await _context.default.updateComment(commentId, newComment);
+    await api.updateComment(commentId, newComment);
     const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
     dispatch({
       type: 'UPDATE_COMMENT',
@@ -81,10 +61,11 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         comment: newComment
       }
     });
-  }, [comment.detail, dispatch]);
+  }, [api, comment.detail, dispatch]);
   const updateCommentState = (0, _react.useCallback)(async (commentId, newComment) => {
     const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
     const user = _context.default.getUserInfo();
+    console.log(user);
     const reply = {
       type: 'comment',
       reply: newComment.resolved,
@@ -93,7 +74,7 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
 
     // When updating comment status, add a new reply
-    const res = await _context.default.insertReply(commentId, reply);
+    const res = await api.insertReply(commentId, reply);
     const {
       reply: returnReply
     } = res.data;
@@ -134,7 +115,7 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     });
 
     // Modify comment status
-    await _context.default.updateComment(commentId, newComment);
+    await api.updateComment(commentId, newComment);
     dispatch({
       type: 'UPDATE_COMMENT_STATE',
       payload: {
@@ -262,11 +243,25 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
     onCommentClick && onCommentClick(comment);
   }, [comment, onCommentClick]);
-  const onDeleteComment = (0, _react.useCallback)(() => {
-    setIsShowDeletePopover(true);
-  }, []);
-  const _deleteComment = (0, _react.useCallback)(() => {
-    deleteComment(comment.id);
+  const onDeleteComment = (0, _react.useCallback)(async () => {
+    await api.deleteComment(comment.id);
+    let {
+      element_id: elementId,
+      element_id_list
+    } = comment.detail;
+    if (element_id_list) {
+      var _comment$detail;
+      elementId = element_id_list[0];
+      (0, _helper.updateCommentedElementsAttrs)(element_id_list, editor, (_comment$detail = comment.detail) === null || _comment$detail === void 0 ? void 0 : _comment$detail.text_comment_id, false, true);
+    }
+    dispatch({
+      type: 'DELETE_COMMENT',
+      payload: {
+        element_id: elementId,
+        comment_id: comment.id
+      }
+    });
+    closeComment && closeComment();
     setIsShowDeletePopover(false);
     setCurrentCommentGroup && setCurrentCommentGroup(null);
     if (isClickedContextComment) {
@@ -278,7 +273,8 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         onSelectElement(newCommentIdArray, true);
       }
     }
-  }, [comment.id, commentsDetail, deleteComment, isClickedContextComment, onSelectElement, setCurrentCommentGroup, setIsClickedContextComment, setIsCommentPanelVisible]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comment.id, commentsDetail, isClickedContextComment, onSelectElement, setCurrentCommentGroup, setIsClickedContextComment, setIsCommentPanelVisible]);
   (0, _react.useEffect)(() => {
     if (!isActive) {
       setIsShowDeletePopover(false);
@@ -334,7 +330,7 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     comment: comment,
     updateComment: updateComment,
     updateCommentState: updateCommentState,
-    onDeleteComment: onDeleteComment,
+    onShowDeletePopover: () => setIsShowDeletePopover(true),
     targetId: commentOpToolsId,
     isClickedContextComment: isClickedContextComment
   }), isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
@@ -360,7 +356,7 @@ const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   })), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
     type: "comment",
     targetId: commentOpToolsId,
-    deleteConfirm: _deleteComment,
+    deleteConfirm: onDeleteComment,
     setIsShowDeletePopover: setIsShowDeletePopover,
     parentDom: listRef.current
   }));

package/dist/basic-sdk/comment/components/comment-list.css

@@ -3,7 +3,7 @@
   right: 0;
 }
 
-.sdoc-comment-list-container .article.sdoc-comment-editor {
+.sdoc-comment-list-container .article.comment-editor {
   font-size: 14px;
 }
 
@@ -254,14 +254,14 @@
   color: #fff;
 }
 
-.sdoc-comment-editor-wrapper {
+.comment-editor-content {
   border: 1px solid #ececec;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   border-radius: 3px;
 }
 
-.comment-editor-wrapper .sdoc-comment-editor-wrapper .article.sdoc-comment-editor {
+.comment-editor-wrapper .comment-editor-content .article.comment-editor {
   width: 100%;
   padding: 8px;
   padding-bottom: 0;
@@ -282,7 +282,7 @@
   width: auto;
 }
 
-.article.sdoc-comment-editor :first-child {
+.article.comment-editor :first-child {
   margin-top: 0 !important;
 }
 

package/dist/basic-sdk/comment/components/comment-participants-editor/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
-var _useCollaborators = require("../../../hooks/use-collaborators");
+var _useComment = require("../../../hooks/use-comment");
 var _mouseEvent = require("../../../utils/mouse-event");
 var _utils = require("../../utils");
 var _searchedCollaborators = _interopRequireDefault(require("./searched-collaborators"));
@@ -23,7 +23,7 @@ const CommentParticipantsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref
   const popoverRef = (0, _react.useRef)();
   const {
     collaborators
-  } = (0, _useCollaborators.useCollaborators)();
+  } = (0, _useComment.useComment)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');

package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _useComment = require("../../../hooks/use-comment");
 var _mouseEvent = require("../../../utils/mouse-event");
 var _constants = require("../../constants");
 const CommentTypeDropdownItem = _ref => {
@@ -30,12 +31,12 @@ const CommentTypeDropdownItem = _ref => {
     onClick: event => handleCommentTypeChanged(event, type)
   }, t(type));
 };
-const GlobalCommentBodyHeader = _ref2 => {
-  let {
-    commentList = [],
+const GlobalCommentBodyHeader = () => {
+  const {
+    commentList,
     commentType,
     setCommentType
-  } = _ref2;
+  } = (0, _useComment.useComment)();
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');

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

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
 var _constants = require("../../../constants");
-var _context = _interopRequireDefault(require("../../../context"));
+var _useComment = require("../../../hooks/use-comment");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _mouseEvent = require("../../../utils/mouse-event");
 const GlobalCommentHeader = _ref => {
@@ -24,6 +24,13 @@ const GlobalCommentHeader = _ref => {
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
   const panelHeaderRef = (0, _react.useRef)(null);
   const [isMounted, setIsMounted] = (0, _react.useState)(false);
+  const {
+    api
+  } = (0, _useComment.useComment)();
+  const {
+    readAllNotifications,
+    listUnseenNotifications
+  } = api;
   (0, _react.useEffect)(() => {
     if (panelHeaderRef.current) {
       setIsMounted(true);
@@ -36,8 +43,8 @@ const GlobalCommentHeader = _ref => {
   const toggleReadAll = (0, _react.useCallback)(async event => {
     (0, _mouseEvent.eventStopPropagation)(event);
     try {
-      await _context.default.readAllNotifications();
-      const res = await _context.default.listUnseenNotifications();
+      await readAllNotifications();
+      const res = await listUnseenNotifications();
       const notifications = res.data.notifications;
       const eventBus = _eventBus.default.getInstance();
       eventBus.dispatch(_constants.INTERNAL_EVENT.UNSEEN_NOTIFICATIONS_COUNT, notifications === null || notifications === void 0 ? void 0 : notifications.length);
@@ -46,7 +53,7 @@ const GlobalCommentHeader = _ref => {
     } catch (error) {
       //
     }
-  }, []);
+  }, [listUnseenNotifications, readAllNotifications]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "comments-panel-header"
   }, /*#__PURE__*/_react.default.createElement("div", {