@atlaskit/editor-plugin-mentions/dist/esm/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 var profileCardRenderer = function profileCardRenderer(_ref) {
  var dom = _ref.dom,
    options = _ref.options,
    portalProviderAPI = _ref.portalProviderAPI,
    node = _ref.node,
    api = _ref.api;
  var renderingProfileCard = false;
  var navigatingToProfile = false;
  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
  var key = uuid();
  var cleanupSelection;
  var removeProfileCard = function removeProfileCard() {
    var _cleanupSelection;
    if (dom instanceof HTMLElement) {
      dom.setAttribute('aria-expanded', 'false');
    }
    portalProviderAPI.remove(key);
    renderingProfileCard = false;
    (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
  };
  var renderProfileCardPopup = function renderProfileCardPopup(renderProfileCard) {
    var _api$selection;
    if (!(dom instanceof HTMLElement) || renderingProfileCard) {
      return;
    }
    var referenceElement = dom;
    referenceElement.setAttribute('aria-expanded', 'true');
    renderingProfileCard = true;
    portalProviderAPI.render(function () {
      return renderProfileCard(referenceElement);
    }, referenceElement, key);
    cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
      var nextSharedState = _ref2.nextSharedState;
      var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
      if (selection instanceof NodeSelection ? selection.node === node : false) {
        return;
      }
      removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
    });
  };
  var renderEditorProfileCard = function renderEditorProfileCard() {
    renderProfileCardPopup(function (referenceElement) {
      return /*#__PURE__*/React.createElement(ProfileCardComponent, {
        activeMention: node,
        profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
        dom: referenceElement,
        closeComponent: removeProfileCard
      });
    });
  };
  var renderUserProfileCard = function renderUserProfileCard(_ref3) {
    var userId = _ref3.userId,
      cloudId = _ref3.cloudId,
      renderUserMentionCard = _ref3.renderUserMentionCard;
    if (!renderUserMentionCard) {
      return false;
    }
    renderProfileCardPopup(function (referenceElement) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, renderUserMentionCard({
        userId: userId,
        cloudId: cloudId,
        children: null,
        referenceElement: referenceElement
      }));
    });
    return true;
  };
  var navigateToProfile = function navigateToProfile(userId, cloudId) {
    if (navigatingToProfile) {
      return;
    }
    navigatingToProfile = true;
    var _navigateToTeamsApp = navigateToTeamsApp({
        type: 'USER',
        payload: {
          userId: userId
        },
        cloudId: cloudId
      }),
      href = _navigateToTeamsApp.href,
      target = _navigateToTeamsApp.target;
    window.open(href, target, 'noopener,noreferrer');
  };
  var renderDefaultProfileCard = function renderDefaultProfileCard(userId, provider) {
    if (renderUserProfileCard({
      userId: userId,
      cloudId: provider.cloudId,
      renderUserMentionCard: provider.renderUserMentionCard
    })) {
      return;
    }
    navigateToProfile(userId, provider.cloudId);
  };
  var listenerCleanup = bind(dom, {
    type: 'click',
    listener: function listener() {
      if (fg('people-teams_migrate-user-profile-card')) {
        var _node$attrs, _options$profilecardP;
        var 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 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (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: function destroyProfileCard() {
      listenerCleanup();
      removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
    },
    removeProfileCard: removeProfileCard
  };
};