@seafile/sdoc-editor 1.0.176-beta1 → 1.0.177

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

@@ -38,7 +38,6 @@ const CommentEditor = _ref => {
     updateContent,
     setIsEditing,
     hiddenComment,
-    commentRef,
     globalComment,
     hiddenUserInfo,
     updateGlobalCommentContent

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

@@ -30,7 +30,9 @@ const CommentItemWrapper = _ref => {
     updateScrollPosition,
     hiddenComment,
     setCurrentCommentGroup,
-    onCommentClick
+    onCommentClick,
+    isEmptyComment,
+    addNewComment
   } = _ref;
   const listRef = (0, _react.useRef)(null);
   const {
@@ -38,7 +40,7 @@ const CommentItemWrapper = _ref => {
   } = (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 commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
   const deleteComment = (0, _react.useCallback)(async commentId => {
     await _context.default.deleteComment(commentId);
     const {
@@ -249,12 +251,11 @@ const CommentItemWrapper = _ref => {
   }, [isActive]);
   const className = (0, _classnames.default)('comment-ui-container', {
     'active': isActive,
-    'sdoc-resolved': comment.resolved,
+    'sdoc-resolved': comment === null || comment === void 0 ? void 0 : comment.resolved,
     'd-flex flex-column': element,
     'global-comment-item-detail-wrapper': isGlobalComment,
     'comment-item-detail-wrapper': !isGlobalComment
   });
-  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);
@@ -265,7 +266,7 @@ const CommentItemWrapper = _ref => {
     });
   }, [editor, element, scrollRef]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    id: `comment-item-wrapper_${comment.id}`,
+    id: `comment-item-wrapper_${comment === null || comment === void 0 ? void 0 : comment.id}`,
     className: className,
     onClick: onItemClick
   }, element && /*#__PURE__*/_react.default.createElement("div", {
@@ -275,7 +276,7 @@ const CommentItemWrapper = _ref => {
     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", {
+  }, _slate.Node.string(element))), !isEmptyComment && /*#__PURE__*/_react.default.createElement("div", {
     ref: listRef,
     className: "comment-item-list"
   }, /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
@@ -297,11 +298,19 @@ const CommentItemWrapper = _ref => {
       updateReply
     };
     return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
-  })), !isGlobalComment && isActive && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sdoc-reply-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+  })), !isGlobalComment && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-reply-wrapper",
+    style: {
+      paddingTop: isEmptyComment ? '16px' : ''
+    }
+  }, isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+    type: "comment",
+    placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
+    insertContent: addNewComment,
+    hiddenComment: hiddenComment
+  }), !isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
     type: "reply",
-    placeholder: tip,
+    placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
     insertContent: insertContent,
     hiddenComment: hiddenComment
   })), isShowDeleteDialog && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {

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

@@ -9,7 +9,7 @@
 }
 
 .sdoc-comment-list-container .comment-ui-container {
-  background-color: rgba(255, 255, 255, .99);
+  background-color: rgba(255, 255, 255);
   margin-bottom: 0px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
   padding: 16px;
@@ -37,7 +37,7 @@
 .sdoc-comment-list-container .comment-ui-container.active {
   position: relative;
   left: -5px;
-  background: rgba(255, 255, 255, .92);
+  background: rgba(255, 255, 255, 1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
@@ -340,10 +340,6 @@
   justify-content: flex-end;
 }
 
-.sdoc-reply-wrapper {
-  padding: 0 10px;
-}
-
 .sdoc-doc-comment-editor-container.sdoc-comment-list-container .comment-ui-container {
   padding-left: 10px;
   padding-right: 10px;

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

@@ -11,24 +11,23 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _context = _interopRequireDefault(require("../../../context"));
 var _useSelectionPosition = require("../../hooks/use-selection-position");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
 var _commentItemCollapseWrapper = _interopRequireDefault(require("./comment-item-collapse-wrapper"));
 require("./comment-list.css");
 const CommentList = _ref => {
-  var _topLevelComment$repl, _topLevelComment$repl2;
   let {
     editor,
-    comments,
+    comments = [],
+    commentDetail = {},
     activeElement,
-    hiddenComment
+    isShowCommentDetail,
+    onSetCommentDetail,
+    deleteUnseenNotifications
   } = _ref;
-  const commentRef = (0, _react.useRef)(null);
   const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
-  const [isShowCommentDetail, setIsShowCommentDetail] = (0, _react.useState)(false);
   const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
     const res = await _context.default.insertComment(comment);
     const {
@@ -48,7 +47,8 @@ const CommentList = _ref => {
         comment: newComment
       }
     });
-  }, [dispatch]);
+    onSetCommentDetail(newComment);
+  }, [dispatch, onSetCommentDetail]);
   const insertContent = (0, _react.useCallback)(content => {
     const user = _context.default.getUserInfo();
     const elementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
@@ -63,47 +63,37 @@ const CommentList = _ref => {
       updated_at: time
     };
     insertComment(elementId, comment);
-    setIsShowCommentDetail(true);
   }, [insertComment, activeElement === null || activeElement === void 0 ? void 0 : activeElement.id]);
