@atlaskit/editor-plugin-mentions 12.2.10 → 12.3.0

package/dist/es2019/nodeviews/profileCardRenderer.js

@@ -5,7 +5,8 @@ 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 { ProfileCardComponent } from '../ui/ProfileCardComponent';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
+import { isAgentMentionType, ProfileCardComponent } from '../ui/ProfileCardComponent';
 export const profileCardRenderer = ({
   dom,
   options,
@@ -27,88 +28,102 @@ export const profileCardRenderer = ({
     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;
+        var _node$attrs, _options$profilecardP;
         const userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
-        if (userId) {
-          var _options$profilecardP;
-          navigatingToProfile = false;
-          options === null || options === void 0 ? void 0 : (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 ? void 0 : _options$profilecardP.then(provider => {
-            // If a consumer (e.g. Confluence) has supplied a custom profile card
-            // renderer, render it into the portal instead of navigating away. The
-            // consumer owns its own popup/positioning behavior - subsequent clicks
-            // while the card is already open are no-ops here so the card's own
-            // outside-click / toggle logic can take over.
-            if (provider.renderUserMentionCard) {
-              if (dom instanceof HTMLElement && !renderingProfileCard) {
-                var _api$selection;
-                dom.setAttribute('aria-expanded', 'true');
-                renderingProfileCard = true;
-                portalProviderAPI.render(() => {
-                  var _provider$renderUserM;
-                  return /*#__PURE__*/React.createElement(React.Fragment, null, (_provider$renderUserM = provider.renderUserMentionCard) === null || _provider$renderUserM === void 0 ? void 0 : _provider$renderUserM.call(provider, {
-                    userId,
-                    cloudId: provider.cloudId,
-                    children: null,
-                    referenceElement: dom
-                  }));
-                }, dom, 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();
-                });
-              }
-              return;
-            }
-            if (navigatingToProfile) {
-              return;
-            }
-            navigatingToProfile = true;
-            const {
-              href,
-              target
-            } = navigateToTeamsApp({
-              type: 'USER',
-              payload: {
-                userId
-              },
-              cloudId: provider.cloudId
-            });
-            window.open(href, target, 'noopener,noreferrer');
-          });
+        if (!userId) {
+          return;
         }
-        return;
-      }
-      if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
-        var _api$selection2;
-        dom.setAttribute('aria-expanded', 'true');
-        renderingProfileCard = true;
-        portalProviderAPI.render(() => /*#__PURE__*/React.createElement(ProfileCardComponent, {
-          activeMention: node,
-          profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
-          dom: dom,
-          closeComponent: removeProfileCard
-        }), dom, key);
-        // If we change the selection we should also remove the profile card. The "deselectNode"
-        // should usually catch this, but it's possible (ie. on triple click) for this not to be called
-        // which means the profile card gets stuck open until you click + change selection
-        cleanupSelection = api === null || api === void 0 ? void 0 : (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.onChange(({
-          nextSharedState
-        }) => {
-          const selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
-          if (selection instanceof NodeSelection ? selection.node === node : false) {
+        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;
           }
-          removeProfileCard === null || removeProfileCard === void 0 ? void 0 : removeProfileCard();
+          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();
       }
     }
   });

package/dist/es2019/pm-plugins/main.js

@@ -12,7 +12,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "12.2.9";
+const PACKAGE_VERSION = "12.2.11";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/ProfileCardComponent.js

@@ -2,11 +2,20 @@
 import "./ProfileCardComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
+import Loadable from 'react-loadable';
 import { ProfileCardLazy } from '@atlaskit/profilecard/user';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { Popup } from './PopperWrapper';
+const AgentProfileCardResourcedLazy = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-mentions-agent-profile-card-resourced" */
+  '@atlaskit/profilecard/agent-profile-card-resourced').then(({
+    AgentProfileCardResourced
+  }) => AgentProfileCardResourced),
+  loading: () => null
+});
 const styles = {
   loadingStyles: "_2rko12b0 _16qs130s"
 };
@@ -16,6 +25,7 @@ const LoadingWrapper = ({
 }) => isLoading ? /*#__PURE__*/React.createElement("div", {
   className: ax([styles.loadingStyles])
 }, children) : children;
