@seafile/sdoc-editor 1.0.112 → 1.0.113

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

@@ -31,13 +31,16 @@ const CommentEditor = _ref => {
     type,
     className,
     content,
+    globalCommentContent,
     placeholder,
     insertContent,
     updateContent,
     setIsEditing,
     hiddenComment,
     commentRef,
-    globalComment
+    globalComment,
+    hiddenUserInfo,
+    updateGlobalCommentContent
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
@@ -84,7 +87,7 @@ const CommentEditor = _ref => {
   const updateValue = (0, _react.useCallback)(value => {
     if (!value || value.trim() === '') return;
     if (!content) return insertContent(value);
-    updateContent(value);
+    updateContent && updateContent(value);
   }, [content, insertContent, updateContent]);
   const onSubmit = (0, _react.useCallback)(event => {
     event && event.stopPropagation();
@@ -95,7 +98,8 @@ const CommentEditor = _ref => {
       placeholder
     })];
     _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder]);
+    updateGlobalCommentContent && updateGlobalCommentContent(null);
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, updateGlobalCommentContent]);
   (0, _react.useEffect)(() => {
     const eventBus = _eventBus.default.getInstance();
     const unsubscribePostComment = eventBus.subscribe(_constants2.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmit);
@@ -128,18 +132,27 @@ const CommentEditor = _ref => {
     }
     setIsEditing && setIsEditing(false);
     hiddenComment && hiddenComment(false);
-
+    if (updateGlobalCommentContent) {
+      if (editor.children.find(n => _slate.Node.string(n).trim())) {
+        updateGlobalCommentContent((0, _slateToMd.default)(editor.children));
+      } else {
+        updateGlobalCommentContent(null);
+      }
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setIsEditing]);
   (0, _react.useEffect)(() => {
-    const children = (0, _mdToSlate.default)(content);
+    let children = (0, _mdToSlate.default)(content);
+    if (globalCommentContent) {
+      children = (0, _mdToSlate.default)(globalCommentContent);
+    }
     editor.children = children;
     _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
-  }, [editor, content]);
+  }, [editor, content, globalCommentContent]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('comment-editor-wrapper', className),
     ref: commentWrapperRef
-  }, type === 'comment' && /*#__PURE__*/_react.default.createElement("div", {
+  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-editor-user-info"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-editor-user-img"
@@ -160,6 +173,6 @@ const CommentEditor = _ref => {
   }));
 };
 CommentEditor.defaultProps = {
-  placeholder: 'Enter_comment_Enter_for_new_line_shift_enter_to_send'
+  placeholder: 'Enter_comment_shift_enter_for_new_line_Enter_to_send'
 };
 var _default = exports.default = CommentEditor;

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

