@seafile/sdoc-editor 2.0.68 → 2.0.70

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

@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
-var _constants2 = require("../../extension/constants");
+var _helpers = require("../../extension/plugins/ai/ai-module/helpers");
 var _useSelectionElement = require("../../hooks/use-selection-element");
 var _useSelectionUpdate = _interopRequireDefault(require("../../hooks/use-selection-update"));
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
 var _helper = require("../helper");
 var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
 var _index = require("../utils/index");
@@ -28,39 +30,84 @@ const EditorComment = _ref => {
   const currentSelectionElement = (0, _useSelectionElement.useSelectionElement)({
     editor
   }); // The slate node of the current cursor line
-  const [activeElement, setActiveElement] = (0, _react.useState)(null); // The slate node currently activated by clicking
+  const [activeElementIds, setActiveElementIds] = (0, _react.useState)([]); // The elements currently activated by clicking
   const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
   const [commentDetail, setCommentDetail] = (0, _react.useState)({});
-  const onAddCommentToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    let activeElement = currentSelectionElement;
-    // Add comments to image elements in the image block
-    if (currentSelectionElement.type === _constants2.ELEMENT_TYPE.IMAGE_BLOCK) {
-      activeElement = currentSelectionElement.children.find(item => (item === null || item === void 0 ? void 0 : item.type) === _constants2.ELEMENT_TYPE.IMAGE);
-    }
-    setActiveElement(activeElement);
-    setIsShowComments(true);
+  const [isContextComment, setIsContextComment] = (0, _react.useState)(false);
+  const [isClickedContextComment, setIsClickedContextComment] = (0, _react.useState)(false);
+  const commentedDomRef = (0, _react.useRef)(null);
+  const hiddenComment = (0, _react.useCallback)(() => {
     setCommentDetail({});
-  }, [currentSelectionElement]);
-  const onSelectElement = (0, _react.useCallback)(elementId => {
-    const activeElement = (0, _index.getCommentElementById)(elementId, editor);
-    setActiveElement(activeElement);
-    const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
-    setCommentDetail(unresolvedComments[0]);
+    setIsShowComments(false);
+    setIsContextComment(false);
+    (0, _helpers.removeMarks)(editor);
+    setIsClickedContextComment(false);
+  }, [editor]);
+  const onSelectElement = (0, _react.useCallback)(function (elementId) {
+    let isClickInContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!isClickInContext) {
+      hiddenComment();
+      const activeElementIds = [elementId];
+      setActiveElementIds(activeElementIds);
+      const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
+      setCommentDetail({
+        ...unresolvedComments
+      });
+      setIsClickedContextComment(false);
+    }
     setIsShowComments(true);
-  }, [editor, element_comments_map]);
+    if (isClickInContext) {
+      const clickedComments = [];
+      for (const comments of Object.values(editor.element_comments_map)) {
+        for (const comment of comments) {
+          if (elementId.includes(comment.detail.text_comment_id)) {
+            clickedComments.push(comment);
+          }
+        }
+      }
+      setCommentDetail({
+        ...clickedComments
+      });
+      setIsClickedContextComment(true);
+    }
+  }, [editor, element_comments_map, hiddenComment]);
+  (0, _react.useEffect)(() => {
+    const handleHoverContextComment = event => {
+      var _parentDom$className;
+      const parentDom = event.target.parentElement;
+      if (parentDom !== null && parentDom !== void 0 && (_parentDom$className = parentDom.className) !== null && _parentDom$className !== void 0 && _parentDom$className.includes('sdoc_comment_')) {
+        const isHover = event.type === 'mouseover';
+        const matchedAttributes = parentDom.className.split(' ').filter(cls => cls.startsWith('sdoc_comment_'));
+        matchedAttributes.forEach(className => {
+          const el = document.querySelectorAll(`.${className}`);
+          el.forEach(el => {
+            el.style.textDecoration = isHover ? 'underline #eb8205' : '';
+            el.style.textDecorationThickness = isHover ? '2px' : '';
+          });
+        });
+      }
+    };
+    document.addEventListener('mouseover', handleHoverContextComment);
+    document.addEventListener('mouseout', handleHoverContextComment);
+    return () => {
+      document.removeEventListener('mouseover', handleHoverContextComment);
+      document.removeEventListener('mouseout', handleHoverContextComment);
+    };
+  }, []);
   const onSetCommentDetail = (0, _react.useCallback)(comment => {
     setCommentDetail(comment);
   }, []);
