@seafile/sdoc-editor 0.2.16 → 0.2.18

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

@@ -0,0 +1,295 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCollaborators } from '../../../../hooks';
+import { useParticipantsContext } from '../../hooks/use-participants';
+import ModalPortal from '../../../../components/modal-portal';
+import { KeyCodes } from '../../../../constants';
+import { searchCollaborators, CommentUtilities, convertComment, checkMentionOperation } from '../../utils';
+import { DOWN, UP, POPOVER_ADDING_HEIGHT, FONT_SIZE_WIDTH, LINE_HEIGHT } from '../../constants';
+import { eventStopPropagation } from '../../../utils/mouse-event';
+import CommentParticipantItem from './comment-participant-item';
+import { Hotkey, getSelectionCoords } from '../../../../utils';
+import './index.css';
+var CommentInput = forwardRef(function (_ref, ref) {
+  var placeholder = _ref.placeholder,
+    content = _ref.content,
+    type = _ref.type,
+    onCancel = _ref.onCancel,
+    onSubmit = _ref.onSubmit;
+  var commentRef = useRef();
+  var collaboratorsPopoverRef = useRef();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useCollaborators = useCollaborators(),
+    collaborators = _useCollaborators.collaborators;
+  var _useParticipantsConte = useParticipantsContext(),
+    addParticipants = _useParticipantsConte.addParticipants;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    range = _useState2[0],
+    setRange = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchedCollaborators = _useState4[0],
+    setSearchedCollaborators = _useState4[1];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeCollaboratorIndex = _useState6[0],
+    setActiveCollaboratorIndex = _useState6[1];
+  var commentUtilities = new CommentUtilities();
+
+  // onMount: comment content
+  useEffect(function () {
+    if (!content) return;
+    commentRef.current.textContent = content;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // onMount: set input focus
+  useEffect(function () {
+    if (type !== 'comment') return;
+    commentRef.current && commentRef.current.focus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // onMount: handleCommentPopover
+  useEffect(function () {
+    document.addEventListener('mousedown', handleCommentPopover);
+    return function () {
+      document.removeEventListener('mousedown', handleCommentPopover);
+    };
+  });
+
+  // The parent component can call the method of this component through ref
+  useImperativeHandle(ref, function () {
+    return {
+      getValue: function getValue() {
+        var comment = convertComment(commentRef.current.textContent);
+        return comment;
+      },
+      setValue: function setValue(value) {
+        commentRef.current.textContent = value || '';
+      }
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+  }, [commentRef]);
+  var hideCommentPopover = useCallback(function () {
+    if (searchedCollaborators.length === 0) return;
+    setSearchedCollaborators([]);
+    setActiveCollaboratorIndex(-1);
+  }, [searchedCollaborators]);
+  var handleCommentPopover = useCallback(function (event) {
+    if (collaboratorsPopoverRef.current && event && !collaboratorsPopoverRef.current.contains(event.target)) {
+      hideCommentPopover();
+    }
+  }, [hideCommentPopover, collaboratorsPopoverRef]);
+  var setScrollTop = useCallback(function (offsetTop, itemOffsetHeight, mouseDownType) {
+    var _collaboratorsPopover = collaboratorsPopoverRef.current,
+      offsetHeight = _collaboratorsPopover.offsetHeight,
+      scrollTop = _collaboratorsPopover.scrollTop;
+    if (mouseDownType === DOWN) {
+      if (offsetTop + itemOffsetHeight - scrollTop - offsetHeight + POPOVER_ADDING_HEIGHT > 0) {
+        var top = offsetTop + itemOffsetHeight - offsetHeight + POPOVER_ADDING_HEIGHT;
+        collaboratorsPopoverRef.current.scrollTop = top;
+      }
+    }
+    if (mouseDownType === UP) {
+      if (offsetTop < scrollTop) {
+        collaboratorsPopoverRef.current.scrollTop = offsetTop - POPOVER_ADDING_HEIGHT;
+      }
+    }
+  }, []);
+  var setCollaboratorsPopoverPosition = useCallback(function (caretPosition) {
+    var _collaboratorsPopover2 = collaboratorsPopoverRef.current.getBoundingClientRect(),
+      height = _collaboratorsPopover2.height,
+      width = _collaboratorsPopover2.width;
+    var offsetHeight = collaboratorsPopoverRef.current.offsetHeight;
+
+    // Whether the vertical direction exceeds the screen
+    var isVerticalDirectionBeyondScreen = height + caretPosition.y + LINE_HEIGHT > window.innerHeight;
+
+    // if the vertical direction exceeds the screen, collaboratorsPopoverRef appear above the cursor
+    var top = isVerticalDirectionBeyondScreen ? "".concat(caretPosition.y - offsetHeight + LINE_HEIGHT, "px") : "".concat(caretPosition.y + LINE_HEIGHT, "px");
+    collaboratorsPopoverRef.current.style.top = top;
+
+    // Whether the horizontal direction exceeds the screen
+    var isHorizontalDirectionBeyondScreen = caretPosition.x + FONT_SIZE_WIDTH + width > window.innerWidth;
+
+    // if the horizontal direction exceeds the screen, collaboratorsPopoverRef is displayed against the right side of the screen
+    var left = isHorizontalDirectionBeyondScreen ? "".concat(window.innerWidth - width, "px") : "".concat(caretPosition.x + FONT_SIZE_WIDTH, "px");
+    collaboratorsPopoverRef.current.style.left = left;
+  }, [collaboratorsPopoverRef]);
+  var getAtInfo = useCallback(function (event) {
+    var isValidOperation = checkMentionOperation(event);
+    if (!isValidOperation) return {
+      index: -1
+    };
+    var selection = window.getSelection();
+    var isCollapsed = selection.isCollapsed,
+      anchorNode = selection.anchorNode,
+      anchorOffset = selection.anchorOffset;
+    if (!isCollapsed || !anchorNode || !anchorNode.data) return {
+      index: -1
+    };
+    var text = anchorNode.data;
+    var index = commentUtilities.getAtIndexWithAnchorPosition(anchorOffset, text);
+    return {
+      index: index,
+      text: text,
+      selection: selection
+    };
+  }, [commentUtilities]);
+  var getSearchedCollaborators = useCallback(function (_ref2) {
+    var atIndex = _ref2.atIndex,
+      text = _ref2.text,
+      anchorOffset = _ref2.anchorOffset;
+    if (atIndex !== 0 && text[atIndex - 1] !== ' ') return [];
+    if (atIndex === anchorOffset - 1) return collaborators;
+    var searchingText = text.substring(atIndex + 1);
+    if (searchingText) return searchCollaborators(collaborators, searchingText);
+    return [];
+  }, [collaborators]);
+  var handleInvolvedKeyUp = useCallback(function (event) {
+    // atIndex: Positional index of @
+    var _getAtInfo = getAtInfo(event),
+      atIndex = _getAtInfo.index,
+      text = _getAtInfo.text,
+      selection = _getAtInfo.selection;
+    if (atIndex === -1) {
+      hideCommentPopover();
+      return;
+    }
+    var anchorOffset = selection.anchorOffset;
+    var searchedCollaborators = getSearchedCollaborators({
+      atIndex: atIndex,
+      text: text,
+      anchorOffset: anchorOffset
+    });
+    if (searchedCollaborators.length === 0) {
+      hideCommentPopover();
+      return;
+    }
+    setActiveCollaboratorIndex(0);
+    setRange(selection.getRangeAt(0));
+    setSearchedCollaborators(searchedCollaborators);
+    setTimeout(function () {
+      var caretPosition = getSelectionCoords();
+      setCollaboratorsPopoverPosition(caretPosition);
+    }, 1);
+  }, [getSearchedCollaborators, getAtInfo, hideCommentPopover, setCollaboratorsPopoverPosition]);
+  var handleSelectingCollaborator = useCallback(function (event, direction) {
+    eventStopPropagation(event);
+    var collaboratorsLen = searchedCollaborators.length;
+    if (collaboratorsLen === 0) return;
+    var nextActiveCollaboratorIndex = activeCollaboratorIndex;
+    if (direction === DOWN) {
+      nextActiveCollaboratorIndex++;
+      if (nextActiveCollaboratorIndex >= collaboratorsLen) {
+        nextActiveCollaboratorIndex = 0;
+      }
+    } else {
+      nextActiveCollaboratorIndex--;
+      if (nextActiveCollaboratorIndex < 0) {
+        nextActiveCollaboratorIndex = collaboratorsLen - 1;
+      }
+    }
+    setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
+  }, [searchedCollaborators, activeCollaboratorIndex]);
+  var onSelectCollaborator = useCallback(function (collaborator) {
+    var selection = window.getSelection();
+    var callBack = function callBack() {
+      hideCommentPopover();
+      addParticipants(collaborator.username);
+    };
+    var newRange = commentUtilities.onSelectParticipant({
+      selection: selection,
+      range: range,
+      participant: collaborator,
+      callBack: callBack,
+      commentRef: commentRef
+    });
+    setRange(newRange);
+  }, [range, commentUtilities, hideCommentPopover, addParticipants]);
+  var handleSelectCollaborator = useCallback(function (event) {
+    if (searchedCollaborators.length === 0) return;
+    onSelectCollaborator(searchedCollaborators[activeCollaboratorIndex]);
+  }, [searchedCollaborators, activeCollaboratorIndex, onSelectCollaborator]);
+  var onKeyDown = useCallback(function (event) {
+    if (Hotkey.isModZ(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      hideCommentPopover();
+      event.nativeEvent.stopImmediatePropagation();
+      commentRef.current.innerHTML = '';
+      return;
+    }
+    if (Hotkey.isShiftEnter(event)) return;
+    if (Hotkey.isModP(event)) {
+      commentRef.current.blur();
+    }
+    if (event.keyCode === KeyCodes.Enter) {
+      event.preventDefault();
+      if (searchedCollaborators.length > 0) return;
+      onSubmit();
+    }
+    if (event.keyCode === KeyCodes.Esc) {
+      event.preventDefault();
+      onCancel();
+    }
+    if (event.keyCode === KeyCodes.UpArrow || event.keyCode === KeyCodes.DownArrow) {
+      event.stopPropagation();
+      if (searchedCollaborators.length > 0) {
+        event.preventDefault();
+      }
+    }
+  }, [onCancel, onSubmit, searchedCollaborators, commentRef, hideCommentPopover]);
+  var onKeyUp = useCallback(function (event) {
+    var selection = window.getSelection();
+    setRange(selection.getRangeAt(0));
+    if (event.keyCode === KeyCodes.DownArrow) {
+      handleSelectingCollaborator(event, DOWN);
+      return;
+    }
+    if (event.keyCode === KeyCodes.UpArrow) {
+      handleSelectingCollaborator(event, UP);
+      return;
+    }
+    if (event.keyCode === KeyCodes.Enter) {
+      handleSelectCollaborator();
+      return;
+    }
+    handleInvolvedKeyUp(event);
+  }, [handleSelectingCollaborator, handleInvolvedKeyUp, handleSelectCollaborator]);
+  var onMouseUp = useCallback(function () {
+    var selection = window.getSelection();
+    setRange(selection.getRangeAt(0));
+  }, []);
+  var onPaste = useCallback(function (event) {
+    commentUtilities.onPaste(event);
+  }, [commentUtilities]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: commentRef,
+    contentEditable: "true",
+    className: "comment-editor",
+    placeholder: t(placeholder),
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    onMouseUp: onMouseUp,
+    onPaste: onPaste
+  }), searchedCollaborators.length > 0 && /*#__PURE__*/React.createElement(ModalPortal, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comment-caret-list",
+    ref: collaboratorsPopoverRef
+  }, searchedCollaborators.map(function (participant, index) {
+    return /*#__PURE__*/React.createElement(CommentParticipantItem, {
+      key: participant.username,
+      participantIndex: index,
+      activeParticipantIndex: activeCollaboratorIndex,
+      participant: participant,
+      setScrollTop: setScrollTop,
+      onSelectParticipant: onSelectCollaborator
+    });
+  }))));
+});
+export default CommentInput;

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

@@ -6,6 +6,7 @@ import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap
 import dayjs from 'dayjs';
 import CommentEditor from './comment-editor';
 import Tooltip from '../../../components/tooltip';
+import { textToHtml } from '../utils';
 var CommentItem = function CommentItem(_ref) {
   var isActive = _ref.isActive,
     container = _ref.container,
@@ -121,8 +122,12 @@ var CommentItem = function CommentItem(_ref) {
     onClick: resubmit
   }, t('Resubmit')))))), /*#__PURE__*/React.createElement("div", {
     className: "comment-content"
-  }, !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, comment.comment)), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
-    className: 'pb-3',
+  }, !isEditing && /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: textToHtml(comment.comment)
+    }
+  })), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+    className: "pb-3",
     content: comment.comment,
     updateContent: updateContent,
     setIsEditing: setIsEditing

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

