@atlaskit/editor-plugin-mentions 16.1.5 → 16.2.0

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -1,14 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
 import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
 import { isRestricted } from '@atlaskit/mention/types';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { disabledTooltipRenderer } from './disabledTooltipRenderer';
+import { mentionAvatarRenderer } from './mentionAvatarRenderer';
 import { profileCardRenderer } from './profileCardRenderer';
 const primitiveClassName = 'editor-mention-primitive';
+const primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
+const avatarContainerClassName = 'editor-mention-avatar';
+const mentionTextClassName = 'editor-mention-text';
+const genericMentionIds = ['HipChat', 'all', 'here'];
+const unknownMentionText = `@${UNKNOWN_USER_ID}`;
 // eslint-disable-next-line require-unicode-regexp
 const AT_PREFIX_REGEX = /^@/;
 const getAccessibilityLabelFromName = name => name.replace(AT_PREFIX_REGEX, '');
@@ -31,7 +40,7 @@ const isAgentMentionsExperimentEnabled = () => expVal('platform_editor_agent_men
  * consistent and can't drift apart.
  */
 const isAgentAaidText = (node, isAgentMentionsEnabled) => isAgentMentionsEnabled && (node.attrs.userType === 'APP' || node.attrs.userType === 'AGENT') && !!node.attrs.text && isMentionTextAnAaid(node.attrs.text);
-const toDOM = node => {
+const toDOM = (node, hasAvatarSlot) => {
   // packages/elements/mention/src/components/Mention/index.tsx
   let mentionAttrs = {
     contenteditable: 'false',
@@ -58,14 +67,25 @@ const toDOM = node => {
   }
   const browser = getBrowserInfo();
   const hasAgentAaidText = isAgentAaidText(node, isAgentMentionsEnabled);
+  const mentionText = node.attrs.text && !hasAgentAaidText ? node.attrs.text : '@…';
+  const visibleMentionText = hasAvatarSlot && mentionText.startsWith('@') ? mentionText.slice(1) : mentionText;
+  const mentionContentSpec = hasAvatarSlot ? ['span', {
+    spellcheck: 'false',
+    class: `${primitiveClassName} ${primitiveWithAvatarClassName}`
+  }, ['span', {
+    class: avatarContainerClassName,
+    'aria-hidden': 'true'
+  }], ['span', {
+    class: mentionTextClassName
+  }, visibleMentionText]] : ['span', {
+    spellcheck: 'false',
+    class: primitiveClassName
+  }, mentionText];
   return ['span', mentionAttrs, ['span', {
     class: 'zeroWidthSpaceContainer'
   }, ['span', {
     class: 'inlineNodeViewAddZeroWidthSpace'
-  }, ZERO_WIDTH_SPACE]], ['span', {
-    spellcheck: 'false',
-    class: primitiveClassName
-  }, node.attrs.text && !hasAgentAaidText ? node.attrs.text : '@…'], browser.android ? ['span', {
+  }, ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
@@ -75,7 +95,7 @@ const toDOM = node => {
   }, ZERO_WIDTH_SPACE]];
 };
 const processName = name => {
-  return name.status === MentionNameStatus.OK ? `@${name.name || ''}` : `@_|unknown|_`;
+  return name.status === MentionNameStatus.OK ? `@${name.name || ''}` : unknownMentionText;
 };
 const handleProviderName = async (mentionProvider, node, isAgentMentionsEnabled) => {
   // Also resolve when text is a raw AAID — provider will return the real display name.
@@ -101,22 +121,37 @@ const getNewState = (isHighlighted, isRestricted, isDisabled) => {
 export class MentionNodeView {
   constructor(node, config) {
     var _this$domElement$quer, _api$mention$sharedSt;
+    _defineProperty(this, "hasAvatarSlot", false);
+    _defineProperty(this, "isDestroyed", false);
     const {
       options,
       api,
       portalProviderAPI,
       editorView
     } = config;
+    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && isExperimentEnabled('platform_editor_mention_node_avatar');
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(node));
+    } = DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot));
     this.dom = dom;
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
     this.domElement = dom instanceof HTMLElement ? dom : undefined;
     this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(`.${primitiveClassName}`)) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
+    this.mentionTextElement = this.mentionPrimitiveElement;
+    if (this.hasAvatarSlot) {
+      var _this$domElement$quer2, _this$domElement, _this$domElement2;
+      this.mentionTextElement = (_this$domElement$quer2 = (_this$domElement = this.domElement) === null || _this$domElement === void 0 ? void 0 : _this$domElement.querySelector(`.${mentionTextClassName}`)) !== null && _this$domElement$quer2 !== void 0 ? _this$domElement$quer2 : this.mentionPrimitiveElement;
+      const avatarContainer = (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.querySelector(`.${avatarContainerClassName}`);
+      if (avatarContainer) {
+        this.mentionAvatar = mentionAvatarRenderer({
+          container: avatarContainer
+        });
+        this.resolveMentionAvatar(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
+      }
+    }
     const {
       mentionProvider
     } = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {};
@@ -242,9 +277,36 @@ export class MentionNodeView {
   setTextContent(name, isAgentMentionsEnabled) {
     // Also overwrite when text is a raw AAID so the resolved name takes precedence.
     const textIsAaid = isAgentAaidText(this.node, isAgentMentionsEnabled);
-    if (name && (!this.node.attrs.text || textIsAaid) && this.mentionPrimitiveElement) {
-      this.mentionPrimitiveElement.textContent = name;
+    if (name && (!this.node.attrs.text || textIsAaid) && this.mentionTextElement) {
+      this.setVisibleText(name);
+    }
+  }
+  setVisibleText(text) {
+    if (!this.mentionTextElement) {
+      return;
+    }
+    this.mentionTextElement.textContent = this.hasAvatarSlot && text.startsWith('@') && text !== unknownMentionText ? text.slice(1) : text;
+  }
+  resolveMentionAvatar(mentionNodeDataProvider) {
+    if (!this.hasAvatarSlot || !mentionNodeDataProvider || this.node.attrs.userType === 'SPECIAL') {
+      return;
     }
+    const mention = {
+      id: this.node.attrs.id,
+      userType: this.node.attrs.userType
+    };
+    const applyData = data => {
+      var _this$mentionAvatar;
+      if (this.isDestroyed || !(data !== null && data !== void 0 && data.avatarUrl)) {
+        return;
+      }
+      (_this$mentionAvatar = this.mentionAvatar) === null || _this$mentionAvatar === void 0 ? void 0 : _this$mentionAvatar.render(data);
+    };
+    mentionNodeDataProvider.getMentionData(mention, payload => {
+      if (payload.data) {
+        applyData(payload.data);
+      }
+    });
   }
   shouldHighlightMention(mentionProvider) {
     var _this$config$options;
@@ -316,7 +378,8 @@ export class MentionNodeView {
     return true;
   }
   destroy() {
-    var _this$cleanup, _this$destroyProfileC, _this$disabledTooltip, _this$unsubscribeFrom2;
+    var _this$cleanup, _this$destroyProfileC, _this$mentionAvatar2, _this$disabledTooltip, _this$unsubscribeFrom2;
+    this.isDestroyed = true;
     // Surface the destruction to the provider before tearing down so the
     // chat layer can react (e.g. drop the agent id from `selectedAgentIds`).
     // This is the lowest-level deletion signal — fires for backspace,
@@ -332,6 +395,8 @@ export class MentionNodeView {
     }
     (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 ? void 0 : _this$cleanup.call(this);
     (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 ? void 0 : _this$destroyProfileC.call(this);
+    (_this$mentionAvatar2 = this.mentionAvatar) === null || _this$mentionAvatar2 === void 0 ? void 0 : _this$mentionAvatar2.destroy();
+    this.mentionAvatar = undefined;
     (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 ? void 0 : _this$disabledTooltip.destroy();
     this.disabledTooltip = undefined;
     (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 ? void 0 : _this$unsubscribeFrom2.call(this);

package/dist/es2019/nodeviews/profileCardRenderer.js

@@ -57,14 +57,16 @@ export const profileCardRenderer = ({
   const renderEditorProfileCard = () => {
     const isReducedProfileCards = expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false);
     const clickedNode = isReducedProfileCards ? currentNode : node;
-    const activeMention = isReducedProfileCards ? ((_dom$querySelector, _dom$querySelector$te, _currentNode, _currentNode2, _currentNode2$attrs) => {
-      // Read the display name from the DOM element at click time — this is
-      // always up-to-date even when node.attrs.text is absent
-      const primitiveText = dom instanceof HTMLElement ? (_dom$querySelector = dom.querySelector('.editor-mention-primitive')) === null || _dom$querySelector === void 0 ? void 0 : (_dom$querySelector$te = _dom$querySelector.textContent) === null || _dom$querySelector$te === void 0 ? void 0 : _dom$querySelector$te.trim() : undefined;
+    const activeMention = isReducedProfileCards ? ((_ref, _ref$textContent, _currentNode, _currentNode2, _currentNode2$attrs, _currentNode3, _currentNode3$attrs) => {
+      // Avatar mentions keep their resolved display name in the nested text span.
+      // Control mentions preserve the legacy attrs-first fallback.
+      const mentionTextElement = dom instanceof HTMLElement ? dom.querySelector('.editor-mention-text') : undefined;
+      const primitiveText = (_ref = mentionTextElement !== null && mentionTextElement !== void 0 ? mentionTextElement : dom instanceof HTMLElement ? dom.querySelector('.editor-mention-primitive') : undefined) === null || _ref === void 0 ? void 0 : (_ref$textContent = _ref.textContent) === null || _ref$textContent === void 0 ? void 0 : _ref$textContent.trim();
+      const resolvedText = primitiveText && !primitiveText.startsWith('@') ? `@${primitiveText}` : primitiveText;
       return {
         attrs: {
           ...((_currentNode = currentNode) === null || _currentNode === void 0 ? void 0 : _currentNode.attrs),
-          text: ((_currentNode2 = currentNode) === null || _currentNode2 === void 0 ? void 0 : (_currentNode2$attrs = _currentNode2.attrs) === null || _currentNode2$attrs === void 0 ? void 0 : _currentNode2$attrs.text) || primitiveText || undefined
+          text: mentionTextElement ? resolvedText || ((_currentNode2 = currentNode) === null || _currentNode2 === void 0 ? void 0 : (_currentNode2$attrs = _currentNode2.attrs) === null || _currentNode2$attrs === void 0 ? void 0 : _currentNode2$attrs.text) || undefined : ((_currentNode3 = currentNode) === null || _currentNode3 === void 0 ? void 0 : (_currentNode3$attrs = _currentNode3.attrs) === null || _currentNode3$attrs === void 0 ? void 0 : _currentNode3$attrs.text) || primitiveText || undefined
         }
       };
     })() : {

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

@@ -51,7 +51,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 const AGENT_MENTION_INACTIVITY_MS = 3000;
 const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "16.1.4";
+const PACKAGE_VERSION = "16.1.5";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/providers/mention-node-data-provider.js

@@ -0,0 +1,115 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { NodeDataProvider } from '@atlaskit/node-data-provider/node-data-provider';
+const getAppType = userType => userType === 'APP' || userType === 'AGENT' ? 'agent' : 'user';
+const enrichMentionNodeData = (mention, data) => {
+  var _data$appType;
+  return {
+    ...data,
+    appType: (_data$appType = data === null || data === void 0 ? void 0 : data.appType) !== null && _data$appType !== void 0 ? _data$appType : getAppType(mention.userType)
+  };
+};
+const toMentionNode = ({
+  id,
+  userType
+}) => ({
+  attrs: {
+    id,
+    // NodeDataProvider uses an ADF node internally, so normalize the runtime-only value.
+    userType: userType === 'AGENT' ? 'APP' : userType
+  },
+  type: 'mention'
+});
+const isMentionNode = node => node.type === 'mention' && node.attrs !== undefined && 'id' in node.attrs && typeof node.attrs.id === 'string';
+
+/**
+ * Page-scoped data provider for mention avatars.
+ *
+ * Products inject their resolution strategy so this package remains independent
+ * of Jira and Confluence APIs. Reuse the instance for the lifetime of a renderer
+ * or editor rather than creating one for every mention.
+ *
+ * Deterministic products can supply `resolveMentionNodeData` to return an
+ * SSR-safe avatar URL synchronously. It must return the same value on the server
+ * and the client's first render to preserve hydration parity.
+ *
+ * Network-backed products supply `fetchMentionNodeData`. Calls made in the same
+ * microtask are combined and account IDs are deduplicated before the fetcher is
+ * invoked. A Relay adapter can query `users(accountIds:)`, then map each user's
+ * `picture` and app type to a `MentionNodeData` record keyed by account ID. The
+ * resolved result is cached by the underlying `NodeDataProvider`.
+ */
+export class MentionNodeDataProvider extends NodeDataProvider {
+  constructor(fetchMentionNodeData, resolveMentionNodeData = undefined) {
+    super();
+    _defineProperty(this, "name", 'mentionNodeDataProvider');
+    _defineProperty(this, "queuedFetches", []);
+    _defineProperty(this, "isFlushScheduled", false);
+    this.fetchMentionNodeData = fetchMentionNodeData;
+    this.resolveMentionNodeData = resolveMentionNodeData;
+  }
+  isNodeSupported(node) {
+    return isMentionNode(node) && node.attrs.userType !== 'SPECIAL';
+  }
+  nodeDataKey(node) {
+    return node.attrs.id;
+  }
+  async fetchNodesData(nodes) {
+    const accountIds = Array.from(new Set(nodes.map(({
+      attrs
+    }) => attrs.id)));
+    const dataByAccountId = await this.enqueueFetch(accountIds);
+    return nodes.map(({
+      attrs
+    }) => enrichMentionNodeData(attrs, dataByAccountId[attrs.id]));
+  }
+  getMentionData(mention, callback) {
+    var _this$resolveMentionN;
+    const resolvedData = (_this$resolveMentionN = this.resolveMentionNodeData) === null || _this$resolveMentionN === void 0 ? void 0 : _this$resolveMentionN.call(this, mention);
+    if (resolvedData) {
+      callback({
+        data: enrichMentionNodeData(mention, resolvedData)
+      });
+      return;
+    }
+    this.getData(toMentionNode(mention), callback);
+  }
+  getMentionDataFromCache(mention) {
+    var _this$resolveMentionN2, _this$getNodeDataFrom;
+    const resolvedData = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention);
+    if (resolvedData) {
+      return enrichMentionNodeData(mention, resolvedData);
+    }
+    const data = (_this$getNodeDataFrom = this.getNodeDataFromCache(toMentionNode(mention))) === null || _this$getNodeDataFrom === void 0 ? void 0 : _this$getNodeDataFrom.data;
+    return data ? enrichMentionNodeData(mention, data) : undefined;
+  }
+  enqueueFetch(accountIds) {
+    const result = new Promise((resolve, reject) => {
+      this.queuedFetches.push({
+        accountIds,
+        reject,
+        resolve
+      });
+    });
+    if (!this.isFlushScheduled) {
+      this.isFlushScheduled = true;
+      void Promise.resolve().then(() => this.flushFetches());
+    }
+    return result;
+  }
+  async flushFetches() {
+    this.isFlushScheduled = false;
+    const queuedFetches = this.queuedFetches;
+    this.queuedFetches = [];
+    const accountIds = Array.from(new Set(queuedFetches.flatMap(request => request.accountIds)));
+    try {
+      const data = await this.fetchMentionNodeData(accountIds);
+      queuedFetches.forEach(({
+        resolve
+      }) => resolve(data));
+    } catch (error) {
+      queuedFetches.forEach(({
+        reject
+      }) => reject(error));
+    }
+  }
+}

package/dist/esm/entry-points/mention-node-data-provider.js

@@ -0,0 +1,3 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+
+export { MentionNodeDataProvider } from '../providers/mention-node-data-provider';

package/dist/esm/nodeviews/mentionAvatarRenderer.js

@@ -0,0 +1,69 @@
+import { bind } from 'bind-event-listener';
+var avatarImageClassName = 'editor-mention-avatar-image';
+var agentAvatarClassName = 'editor-mention-avatar-agent';
+var fallbackAvatarClassName = 'editor-mention-avatar-fallback';
+var avatarSize = 16;
+/**
+ * Populates the fixed-size avatar slot owned by the vanilla ProseMirror NodeView.
+ * No React root or editor portal is created for individual mention nodes.
+ */
+export var mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
+  var container = _ref.container;
+  var image;
+  var fallback;
+  var unbindImageError;
+  var removeImage = function removeImage() {
+    var _unbindImageError, _image;
+    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 || _unbindImageError();
+    unbindImageError = undefined;
+    (_image = image) === null || _image === void 0 || _image.remove();
+    image = undefined;
+  };
+  var removeFallback = function removeFallback() {
+    var _fallback;
+    (_fallback = fallback) === null || _fallback === void 0 || _fallback.remove();
+    fallback = undefined;
+    container.classList.remove(fallbackAvatarClassName);
+  };
+  var showFallback = function showFallback() {
+    removeImage();
+    removeFallback();
+    fallback = container.ownerDocument.createTextNode('@');
+    container.appendChild(fallback);
+    container.classList.add(fallbackAvatarClassName);
+  };
+  var destroy = function destroy() {
+    removeImage();
+    removeFallback();
+  };
+  return {
+    destroy: destroy,
+    render: function render(_ref2) {
+      var appType = _ref2.appType,
+        avatarUrl = _ref2.avatarUrl,
+        isAvatarImagePreShaped = _ref2.isAvatarImagePreShaped;
+      container.classList.toggle(agentAvatarClassName, !isAvatarImagePreShaped && appType === 'agent');
+      removeFallback();
+      if (!avatarUrl) {
+        removeImage();
+        return;
+      }
+      if (!image) {
+        image = container.ownerDocument.createElement('img');
+        image.alt = '';
+        image.className = avatarImageClassName;
+        image.decoding = 'async';
+        image.draggable = false;
+        image.height = avatarSize;
+        image.loading = 'lazy';
+        image.width = avatarSize;
+        unbindImageError = bind(image, {
+          type: 'error',
+          listener: showFallback
+        });
+        container.appendChild(image);
+      }
+      image.src = avatarUrl;
+    }
+  };
+};

package/dist/esm/nodeviews/mentionNodeView.js

@@ -8,14 +8,22 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { UNKNOWN_USER_ID } from '@atlaskit/mention/constants';
 import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
 import { isRestricted } from '@atlaskit/mention/types';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { disabledTooltipRenderer } from './disabledTooltipRenderer';
+import { mentionAvatarRenderer } from './mentionAvatarRenderer';
 import { profileCardRenderer } from './profileCardRenderer';
 var primitiveClassName = 'editor-mention-primitive';
+var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
+var avatarContainerClassName = 'editor-mention-avatar';
+var mentionTextClassName = 'editor-mention-text';
+var genericMentionIds = ['HipChat', 'all', 'here'];
+var unknownMentionText = "@".concat(UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp
 var AT_PREFIX_REGEX = /^@/;
 var getAccessibilityLabelFromName = function getAccessibilityLabelFromName(name) {
@@ -46,7 +54,7 @@ var isAgentMentionsExperimentEnabled = function isAgentMentionsExperimentEnabled
 var isAgentAaidText = function isAgentAaidText(node, isAgentMentionsEnabled) {
   return isAgentMentionsEnabled && (node.attrs.userType === 'APP' || node.attrs.userType === 'AGENT') && !!node.attrs.text && isMentionTextAnAaid(node.attrs.text);
 };
-var toDOM = function toDOM(node) {
+var toDOM = function toDOM(node, hasAvatarSlot) {
   // packages/elements/mention/src/components/Mention/index.tsx
   var mentionAttrs = {
     contenteditable: 'false',
@@ -71,14 +79,25 @@ var toDOM = function toDOM(node) {
   }
   var browser = getBrowserInfo();
   var hasAgentAaidText = isAgentAaidText(node, isAgentMentionsEnabled);
+  var mentionText = node.attrs.text && !hasAgentAaidText ? node.attrs.text : '@…';
+  var visibleMentionText = hasAvatarSlot && mentionText.startsWith('@') ? mentionText.slice(1) : mentionText;
+  var mentionContentSpec = hasAvatarSlot ? ['span', {
+    spellcheck: 'false',
+    class: "".concat(primitiveClassName, " ").concat(primitiveWithAvatarClassName)
+  }, ['span', {
+    class: avatarContainerClassName,
+    'aria-hidden': 'true'
+  }], ['span', {
+    class: mentionTextClassName
+  }, visibleMentionText]] : ['span', {
+    spellcheck: 'false',
+    class: primitiveClassName
+  }, mentionText];
   return ['span', mentionAttrs, ['span', {
     class: 'zeroWidthSpaceContainer'
   }, ['span', {
     class: 'inlineNodeViewAddZeroWidthSpace'
-  }, ZERO_WIDTH_SPACE]], ['span', {
-    spellcheck: 'false',
-    class: primitiveClassName
-  }, node.attrs.text && !hasAgentAaidText ? node.attrs.text : '@…'], browser.android ? ['span', {
+  }, ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
@@ -88,7 +107,7 @@ var toDOM = function toDOM(node) {
   }, ZERO_WIDTH_SPACE]];
 };
 var processName = function processName(name) {
-  return name.status === MentionNameStatus.OK ? "@".concat(name.name || '') : "@_|unknown|_";
+  return name.status === MentionNameStatus.OK ? "@".concat(name.name || '') : unknownMentionText;
 };
 var handleProviderName = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mentionProvider, node, isAgentMentionsEnabled) {
@@ -136,11 +155,14 @@ export var MentionNodeView = /*#__PURE__*/function () {
       _api$mention$sharedSt,
       _this = this;
     _classCallCheck(this, MentionNodeView);
+    _defineProperty(this, "hasAvatarSlot", false);
+    _defineProperty(this, "isDestroyed", false);
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node)),
+    this.hasAvatarSlot = Boolean(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider) && node.attrs.userType !== 'SPECIAL' && !genericMentionIds.includes(node.attrs.id) && isExperimentEnabled('platform_editor_mention_node_avatar');
+    var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
@@ -149,6 +171,18 @@ export var MentionNodeView = /*#__PURE__*/function () {
     this.node = node;
     this.domElement = dom instanceof HTMLElement ? dom : undefined;
     this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(".".concat(primitiveClassName))) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
+    this.mentionTextElement = this.mentionPrimitiveElement;
+    if (this.hasAvatarSlot) {
+      var _this$domElement$quer2, _this$domElement, _this$domElement2;
+      this.mentionTextElement = (_this$domElement$quer2 = (_this$domElement = this.domElement) === null || _this$domElement === void 0 ? void 0 : _this$domElement.querySelector(".".concat(mentionTextClassName))) !== null && _this$domElement$quer2 !== void 0 ? _this$domElement$quer2 : this.mentionPrimitiveElement;
+      var avatarContainer = (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.querySelector(".".concat(avatarContainerClassName));
+      if (avatarContainer) {
+        this.mentionAvatar = mentionAvatarRenderer({
+          container: avatarContainer
+        });
+        this.resolveMentionAvatar(options === null || options === void 0 ? void 0 : options.mentionNodeDataProvider);
+      }
+    }
     var _ref2 = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {},
       mentionProvider = _ref2.mentionProvider;
     this.updateState(mentionProvider);
@@ -280,9 +314,41 @@ export var MentionNodeView = /*#__PURE__*/function () {
     value: function setTextContent(name, isAgentMentionsEnabled) {
       // Also overwrite when text is a raw AAID so the resolved name takes precedence.
       var textIsAaid = isAgentAaidText(this.node, isAgentMentionsEnabled);
-      if (name && (!this.node.attrs.text || textIsAaid) && this.mentionPrimitiveElement) {
-        this.mentionPrimitiveElement.textContent = name;
+      if (name && (!this.node.attrs.text || textIsAaid) && this.mentionTextElement) {
+        this.setVisibleText(name);
+      }
+    }
+  }, {
+    key: "setVisibleText",
+    value: function setVisibleText(text) {
+      if (!this.mentionTextElement) {
+        return;
+      }
+      this.mentionTextElement.textContent = this.hasAvatarSlot && text.startsWith('@') && text !== unknownMentionText ? text.slice(1) : text;
+    }
+  }, {
+    key: "resolveMentionAvatar",
+    value: function resolveMentionAvatar(mentionNodeDataProvider) {
+      var _this3 = this;
+      if (!this.hasAvatarSlot || !mentionNodeDataProvider || this.node.attrs.userType === 'SPECIAL') {
+        return;
       }
+      var mention = {
+        id: this.node.attrs.id,
+        userType: this.node.attrs.userType
+      };
+      var applyData = function applyData(data) {
+        var _this3$mentionAvatar;
+        if (_this3.isDestroyed || !(data !== null && data !== void 0 && data.avatarUrl)) {
+          return;
+        }
+        (_this3$mentionAvatar = _this3.mentionAvatar) === null || _this3$mentionAvatar === void 0 || _this3$mentionAvatar.render(data);
+      };
+      mentionNodeDataProvider.getMentionData(mention, function (payload) {
+        if (payload.data) {
+          applyData(payload.data);
+        }
+      });
     }
   }, {
     key: "shouldHighlightMention",
@@ -379,7 +445,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$cleanup, _this$destroyProfileC, _this$disabledTooltip, _this$unsubscribeFrom2;
+      var _this$cleanup, _this$destroyProfileC, _this$mentionAvatar, _this$disabledTooltip, _this$unsubscribeFrom2;
+      this.isDestroyed = true;
       // Surface the destruction to the provider before tearing down so the
       // chat layer can react (e.g. drop the agent id from `selectedAgentIds`).
       // This is the lowest-level deletion signal — fires for backspace,
@@ -395,6 +462,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
       }
       (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
       (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 || _this$destroyProfileC.call(this);
+      (_this$mentionAvatar = this.mentionAvatar) === null || _this$mentionAvatar === void 0 || _this$mentionAvatar.destroy();
+      this.mentionAvatar = undefined;
       (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 || _this$disabledTooltip.destroy();
       this.disabledTooltip = undefined;
       (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 || _this$unsubscribeFrom2.call(this);

package/dist/esm/nodeviews/profileCardRenderer.js

@@ -60,13 +60,15 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
   var renderEditorProfileCard = function renderEditorProfileCard() {
     var isReducedProfileCards = expVal('platform_editor_reduced_agent_profile_cards', 'isEnabled', false);
     var clickedNode = isReducedProfileCards ? currentNode : node;
-    var activeMention = isReducedProfileCards ? function (_dom$querySelector, _currentNode, _currentNode2) {
-      // Read the display name from the DOM element at click time — this is
-      // always up-to-date even when node.attrs.text is absent
-      var primitiveText = dom instanceof HTMLElement ? (_dom$querySelector = dom.querySelector('.editor-mention-primitive')) === null || _dom$querySelector === void 0 || (_dom$querySelector = _dom$querySelector.textContent) === null || _dom$querySelector === void 0 ? void 0 : _dom$querySelector.trim() : undefined;
+    var activeMention = isReducedProfileCards ? function (_ref3, _currentNode, _currentNode2, _currentNode3) {
+      // Avatar mentions keep their resolved display name in the nested text span.
+      // Control mentions preserve the legacy attrs-first fallback.
+      var mentionTextElement = dom instanceof HTMLElement ? dom.querySelector('.editor-mention-text') : undefined;
+      var primitiveText = (_ref3 = mentionTextElement !== null && mentionTextElement !== void 0 ? mentionTextElement : dom instanceof HTMLElement ? dom.querySelector('.editor-mention-primitive') : undefined) === null || _ref3 === void 0 || (_ref3 = _ref3.textContent) === null || _ref3 === void 0 ? void 0 : _ref3.trim();
+      var resolvedText = primitiveText && !primitiveText.startsWith('@') ? "@".concat(primitiveText) : primitiveText;
       return {
         attrs: _objectSpread(_objectSpread({}, (_currentNode = currentNode) === null || _currentNode === void 0 ? void 0 : _currentNode.attrs), {}, {
-          text: ((_currentNode2 = currentNode) === null || _currentNode2 === void 0 || (_currentNode2 = _currentNode2.attrs) === null || _currentNode2 === void 0 ? void 0 : _currentNode2.text) || primitiveText || undefined
+          text: mentionTextElement ? resolvedText || ((_currentNode2 = currentNode) === null || _currentNode2 === void 0 || (_currentNode2 = _currentNode2.attrs) === null || _currentNode2 === void 0 ? void 0 : _currentNode2.text) || undefined : ((_currentNode3 = currentNode) === null || _currentNode3 === void 0 || (_currentNode3 = _currentNode3.attrs) === null || _currentNode3 === void 0 ? void 0 : _currentNode3.text) || primitiveText || undefined
         })
       };
     }() : {
@@ -102,10 +104,10 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
       });
     });
   };
-  var renderUserProfileCard = function renderUserProfileCard(_ref3) {
-    var userId = _ref3.userId,
-      cloudId = _ref3.cloudId,
-      renderUserMentionCard = _ref3.renderUserMentionCard;
+  var renderUserProfileCard = function renderUserProfileCard(_ref4) {
+    var userId = _ref4.userId,
+      cloudId = _ref4.cloudId,
+      renderUserMentionCard = _ref4.renderUserMentionCard;
     if (!renderUserMentionCard) {
       return false;
     }

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

@@ -58,7 +58,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "16.1.4";
+var PACKAGE_VERSION = "16.1.5";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {