@atlaskit/editor-plugin-avatar-group/dist/esm/ui/avatars.js

Avatar Group plugin for @atlaskit/editor-core.

/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { useIntl } from 'react-intl';
import AvatarGroup from '@atlaskit/avatar-group';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { Selection } from '@atlaskit/editor-prosemirror/state';
import { avatarContainerStyles } from './styles';
import toAvatar from './to-avatar';
var scrollToCollabCursor = function scrollToCollabCursor(editorAPI, participants, sessionId, index, editorAnalyticsAPI) {
  var selectedUser = participants[index];
  var cursorPos = selectedUser.cursorPos;
  if (selectedUser && cursorPos !== undefined && selectedUser.sessionId !== sessionId) {
    var _editorAPI$core, _editorAPI$core2;
    var analyticsPayload = {
      action: ACTION.MATCHED,
      actionSubject: ACTION_SUBJECT.SELECTION,
      eventType: EVENT_TYPE.TRACK
    };
    editorAPI === null || editorAPI === void 0 || (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 || (_editorAPI$core = _editorAPI$core.actions) === null || _editorAPI$core === void 0 || _editorAPI$core.execute(function (_ref) {
      var tr = _ref.tr;
      tr.setSelection(Selection.near(tr.doc.resolve(cursorPos)));
      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(analyticsPayload)(tr);
      tr.scrollIntoView();
      return tr;
    });
    editorAPI === null || editorAPI === void 0 || (_editorAPI$core2 = editorAPI.core) === null || _editorAPI$core2 === void 0 || (_editorAPI$core2 = _editorAPI$core2.actions) === null || _editorAPI$core2 === void 0 || _editorAPI$core2.focus();
  }
};
export var Avatars = /*#__PURE__*/React.memo(function (props) {
  var _props$participants;
  var sessionId = props.sessionId,
    featureFlags = props.featureFlags,
    editorAPI = props.editorAPI;
  var intl = useIntl();
  // .slice() turns ReadonlyArray<CollabParticipant> into a mutable CollabParticipant[]
  var participants = (_props$participants = props.participants) === null || _props$participants === void 0 || (_props$participants = _props$participants.toArray()) === null || _props$participants === void 0 ? void 0 : _props$participants.slice();
  if (!participants) {
    return null;
  }

  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
  var avatars = participants.sort(function (p) {
    return p.sessionId === sessionId ? -1 : 1;
  }).map(function (participant) {
    return toAvatar(participant, editorAPI, intl.formatMessage);
  });
  if (!avatars.length) {
    return null;
  }
  return (
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    jsx("div", {
      css: avatarContainerStyles
    }, jsx(AvatarGroup, {
      appearance: "stack",
      size: "medium",
      data: avatars,
      maxCount: 3
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      onAvatarClick: function onAvatarClick(_event, _analytics, index) {
        var allowCollabAvatarScroll = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll;

        // user does not need to scroll to their own position (index 0)
        if (allowCollabAvatarScroll && index > 0) {
          scrollToCollabCursor(editorAPI, participants, props.sessionId, index, props.editorAnalyticsAPI);
        }
      }
    }), props.children)
  );
});