@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import context from '../../../context';
 import CommentEditor from './comment-editor';
 import CommentDeleteShadow from './comment-delete-shadow';
+import { textToHtml } from '../utils';
 var CommentItemReply = function CommentItemReply(_ref) {
   var isActive = _ref.isActive,
     container = _ref.container,
@@ -89,7 +90,11 @@ var CommentItemReply = function CommentItemReply(_ref) {
     onClick: onDeleteToggle
   }, t('Delete')))))), /*#__PURE__*/React.createElement("div", {
     className: "comment-content"
-  }, !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, reply.reply)), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+  }, !isEditing && /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: textToHtml(reply.reply)
+    }
+  })), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
     className: 'pb-3',
     type: "reply",
     content: reply.reply,

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

@@ -12,6 +12,7 @@ import CommentItemReply from './comment-item-reply';
 import CommentEditor from './comment-editor';
 import CommentItemResolvedReply from './comment-item-resolved-reply';
 import CommentDeleteShadow from './comment-delete-shadow';
+import { COMMENT_URL_CLASSNAME } from '../constants';
 export default function CommentItemWrapper(_ref) {
   var container = _ref.container,
     isActive = _ref.isActive,
@@ -300,7 +301,8 @@ export default function CommentItemWrapper(_ref) {
       return _ref7.apply(this, arguments);
     };
   }(), [comment.detail, comment.id, dispatch]);
