@seafile/sdoc-editor 2.0.69 → 2.0.71

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

@@ -10,23 +10,23 @@ const commentDecorate = editor => _ref => {
   let [node, path] = _ref;
   const decorations = [];
   const comments = ((_editor$element_comme = editor.element_comments_map) === null || _editor$element_comme === void 0 ? void 0 : _editor$element_comme[node.id]) || [];
-  const unresolvedComments = comments && comments.filter(item => !item.resolved);
-  if (unresolvedComments && unresolvedComments.length > 0) {
-    let decoration = {
-      anchor: {
-        path,
-        offset: 0
-      },
-      focus: {
-        path: path,
-        offset: _slate.Node.string(node).length
-      }
-    };
-
-    // rgba prevents occlusion of the cursor
-    decoration['computed_background_color'] = 'rgba(129, 237, 247, 0.5)';
-    decoration['comment_count'] = unresolvedComments === null || unresolvedComments === void 0 ? void 0 : unresolvedComments.length;
-    decorations.push(decoration);
+  const unresolvedComments = comments && comments.filter(item => !(item !== null && item !== void 0 && item.resolved));
+  for (const comment of unresolvedComments) {
+    if (comment.detail.element_id) {
+      const commentedContextId = comment.detail.text_comment_id;
+      // rgba prevents occlusion of the cursor
+      decorations.push({
+        anchor: {
+          path,
+          offset: 0
+        },
+        focus: {
+          path: path,
+          offset: _slate.Node.string(node).length
+        },
+        [`sdoc_comment_${commentedContextId}`]: true
+      });
+    }
   }
   return decorations;
 };

package/dist/basic-sdk/comment/components/comment-context-menu/index.css

@@ -0,0 +1,16 @@
+.menu-group-item.sdoc-comment-menu-container {
+  width: 90px;
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-comment-menu-item .sdoc-comments {
+  margin-right: 4px;
+}
+
+.sdoc-context-menu-divider {
+  margin-right: 8px;
+  border-left: 1px solid #e5e5e5;
+  width: 1px;
+  height: 24px;
+}

package/dist/basic-sdk/comment/components/comment-context-menu/index.js

@@ -0,0 +1,38 @@
+"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 _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+require("./index.css");
+const CommentContextMenu = _ref => {
+  let {
+    isRichEditor
+  } = _ref;
+  const onCommentClick = (0, _react.useCallback)(event => {
+    const eventBus = _eventBus.default.getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT);
+  }, []);
+  const commentProps = {
+    id: 'context-toolbar-comment',
+    isRichEditor,
+    className: 'menu-group-item sdoc-comment-menu-container',
+    disabled: false,
+    isActive: false,
+    onMouseDown: onCommentClick,
+    iconClass: 'sdocfont sdoc-comments',
+    text: 'Comment',
+    ariaLabel: 'Add_Comment',
+    type: 'sdoc-add-comment'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-context-menu-divider"
+  }), /*#__PURE__*/_react.default.createElement(_menuItem.default, commentProps));
+};
+var _default = exports.default = CommentContextMenu;

package/dist/basic-sdk/comment/components/comment-context-menu/menu-item.js

@@ -0,0 +1,57 @@
+"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 _reactI18next = require("react-i18next");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+const MenuItem = _ref => {
+  let {
+    isRichEditor = true,
+    className = 'menu-group-item',
+    disabled,
+    isActive,
+    type,
+    onMouseDown,
+    id,
+    text,
+    ariaLabel,
+    iconClass
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onClick = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  const validClassName = (0, _classnames.default)('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: id,
+    type: "button",
+    "aria-label": ariaLabel,
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-comment-menu-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/_react.default.createElement("span", null, t(text)))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: id
+  }, t(ariaLabel)));
+};
+var _default = exports.default = MenuItem;

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

@@ -40,7 +40,9 @@ const CommentEditor = _ref => {
     setIsEditing,
     hiddenComment,
     hiddenUserInfo,
-    onContentChange
+    onContentChange,
+    isContextComment,
+    closeComment
   } = _ref;
   const commentWrapperRef = (0, _react.useRef)();
   const {
@@ -88,7 +90,8 @@ const CommentEditor = _ref => {
     })];
     _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
     onContentChange && onContentChange(null);