-  const setCurrentCommentGroup = (0, _react.useCallback)(() => {
-    setIsShowCommentDetail(true);
-  }, []);
-  const topLevelComment = (comments === null || comments === void 0 ? void 0 : comments.length) > 0 ? comments[0] : {};
-  const replyCount = topLevelComment === null || topLevelComment === void 0 ? void 0 : (_topLevelComment$repl = topLevelComment.replies) === null || _topLevelComment$repl === void 0 ? void 0 : _topLevelComment$repl.length;
-  const latestReply = ((_topLevelComment$repl2 = topLevelComment.replies) === null || _topLevelComment$repl2 === void 0 ? void 0 : _topLevelComment$repl2.length) > 0 ? topLevelComment.replies[topLevelComment.replies.length - 1] : null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: commentRef,
     id: "sdoc-comment-list-container",
     className: "sdoc-comment-list-container sdoc-comment-list-container-popover",
     style: {
       top: position.y,
       width: '300px'
     }
-  }, !isShowCommentDetail && Object.keys(topLevelComment).length > 0 && /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
-    key: comments.id,
-    editor: editor,
-    topLevelComment: topLevelComment,
-    replyCount: replyCount,
-    latestReply: latestReply,
-    setCurrentCommentGroup: setCurrentCommentGroup
-  }), !isShowCommentDetail && comments.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-ui-container active"
-  }, /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    type: "comment",
-    globalComment: true,
-    insertContent: insertContent,
-    hiddenComment: hiddenComment,
-    commentRef: commentRef
-  })), isShowCommentDetail && comments.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+  }, !isShowCommentDetail && comments.map(comment => {
+    var _topLevelComment$repl, _topLevelComment$repl2;
+    const topLevelComment = comment || {};
+    const replyCount = topLevelComment === null || topLevelComment === void 0 ? void 0 : (_topLevelComment$repl = topLevelComment.replies) === null || _topLevelComment$repl === void 0 ? void 0 : _topLevelComment$repl.length;
+    const latestReply = ((_topLevelComment$repl2 = topLevelComment.replies) === null || _topLevelComment$repl2 === void 0 ? void 0 : _topLevelComment$repl2.length) > 0 ? topLevelComment.replies[topLevelComment.replies.length - 1] : null;
+    return /*#__PURE__*/_react.default.createElement(_commentItemCollapseWrapper.default, {
+      key: topLevelComment.id,
+      editor: editor,
+      topLevelComment: topLevelComment,
+      replyCount: replyCount,
+      latestReply: latestReply,
+      setCurrentCommentGroup: () => {
+        deleteUnseenNotifications && deleteUnseenNotifications(topLevelComment);
+        onSetCommentDetail(topLevelComment);
+      }
+    });
+  }), isShowCommentDetail && /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-list"
-  }, comments.map(comment => {
-    if (comment.resolved) return null;
-    const props = {
-      key: comment.id,
-      comment: comment,
-      isActive: true
-    };
-    return /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, props);
+  }, /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+    comment: commentDetail,
+    isActive: true,
+    isEmptyComment: Object.keys(commentDetail).length ? false : true,
+    addNewComment: insertContent
   })));
 };
 var _default = exports.default = CommentList;

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

@@ -32,6 +32,8 @@ const EditorComment = _ref => {
   const [activeElement, setActiveElement] = (0, _react.useState)(null); // The slate node currently activated by clicking
   const [comments, setComments] = (0, _react.useState)([]);
   const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
+  const [isShowCommentDetail, setIsShowCommentDetail] = (0, _react.useState)(true);
+  const [commentDetail, setCommentDetail] = (0, _react.useState)({});
   const onAddCommentToggle = (0, _react.useCallback)(event => {
     event.stopPropagation();
     let activeElement = currentSelectionElement;
@@ -41,6 +43,8 @@ const EditorComment = _ref => {
     }
     setActiveElement(activeElement);
     setIsShowComments(true);
+    setIsShowCommentDetail(true);
+    setCommentDetail({});
   }, [currentSelectionElement]);
   const onSelectElement = (0, _react.useCallback)(elementId => {
     const activeElement = (0, _index.getCommentElementById)(elementId, editor);
@@ -48,9 +52,15 @@ const EditorComment = _ref => {
     const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
     setComments(unresolvedComments);
     setIsShowComments(true);
+    setIsShowCommentDetail(false);
   }, [editor, element_comments_map]);
+  const onSetCommentDetail = (0, _react.useCallback)(comment => {
+    setCommentDetail(comment);
+    setIsShowCommentDetail(true);
+  }, []);
   const hiddenComment = (0, _react.useCallback)(() => {
     setComments([]);
+    setCommentDetail({});
     setIsShowComments(false);
   }, []);
 
@@ -117,8 +127,9 @@ const EditorComment = _ref => {
     editor: editor,
     comments: comments,
     activeElement: activeElement,
-    onSelectElement: onSelectElement,
-    hiddenComment: hiddenComment,
+    isShowCommentDetail: isShowCommentDetail,
+    commentDetail: commentDetail,
+    onSetCommentDetail: onSetCommentDetail,
     deleteUnseenNotifications: deleteUnseenNotifications
   })));
 };

package/package.json

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