-  var onItemClick = useCallback(function () {
+  var onItemClick = useCallback(function (event) {
+    if (event.target.className === COMMENT_URL_CLASSNAME) return;
     onCommentClick(comment);
   }, [comment, onCommentClick]);
   var _useState = useState(false),

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 .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 .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 .selected-participant img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comments-participants-popover .selected-participant .selected-participant-name {
+  margin-left: 4px;
+  flex: 1 1;
+  color: #16181b;
+}
+
+.sdoc-comments-participants-popover .selected-participant .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 .selected-participant .selected-participant-delete .sdocfont {
+  display: inline-block;
+  font-size: 12px;
+  color: #909090;
+}
+
+.sdoc-comments-participants-popover .selected-participant .selected-participant-delete:hover .sdocfont {
+  color: #5a5a5a;
+}
+
+.sdoc-comments-participants-popover .search-collaborators {
+  padding: 10px;
+}
+
+.sdoc-comments-participants-popover .search-collaborators input {
+  height: 28px;
+}
+
+.sdoc-comments-participants-popover .searched-collaborators {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-height: 200px;
+  padding: 10px;
+  overflow: auto;
+}
+
+.sdoc-comments-participants-popover .searched-collaborators.empty-tip {
+  opacity: .5;
+  font-size: 14px;
+  align-items: flex-start;
+}
+
+.sdoc-comments-participants-popover .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 .searched-collaborator:hover {
+  cursor: pointer;
+  background-color: #f8f9fa;
+}
+
+.sdoc-comments-participants-popover .searched-collaborator img {
+  width: 16px;
+  height: 16px;
+  margin-left: 10px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.sdoc-comments-participants-popover .searched-collaborator .selected-participant-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 4px;
+  color: #16181b;
+}
+
+.sdoc-comments-participants-popover .searched-collaborator .searched-collaborator-operation {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-comments-participants-popover .searched-collaborator .searched-collaborator-operation .sdocfont {
+  font-size: 12px;
+  color: #798d99;
+}

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

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useRef, useState, useImperativeHandle, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledPopover } from 'reactstrap';
+import { useCollaborators } from '../../../../hooks/';
+import SelectedParticipants from './selected-participants';
+import SearchedCollaborators from './searched-collaborators';
+import { searchCollaborators } from '../../utils';
+import { eventStopPropagation } from '../../../utils/mouse-event';
+import './index.css';
+var CommentParticipantsEditor = forwardRef(function (_ref, ref) {
+  var target = _ref.target;
+  var popoverRef = useRef();
+  var _useCollaborators = useCollaborators(),
+    collaborators = _useCollaborators.collaborators;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchedCollaborators = _useState4[0],
+    setSearchedCollaborators = _useState4[1];
+  useImperativeHandle(ref, function () {
+    return {
+      toggle: function toggle() {
+        popoverRef.current && popoverRef.current.toggle();
+      }
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+  }, [popoverRef.current]);
+  var onChangeSearch = useCallback(function (event) {
+    var newSearchValue = event.target.value;
+    if (searchValue === newSearchValue) return;
+    var searchedCollaborators = searchCollaborators(collaborators, newSearchValue);
+    setSearchValue(newSearchValue);
+    setSearchedCollaborators(searchedCollaborators);
+  }, [searchValue, collaborators]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    className: "sdoc-comments-participants-popover",
+    placement: "bottom-start",
+    hideArrow: true,
+    trigger: "legacy",
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-comments-participants-editor-container",
+    onClick: function onClick(event) {
+      return eventStopPropagation(event);
+    }
+  }, /*#__PURE__*/React.createElement(SelectedParticipants, null), /*#__PURE__*/React.createElement("div", {
+    className: "search-collaborators"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "form-control",
+    type: "text",
+    placeholder: t('Find_a_collaborator'),
+    value: searchValue,
+    onChange: onChangeSearch
+  })), /*#__PURE__*/React.createElement(SearchedCollaborators, {
+    collaborators: searchValue ? searchedCollaborators : collaborators
+  })));
+});
+export default CommentParticipantsEditor;

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

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParticipantsContext } from '../../hooks/use-participants';
+import { eventStopPropagation } from '../../../utils/mouse-event';
+var SearchedCollaborators = function SearchedCollaborators(_ref) {
+  var collaborators = _ref.collaborators;
+  var _useParticipantsConte = useParticipantsContext(),
+    participants = _useParticipantsConte.participants,
+    deleteParticipant = _useParticipantsConte.deleteParticipant,
+    addParticipants = _useParticipantsConte.addParticipants;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onSelectParticipant = useCallback(function (event, participant, isSelected) {
+    eventStopPropagation(event);
+    if (isSelected) {
+      deleteParticipant(participant.username);
+      return;
+    }
+    addParticipants(participant.username);
+  }, [deleteParticipant, addParticipants]);
+  if (!Array.isArray(collaborators) || collaborators.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "searched-collaborators empty-tip"
+    }, t('No_collaborators_available'));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "searched-collaborators"
+  }, collaborators.map(function (collaborator) {
+    var name = collaborator.name,
+      username = collaborator.username,
+      avatar_url = collaborator.avatar_url;
+    var isSelected = participants.find(function (participant) {
+      return participant.username === username;
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      key: username,
+      className: "searched-collaborator",
+      onClick: function onClick(event) {
+        return onSelectParticipant(event, collaborator, isSelected);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: avatar_url,
+      alt: ""
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "selected-participant-name"
+    }, name), /*#__PURE__*/React.createElement("div", {
+      className: "searched-collaborator-operation"
+    }, isSelected && /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    })));
+  }));
+};
+export default SearchedCollaborators;

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

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParticipantsContext } from '../../hooks/use-participants';
+var SelectedParticipants = function SelectedParticipants() {
+  var _useParticipantsConte = useParticipantsContext(),
+    participants = _useParticipantsConte.participants,
+    deleteParticipant = _useParticipantsConte.deleteParticipant;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onDeleteParticipant = useCallback(function (participant) {
+    deleteParticipant(participant.username);
+  }, [deleteParticipant]);
+  if (!Array.isArray(participants) || participants.length === 0) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "selected-participants"
+  }, participants.map(function (participant) {
+    var name = participant.name,
+      username = participant.username,
+      avatar_url = participant.avatar_url;
+    return /*#__PURE__*/React.createElement("div", {
+      key: username,
+      className: "selected-participant"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: avatar_url,
+      alt: ""
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "selected-participant-name"
+    }, name), /*#__PURE__*/React.createElement("div", {
+      className: "selected-participant-delete",
+      onClick: function onClick() {
+        return onDeleteParticipant(participant);
+      },
+      title: t('Delete')
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-sm-close"
+    })));
+  }));
+};
+export default SelectedParticipants;

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