-  const hiddenComment = (0, _react.useCallback)(() => {
-    setCommentDetail({});
-    setIsShowComments(false);
-  }, []);
 
   // Comments are updated to modify the current comment
   (0, _react.useEffect)(() => {
-    if (activeElement) {
-      const unresolvedComments = element_comments_map[activeElement.id].filter(item => !item.resolved);
+    if (isContextComment && activeElementIds) {
+      const unresolvedComments = element_comments_map[activeElementIds[0].element.id].filter(item => !item.resolved);
+      if (unresolvedComments.length === 0) {
+        setIsShowComments(false);
+      }
+    }
+    if (activeElementIds && !Array.isArray(activeElementIds)) {
+      const unresolvedComments = element_comments_map[activeElementIds.id].filter(item => !item.resolved);
       if (unresolvedComments.length === 0) {
         setIsShowComments(false);
       }
@@ -72,53 +119,66 @@ const EditorComment = _ref => {
     if (isShowComments) {
       hiddenComment();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSelectionElement]);
-  const cursor = (0, _helper.useCursorPosition)();
-  const style = (0, _react.useMemo)(() => {
-    var _Node$string;
-    if (currentSelectionElement && ((_Node$string = _slate.Node.string(currentSelectionElement)) === null || _Node$string === void 0 ? void 0 : _Node$string.length) === 0 && !currentSelectionElement.children.find(n => n.type === _constants2.ELEMENT_TYPE.IMAGE)) {
-      return {
-        top: '-99999px'
-      };
+    if (isContextComment) {
+      (0, _helpers.removeMarks)(editor);
     }
-    const comments = element_comments_map[currentSelectionElement === null || currentSelectionElement === void 0 ? void 0 : currentSelectionElement.id];
-    const unresolvedComments = comments && comments.filter(item => !item.resolved);
-    const hasComments = unresolvedComments && unresolvedComments.length > 0;
-    if (hasComments) return {
-      top: '-99999px'
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSelectionElement, editor.selection]);
+  (0, _react.useEffect)(() => {
+    const handleAddContextComment = () => {
+      // Add temporary marks for selection
+      _slate.Editor.addMark(editor, 'comment', true);
+      setTimeout(() => {
+        const activeElementIds = (0, _helper.getSelectedElemIds)(editor);
+        const lastSelectedDom = (0, _helper.getDomById)(activeElementIds[activeElementIds.length - 1]);
+        commentedDomRef.current = lastSelectedDom;
+        setActiveElementIds(activeElementIds);
+        setIsShowComments(true);
+        setCommentDetail({});
+        setIsContextComment(true);
+      }, 0);
     };
-    if (cursor.y === 0 || isShowComments) return {
-      top: '-99999px'
+    const handleClickCommentedText = event => {
+      const parentDom = event.target.parentElement;
+      if (parentDom.className.split(/\s+/).some(cls => cls.startsWith('sdoc_comment'))) {
+        commentedDomRef.current = parentDom;
+        const matchedAttributes = parentDom.className.split(' ').filter(cls => cls.startsWith('sdoc_comment_'));
+        const clickedCommmentIdArray = matchedAttributes.map(item => item.replace('sdoc_comment_', ''));
+        onSelectElement(clickedCommmentIdArray, true);
+      }
     };
-    return {
-      top: cursor.y,
-      zIndex: _constants.Z_INDEX.COMMENT_ADD
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeAddContextComment = eventBus.subscribe(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT, handleAddContextComment);
+    document.addEventListener('click', handleClickCommentedText);
+    return () => {
+      unsubscribeAddContextComment();
+      document.removeEventListener('click', handleClickCommentedText);
     };
-  }, [currentSelectionElement, element_comments_map, cursor.y, isShowComments]);
+  }, [editor, onSelectElement]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-comment-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "comment-container-main"
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-container-right"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-add-wrapper",
-    style: style
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "add-comment-icon",
-    onClick: onAddCommentToggle
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-add-comment mr-1"
-  }))), /*#__PURE__*/_react.default.createElement(_elementsCommentCount.default, {
+    className: (0, _classnames.default)('comment-container-right', {
+      'isContextComment': isContextComment
+    })
+  }, /*#__PURE__*/_react.default.createElement(_elementsCommentCount.default, {
     elementCommentsMap: element_comments_map,
-    activeElement: activeElement,
+    activeElementIds: activeElementIds,
     editor: editor,
     onSelectElement: onSelectElement
   }), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
-    activeElement: activeElement,
+    activeElementIds: activeElementIds,
     commentDetail: commentDetail,
-    onSetCommentDetail: onSetCommentDetail
+    onSetCommentDetail: onSetCommentDetail,
+    isContextComment: isContextComment,
+    isClickedContextComment: isClickedContextComment,
+    setIsClickedContextComment: setIsClickedContextComment,
+    onSelectElement: onSelectElement,
+    commentedDom: commentedDomRef.current,
+    closeComment: hiddenComment,
+    editor: editor
   })));
 };
 var _default = exports.default = EditorComment;

