@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,132 @@
+.sdoc-comments-participants-popover .popover {
+  max-width: 282px;
+  margin-top: 0px;
+}
+
+.sdoc-comments-participants-popover .sdoc-comments-participants-editor-container {
+  min-height: 160px;
+  width: 280px;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participants {
+  background-color: #f6f6f6;
+  padding: 5px;
+  border-bottom: 1px solid #dde2ea;
+  border-radius: 3px 3px 0 0;
+  min-height: 34px;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-name {
+  margin-left: 4px;
+  flex: 1 1;
+  color: #16181b;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 1px;
+  cursor: pointer;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete .sdocfont {
+  display: inline-block;
+  font-size: 12px;
+  color: #909090;
+}
+
+.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete:hover .sdocfont {
+  color: #5a5a5a;
+}
+
+.sdoc-comments-participants-popover .sdoc-search-collaborators {
+  padding: 10px;
+}
+
+.sdoc-comments-participants-popover .sdoc-search-collaborators input {
+  height: 28px;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborators {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 200px;
+  padding: 10px;
+  overflow: auto;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborators.sdoc-searched-collaborators-empty-tip {
+  opacity: .5;
+  font-size: 14px;
+  align-items: flex-start;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.25rem 0;
+  clear: both;
+  font-weight: 400;
+  color: #212529;
+  height: 30px;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator:hover {
+  cursor: pointer;
+  background-color: #f8f9fa;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator img {
+  width: 16px;
+  height: 16px;
+  margin-left: 10px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-selected-participant-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 4px;
+  color: #16181b;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation .sdocfont {
+  font-size: 12px;
+  color: #798d99;
+}

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

@@ -0,0 +1,69 @@
+"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 _reactstrap = require("reactstrap");
+var _useCollaborators = require("../../../hooks/use-collaborators");
+var _mouseEvent = require("../../../utils/mouse-event");
+var _utils = require("../../utils");
+var _searchedCollaborators = _interopRequireDefault(require("./searched-collaborators"));
+var _selectedParticipants = _interopRequireDefault(require("./selected-participants"));
+require("./index.css");
+const CommentParticipantsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    target,
+    editor
+  } = _ref;
+  const popoverRef = (0, _react.useRef)();
+  const {
+    collaborators
+  } = (0, _useCollaborators.useCollaborators)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    toggle: () => {
+      popoverRef.current && popoverRef.current.toggle();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [popoverRef.current]);
+  const onChangeSearch = (0, _react.useCallback)(event => {
+    const newSearchValue = event.target.value;
+    if (searchValue === newSearchValue) return;
+    const searchedCollaborators = (0, _utils.searchCollaborators)(collaborators, newSearchValue, editor);
+    setSearchValue(newSearchValue);
+    setSearchedCollaborators(searchedCollaborators);
+  }, [searchValue, collaborators, editor]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
+    target: target,
+    className: "sdoc-comments-participants-popover",
+    placement: "bottom-start",
+    hideArrow: true,
+    trigger: "legacy",
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-comments-participants-editor-container",
+    onClick: event => (0, _mouseEvent.eventStopPropagation)(event)
+  }, /*#__PURE__*/_react.default.createElement(_selectedParticipants.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-search-collaborators"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: "form-control",
+    type: "text",
+    placeholder: t('Search_collaborator'),
+    value: searchValue,
+    onChange: onChangeSearch
+  })), /*#__PURE__*/_react.default.createElement(_searchedCollaborators.default, {
+    collaborators: searchValue ? searchedCollaborators : collaborators
+  })));
+});
+var _default = exports.default = CommentParticipantsEditor;

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

@@ -0,0 +1,62 @@
+"use strict";
+
+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 _mouseEvent = require("../../../utils/mouse-event");
+var _useParticipants = require("../../hooks/use-participants");
+const SearchedCollaborators = _ref => {
+  let {
+    collaborators
+  } = _ref;
+  const {
+    participants,
+    deleteParticipant,
+    addParticipants
+  } = (0, _useParticipants.useParticipantsContext)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onSelectParticipant = (0, _react.useCallback)((event, participant, isSelected) => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    if (isSelected) {
+      deleteParticipant(participant.username);
+      return;
+    }
+    addParticipants(participant.username);
+  }, [deleteParticipant, addParticipants]);
+  if (!Array.isArray(collaborators) || collaborators.length === 0) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-searched-collaborators sdoc-searched-collaborators-empty-tip"
+    }, t('No_collaborators_available'));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-searched-collaborators"
+  }, collaborators.map(collaborator => {
+    const {
+      name,
+      username,
+      avatar_url
+    } = collaborator;
+    const isSelected = participants.find(participant => participant.username === username);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: username,
+      className: "sdoc-searched-collaborator",
+      onClick: event => onSelectParticipant(event, collaborator, isSelected)
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: avatar_url,
+      alt: ""
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-selected-participant-name"
+    }, name), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-searched-collaborator-operation"
+    }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    })));
+  }));
+};
+var _default = exports.default = SearchedCollaborators;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+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 _useParticipants = require("../../hooks/use-participants");
+const SelectedParticipants = () => {
+  const {
+    participants,
+    deleteParticipant
+  } = (0, _useParticipants.useParticipantsContext)();
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const onDeleteParticipant = (0, _react.useCallback)(participant => {
+    deleteParticipant(participant.username);
+  }, [deleteParticipant]);
+  if (!Array.isArray(participants) || participants.length === 0) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-selected-participants"
+  }, participants.map(participant => {
+    const {
+      name,
+      username,
+      avatar_url
+    } = participant;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: username,
+      className: "sdoc-selected-participant"
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: avatar_url,
+      alt: ""
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-selected-participant-name"
+    }, name), /*#__PURE__*/_react.default.createElement("div", {
+      className: "sdoc-selected-participant-delete",
+      onClick: () => onDeleteParticipant(participant),
+      title: t('Delete')
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "sdocfont sdoc-sm-close"
+    })));
+  }));
+};
+var _default = exports.default = SelectedParticipants;

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