@@ -3,11 +3,8 @@ import React, { useCallback, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { eventStopPropagation } from '../../utils/mouse-event';
-export var COMMENT_TYPES = {
-  all: 'All_comments',
-  resolved: 'Resolved_comments',
-  unresolved: 'Unresolved_comments'
-};
+import { COMMENT_TYPES } from '../constants';
+import CommentAllParticipants from './comment-all-participants';
 function GlobalCommentHeader(_ref) {
   var commentType = _ref.commentType,
     commentList = _ref.commentList,
@@ -34,6 +31,8 @@ function GlobalCommentHeader(_ref) {
   var id = 'comment-type-controller';
   return /*#__PURE__*/React.createElement("div", {
     className: "comments-panel-body__header"
+  }, /*#__PURE__*/React.createElement(CommentAllParticipants, null), /*#__PURE__*/React.createElement("div", {
+    className: "comments-types-count"
   }, /*#__PURE__*/React.createElement("div", {
     id: "comment-types",
     className: "comment-type"
@@ -71,6 +70,6 @@ function GlobalCommentHeader(_ref) {
     }
   }, t(COMMENT_TYPES.unresolved))))), /*#__PURE__*/React.createElement("div", {
     className: "comment-count-tip"
-  }, commentTip));
+  }, commentTip)));
 }
 export default withTranslation('sdoc-editor')(GlobalCommentHeader);