package/dist/basic-sdk/comment/components/elements-comment-count/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../utils");
 var _elementCommentCount = _interopRequireDefault(require("./element-comment-count"));
 require("./index.css");
 const ElementsCommentCount = _ref => {
@@ -18,14 +19,25 @@ const ElementsCommentCount = _ref => {
   if (!elementCommentsMap) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "elements-comments-count"
-  }, Object.keys(elementCommentsMap).map(elementId => {
-    const comments = elementCommentsMap[elementId];
+  }, Object.keys(elementCommentsMap).map(originElementId => {
+    var _comments$0$detail$el, _comments$0$detail;
+    const comments = elementCommentsMap[originElementId];
     if (!Array.isArray(comments) || comments.length === 0) return null;
+    let elementId = originElementId;
+    const elementIdList = (_comments$0$detail$el = (_comments$0$detail = comments[0].detail) === null || _comments$0$detail === void 0 ? void 0 : _comments$0$detail.element_id_list) !== null && _comments$0$detail$el !== void 0 ? _comments$0$detail$el : [];
+    if (elementIdList.length > 1) {
+      const existedId = elementIdList.find(id => (0, _utils.getCommentElementById)(id, editor));
+      if (existedId) {
+        elementId = existedId;
+      } else {
+        return null;
+      }
+    }
     const unresolvedComment = comments.filter(item => !item.resolved);
     const unresolvedCommentCount = unresolvedComment.length;
     if (unresolvedCommentCount === 0) return null;
     return /*#__PURE__*/_react.default.createElement(_elementCommentCount.default, {
-      key: elementId,
+      key: `${originElementId}-${elementId}`,
       elementId: elementId,
       isElementSelected: selectionElement && selectionElement.id === elementId,
       commentsCount: unresolvedCommentCount,

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

@@ -278,6 +278,31 @@
   overflow: hidden;
 }
 
+.sdoc-comment-drawer .sdoc-comment-list-container .detail-context-comment {
+  align-items: start !important;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .detail-context-comment .sdoc-comment-quote {
+  padding-top: 1px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container {
+  padding: 16px 16px 0 16px;
+  color: #666;
+  display: flex;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container .sdoc-comment-quote {
+  font-size: 12px;
+  padding-top: 1px;
+}
+
+.sdoc-comment-drawer .sdoc-comment-list-container .context-comment-item-selected-text-container .context-comment-items {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
 .comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {
   border: 1px solid #dee3eb;
 }

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

@@ -4,9 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCursorPosition = exports.getSelectionRange = exports.getElementCommentCountTop = exports.getCursorPosition = exports.getAvatarUrl = void 0;
+exports.useCursorPosition = exports.updateElementsAttrs = exports.updateCommentedElementsAttrs = exports.getSelectionRange = exports.getSelectedElemIds = exports.getPrimaryElementId = exports.getElementCommentCountTop = exports.getDomById = exports.getCursorPosition = exports.getCommentedTextsByElementId = exports.getAvatarUrl = void 0;
+var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _context = _interopRequireDefault(require("../../context"));
+var _core = require("../extension/core");
 var _useScrollContext = require("../hooks/use-scroll-context");
 const getSelectionRange = () => {
   if (window.getSelection) {
@@ -72,4 +74,111 @@ const getElementCommentCountTop = (editor, element, scrollTop) => {
   });
   return minY - 93 + scrollTop; // 100: header height(56) + toolbar height(37)
 };
-exports.getElementCommentCountTop = getElementCommentCountTop;
+exports.getElementCommentCountTop = getElementCommentCountTop;
+const getSelectedElemIds = editor => {
+  const {
+    selection
+  } = editor;
+  if (!selection) return;
+  const selectedElemId = [];
+  const nodeEntries = Array.from(_slate.Editor.nodes(editor, {
+    match: n => _slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n),
+    mode: 'lowest'
+  }));
+  for (const [node] of nodeEntries) {
+    selectedElemId.push(node.id);
+  }
+  return selectedElemId;
+};
+exports.getSelectedElemIds = getSelectedElemIds;
+const getCommentedTextsByElementId = (elementId, textCommentId) => {
+  const container = document.querySelector(`[data-id='${elementId}']`);
+  if (!container) return [];
+  let targetDoms = container.querySelectorAll(`.sdoc_comment_${textCommentId}`);
+  if (targetDoms.length === 0) {
+    targetDoms = container.querySelectorAll(`.removed_sdoc_comment_${textCommentId}`);
+  }
+  const texts = [];
+  targetDoms.forEach(dom => {
+    var _dom$textContent;
+    texts.push(((_dom$textContent = dom.textContent) === null || _dom$textContent === void 0 ? void 0 : _dom$textContent.trim()) || '');
+  });
+  return texts;
+};
+exports.getCommentedTextsByElementId = getCommentedTextsByElementId;
+const getDomById = elementId => {
+  const container = document.querySelector(`[data-id='${elementId}']`);
+  if (!container) return [];
+  const lastCommentedDomWithMarks = container.querySelector('.comment');
+  return lastCommentedDomWithMarks;
+};
+exports.getDomById = getDomById;
+const updateElementsAttrs = (activeElementIds, editor, text_comment_id) => {
+  if (Array.isArray(activeElementIds)) {
+    for (const elemId of activeElementIds) {
+      const dom = document.querySelectorAll(`[data-id="${elemId}"]`)[0];
+      if (!dom) continue;
+      const domNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+      const nodePath = (0, _core.findPath)(editor, domNode);
+      domNode.children.forEach((textNode, index) => {
+        if (textNode.comment) {
+          const textNodePath = [...nodePath, index];
+          _slate.Transforms.setNodes(editor, {
+            [`sdoc_comment_${text_comment_id}`]: true
+          }, {
+            at: textNodePath,
+            match: _slate.Text.isText,
+            split: true
+          });
+        }
+      });
+    }
+  }
+};
+exports.updateElementsAttrs = updateElementsAttrs;
+const updateCommentedElementsAttrs = function (activeElementIds, editor, text_comment_id) {
+  let resolved = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  let isDeleteComment = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  if (Array.isArray(activeElementIds)) {
+    _slate.Editor.withoutNormalizing(editor, () => {
+      for (const elemId of activeElementIds) {
+        // const { element } = elem;
+        const dom = document.querySelector(`[data-id="${elemId}"]`);
+        if (!dom) continue;
+        const domNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
+        const domNodePath = (0, _core.findPath)(editor, domNode);
+        domNode.children.forEach((child, index) => {
+          const childPath = [...domNodePath, index];
+          if (_slate.Text.isText(child) && `sdoc_comment_${text_comment_id}` in child) {
+            _slate.Transforms.unsetNodes(editor, [`sdoc_comment_${text_comment_id}`], {
+              at: childPath,
+              match: _slate.Text.isText
+            });
+            !isDeleteComment && _slate.Transforms.setNodes(editor, {
+              [`sdoc_comment_${text_comment_id}`]: resolved
+            }, {
+              at: childPath,
+              match: _slate.Text.isText
+            });
+          }
+        });
+      }
+    });
+  }
+};
+exports.updateCommentedElementsAttrs = updateCommentedElementsAttrs;
+const getPrimaryElementId = detail => {
+  if (!detail) return null;
+  let elementId;
+  const {
+    element_id,
+    element_id_list
+  } = detail;
+  if (element_id_list.length > 0) {
+    elementId = element_id_list[0];
+  } else {
+    elementId = element_id;
+  }
+  return elementId;
+};
+exports.getPrimaryElementId = getPrimaryElementId;

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

@@ -69,6 +69,7 @@ const useNotificationsMount = dispatch => {
     return () => {
       unsubscribeNewNotification();
     };
-  }, [request]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 };
 exports.useNotificationsMount = useNotificationsMount;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sortCommentList = exports.initElementCommentsMap = exports.initCommentsInfo = exports.initCommentList = exports.formatCommentsData = exports.commentReducer = void 0;
 var _deepCopy = _interopRequireDefault(require("deep-copy"));
+var _helper = require("../helper");
 const formatCommentsData = comments => {
   const formatComments = [];
   const dupComments = (0, _deepCopy.default)(comments);
@@ -29,9 +30,7 @@ const initElementCommentsMap = comments => {
   const formatComments = formatCommentsData(comments);
   for (let i = 0; i < formatComments.length; i++) {
     const item = formatComments[i];
-    const {
-      element_id
-    } = item.detail;
+    const element_id = (0, _helper.getPrimaryElementId)(item.detail);
     if (!elementCommentsMap[element_id]) {
       elementCommentsMap[element_id] = [];
     }

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

@@ -49,7 +49,8 @@ const INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   RESIZE_ARTICLE: 'resize_article',
   ON_VIDEO_FILES_UPLOADED: 'on_video_files_uploaded',
   RELOAD_COMMENT: 'reload_comment',
-  ASK_AI: 'ask_ai'
+  ASK_AI: 'ask_ai',
+  ADD_CONTEXT_COMMENT: 'add_context_comment'
 };
 const REVISION_DIFF_KEY = exports.REVISION_DIFF_KEY = 'diff';
 const REVISION_DIFF_VALUE = exports.REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -122,12 +122,12 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     const eventBus = _basicSdk.EventBus.getInstance();
     eventBus.subscribe(_constants.EXTERNAL_EVENT.REFRESH_DOCUMENT, onRefreshDocument);
 
-    // Remove aiMarks on special conditions like unexpected exit or refresh page using AI
-    const hasAIMark = !_slate.Editor.nodes(validEditor, {
+    // Remove Marks on special conditions like unexpected exit or refresh page using AI or context comment
+    const hasSpecialMark = !_slate.Editor.nodes(validEditor, {
       at: [],
-      match: n => _slate.Text.isText(n) && n.sdoc_ai === true
+      match: n => _slate.Text.isText(n) && (n.sdoc_ai === true || n.comment === true)
     }).next().done;
-    if (hasAIMark) {
+    if (hasSpecialMark) {
       (0, _helpers.removeMarks)(validEditor);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/basic-sdk/extension/plugins/ai/ai-icon/index.js

@@ -17,9 +17,9 @@ function AIIcon(_ref) {
   const {
     t
   } = (0, _reactI18next.useTranslation)('sdoc-editor');
-  const clazznames = (0, _classnames.default)('sdoc-ask-ai-icon', className);
+  const classnames = (0, _classnames.default)('sdoc-ask-ai-icon', className);
   return /*#__PURE__*/_react.default.createElement("img", {
-    className: clazznames,
+    className: classnames,
     src: _sdocAskAi.default,
     alt: t('Ask_AI')
   });

package/dist/basic-sdk/extension/plugins/ai/ai-module/helpers.js

@@ -13,6 +13,10 @@ const removeMarks = editor => {
     at: [],
     match: n => _slate.Text.isText(n) && n.sdoc_ai === true
   });
+  _slate.Transforms.unsetNodes(editor, 'comment', {
+    at: [],
+    match: n => _slate.Text.isText(n) && n.comment === true
+  });
   if (selection) {
     _slate.Transforms.select(editor, selection);
   } else {

package/dist/basic-sdk/extension/plugins/text-style/menu/index.js

@@ -11,6 +11,7 @@ var _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _constants = require("../../../../../basic-sdk/constants");
 var _context = _interopRequireDefault(require("../../../../../context"));
+var _commentContextMenu = _interopRequireDefault(require("../../../../comment/components/comment-context-menu"));
 var _useColorContext = require("../../../../hooks/use-color-context");
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _mouseEvent = require("../../../../utils/mouse-event");
@@ -155,7 +156,7 @@ const TextStyleMenuList = _ref => {
     tipMessage: t('Reduce_font_size')
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "sdocfont sdoc-reduce-font-size"
-  }))), idPrefix && enableSeafileAI && /*#__PURE__*/_react.default.createElement(_aiMenu.AIContextMenu, {
+  }))), idPrefix && /*#__PURE__*/_react.default.createElement(_commentContextMenu.default, null), idPrefix && enableSeafileAI && /*#__PURE__*/_react.default.createElement(_aiMenu.AIContextMenu, {
     isRichEditor: isRichEditor
   }));
 };

package/dist/basic-sdk/extension/plugins/text-style/render-elem.js

@@ -15,7 +15,7 @@ const renderText = props => {
     children,
     leaf
   } = props;
-  const {
+  let {
     text,
     ...rest
   } = leaf;
@@ -35,10 +35,34 @@ const renderText = props => {
     style['minWidth'] = '2px';
   }
 
-  // Add temporary marks for selection in AI
-  if (leaf.sdoc_ai && leaf.text.trim()) {
+  // Add temporary marks for selection in AI or context comment
+  if ((leaf.sdoc_ai || leaf.comment) && leaf.text.trim()) {
     style['padding'] = '3.23px 0';
-    style['background'] = '#a9c9ed';
+    style['backgroundColor'] = '#a9c9ed';
+  }
+
+  // Background color overlap for multi comments
+  if (Object.keys(leaf).some(key => key.startsWith('sdoc_comment_'))) {
+    const commentEntries = Object.entries(leaf).filter(_ref => {
+      let [key] = _ref;
+      return key.startsWith('sdoc_comment_');
+    });
+    for (const [key, value] of commentEntries) {
+      if (value === false && key.startsWith('sdoc_comment_')) {
+        const newKey = `removed_${key}`;
+        rest[newKey] = true;
+        delete rest[key];
+      }
+    }
+    const commentRest = Object.keys(rest).filter(item => item.startsWith('sdoc_comment_'));
+
+    // Multi comment or only one comment
+    if (commentRest.length > 1) {
+      style['backgroundColor'] = 'rgba(129, 237, 247)';
+    }
+    if (commentRest.length === 1) {
+      style['backgroundColor'] = 'rgba(129, 237, 247, 0.5)';
+    }
   }
   if (leaf.computed_background_color) {
     style['backgroundColor'] = leaf.computed_background_color;

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -3,45 +3,66 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSelectionPosition = exports.useCommentListPosition = void 0;
-var _slateReact = require("@seafile/slate-react");
+exports.useCommentListPosition = void 0;
 var _useScrollContext = require("./use-scroll-context");
-const useSelectionPosition = node => {
-  const editor = (0, _slateReact.useSlateStatic)();
-  if (!editor.selection) return {
-    x: 0,
-    y: 0
-  };
-  if (!node) return {
-    x: 0,
-    y: 0
-  };
-  try {
-    const domNode = _slateReact.ReactEditor.toDOMNode(editor, node);
-    const rect = domNode.getBoundingClientRect();
-    return rect;
-  } catch (error) {
-    // A new node has not yet been indexed, it cannot be retrieved, and the new node has no comment information, just do not display it
-    return {
-      x: 0,
-      y: 0
-    };
-  }
-};
-exports.useSelectionPosition = useSelectionPosition;
-const useCommentListPosition = selectionElement => {
-  const selectionPosition = useSelectionPosition(selectionElement);
+const useCommentListPosition = (selectedElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment) => {
+  var _document$querySelect;
   const headerHeight = 100;
   const scrollRef = (0, _useScrollContext.useScrollContext)();
   const {
     scrollTop = 0
   } = scrollRef.current || {};
-  if (selectionPosition.y !== 0) {
+  if (isContextComment || isClickedContextComment) {
+    let rect;
+    if (isContextComment) {
+      rect = commentedDom.getBoundingClientRect();
+    }
+
+    // rect is the last commented context dom
+    if (isClickedContextComment) {
+      const lastComment = Object.values(commentDetail).map(item => {
+        var _item$detail;
+        return (_item$detail = item.detail) === null || _item$detail === void 0 ? void 0 : _item$detail.text_comment_id;
+      }).flatMap(id => {
+        const elements = Array.from(document.querySelectorAll(`.sdoc_comment_${id}`));
+        return elements.map(el => ({
+          id,
+          el
+        }));
+      }).reduce((last, current) => {
+        if (!last) return current;
+        const position = last.el.compareDocumentPosition(current.el);
+        return position & Node.DOCUMENT_POSITION_FOLLOWING ? current : last;
+      }, null);
+      if (lastComment) {
+        const result = `.sdoc_comment_${lastComment.id}`;
+        const elements = Array.from(document.querySelectorAll(result));
+        if (elements.length === 0) return;
+        const lastTextElement = elements[elements.length - 1];
+        const parentElement = lastTextElement.closest('[data-slate-node="element"]');
+        const firstInSameParent = elements.find(el => parentElement.contains(el));
+        rect = firstInSameParent === null || firstInSameParent === void 0 ? void 0 : firstInSameParent.getBoundingClientRect();
+      } else {
+        closeComment();
+      }
+    }
+    const editorArticleRight = document.getElementById('sdoc-editor-print-wrapper').getBoundingClientRect().right;
+    const topPara = rect.bottom - headerHeight + 10 + scrollTop;
+    const rightPara = editorArticleRight - rect.left - 300; // 300 is comment container's width
+    return {
+      right: rightPara,
+      y: topPara
+    };
+  }
+  const selectionPosition = (_document$querySelect = document.querySelectorAll(`[data-id="${selectedElementIds[0]}"]`)[0]) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+  // Boundary check
+  if (!selectionPosition) closeComment();
+  if (selectionPosition && selectionPosition.y !== 0) {
     selectionPosition.y = selectionPosition.y - headerHeight + scrollTop;
   }
   return {
-    x: selectionPosition.x,
-    y: selectionPosition.y
+    x: selectionPosition === null || selectionPosition === void 0 ? void 0 : selectionPosition.x,
+    y: selectionPosition === null || selectionPosition === void 0 ? void 0 : selectionPosition.y
   };
 };
 exports.useCommentListPosition = useCommentListPosition;