-  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange]);
+    closeComment && closeComment();
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
   const onSubmitByEnterKey = (0, _react.useCallback)(event => {
     if (!_slateReact.ReactEditor.isFocused(editor)) return;
     onSubmit(event);

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

@@ -14,8 +14,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 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 {
     element,
     topLevelComment,
@@ -82,7 +84,21 @@ const CommentItemCollapseWrapper = _ref => {
       'd-flex flex-column': element
     }),
     onClick: onItemClick
-  }, element && /*#__PURE__*/_react.default.createElement("div", {
+  }, topLevelComment.detail.element_id_list && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('comment-item-selected-text-container', {
+      'detail-context-comment': ((_topLevelComment$deta = topLevelComment.detail.element_id_list) === null || _topLevelComment$deta === void 0 ? void 0 : _topLevelComment$deta.length) > 0
+    }),
+    onClick: handleScrollToArticle
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-selected-text"
+  }, topLevelComment.detail.element_id_list.map((elementId, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "context-comment-item-selected-text",
+      key: index
+    }, (0, _helper.getCommentedTextsByElementId)(elementId, topLevelComment.detail.text_comment_id));
+  }))), element && /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-item-selected-text-container",
     onClick: handleScrollToArticle
   }, /*#__PURE__*/_react.default.createElement("i", {

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

@@ -13,24 +13,31 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _context = _interopRequireDefault(require("../../../context"));
 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"));
-const CommentItemWrapper = _ref => {
+const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     container = 'sdoc-comment-list-container',
     editor,
     element,
     isActive,
     comment,
+    commentsDetail,
+    setIsClickedContextComment,
+    setIsCommentPanelVisible,
+    onSelectElement,
     isGlobalComment,
     commentDetailRef,
     updateScrollPosition,
     setCurrentCommentGroup,
     onCommentClick,
     isEmptyComment,
-    isCollapseCommentEditor
+    isCollapseCommentEditor,
+    isClickedContextComment = false,
+    closeComment
   } = _ref;
   const listRef = (0, _react.useRef)(null);
   const {
@@ -44,9 +51,15 @@ const CommentItemWrapper = _ref => {
   } : {};
   const deleteComment = (0, _react.useCallback)(async commentId => {
     await _context.default.deleteComment(commentId);
-    const {
-      element_id: elementId
+    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: {
@@ -54,12 +67,11 @@ const CommentItemWrapper = _ref => {
         comment_id: commentId
       }
     });
-  }, [comment.detail, dispatch]);
+    closeComment && closeComment();
+  }, [comment.detail, dispatch, editor]);
   const updateComment = (0, _react.useCallback)(async (commentId, newComment) => {
     await _context.default.updateComment(commentId, newComment);
-    const {
-      element_id: elementId
-    } = comment.detail;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
     dispatch({
       type: 'UPDATE_COMMENT',
       payload: {
@@ -91,9 +103,26 @@ const CommentItemWrapper = _ref => {
       user_name: returnReply.user_name,
       avatar_url: returnReply.avatar_url
     };
-    const {
-      element_id: elementId
-    } = comment.detail;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    if (newComment.resolved === true) {
+      const resolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
+      if (resolvedComment.detail.element_id_list) {
+        var _resolvedComment$deta;
+        (0, _helper.updateCommentedElementsAttrs)(resolvedComment.detail.element_id_list, editor, (_resolvedComment$deta = resolvedComment.detail) === null || _resolvedComment$deta === void 0 ? void 0 : _resolvedComment$deta.text_comment_id, !newComment.resolved);
+        closeComment && closeComment();
+      }
+      if (commentsDetail && Object.values(commentsDetail).length === 1) {
+        setIsClickedContextComment(false);
+        setIsCommentPanelVisible(false);
+      }
+    }
+    if (newComment.resolved === false && comment.detail.element_id_list) {
+      const unresolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
+      if (unresolvedComment.detail.element_id_list) {
+        var _unresolvedComment$de;
+        (0, _helper.updateCommentedElementsAttrs)(unresolvedComment.detail.element_id_list, editor, (_unresolvedComment$de = unresolvedComment.detail) === null || _unresolvedComment$de === void 0 ? void 0 : _unresolvedComment$de.text_comment_id, !newComment.resolved);
+      }
+    }
     dispatch({
       type: 'INSERT_REPLY',
       payload: {
@@ -115,16 +144,14 @@ const CommentItemWrapper = _ref => {
     });
 
     // If the status of the comment is set to resolved, the page jumps to the position of the comment
-    if (newComment.resolved === true) {
+    if (!isClickedContextComment && newComment.resolved === true) {
       setTimeout(() => {
         updateScrollPosition && updateScrollPosition();
       }, 100);
     }
-  }, [comment.detail, dispatch, updateScrollPosition]);
+  }, [comment, commentsDetail, dispatch, editor, isClickedContextComment, setIsClickedContextComment, setIsCommentPanelVisible, updateScrollPosition]);
   const insertReply = (0, _react.useCallback)(async (commentId, replies) => {
-    const {
-      element_id: elementId
-    } = comment.detail;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
     for (let i = 0; i < replies.length; i++) {
       const reply = replies[i];
       const res = await _context.default.insertReply(commentId, reply);
@@ -199,14 +226,12 @@ const CommentItemWrapper = _ref => {
     replies.push(reply);
     insertReply(comment.id, replies);
   }, [comment.id, comment.resolved, insertReply]);
-  (0, _react.useImperativeHandle)(commentDetailRef, () => ({
+  (0, _react.useImperativeHandle)(ref ? ref : commentDetailRef, () => ({
     insertContent
   }));
   const deleteReply = (0, _react.useCallback)(async replyId => {
     const commentId = comment.id;
-    const {
-      element_id: elementId
-    } = comment.detail;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
     await _context.default.deleteReply(commentId, replyId);
     dispatch({
       type: 'DELETE_REPLY',
@@ -219,9 +244,7 @@ const CommentItemWrapper = _ref => {
   }, [comment.detail, comment.id, dispatch]);
   const updateReply = (0, _react.useCallback)(async (replyId, newReply) => {
     const commentId = comment.id;
-    const {
-      element_id: elementId
-    } = comment.detail;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
     await _context.default.updateReply(commentId, replyId, newReply);
     dispatch({
       type: 'UPDATE_REPLY',
@@ -244,7 +267,16 @@ const CommentItemWrapper = _ref => {
     deleteComment(comment.id);
     setIsShowDeletePopover(false);
     setCurrentCommentGroup && setCurrentCommentGroup(null);
-  }, [comment.id, deleteComment, setCurrentCommentGroup]);
+    if (isClickedContextComment) {
+      if (Object.values(commentsDetail).length === 1) {
+        setIsClickedContextComment(false);
+        setIsCommentPanelVisible(false);
+      } else {
+        const newCommentIdArray = Object.values(commentsDetail).filter(item => item.id !== comment.id).map(item => item.detail.text_comment_id);
+        onSelectElement(newCommentIdArray, true);
+      }
+    }
+  }, [comment.id, commentsDetail, deleteComment, isClickedContextComment, onSelectElement, setCurrentCommentGroup, setIsClickedContextComment, setIsCommentPanelVisible]);
   (0, _react.useEffect)(() => {
     if (!isActive) {
       setIsShowDeletePopover(false);
@@ -266,8 +298,9 @@ const CommentItemWrapper = _ref => {
       behavior: 'smooth'
     });
   }, [editor, element, scrollRef]);
+  const newCommentId = isClickedContextComment && comment !== null && comment !== void 0 && comment.detail.element_id_list ? comment === null || comment === void 0 ? void 0 : comment.detail.element_id_list[0] : comment === null || comment === void 0 ? void 0 : comment.id;
   return /*#__PURE__*/_react.default.createElement("div", {
-    id: `comment-item-wrapper_${comment === null || comment === void 0 ? void 0 : comment.id}`,
+    id: `comment-item-wrapper_${newCommentId}`,
     className: className,
     onClick: onItemClick
   }, element && /*#__PURE__*/_react.default.createElement("div", {
@@ -281,16 +314,38 @@ const CommentItemWrapper = _ref => {
     ref: listRef,
     className: "comment-item-list",
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
-    key: comment.id,
+  }, comment.detail.element_id_list && !isGlobalComment && /*#__PURE__*/_react.default.createElement("div", {
+    className: "context-comment-item-selected-text-container"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "context-comment-items"
+  }, comment.detail.element_id_list.map((elementId, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "context-comment-item-selected-text",
+      key: index
+    }, (0, _helper.getCommentedTextsByElementId)(elementId, comment.detail.text_comment_id));
+  }))), /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
+    key: newCommentId,
     container: container,
     isActive: isActive,
     comment: comment,
     updateComment: updateComment,
     updateCommentState: updateCommentState,
     onDeleteComment: onDeleteComment,
-    targetId: commentOpToolsId
-  }), comment.replies && comment.replies.length > 0 && comment.replies.map(reply => {
+    targetId: commentOpToolsId,
+    isClickedContextComment: isClickedContextComment
+  }), isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
+    const props = {
+      key: reply.id,
+      isActive,
+      container,
+      reply,
+      deleteReply,
+      updateReply
+    };
+    return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
+  }), !isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
     const props = {
       key: reply.id,
       isActive,
@@ -307,5 +362,5 @@ const CommentItemWrapper = _ref => {
     setIsShowDeletePopover: setIsShowDeletePopover,
     parentDom: listRef.current
   }));
-};
+});
 var _default = exports.default = CommentItemWrapper;

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

@@ -38,6 +38,40 @@
   padding-bottom: 0px;
 }
 
+.sdoc-context-comment-list-container {
+  max-height: 430px;
+  overflow-y: auto;
+}
+
+.sdoc-context-comment-popover-wrapper .comment-item-list {
+  border-bottom: none !important;
+}
+
+.sdoc-context-comment-popover-wrapper .non-global-comment-input-wrapper {
+  border-bottom: 1px solid #ececec;
+}
+
+.sdoc-comment-list-container .sdoc-context-comment-popover-wrapper:last-child .non-global-comment-input-wrapper {
+  border-bottom: none !important;
+}
+
+.sdoc-comment-list-container .comment-item-list .context-comment-item-selected-text-container {
+  padding: 16px 16px 0 16px;
+  color: #666;
+  display: flex;
+}
+
+.comment-item-list .context-comment-item-selected-text-container .sdoc-comment-quote {
+  font-size: 12px;
+  padding-top: 2px;
+}
+
+.comment-item-list .context-comment-item-selected-text-container .context-comment-items {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
 .sdoc-comment-list-container .comment-item {
   position: relative;
   padding: 0px;

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

@@ -9,38 +9,56 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
+var _slugid = _interopRequireDefault(require("slugid"));
 var _context = _interopRequireDefault(require("../../../context"));
 var _useSelectionPosition = require("../../hooks/use-selection-position");
+var _helper = require("../helper");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _commentEditor = _interopRequireDefault(require("./comment-editor"));
 var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
 require("./comment-list.css");
 const CommentList = _ref => {
   let {
-    activeElement,
+    activeElementIds,
     commentDetail = {},
     onSetCommentDetail,
+    isContextComment = false,
+    isClickedContextComment = false,
+    setIsClickedContextComment,
+    onSelectElement,
+    closeComment,
+    commentedDom,
+    editor,
     t
   } = _ref;
   const commentPopover = (0, _react.useRef)(null);
   const commentDetailRef = (0, _react.useRef)(null);
-  const position = (0, _useSelectionPosition.useCommentListPosition)(activeElement);
+  const position = (0, _useSelectionPosition.useCommentListPosition)(activeElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment);
   const {
     dispatch
   } = (0, _useCommentContext.useCommentContext)();
   const [showEditor, setShowEditor] = (0, _react.useState)(false);
   const [inputContent, setInputContent] = (0, _react.useState)(null);
-  const [translateY, setTranslateY] = (0, _react.useState)(0);
+  const [activeCommentKey, setActiveCommentKey] = (0, _react.useState)(null);
+  const [translateY, setTranslateY] = (0, _react.useState)();
   const isEmptyComment = Object.keys(commentDetail).length ? false : true;
   const isCollapseCommentEditor = !isEmptyComment && !showEditor;
-  const insertComment = (0, _react.useCallback)(async (elementId, comment) => {
+  const [isCommentPanelVisible, setIsCommentPanelVisible] = (0, _react.useState)(true);
+
+  // Multi context comments
+  const [commentInputs, setCommentInputs] = (0, _react.useState)({});
+  const contextCommentRef = (0, _react.useRef)({});
+  const insertComment = (0, _react.useCallback)(async function (elementId, comment) {
+    let isContextComment = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     const res = await _context.default.insertComment(comment);
     const {
       comment: returnComment
     } = res.data;
     const newComment = {
       ...comment,
+      isContextComment: isContextComment,
       id: returnComment.id,
       user_name: returnComment.user_name,
       avatar_url: returnComment.avatar_url,
@@ -58,19 +76,20 @@ const CommentList = _ref => {
   }, [dispatch, onSetCommentDetail]);
   const addNewComment = (0, _react.useCallback)(content => {
     const user = _context.default.getUserInfo();
-    const elementId = activeElement === null || activeElement === void 0 ? void 0 : activeElement.id;
     const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
+    const textCommentId = _slugid.default.nice();
     const comment = {
       comment: content,
       detail: {
-        element_id: elementId,
-        comment: content
+        text_comment_id: textCommentId,
+        element_id_list: activeElementIds
       },
       author: user.username,
       updated_at: time
     };
-    insertComment(elementId, comment);
-  }, [insertComment, activeElement === null || activeElement === void 0 ? void 0 : activeElement.id]);
+    (0, _helper.updateElementsAttrs)(activeElementIds, editor, textCommentId);
+    insertComment(activeElementIds[0], comment, isContextComment);
+  }, [isContextComment, activeElementIds, editor, insertComment]);
   const replyComment = (0, _react.useCallback)(content => {
     if (commentDetailRef !== null && commentDetailRef !== void 0 && commentDetailRef.current) {
       commentDetailRef.current.insertContent(content);
@@ -81,7 +100,7 @@ const CommentList = _ref => {
   }, []);
   (0, _react.useEffect)(() => {
     queueMicrotask(() => {
-      if (commentPopover !== null && commentPopover !== void 0 && commentPopover.current) {
+      if (commentPopover !== null && commentPopover !== void 0 && commentPopover.current && Array.isArray(activeElementIds)) {
         const {
           bottom
         } = commentPopover.current.getBoundingClientRect();
@@ -94,23 +113,78 @@ const CommentList = _ref => {
         }
       }
     });
-  }, [activeElement]);
+  }, [activeElementIds]);
+  const handleInputChange = (id, value) => {
+    setCommentInputs(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+  const handleReplySubmit = (content, id) => {
+    var _contextCommentRef$cu;
+    if (contextCommentRef !== null && contextCommentRef !== void 0 && (_contextCommentRef$cu = contextCommentRef.current) !== null && _contextCommentRef$cu !== void 0 && _contextCommentRef$cu[id]) {
+      contextCommentRef.current[id].insertContent(content);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: commentPopover,
     id: "sdoc-comment-list-container",
-    className: "sdoc-comment-list-container sdoc-comment-list-container-popover",
+    className: (0, _classnames.default)('sdoc-comment-list-container sdoc-comment-list-container-popover', 'sdoc-context-comment-list-container'),
     style: {
       top: position.y,
+      ...(isContextComment || isClickedContextComment ? {
+        right: position.right
+      } : {}),
       width: '300px',
       transform: `translateY(${translateY}px)`
     }
-  }, /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
-    commentDetailRef: commentDetailRef,
-    comment: commentDetail,
-    isActive: true,
-    isEmptyComment: isEmptyComment,
-    isCollapseCommentEditor: isCollapseCommentEditor
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, Object.values(commentDetail).length !== 0 && isCommentPanelVisible && Object.values(commentDetail).map((item, index) => {
+    const isActiveEditor = activeCommentKey === index;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-context-comment-popover-wrapper",
+      key: item.id || index
+    }, /*#__PURE__*/_react.default.createElement(_commentItemWrapper.default, {
+      ref: el => {
+        if (el) contextCommentRef.current[item.id] = el;else delete contextCommentRef.current[item.id];
+      },
+      editor: editor,
+      comment: item,
+      commentsDetail: commentDetail,
+      setIsClickedContextComment: setIsClickedContextComment,
+      setIsCommentPanelVisible: setIsCommentPanelVisible,
+      onSelectElement: onSelectElement,
+      isActive: true,
+      isEmptyComment: isEmptyComment,
+      isCollapseCommentEditor: isCollapseCommentEditor,
+      isClickedContextComment: isClickedContextComment,
+      closeComment: closeComment
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "non-global-comment-input-wrapper",
+      style: {
+        paddingTop: isEmptyComment ? '16px' : ''
+      }
+    }, isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+      type: "comment",
+      insertContent: addNewComment,
+      hiddenComment: hiddenComment,
+      isContextComment: isContextComment,
+      closeComment: closeComment
+    }), !isEmptyComment && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isActiveEditor && /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+      value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
+      readOnly: true,
+      placeholder: t('Enter_reply'),
+      onFocus: () => {
+        setActiveCommentKey(index);
+      }
+    }), isActiveEditor && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
+      type: "reply",
+      placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
+      commentContent: commentInputs[item.id] || '',
+      insertContent: value => handleReplySubmit(value, item.id),
+      onContentChange: content => handleInputChange(item.id, content),
+      hiddenComment: hiddenComment
+    }))));
+  }), Object.values(commentDetail).length === 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "non-global-comment-input-wrapper",
     style: {
       paddingTop: isEmptyComment ? '16px' : ''
@@ -118,7 +192,9 @@ const CommentList = _ref => {
   }, isEmptyComment && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
     type: "comment",
     insertContent: addNewComment,
-    hiddenComment: hiddenComment
+    hiddenComment: hiddenComment,
+    isContextComment: isContextComment,
+    closeComment: closeComment
   }), !isEmptyComment && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !showEditor && /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
     value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
     readOnly: true,