@@ -0,0 +1,130 @@
+"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 _dayjs = _interopRequireDefault(require("dayjs"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _mdToHtml = _interopRequireDefault(require("../../../slate-convert/md-to-html"));
+var _notificationHooks = require("../hooks/notification-hooks");
+var _constants = require("../constants");
+const CommentItemCollapseWrapper = _ref => {
+  let {
+    element,
+    latestComment,
+    topLevelComment,
+    editor,
+    commentCount,
+    setCurrentCommentGroup,
+    t
+  } = _ref;
+  const [editorContent, setEditorContent] = (0, _react.useState)('');
+  const {
+    notificationsInfo
+  } = (0, _notificationHooks.useNotificationContext)();
+  const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
+  const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${latestComment.id}`] ? true : false;
+  (0, _react.useEffect)(() => {
+    let mdString = '';
+    if (latestComment.reply === 'True') {
+      mdString = t('Mark_as_Resolved');
+    } else if (latestComment.reply === 'False') {
+      mdString = t('Resubmitted');
+    } else if (latestComment.reply) {
+      mdString = latestComment.reply;
+    } else {
+      mdString = latestComment.comment;
+    }
+    transferHtml(mdString);
+  }, [latestComment.comment, latestComment.reply, t]);
+  const transferHtml = async mdString => {
+    const htmlString = await _mdToHtml.default.process(mdString);
+    setEditorContent(String(htmlString));
+  };
+  const handleScrollToArticle = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    const dom = _slateReact.ReactEditor.toDOMNode(editor, element);
+    const headerHeight = 56 + 37;
+    scrollRef.current.scrollTo({
+      top: dom.offsetTop - headerHeight,
+      behavior: 'smooth'
+    });
+  }, [editor, element, scrollRef]);
+  const onItemClick = (0, _react.useCallback)(event => {
+    if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
+    setCurrentCommentGroup(topLevelComment.id);
+  }, [setCurrentCommentGroup, topLevelComment.id]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: `comment-item-wrapper_${topLevelComment.id}`,
+    className: (0, _classnames.default)('comment-ui-container', {
+      'sdoc-resolved': topLevelComment.resolved,
+      'd-flex flex-column': element
+    }),
+    onClick: onItemClick
+  }, element && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-selected-text-container",
+    onClick: handleScrollToArticle
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-selected-text"
+  }, _slate.Node.string(element))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-list"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-author"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "comment-author__avatar"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    src: latestComment.avatar_url
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: "comment-author__info"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "name"
+  }, latestComment.user_name), /*#__PURE__*/_react.default.createElement("span", {
+    className: "time"
+  }, (0, _dayjs.default)(latestComment.updated_at).format('MM-DD HH:mm'), isUnseen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-unread-message-tip"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-unread-message-text-tip"
+  }, t('New'))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: editorContent
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-footer"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "comments-count"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comments"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "comments-count-number"
+  }, commentCount)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-author"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "comment-author__avatar"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "",
+    src: latestComment.avatar_url
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-author__latest-reply"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: editorContent
+    }
+  })))))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemCollapseWrapper);

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

@@ -101,7 +101,7 @@ const CommentItem = _ref => {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdoc-unread-message-text-tip"
   }, t('New')))))), isActive && /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex"
+    className: "d-flex comment-item-operation-wrapper"
   }, !comment.resolved && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     id: `tooltip_${menuId}`,
     className: "comment-operation mr-2",
@@ -118,7 +118,7 @@ const CommentItem = _ref => {
     tag: "div",
     className: "comment-operation"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-more-options"
+    className: "sdocfont sdoc-more"
   })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
     className: "sdoc-dropdown-menu",
     container: container

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

@@ -88,7 +88,9 @@ const CommentItemReply = _ref => {
     className: "sdoc-unread-message-tip"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "sdoc-unread-message-text-tip"
-  }, t('New')))))), isActive && user.username === reply.author && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
+  }, t('New')))))), isActive && user.username === reply.author && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-operation-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
     id: replyOpToolsId,
     isOpen: isDropdownOpen,
     toggle: () => setDropdownOpen(!isDropdownOpen)
@@ -96,7 +98,7 @@ const CommentItemReply = _ref => {
     tag: "div",
     className: "comment-operation"
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-more-options"
+    className: "sdocfont sdoc-more"
   })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
     className: "sdoc-dropdown-menu",
     container: container

package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js

@@ -33,6 +33,6 @@ const CommentItemResolvedReply = _ref => {
     className: "time"
   }, (0, _dayjs.default)(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/_react.default.createElement("p", {
     className: "comment-content"
-  }, reply.reply === 'True' && /*#__PURE__*/_react.default.createElement("div", null, t('Mark_as_Resolved')), reply.reply === 'False' && /*#__PURE__*/_react.default.createElement("div", null, t('Resubmitted')))));
+  }, reply.reply === 'True' && /*#__PURE__*/_react.default.createElement("span", null, t('Mark_as_Resolved')), reply.reply === 'False' && /*#__PURE__*/_react.default.createElement("span", null, t('Resubmitted')))));
 };
 var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemResolvedReply);

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

@@ -22,19 +22,23 @@ var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-pop
 const CommentItemWrapper = _ref => {
   let {
     container,
+    editor,
     element,
     isActive,
     comment,
-    onCommentClick,
+    isGlobalComment,
+    contentRef,
     updateScrollPosition,
     hiddenComment,
-    editor
+    setCurrentCommentGroup,
+    onCommentClick
   } = _ref;
   const listRef = (0, _react.useRef)(null);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
   const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
+  const [isShowDeleteDialog, setIsShowDeleteDialog] = (0, _react.useState)(false);
   const commentOpToolsId = `commentOpTools_${comment.id}`;
   const deleteComment = (0, _react.useCallback)(async commentId => {
     await _context.default.deleteComment(commentId);
@@ -128,6 +132,7 @@ const CommentItemWrapper = _ref => {
       const newReply = {
         ...reply,
         id: returnReply.id,
+        comment_id: commentId,
         reply: returnReply.reply,
         user_name: returnReply.user_name,
         avatar_url: returnReply.avatar_url
@@ -192,6 +197,9 @@ const CommentItemWrapper = _ref => {
     replies.push(reply);
     insertReply(comment.id, replies);
   }, [comment.id, comment.resolved, insertReply]);
+  (0, _react.useImperativeHandle)(contentRef, () => ({
+    insertContent
+  }));
   const deleteReply = (0, _react.useCallback)(async replyId => {
     const commentId = comment.id;
     const {
@@ -225,16 +233,16 @@ const CommentItemWrapper = _ref => {
   }, [comment.detail, comment.id, dispatch]);
   const onItemClick = (0, _react.useCallback)(event => {
     if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
-    onCommentClick(comment);
+    onCommentClick && onCommentClick(comment);
   }, [comment, onCommentClick]);
-  const [isShowDeleteDialog, setIsShowDeleteDialog] = (0, _react.useState)(false);
   const onDeleteComment = (0, _react.useCallback)(() => {
     setIsShowDeleteDialog(true);
   }, []);
   const _deleteComment = (0, _react.useCallback)(() => {
     deleteComment(comment.id);
     setIsShowDeleteDialog(false);
-  }, [comment.id, deleteComment]);
+    setCurrentCommentGroup && setCurrentCommentGroup(null);
+  }, [comment.id, deleteComment, setCurrentCommentGroup]);
   (0, _react.useEffect)(() => {
     if (!isActive) {
       setIsShowDeleteDialog(false);
@@ -243,9 +251,10 @@ const CommentItemWrapper = _ref => {
   const className = (0, _classnames.default)('comment-ui-container', {
     'active': isActive,
     'sdoc-resolved': comment.resolved,
-    'd-flex flex-column pt-0': element
+    'd-flex flex-column': element,
+    'comment-item-detail-wrapper': isGlobalComment
   });
-  const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_reply_Enter_for_new_line_Shift_Enter_to_send';
+  const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_reply_shift_Enter_for_new_line_Enter_to_send';
   const handleScrollToArticle = (0, _react.useCallback)(e => {
     e.stopPropagation();
     const dom = _slateReact.ReactEditor.toDOMNode(editor, element);
@@ -299,7 +308,7 @@ const CommentItemWrapper = _ref => {
       key: reply.id,
       reply: reply
     });
-  })), isActive && /*#__PURE__*/_react.default.createElement("div", {
+  })), !isGlobalComment && isActive && /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-reply-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
     type: "reply",

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

@@ -23,11 +23,6 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
-.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
-  padding: 0;
-  padding-bottom: 16px;
-}
-
 .sdoc-comment-list-container .comment-item-selected-text-container {
   width: 100%;
   height: 32px;

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

@@ -10,9 +10,11 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _commentEditor = _interopRequireDefault(require("../comment-editor"));
 const GlobalCommentEditor = _ref => {
   let {
+    isScrollDisplayed,
+    globalCommentContent,
     insertDocComment,
     hiddenCommentEditor,
-    isScrollDisplayed
+    updateGlobalCommentContent
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
@@ -23,8 +25,11 @@ const GlobalCommentEditor = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
     type: "comment",
     className: "sdoc-doc-comment-editor",
+    globalCommentContent: globalCommentContent,
+    hiddenUserInfo: true,
     insertContent: insertDocComment,
-    hiddenComment: hiddenCommentEditor
+    hiddenComment: hiddenCommentEditor,
+    updateGlobalCommentContent: updateGlobalCommentContent
   })));
 };
 var _default = exports.default = GlobalCommentEditor;

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

@@ -17,7 +17,8 @@ var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"))
 const GlobalCommentHeader = _ref => {
   let {
     toggle,
-    toggleGlobalCommentEditor
+    activeCommentGroup,
+    setCurrentCommentGroup
   } = _ref;
   const {
     t
@@ -29,10 +30,10 @@ const GlobalCommentHeader = _ref => {
       setIsMounted(true);
     }
   }, []);
-  const toggleADDComment = (0, _react.useCallback)(event => {
+  const goBack = (0, _react.useCallback)(event => {
     (0, _mouseEvent.eventStopPropagation)(event);
-    toggleGlobalCommentEditor();
-  }, [toggleGlobalCommentEditor]);
+    setCurrentCommentGroup(null);
+  }, [setCurrentCommentGroup]);
   const toggleReadAll = (0, _react.useCallback)(async event => {
     (0, _mouseEvent.eventStopPropagation)(event);
     try {
@@ -49,9 +50,19 @@ const GlobalCommentHeader = _ref => {
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "comments-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "comments-panel-header-left"
+  }, activeCommentGroup && /*#__PURE__*/_react.default.createElement("div", {
+    className: "goback sdoc-icon-btn",
+    onClick: goBack
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-previous-page",
+    style: {
+      transform: 'scale(1.2)'
+    }
+  })), /*#__PURE__*/_react.default.createElement("span", {
     className: "title"
-  }, t('Comments')), /*#__PURE__*/_react.default.createElement("div", {
+  }, activeCommentGroup ? t('Comment_details') : t('Comments'))), /*#__PURE__*/_react.default.createElement("div", {
     ref: panelHeaderRef,
     className: "comments-panel-header-right"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -63,14 +74,6 @@ const GlobalCommentHeader = _ref => {
   }), isMounted && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     target: "sdoc-read-all-btn"
   }, t('Mark_all_as_read'))), /*#__PURE__*/_react.default.createElement("div", {
-    id: "sdoc-add-comment-btn",
-    className: "sdoc-icon-btn",
-    onClick: toggleADDComment
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-add-comment"
-  }), isMounted && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    target: "sdoc-add-comment-btn"
-  }, t('Add_comment'))), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-icon-btn",
     onClick: toggle
   }, /*#__PURE__*/_react.default.createElement("i", {

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

@@ -46,12 +46,20 @@
   border-bottom: 1px solid #EAECEF;
 }
 
-.sdoc-comment-drawer .comments-panel-header .title {
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left {
+  display: flex;
+}
+
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left .title {
   color: #212529;
   font-size: 16px;
   font-weight: 500;
 }
 
+.sdoc-comment-drawer .comments-panel-header .comments-panel-header-left .goback {
+  margin-right: 4px;
+}
+
 .sdoc-comment-drawer .comments-panel-header .comments-panel-header-right {
   display: flex;
 }
@@ -69,7 +77,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background-color: #F5F5F5;
+  position: relative;
 }
 
 .sdoc-comment-drawer .comments-panel-body__header {
@@ -108,23 +116,26 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 16px;
   padding-top: 0px;
+  margin-bottom: 20px;
   overflow: auto;
 }
 
 .sdoc-comment-drawer .comments-panel-body__content .sdoc-comment-list-container {
   position: relative;
-}
-
-.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active {
-  left: 0;
+  margin-top: 0px
 }
 
 .sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.sdoc-resolved {
   background: #f5f5f5;
 }
 
+.sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active {
+  left: 0;
+  background: #fff;
+  box-shadow: unset;
+}
+
 .sdoc-comment-drawer .comments-panel-body__content .comment-ui-container.active.sdoc-resolved {
   background: #f5f5f5;
 }
@@ -135,35 +146,158 @@
 }
 
 /* doc comment add editor */
-.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper {
   padding: 0 16px;
-  position: absolute;
-  top: 120px;
   width: 100%;
+  margin-bottom: 16px;
 }
 
-.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container.scrolled {
-  width: calc(100% - 1em);
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control[readonly] {
+  background-color: #fff;
 }
 
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control {
+  font-size: 14px;
+  font-weight: unset;
+  border: 1px solid #ececec;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper.active .form-control {
+  padding-top: 14px;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control:focus {
+  box-shadow: none;
+  border-color: #e1e2e5;
+}
+
+.sdoc-comment-drawer .comments-panel-body .global-comment-input-wrapper .form-control::placeholder {
+  color: rgb(191, 191, 191);
+}
+
+.sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
+  padding: 0 16px;
+  position: absolute;
+  bottom: 16px;
+  width: 100%;
+}
 
 .sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container.active {
   margin-bottom: 0;
-  padding: 16px 10px;
+  padding: 0px;
   left: 0;
+  border: 0px;
+}
+
+.sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container:hover {
+  background-color: #FFF !important;
+  box-shadow: none;
 }
 
 /* custom */
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
   background-color: #FFF;
-  border: 1px solid #c7c7c7;
+  border-bottom: 1px solid #e1e2e5;
+  margin-bottom: 0px;
+  box-shadow: none;
+  padding: 16px;
+  border-radius: 0px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container:hover {
+  background-color: #f5f5f5;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container .comment-item {
+  padding: 0px
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {
+  background-color: unset;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-header .comment-author__avatar img {
+  width: 24px;
+  height: 24px;
+  margin-top: -5px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-content {
+  margin-left: 35px;
+  margin-bottom: 16px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer {
+  display: flex;
+  color: #666666;
+  font-size: 14px;
+  margin-left: 35px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comments-count {
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comments-count .comments-count-number {
+  margin-left: 8px;
+  margin-top: -2px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author {
+  margin-left: 20px;
+  align-items: unset;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-item-operation-wrapper {
+  margin-top: -12px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-item-operation-wrapper .comment-operation {
+  width: 24px;
+  height: 24px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__avatar {
+  width: 16px;
+  height: 16px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__avatar img {
+  border-radius: 50%;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__latest-reply {
+  margin-left: 8px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item .comment-footer .comment-author__latest-reply p {
+  margin: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 220px;
 }
 
 .sdoc-comment-drawer .sdoc-comment-list-container .comment-item-selected-text-container {
-  background-color: #F5F5F5;
-  border-bottom: 1px solid #c7c7c7;
+  color: #666666;
+  padding: 0px 0px 16px 0px;
+  height: auto;
 }
 
 .comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {
   border: 1px solid #dee3eb;
 }
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper {
+  border-bottom: 0px
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper:hover {
+  background-color: #FFF;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .comment-item-detail-wrapper .comment-operation .sdoc-confirm {
+  color: rgb(70, 77, 90);;
+  font-weight: unset;
+}

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

@@ -8,35 +8,40 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _reactstrap = require("reactstrap");
+var _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _useCommentList = _interopRequireDefault(require("../../hooks/comment-hooks/use-comment-list"));
 var _commentItemWrapper = _interopRequireDefault(require("../comment-item-wrapper"));
+var _commentItemCollapseWrapper = _interopRequireDefault(require("../comment-item-collapse-wrapper"));
 var _globalCommentHeader = _interopRequireDefault(require("./global-comment-header"));
 var _globalCommentBodyHeader = _interopRequireDefault(require("./global-comment-body-header"));
 var _constants = require("../../constants");
 var _context = _interopRequireDefault(require("../../../../context"));
-var _useCommentContext = require("../../hooks/comment-hooks/use-comment-context");
 var _globalCommentEditor = _interopRequireDefault(require("./global-comment-editor"));
 var _core = require("../../../extension/core");
 var _hooks = require("../../../../hooks");
 require("./index.css");
 const GlobalComment = _ref => {
   let {
-    deleteUnseenNotifications,
-    editor
+    editor,
+    t
   } = _ref;
-  const [activeComment, setActiveComment] = (0, _react.useState)(null);
-  const [showEditor, setShowEditor] = (0, _react.useState)(false);
-  const [isScrollDisplayed, setIsScrollDisplayed] = (0, _react.useState)(false);
   const commentRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
+  const {
+    closePlugin
+  } = (0, _hooks.usePlugins)();
+  const [activeCommentGroup, setActiveCommentGroup] = (0, _react.useState)(null);
+  const [showEditor, setShowEditor] = (0, _react.useState)(false);
+  const [isScrollDisplayed, setIsScrollDisplayed] = (0, _react.useState)(false);
+  const [globalCommentContent, setGlobalCommentContent] = (0, _react.useState)(null);
   const {
     commentList,
     commentType,
-    setCommentType
+    setCommentType,
+    dispatch
   } = (0, _useCommentList.default)();
-  const {
-    closePlugin
-  } = (0, _hooks.usePlugins)();
   const detectScroll = (0, _react.useCallback)(() => {
     if (!contentRef.current) return;
     const contentContainer = contentRef.current;
@@ -47,25 +52,13 @@ const GlobalComment = _ref => {
     detectScroll();
   }, [commentList, detectScroll]);
   const updateScrollPosition = (0, _react.useCallback)(() => {
+    var _contentRef$current;
     const resolvedDom = document.querySelector('.sdoc-resolved');
-    contentRef.current.scrollTo({
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.scrollTo({
       top: resolvedDom.offsetTop,
       behavior: 'smooth'
     });
   }, []);
-  const hiddenComment = (0, _react.useCallback)(() => {
-    setActiveComment(null);
-  }, []);
-  const onCommentClick = (0, _react.useCallback)((comment, element) => {
-    if (activeComment && activeComment.id === comment.id) return;
-    setActiveComment(comment);
-    deleteUnseenNotifications && deleteUnseenNotifications(comment);
-    if (comment.detail.element_id === _constants.DOC_COMMENT_ELEMENT_ID) return;
-    if (!element) return;
-  }, [activeComment, deleteUnseenNotifications]);
-  const {
-    dispatch
-  } = (0, _useCommentContext.useCommentContext)();
   const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
     const res = await _context.default.insertComment(comment);
     const {
@@ -85,9 +78,16 @@ const GlobalComment = _ref => {
         comment: newComment
       }
     });
-    setShowEditor(false);
   }, [dispatch]);
   const insertDocComment = (0, _react.useCallback)(commentDetail => {
+    var _contentRef$current2;
+    // Reply to a comment
+    if (activeCommentGroup && (_contentRef$current2 = contentRef.current) !== null && _contentRef$current2 !== void 0 && _contentRef$current2.insertContent) {
+      contentRef.current.insertContent(commentDetail);
+      return;
+    }
+
+    // Insert global comment
     const user = _context.default.getUserInfo();
     const elementId = _constants.DOC_COMMENT_ELEMENT_ID;
     const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
@@ -102,11 +102,7 @@ const GlobalComment = _ref => {
     };
     insertComment(elementId, comment);
     detectScroll();
-  }, [detectScroll, insertComment]);
-  const toggleGlobalCommentEditor = (0, _react.useCallback)(() => {
-    setShowEditor(!showEditor);
-    setActiveComment(null);
-  }, [showEditor]);
+  }, [activeCommentGroup, detectScroll, insertComment]);
   const hiddenCommentEditor = (0, _react.useCallback)(() => {
     setShowEditor(false);
   }, []);
@@ -114,6 +110,20 @@ const GlobalComment = _ref => {
     if (contentRef.current && contentRef.current.contains(event.target)) return true;
     return false;
   }, []);
+  const getNodeByElementId = (0, _react.useCallback)(elementId => {
+    if (elementId !== _constants.DOC_COMMENT_ELEMENT_ID) {
+      return (0, _core.getNodeById)(editor.children, elementId);
+    }
+    return null;
+  }, [editor.children]);
+  const setCurrentCommentGroup = (0, _react.useCallback)(commentGroupId => {
+    const activeCommentGroup = commentList.find(item => item.id === commentGroupId);
+    if (activeCommentGroup) {
+      setActiveCommentGroup(activeCommentGroup);
+    } else {
+      setActiveCommentGroup(null);
+    }
+  }, [commentList]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-comment-drawer"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -121,7 +131,8 @@ const GlobalComment = _ref => {
     className: "comments-panel-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_globalCommentHeader.default, {
     toggle: closePlugin,
-    toggleGlobalCommentEditor: toggleGlobalCommentEditor
+    activeCommentGroup: activeCommentGroup,
+    setCurrentCommentGroup: setCurrentCommentGroup
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "comments-panel-body"
   }, /*#__PURE__*/_react.default.createElement(_globalCommentBodyHeader.default, {
@@ -134,27 +145,52 @@ const GlobalComment = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "global-comment-list-container",
     className: "sdoc-comment-list-container"
-  }, Array.isArray(commentList) && commentList.map(comment => {
+  }, !activeCommentGroup && Array.isArray(commentList) && commentList.map(comment => {
+    var _comment$replies, _comment$replies2;
+    const latestComment = ((_comment$replies = comment.replies) === null || _comment$replies === void 0 ? void 0 : _comment$replies.length) > 0 ? comment.replies[comment.replies.length - 1] : comment;
+    const commentCount = ((_comment$replies2 = comment.replies) === null || _comment$replies2 === void 0 ? void 0 : _comment$replies2.length) + 1;
     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;
-    return /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+    const element = getNodeByElementId(elementId);
+    return /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
       key: comment.id,
+      editor: editor,
       element: element,
-      container: "global-comment-list-container",
-      comment: comment,
-      isActive: isActive,
-      onCommentClick: comment => onCommentClick(comment, element),
-      hiddenComment: hiddenComment,
-      updateScrollPosition: updateScrollPosition,
-      isClickCommentPanelBody: isClickCommentPanelBody,
-      editor: editor
+      topLevelComment: comment,
+      latestComment: latestComment,
+      commentCount: commentCount,
+      setCurrentCommentGroup: setCurrentCommentGroup
     });
-  }))), showEditor && /*#__PURE__*/_react.default.createElement(_globalCommentEditor.default, {
-    isScrollDisplayed: isScrollDisplayed,
+  }), activeCommentGroup && /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+    key: activeCommentGroup.id,
+    editor: editor,
+    element: getNodeByElementId(activeCommentGroup.detail.element_id),
+    container: "global-comment-list-container",
+    contentRef: contentRef,
+    comment: activeCommentGroup,
+    isGlobalComment: true,
+    isActive: true,
+    updateScrollPosition: updateScrollPosition,
     isClickCommentPanelBody: isClickCommentPanelBody,
+    setCurrentCommentGroup: setCurrentCommentGroup
+  }))), !showEditor && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('global-comment-input-wrapper', {
+      'active': globalCommentContent === null || globalCommentContent === void 0 ? void 0 : globalCommentContent.trim()
+    })
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    value: globalCommentContent !== null && globalCommentContent !== void 0 && globalCommentContent.trim() ? '.....' : '',
+    readOnly: true,
+    placeholder: t('Enter_comment_shift_enter_for_new_line_Enter_to_send'),
+    onFocus: () => {
+      setShowEditor(true);
+    }
+  })), showEditor && /*#__PURE__*/_react.default.createElement(_globalCommentEditor.default, {
+    globalCommentContent: globalCommentContent,
+    isScrollDisplayed: isScrollDisplayed,
     hiddenCommentEditor: hiddenCommentEditor,
-    insertDocComment: insertDocComment
+    insertDocComment: insertDocComment,
+    updateGlobalCommentContent: content => {
+      setGlobalCommentContent(content);
+    }
   }))));
 };
-var _default = exports.default = GlobalComment;
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(GlobalComment);

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

@@ -9,7 +9,8 @@ var _useCommentContext = require("./use-comment-context");
 var _constants = require("../../constants");
 const useCommentList = () => {
   const {
-    commentsInfo
+    commentsInfo,
+    dispatch
   } = (0, _useCommentContext.useCommentContext)();
   const {
     comment_list
@@ -31,6 +32,7 @@ const useCommentList = () => {
     }
   }, [commentType, comment_list]);
   return {
+    dispatch,
     commentList,
     commentType,
     setCommentType

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

@@ -59,7 +59,6 @@ const CommentWrapper = _ref => {
     deleteUnseenNotifications: deleteUnseenNotifications,
     editor: editor
   }), type === 'global' && /*#__PURE__*/_react.default.createElement(_components.GlobalComment, {
-    deleteUnseenNotifications: deleteUnseenNotifications,
     editor: editor
   }));
 };

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

@@ -27,7 +27,7 @@ const RenderCommentEditorCustomRenderElement = props => {
           const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
           return renderParagraph(_props);
         }
-        const placeholder = commentType === 'comment' ? 'Enter_comment_Enter_for_new_line_shift_enter_to_send' : 'Enter_reply_Enter_for_new_line_Shift_Enter_to_send';
+        const placeholder = commentType === 'comment' ? 'Enter_comment_shift_enter_for_new_line_Enter_to_send' : 'Enter_reply_shift_Enter_for_new_line_Enter_to_send';
         const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
         return renderParagraph({
           ..._props,

package/package.json

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

package/public/locales/cs/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabulka",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/de/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabelle",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/en/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Table",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/es/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabla",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/es_AR/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabla",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/es_MX/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabla",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/fr/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tableau",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/it/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Double click to enter edit mode and adjust field width",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Enter comment, Enter for new line, Shift + Enter to send",
   "Sub_table": "Tabella",
-  "Search_action...": "Search action..."
+  "Search_action...": "Search action...",
+  "Comment_details": "Comment details"
 }

package/public/locales/ru/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "Дважды щелкните, чтобы войти в режим редактирования и отрегулировать ширину поля",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "Введите комментарий, Enter для новой строки, Shift + Enter для отправки",
   "Sub_table": "Таблица",
-  "Search_action...": "Search action..."
+  "Search_action...": "Поиск действия...",
+  "Comment_details": "Comment details"
 }

package/public/locales/zh_CN/sdoc-editor.json

@@ -565,5 +565,6 @@
   "Double_click_to_enter_edit_mode_and_adjust_field_width" : "双击可进入编辑模式并调整字段宽度",
   "Enter_comment_Enter_for_new_line_shift_enter_to_send": "输入评论，Enter 换行，Shift + Enter 发送",
   "Sub_table": "子表",
-  "Search_action...": "搜索操作..."
+  "Search_action...": "搜索操作...",
+  "Comment_details": "评论详情"
 }