+export const isAgentMentionType = userType => userType === 'APP' || userType === 'AGENT';
 export const useProfileCardState = ({
   id,
   provider
@@ -61,6 +71,10 @@ export const useProfileCardState = ({
     hasError
   };
 };
+
+/**
+ * Renders the profile card popup for an editor mention node.
+ */
 export function ProfileCardComponent({
   profilecardProvider,
   activeMention,
@@ -77,20 +91,9 @@ export function ProfileCardComponent({
   const {
     id,
     text,
-    accessLevel
+    accessLevel,
+    userType
   } = (_ref = activeMention.attrs) !== null && _ref !== void 0 ? _ref : {};
-  const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
-  const {
-    data,
-    reportingLinesData,
-    shouldShowGiveKudos,
-    teamCentralBaseUrl,
-    isLoading,
-    hasError
-  } = useProfileCardState({
-    id,
-    provider
-  });
   useEffect(() => {
     return bind(window, {
       type: 'keydown',
@@ -101,9 +104,56 @@ export function ProfileCardComponent({
       }
     });
   });
+  if (!expVal('platform_editor_agent_mentions', 'isEnabled', false)) {
+    return /*#__PURE__*/React.createElement(Popup, {
+      referenceElement: dom
+    }, /*#__PURE__*/React.createElement(UserProfileCardContent, {
+      accessLevel: accessLevel,
+      id: id,
+      provider: provider,
+      text: text
+    }));
+  }
+  const isAgentMention = isAgentMentionType(userType);
   return /*#__PURE__*/React.createElement(Popup, {
     referenceElement: dom
-  }, /*#__PURE__*/React.createElement(LoadingWrapper, {
+  }, isAgentMention && provider && id ? /*#__PURE__*/React.createElement(AgentProfileCardContent, {
+    accountId: id,
+    provider: provider
+  }) : /*#__PURE__*/React.createElement(UserProfileCardContent, {
+    accessLevel: accessLevel,
+    id: id,
+    provider: provider,
+    text: text
+  }));
+}
+const AgentProfileCardContent = ({
+  accountId,
+  provider
+}) => /*#__PURE__*/React.createElement(AgentProfileCardResourcedLazy, {
+  accountId: accountId,
+  cloudId: provider.cloudId,
+  resourceClient: provider.resourceClient
+});
+const UserProfileCardContent = ({
+  accessLevel,
+  id,
+  provider,
+  text
+}) => {
+  const actions = useMemo(() => provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel), [accessLevel, id, provider, text]);
+  const {
+    data,
+    reportingLinesData,
+    shouldShowGiveKudos,
+    teamCentralBaseUrl,
+    isLoading,
+    hasError
+  } = useProfileCardState({
+    id,
+    provider
+  });
+  return /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
     avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
@@ -128,5 +178,5 @@ export function ProfileCardComponent({
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl,
     isRenderedInPortal: expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)
-  })));
-}
+  }));
+};

package/dist/es2019/ui/type-ahead/index.js

@@ -10,6 +10,7 @@ import { MENTION_ITEM_HEIGHT, MentionItem } from '@atlaskit/mention/item';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { createSingleMentionFragment } from '../../editor-commands';
 import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../../pm-plugins/mentionPlaceholder';
 import { getMentionPluginState } from '../../pm-plugins/utils';
@@ -17,7 +18,8 @@ import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../InviteItem';
 import InviteItemWithEmailDomain from '../InviteItem/InviteItemWithEmailDomain';
 import { buildTypeAheadCancelPayload, buildTypeAheadInsertedPayload, buildTypeAheadInviteItemClickedPayload, buildTypeAheadInviteItemViewedPayload, buildTypeAheadRenderedPayload } from './analytics';
 import { isInviteItem, isTeamStats, isTeamType, shouldKeepInviteItem } from './utils';