@@ -0,0 +1,183 @@
+"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 _slate = require("@seafile/slate");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../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 _commentList = _interopRequireDefault(require("./comment-list"));
+var _elementsCommentCount = _interopRequireDefault(require("./elements-comment-count"));
+const EditorComment = _ref => {
+  let {
+    editor
+  } = _ref;
+  (0, _useSelectionUpdate.default)();
+  const {
+    element_comments_map
+  } = (0, _useCommentContext.useCommentContext)().commentsInfo;
+  const currentSelectionElement = (0, _useSelectionElement.useSelectionElement)({
+    editor
+  }); // The slate node of the current cursor line
+  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 [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({});
+    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);
+    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 => {
+      const parentDom = event.target.parentElement;
+      if (!parentDom) return;
+      const matchedAttributes = Array.from(parentDom.classList).filter(cls => cls.startsWith('sdoc_comment_'));
+      if (matchedAttributes.length === 0) return;
+      const isHover = event.type === 'mouseover';
+      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);
+  }, []);
+
+  // Comments are updated to modify the current comment
+  (0, _react.useEffect)(() => {
+    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);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element_comments_map]);
+  (0, _react.useEffect)(() => {
+    // Close when the currently selected element changes
+    if (isShowComments) {
+      hiddenComment();
+    }
+    if (isContextComment) {
+      (0, _helpers.removeMarks)(editor);
+    }
+    // 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);
+    };
+    const handleClickCommentedText = 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.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);
+      }
+    };
+    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);
+    };
+  }, [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: (0, _classnames.default)('comment-container-right', {
+      'isContextComment': isContextComment
+    })
+  }, /*#__PURE__*/_react.default.createElement(_elementsCommentCount.default, {
+    elementCommentsMap: element_comments_map,
+    activeElementIds: activeElementIds,
+    editor: editor,
+    onSelectElement: onSelectElement
+  }), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
+    activeElementIds: activeElementIds,
+    commentDetail: commentDetail,
+    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/element-comment-count.js

@@ -0,0 +1,64 @@
+"use strict";
+
+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 _core = require("../../../extension/core");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _mouseEvent = require("../../../utils/mouse-event");
+var _helper = require("../../helper");
+const ElementCommentCount = _ref => {
+  let {
+    elementId,
+    isElementSelected,
+    commentsCount,
+    editor,
+    onSelectElement
+  } = _ref;
+  const element = (0, _core.getNodeById)(editor.children, elementId);
+  const [top, setTop] = (0, _react.useState)(-9999);
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const onClick = (0, _react.useCallback)(event => {
+    (0, _mouseEvent.eventStopPropagation)(event);
+    onSelectElement(elementId);
+  }, [elementId, onSelectElement]);
+  const updatePosition = (0, _react.useCallback)(() => {
+    if (!element) return;
+    const scrollTop = scrollRef.current.scrollTop || 0;
+    const newTop = (0, _helper.getElementCommentCountTop)(editor, element, scrollTop);
+    setTop(newTop);
+  }, [editor, element, scrollRef]);
+  (0, _react.useEffect)(() => {
+    updatePosition();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    const scrollDom = scrollRef.current;
+    scrollDom.addEventListener('scroll', updatePosition);
+    return () => {
+      scrollDom.removeEventListener('scroll', updatePosition);
+    };
+  }, [editor, elementId, element, scrollRef, isElementSelected, updatePosition]);
+  if (!element) return null;
+  let style = {
+    top
+  };
+  if (isElementSelected) {
+    style['zIndex'] = _constants.Z_INDEX.ACTIVE_COMMENT_COUNT;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "element-comments-count",
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-count"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "element-comments-count-value"
+  }, commentsCount));
+};
+var _default = exports.default = ElementCommentCount;

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

@@ -0,0 +1,29 @@
+.sdoc-comment-container .comment-container-right .element-comments-count {
+  position: absolute;
+  left: -22px;
+  height: 16px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+}
+
+.sdoc-comment-container .comment-container-right .element-comments-count:hover {
+  color: #333;
+  cursor: pointer;
+}
+
+.sdoc-comment-container .comment-container-right .element-comments-count-value {
+  width: 16px;
+  height: 14px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  cursor: pointer;
+  pointer-events: none;
+  font-size: 12px;
+  color: #fff;
+  line-height: 13px;
+  text-align: center;
+}

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 => {
+  let {
+    elementCommentsMap,
+    selectionElement,
+    editor,
+    onSelectElement
+  } = _ref;
+  if (!elementCommentsMap) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "elements-comments-count"
+  }, 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: `${originElementId}-${elementId}`,
+      elementId: elementId,
+      isElementSelected: selectionElement && selectionElement.id === elementId,
+      commentsCount: unresolvedCommentCount,
+      editor: editor,
+      onSelectElement: onSelectElement
+    });
+  }));
+};
+var _default = exports.default = ElementsCommentCount;