@atlaskit/editor-plugin-mentions/dist/es2019/nodeviews/profileCardRenderer.js

Mentions plugin for @atlaskit/editor-core

import React from 'react';
import { bind } from 'bind-event-listener';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { fg } from '@atlaskit/platform-feature-flags';
import { navigateToTeamsApp } from '@atlaskit/teams-app-config/navigation';
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
import { isAgentMentionType, ProfileCardComponent } from '../ui/ProfileCardComponent';
export const profileCardRenderer = ({
  dom,
  options,
  portalProviderAPI,
  node,
  api
}) => {
  let renderingProfileCard = false;
  let navigatingToProfile = false;
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
  const key = uuid();
  let cleanupSelection;
  const removeProfileCard = () => {
    var _cleanupSelection;
    if (dom instanceof HTMLElement) {
      dom.setAttribute('aria-expanded', 'false');
    }
    portalProviderAPI.remove(key);
    renderingProfileCard = false;
    (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 ? void 0 : _cleanupSelection();
  };
  const renderProfileCardPopup = renderProfileCard => {
    var _api$selection;
    if (!(dom instanceof HTMLElement) || renderingProfileCard) {
      return;
    }
    const referenceElement = dom;
    referenceElement.setAttribute('aria-expanded', 'true');
    renderingProfileCard = true;
    portalProviderAPI.render(() => renderProfileCard(referenceElement), referenceElement, key);
    cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(({
      nextSharedState
    }) => {
      const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
      if (selection instanceof NodeSelection ? selection.node === node : false) {
        return;
      }
      removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
    });
  };
  const renderEditorProfileCard = () => {
    renderProfileCardPopup(referenceElement => /*#__PURE__*/React.createElement(ProfileCardComponent, {
      activeMention: node,
      profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
      dom: referenceElement,
      closeComponent: removeProfileCard
    }));
  };
  const renderUserProfileCard = ({
    userId,
    cloudId,
    renderUserMentionCard
  }) => {
    if (!renderUserMentionCard) {
      return false;
    }
    renderProfileCardPopup(referenceElement => /*#__PURE__*/React.createElement(React.Fragment, null, renderUserMentionCard({
      userId,
      cloudId,
      children: null,
      referenceElement
    })));
    return true;
  };
  const navigateToProfile = (userId, cloudId) => {
    if (navigatingToProfile) {
      return;
    }
    navigatingToProfile = true;
    const {
      href,
      target
    } = navigateToTeamsApp({
      type: 'USER',
      payload: {
        userId
      },
      cloudId
    });
    window.open(href, target, 'noopener,noreferrer');
  };
  const renderDefaultProfileCard = (userId, provider) => {
    if (renderUserProfileCard({
      userId,
      cloudId: provider.cloudId,
      renderUserMentionCard: provider.renderUserMentionCard
    })) {
      return;
    }
    navigateToProfile(userId, provider.cloudId);
  };
  const listenerCleanup = bind(dom, {
    type: 'click',
    listener: () => {
      if (fg('people-teams_migrate-user-profile-card')) {
        var _node$attrs, _options$profilecardP;
        const userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
        if (!userId) {
          return;
        }
        navigatingToProfile = false;
        options === null || options === void 0 ? void 0 : (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 ? void 0 : _options$profilecardP.then(provider => {
          var _node$attrs2;
          if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
            renderDefaultProfileCard(userId, provider);
            return;
          }
          if (isAgentMentionType((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.userType)) {
            renderEditorProfileCard();
          } else {
            renderDefaultProfileCard(userId, provider);
          }
        });
        return;
      }
      if (options !== null && options !== void 0 && options.profilecardProvider) {
        renderEditorProfileCard();
      }
    }
  });
  return {
    destroyProfileCard: () => {
      listenerCleanup();
      removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
    },
    removeProfileCard
  };
};