-const isAgentType = userType => userType === 'APP' || userType === 'AGENT';
+const isAgentUserType = userType => userType === 'APP' || userType === 'AGENT';
+const isAgentMention = mention => isAgentUserType(mention.userType) || mention.appType === 'agent';
 const createInviteItem = ({
   mentionProvider,
   onInviteItemMount,
@@ -305,7 +307,7 @@ export const createTypeAheadConfig = ({
         title: intl.formatMessage(mentionMessages.typeAheadSectionPeople),
         filter: item => {
           var _item$mention;
-          return !isAgentType(((_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.userType) || '');
+          return !isAgentUserType(((_item$mention = item.mention) === null || _item$mention === void 0 ? void 0 : _item$mention.userType) || '');
         },
         limit: 6
       }, {
@@ -313,7 +315,7 @@ export const createTypeAheadConfig = ({
         title: intl.formatMessage(mentionMessages.typeAheadSectionAgents),
         filter: item => {
           var _item$mention2;
-          return isAgentType(((_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.userType) || '');
+          return isAgentUserType(((_item$mention2 = item.mention) === null || _item$mention2 === void 0 ? void 0 : _item$mention2.userType) || '');
         }
       }];
     },
@@ -349,6 +351,7 @@ export const createTypeAheadConfig = ({
         ...contextIdentifierProvider,
         sessionId
       };
+      const shouldSuppressInviteForAgentMention = expVal('platform_editor_agent_mentions', 'isEnabled', false) && isAgentMention(item.mention);
       if (mentionProvider && !isInviteItem(item.mention)) {
         mentionProvider.recordMentionSelection(item.mention, mentionContext);
       }
@@ -402,21 +405,22 @@ export const createTypeAheadConfig = ({
       // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
       const mentionLocalId = uuid();
       if (handleMentionsChanged) {
+        const mentionChange = {
+          id,
+          localId: mentionLocalId,
+          method: 'typed',
+          type: 'added',
+          ...(shouldSuppressInviteForAgentMention ? {
+            shouldSuppressMentionNotification: true
+          } : {})
+        };
         if (taskItemId) {
           handleMentionsChanged([{
-            type: 'added',
-            localId: mentionLocalId,
-            id,
-            taskLocalId: taskItemId,
-            method: 'typed'
+            ...mentionChange,
+            taskLocalId: taskItemId
           }]);
         } else {
-          handleMentionsChanged([{
-            type: 'added',
-            localId: mentionLocalId,
-            id,
-            method: 'typed'
-          }]);
+          handleMentionsChanged([mentionChange]);
         }
       }
       fireEvent(buildTypeAheadInsertedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, mentionLocalId, sourceListItem.map(x => x.mention), query, contextIdentifierProvider, taskListId, taskItemId));
@@ -426,14 +430,15 @@ export const createTypeAheadConfig = ({
       if (mentionProvider && isTeamType(userType)) {
         return insert(buildNodesForTeamMention(schema, item.mention, mentionProvider, sanitizePrivateContent));
       }
-      if (isXProductUser && mentionProvider && mentionProvider.inviteXProductUser) {
+      if (!shouldSuppressInviteForAgentMention && isXProductUser && mentionProvider && mentionProvider.inviteXProductUser) {
         mentionProvider.inviteXProductUser(id, name);
       }
       return insert(createSingleMentionFragment({
         mentionProvider,
         mentionInsertDisplayName,
         tr: state.tr,
-        sanitizePrivateContent
+        sanitizePrivateContent,
+        suppressInviteXProductUser: shouldSuppressInviteForAgentMention
       })({
         name,
         id,

package/dist/esm/editor-commands/index.js

@@ -3,11 +3,16 @@ import uuid from 'uuid';
 import { getAnnotationMarksForPos } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
+import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
+var isAgentUserType = function isAgentUserType(userType) {
+  return userType === 'APP' || userType === 'AGENT';
+};
 export var createSingleMentionFragment = function createSingleMentionFragment(_ref) {
   var mentionInsertDisplayName = _ref.mentionInsertDisplayName,
     mentionProvider = _ref.mentionProvider,
     tr = _ref.tr,
-    sanitizePrivateContent = _ref.sanitizePrivateContent;
+    sanitizePrivateContent = _ref.sanitizePrivateContent,
+    suppressInviteXProductUser = _ref.suppressInviteXProductUser;
   return function (_ref2) {
     var name = _ref2.name,
       id = _ref2.id,
@@ -19,7 +24,7 @@ export var createSingleMentionFragment = function createSingleMentionFragment(_r
     var schema = tr.doc.type.schema;
     var trimmedNickname = nickname && nickname.startsWith('@') ? nickname.slice(1) : nickname;
     var renderName = mentionInsertDisplayName || !trimmedNickname ? name : trimmedNickname;
-    if (isXProductUser && mentionProvider && mentionProvider.inviteXProductUser) {
+    if (!suppressInviteXProductUser && isXProductUser && mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.inviteXProductUser) {
       mentionProvider.inviteXProductUser(id, name);
     }
 
@@ -62,7 +67,8 @@ export var insertMention = function insertMention(_ref3) {
         sanitizePrivateContent: sanitizePrivateContent,
         mentionProvider: mentionProvider,
         mentionInsertDisplayName: mentionInsertDisplayName,
-        tr: tr
+        tr: tr,
+        suppressInviteXProductUser: expVal('platform_editor_agent_mentions', 'isEnabled', false) && isAgentUserType(userType)
       })({
         name: name,
         id: id,

package/dist/esm/nodeviews/profileCardRenderer.js

@@ -5,7 +5,8 @@ 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 { ProfileCardComponent } from '../ui/ProfileCardComponent';
+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,
@@ -26,87 +27,105 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
     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;
+        var _node$attrs, _options$profilecardP;
         var userId = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
-        if (userId) {
-          var _options$profilecardP;
-          navigatingToProfile = false;
-          options === null || options === void 0 || (_options$profilecardP = options.profilecardProvider) === null || _options$profilecardP === void 0 || _options$profilecardP.then(function (provider) {
-            // If a consumer (e.g. Confluence) has supplied a custom profile card
-            // renderer, render it into the portal instead of navigating away. The
-            // consumer owns its own popup/positioning behavior - subsequent clicks
-            // while the card is already open are no-ops here so the card's own
-            // outside-click / toggle logic can take over.
-            if (provider.renderUserMentionCard) {
-              if (dom instanceof HTMLElement && !renderingProfileCard) {
-                var _api$selection;
-                dom.setAttribute('aria-expanded', 'true');
-                renderingProfileCard = true;
-                portalProviderAPI.render(function () {
-                  var _provider$renderUserM;
-                  return /*#__PURE__*/React.createElement(React.Fragment, null, (_provider$renderUserM = provider.renderUserMentionCard) === null || _provider$renderUserM === void 0 ? void 0 : _provider$renderUserM.call(provider, {
-                    userId: userId,
-                    cloudId: provider.cloudId,
-                    children: null,
-                    referenceElement: dom
-                  }));
-                }, dom, 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();
-                });
-              }
-              return;
-            }
-            if (navigatingToProfile) {
-              return;
-            }
-            navigatingToProfile = true;
-            var _navigateToTeamsApp = navigateToTeamsApp({
-                type: 'USER',
-                payload: {
-                  userId: userId
-                },
-                cloudId: provider.cloudId
-              }),
-              href = _navigateToTeamsApp.href,
-              target = _navigateToTeamsApp.target;
-            window.open(href, target, 'noopener,noreferrer');
-          });
+        if (!userId) {
+          return;
         }
-        return;
-      }
-      if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
-        var _api$selection2;
-        dom.setAttribute('aria-expanded', 'true');
-        renderingProfileCard = true;
-        portalProviderAPI.render(function () {
-          return /*#__PURE__*/React.createElement(ProfileCardComponent, {
-            activeMention: node,
-            profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
-            dom: dom,
-            closeComponent: removeProfileCard
-          });
-        }, dom, key);
-        // If we change the selection we should also remove the profile card. The "deselectNode"
-        // should usually catch this, but it's possible (ie. on triple click) for this not to be called
-        // which means the profile card gets stuck open until you click + change selection
-        cleanupSelection = api === null || api === void 0 || (_api$selection2 = api.selection) === null || _api$selection2 === void 0 ? void 0 : _api$selection2.sharedState.onChange(function (_ref3) {
-          var nextSharedState = _ref3.nextSharedState;
-          var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
-          if (selection instanceof NodeSelection ? selection.node === node : false) {
+        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;
           }
-          removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
+          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();
       }
     }
   });

package/dist/esm/pm-plugins/main.js

@@ -15,7 +15,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "12.2.9";
+var PACKAGE_VERSION = "12.2.11";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {