@atlaskit/editor-plugin-mentions 18.2.10 → 18.3.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-plugin-mentions
 
+## 18.3.1
+
+### Patch Changes
+
+- [`27143ffe51a5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27143ffe51a5a) -
+  `@atlaskit/editor-common/vanilla-tooltip` now exports `VANILLA_TOOLTIP_DEFAULT_CLASS`. Compose
+  tooltip class names from it rather than repeating the `ak-editor-vanilla-tooltip-default` literal.
+
+  Behind the `platform_editor_use_vanilla_components` experiment, `VanillaTooltip`:
+  - no longer throws `InvalidStateError` when shown again before its open delay has elapsed
+  - is `pointer-events: none`, so it cannot swallow pointer events meant for the content beneath —
+    pass `pointerEvents` in `styles` to opt out
+  - closes its popover before `destroy()` removes it from the document
+
+  Remaining changes are internal: tooltip consumers adopt the new constant, and the emoji tooltip
+  uses the shared class in place of an equivalent inline style object.
+
+- Updated dependencies
+
+## 18.3.0
+
+### Minor Changes
+
+- [`5a0128690a065`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a0128690a065) -
+  Add mention avatars to Rovo editor and renderer surfaces behind
+  platform_editor_rovo_editor_mention_node_avatar
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.2.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -31,12 +31,8 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
-/**
- * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
- * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
- * EditorContentContainer stylesheets — keep them in sync when renaming.
- */
-var disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
+/** Classes applied to the disabled-reason tooltip: the shared default look, plus our own hook. */
+var disabledTooltipClassNames = "".concat(_vanillaTooltip.VANILLA_TOOLTIP_DEFAULT_CLASS, " mention-disabled-tooltip");
 var genericMentionIds = ['HipChat', 'all', 'here'];
 var unknownMentionText = "@".concat(_constants.UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp

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

@@ -43,7 +43,7 @@ var ACTIONS = exports.ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "18.2.9";
+var PACKAGE_VERSION = "18.3.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

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

@@ -42,6 +42,20 @@ var toMentionNode = function toMentionNode(_ref) {
 var isMentionNode = function isMentionNode(node) {
   return node.type === 'mention' && node.attrs !== undefined && 'id' in node.attrs && typeof node.attrs.id === 'string';
 };
+var SUBSCRIPTION_KEY_PREFIX = 'mention-node-data-provider';
+var subscriptionKeyCounter = 0;
+var cacheMentionData = function cacheMentionData(cache, mentions) {
+  mentions.forEach(function (mention) {
+    if (mention.isPlaceholder || !mention.avatarUrl) {
+      cache.delete(mention.id);
+      return;
+    }
+    cache.set(mention.id, {
+      avatarUrl: mention.avatarUrl,
+      appType: mention.appType
+    });
+  });
+};
 
 /**
  * Page-scoped data provider for mention avatars.
@@ -59,6 +73,9 @@ var isMentionNode = function isMentionNode(node) {
  * 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`.
+ *
+ * Products that already have a `MentionProvider` result stream can call `connect`
+ * so emitted mention results populate a synchronous avatar cache.
  */
 var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   function MentionNodeDataProvider(fetchMentionNodeData) {
@@ -67,6 +84,11 @@ var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/fun
     (0, _classCallCheck2.default)(this, MentionNodeDataProvider);
     _this = _callSuper(this, MentionNodeDataProvider);
     (0, _defineProperty2.default)(_this, "name", 'mentionNodeDataProvider');
+    (0, _defineProperty2.default)(_this, "abortControllerRef", {
+      current: new AbortController()
+    });
+    (0, _defineProperty2.default)(_this, "emittedMentionCache", new Map());
+    (0, _defineProperty2.default)(_this, "subscriptionKey", "".concat(SUBSCRIPTION_KEY_PREFIX, ":").concat(++subscriptionKeyCounter));
     (0, _defineProperty2.default)(_this, "queuedFetches", []);
     (0, _defineProperty2.default)(_this, "isFlushScheduled", false);
     _this.fetchMentionNodeData = fetchMentionNodeData;
@@ -118,8 +140,7 @@ var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/fun
   }, {
     key: "getMentionData",
     value: function getMentionData(mention, callback) {
-      var _this$resolveMentionN;
-      var resolvedData = (_this$resolveMentionN = this.resolveMentionNodeData) === null || _this$resolveMentionN === void 0 ? void 0 : _this$resolveMentionN.call(this, mention);
+      var resolvedData = this.resolveMentionNodeDataFromCache(mention);
       if (resolvedData) {
         callback({
           data: enrichMentionNodeData(mention, resolvedData)
@@ -131,20 +152,59 @@ var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/fun
   }, {
     key: "getMentionDataFromCache",
     value: function getMentionDataFromCache(mention) {
-      var _this$resolveMentionN2, _this$getNodeDataFrom;
-      var resolvedData = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention);
+      var _this$getNodeDataFrom;
+      var resolvedData = this.resolveMentionNodeDataFromCache(mention);
       if (resolvedData) {
         return enrichMentionNodeData(mention, resolvedData);
       }
       var data = (_this$getNodeDataFrom = this.getNodeDataFromCache(toMentionNode(mention))) === null || _this$getNodeDataFrom === void 0 ? void 0 : _this$getNodeDataFrom.data;
       return data ? enrichMentionNodeData(mention, data) : undefined;
     }
+  }, {
+    key: "connect",
+    value: function connect(mentionResource) {
+      var _this2 = this;
+      if (this.lastMentionResource && this.lastMentionResource !== mentionResource) {
+        this.emittedMentionCache.clear();
+        this.resetCache();
+      }
+      this.lastMentionResource = mentionResource;
+      if (this.abortControllerRef.current.signal.aborted) {
+        this.abortControllerRef.current = new AbortController();
+      }
+      var isDisconnected = false;
+      var subscribedMentionProvider;
+      void mentionResource.then(function (mentionProvider) {
+        if (isDisconnected) {
+          return;
+        }
+        subscribedMentionProvider = mentionProvider;
+        mentionProvider.subscribe(_this2.subscriptionKey, function (mentions) {
+          cacheMentionData(_this2.emittedMentionCache, mentions);
+        });
+      }).catch(function () {
+        return undefined;
+      });
+      return function () {
+        var _subscribedMentionPro;
+        isDisconnected = true;
+        _this2.abortControllerRef.current.abort();
+        (_subscribedMentionPro = subscribedMentionProvider) === null || _subscribedMentionPro === void 0 || _subscribedMentionPro.unsubscribe(_this2.subscriptionKey);
+        subscribedMentionProvider = undefined;
+      };
+    }
+  }, {
+    key: "resolveMentionNodeDataFromCache",
+    value: function resolveMentionNodeDataFromCache(mention) {
+      var _this$resolveMentionN, _this$resolveMentionN2;
+      return (_this$resolveMentionN = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention)) !== null && _this$resolveMentionN !== void 0 ? _this$resolveMentionN : this.emittedMentionCache.get(mention.id);
+    }
   }, {
     key: "enqueueFetch",
     value: function enqueueFetch(accountIds) {
-      var _this2 = this;
+      var _this3 = this;
       var result = new Promise(function (resolve, reject) {
-        _this2.queuedFetches.push({
+        _this3.queuedFetches.push({
           accountIds: accountIds,
           reject: reject,
           resolve: resolve
@@ -153,7 +213,7 @@ var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/fun
       if (!this.isFlushScheduled) {
         this.isFlushScheduled = true;
         void Promise.resolve().then(function () {
-          return _this2.flushFetches();
+          return _this3.flushFetches();
         });
       }
       return result;
@@ -174,7 +234,7 @@ var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/fun
               })));
               _context2.prev = 1;
               _context2.next = 2;
-              return this.fetchMentionNodeData(accountIds);
+              return this.fetchMentionNodeData(accountIds, this.abortControllerRef.current.signal);
             case 2:
               data = _context2.sent;
               queuedFetches.forEach(function (_ref4) {

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
+import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
@@ -20,12 +20,8 @@ const primitiveClassName = 'editor-mention-primitive';
 const primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 const avatarContainerClassName = 'editor-mention-avatar';
 const mentionTextClassName = 'editor-mention-text';
-/**
- * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
- * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
- * EditorContentContainer stylesheets — keep them in sync when renaming.
- */
-const disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
+/** Classes applied to the disabled-reason tooltip: the shared default look, plus our own hook. */
+const disabledTooltipClassNames = `${VANILLA_TOOLTIP_DEFAULT_CLASS} mention-disabled-tooltip`;
 const genericMentionIds = ['HipChat', 'all', 'here'];
 const unknownMentionText = `@${UNKNOWN_USER_ID}`;
 // eslint-disable-next-line require-unicode-regexp

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

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

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

@@ -20,6 +20,20 @@ const toMentionNode = ({
   type: 'mention'
 });
 const isMentionNode = node => node.type === 'mention' && node.attrs !== undefined && 'id' in node.attrs && typeof node.attrs.id === 'string';
+const SUBSCRIPTION_KEY_PREFIX = 'mention-node-data-provider';
+let subscriptionKeyCounter = 0;
+const cacheMentionData = (cache, mentions) => {
+  mentions.forEach(mention => {
+    if (mention.isPlaceholder || !mention.avatarUrl) {
+      cache.delete(mention.id);
+      return;
+    }
+    cache.set(mention.id, {
+      avatarUrl: mention.avatarUrl,
+      appType: mention.appType
+    });
+  });
+};
 
 /**
  * Page-scoped data provider for mention avatars.
@@ -37,11 +51,19 @@ const isMentionNode = node => node.type === 'mention' && node.attrs !== undefine
  * 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`.
+ *
+ * Products that already have a `MentionProvider` result stream can call `connect`
+ * so emitted mention results populate a synchronous avatar cache.
  */
 export class MentionNodeDataProvider extends NodeDataProvider {
   constructor(fetchMentionNodeData, resolveMentionNodeData = undefined) {
     super();
     _defineProperty(this, "name", 'mentionNodeDataProvider');
+    _defineProperty(this, "abortControllerRef", {
+      current: new AbortController()
+    });
+    _defineProperty(this, "emittedMentionCache", new Map());
+    _defineProperty(this, "subscriptionKey", `${SUBSCRIPTION_KEY_PREFIX}:${++subscriptionKeyCounter}`);
     _defineProperty(this, "queuedFetches", []);
     _defineProperty(this, "isFlushScheduled", false);
     this.fetchMentionNodeData = fetchMentionNodeData;
@@ -63,8 +85,7 @@ export class MentionNodeDataProvider extends NodeDataProvider {
     }) => 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);
+    const resolvedData = this.resolveMentionNodeDataFromCache(mention);
     if (resolvedData) {
       callback({
         data: enrichMentionNodeData(mention, resolvedData)
@@ -74,14 +95,46 @@ export class MentionNodeDataProvider extends NodeDataProvider {
     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);
+    var _this$getNodeDataFrom;
+    const resolvedData = this.resolveMentionNodeDataFromCache(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;
   }
+  connect(mentionResource) {
+    if (this.lastMentionResource && this.lastMentionResource !== mentionResource) {
+      this.emittedMentionCache.clear();
+      this.resetCache();
+    }
+    this.lastMentionResource = mentionResource;
+    if (this.abortControllerRef.current.signal.aborted) {
+      this.abortControllerRef.current = new AbortController();
+    }
+    let isDisconnected = false;
+    let subscribedMentionProvider;
+    void mentionResource.then(mentionProvider => {
+      if (isDisconnected) {
+        return;
+      }
+      subscribedMentionProvider = mentionProvider;
+      mentionProvider.subscribe(this.subscriptionKey, mentions => {
+        cacheMentionData(this.emittedMentionCache, mentions);
+      });
+    }).catch(() => undefined);
+    return () => {
+      var _subscribedMentionPro;
+      isDisconnected = true;
+      this.abortControllerRef.current.abort();
+      (_subscribedMentionPro = subscribedMentionProvider) === null || _subscribedMentionPro === void 0 ? void 0 : _subscribedMentionPro.unsubscribe(this.subscriptionKey);
+      subscribedMentionProvider = undefined;
+    };
+  }
+  resolveMentionNodeDataFromCache(mention) {
+    var _this$resolveMentionN, _this$resolveMentionN2;
+    return (_this$resolveMentionN = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention)) !== null && _this$resolveMentionN !== void 0 ? _this$resolveMentionN : this.emittedMentionCache.get(mention.id);
+  }
   enqueueFetch(accountIds) {
     const result = new Promise((resolve, reject) => {
       this.queuedFetches.push({
@@ -102,7 +155,7 @@ export class MentionNodeDataProvider extends NodeDataProvider {
     this.queuedFetches = [];
     const accountIds = Array.from(new Set(queuedFetches.flatMap(request => request.accountIds)));
     try {
-      const data = await this.fetchMentionNodeData(accountIds);
+      const data = await this.fetchMentionNodeData(accountIds, this.abortControllerRef.current.signal);
       queuedFetches.forEach(({
         resolve
       }) => resolve(data));

package/dist/esm/nodeviews/mentionNodeView.js

@@ -7,7 +7,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
+import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
@@ -26,12 +26,8 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
-/**
- * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
- * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
- * EditorContentContainer stylesheets — keep them in sync when renaming.
- */
-var disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
+/** Classes applied to the disabled-reason tooltip: the shared default look, plus our own hook. */
+var disabledTooltipClassNames = "".concat(VANILLA_TOOLTIP_DEFAULT_CLASS, " mention-disabled-tooltip");
 var genericMentionIds = ['HipChat', 'all', 'here'];
 var unknownMentionText = "@".concat(UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp

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

@@ -35,7 +35,7 @@ export var ACTIONS = {
   CLEAR_PENDING_PASTED_AGENT_MENTION: 'CLEAR_PENDING_PASTED_AGENT_MENTION'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "18.2.9";
+var PACKAGE_VERSION = "18.3.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

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

@@ -35,6 +35,20 @@ var toMentionNode = function toMentionNode(_ref) {
 var isMentionNode = function isMentionNode(node) {
   return node.type === 'mention' && node.attrs !== undefined && 'id' in node.attrs && typeof node.attrs.id === 'string';
 };
+var SUBSCRIPTION_KEY_PREFIX = 'mention-node-data-provider';
+var subscriptionKeyCounter = 0;
+var cacheMentionData = function cacheMentionData(cache, mentions) {
+  mentions.forEach(function (mention) {
+    if (mention.isPlaceholder || !mention.avatarUrl) {
+      cache.delete(mention.id);
+      return;
+    }
+    cache.set(mention.id, {
+      avatarUrl: mention.avatarUrl,
+      appType: mention.appType
+    });
+  });
+};
 
 /**
  * Page-scoped data provider for mention avatars.
@@ -52,6 +66,9 @@ var isMentionNode = function isMentionNode(node) {
  * 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`.
+ *
+ * Products that already have a `MentionProvider` result stream can call `connect`
+ * so emitted mention results populate a synchronous avatar cache.
  */
 export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   function MentionNodeDataProvider(fetchMentionNodeData) {
@@ -60,6 +77,11 @@ export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
     _classCallCheck(this, MentionNodeDataProvider);
     _this = _callSuper(this, MentionNodeDataProvider);
     _defineProperty(_this, "name", 'mentionNodeDataProvider');
+    _defineProperty(_this, "abortControllerRef", {
+      current: new AbortController()
+    });
+    _defineProperty(_this, "emittedMentionCache", new Map());
+    _defineProperty(_this, "subscriptionKey", "".concat(SUBSCRIPTION_KEY_PREFIX, ":").concat(++subscriptionKeyCounter));
     _defineProperty(_this, "queuedFetches", []);
     _defineProperty(_this, "isFlushScheduled", false);
     _this.fetchMentionNodeData = fetchMentionNodeData;
@@ -111,8 +133,7 @@ export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   }, {
     key: "getMentionData",
     value: function getMentionData(mention, callback) {
-      var _this$resolveMentionN;
-      var resolvedData = (_this$resolveMentionN = this.resolveMentionNodeData) === null || _this$resolveMentionN === void 0 ? void 0 : _this$resolveMentionN.call(this, mention);
+      var resolvedData = this.resolveMentionNodeDataFromCache(mention);
       if (resolvedData) {
         callback({
           data: enrichMentionNodeData(mention, resolvedData)
@@ -124,20 +145,59 @@ export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   }, {
     key: "getMentionDataFromCache",
     value: function getMentionDataFromCache(mention) {
-      var _this$resolveMentionN2, _this$getNodeDataFrom;
-      var resolvedData = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention);
+      var _this$getNodeDataFrom;
+      var resolvedData = this.resolveMentionNodeDataFromCache(mention);
       if (resolvedData) {
         return enrichMentionNodeData(mention, resolvedData);
       }
       var data = (_this$getNodeDataFrom = this.getNodeDataFromCache(toMentionNode(mention))) === null || _this$getNodeDataFrom === void 0 ? void 0 : _this$getNodeDataFrom.data;
       return data ? enrichMentionNodeData(mention, data) : undefined;
     }
+  }, {
+    key: "connect",
+    value: function connect(mentionResource) {
+      var _this2 = this;
+      if (this.lastMentionResource && this.lastMentionResource !== mentionResource) {
+        this.emittedMentionCache.clear();
+        this.resetCache();
+      }
+      this.lastMentionResource = mentionResource;
+      if (this.abortControllerRef.current.signal.aborted) {
+        this.abortControllerRef.current = new AbortController();
+      }
+      var isDisconnected = false;
+      var subscribedMentionProvider;
+      void mentionResource.then(function (mentionProvider) {
+        if (isDisconnected) {
+          return;
+        }
+        subscribedMentionProvider = mentionProvider;
+        mentionProvider.subscribe(_this2.subscriptionKey, function (mentions) {
+          cacheMentionData(_this2.emittedMentionCache, mentions);
+        });
+      }).catch(function () {
+        return undefined;
+      });
+      return function () {
+        var _subscribedMentionPro;
+        isDisconnected = true;
+        _this2.abortControllerRef.current.abort();
+        (_subscribedMentionPro = subscribedMentionProvider) === null || _subscribedMentionPro === void 0 || _subscribedMentionPro.unsubscribe(_this2.subscriptionKey);
+        subscribedMentionProvider = undefined;
+      };
+    }
+  }, {
+    key: "resolveMentionNodeDataFromCache",
+    value: function resolveMentionNodeDataFromCache(mention) {
+      var _this$resolveMentionN, _this$resolveMentionN2;
+      return (_this$resolveMentionN = (_this$resolveMentionN2 = this.resolveMentionNodeData) === null || _this$resolveMentionN2 === void 0 ? void 0 : _this$resolveMentionN2.call(this, mention)) !== null && _this$resolveMentionN !== void 0 ? _this$resolveMentionN : this.emittedMentionCache.get(mention.id);
+    }
   }, {
     key: "enqueueFetch",
     value: function enqueueFetch(accountIds) {
-      var _this2 = this;
+      var _this3 = this;
       var result = new Promise(function (resolve, reject) {
-        _this2.queuedFetches.push({
+        _this3.queuedFetches.push({
           accountIds: accountIds,
           reject: reject,
           resolve: resolve
@@ -146,7 +206,7 @@ export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
       if (!this.isFlushScheduled) {
         this.isFlushScheduled = true;
         void Promise.resolve().then(function () {
-          return _this2.flushFetches();
+          return _this3.flushFetches();
         });
       }
       return result;
@@ -167,7 +227,7 @@ export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
               })));
               _context2.prev = 1;
               _context2.next = 2;
-              return this.fetchMentionNodeData(accountIds);
+              return this.fetchMentionNodeData(accountIds, this.abortControllerRef.current.signal);
             case 2:
               data = _context2.sent;
               queuedFetches.forEach(function (_ref4) {

package/dist/types/providers/mention-node-data-provider.d.ts

@@ -1,9 +1,10 @@
 import type { MentionDefinition } from '@atlaskit/adf-schema/mention';
 import type { MentionNodeDataCallback, MentionNodeDataIdentifier, MentionNodeDataProvider as MentionNodeDataProviderContract } from '@atlaskit/editor-common/mention';
 import type { JSONNode } from '@atlaskit/editor-json-transformer/types';
+import type { MentionProvider } from '@atlaskit/mention/resource';
 import type { MentionNodeData } from '@atlaskit/mention/types';
 import { NodeDataProvider } from '@atlaskit/node-data-provider/node-data-provider';
-export type FetchMentionNodeData = (accountIds: string[]) => Promise<Record<string, MentionNodeData>>;
+export type FetchMentionNodeData = (accountIds: string[], signal?: AbortSignal) => Promise<Record<string, MentionNodeData>>;
 export type ResolveMentionNodeData = (mention: MentionNodeDataIdentifier) => MentionNodeData | undefined;
 /**
  * Page-scoped data provider for mention avatars.
@@ -21,11 +22,18 @@ export type ResolveMentionNodeData = (mention: MentionNodeDataIdentifier) => Men
  * 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`.
+ *
+ * Products that already have a `MentionProvider` result stream can call `connect`
+ * so emitted mention results populate a synchronous avatar cache.
  */
 export declare class MentionNodeDataProvider extends NodeDataProvider<MentionDefinition, MentionNodeData> implements MentionNodeDataProviderContract {
     private readonly fetchMentionNodeData;
     private readonly resolveMentionNodeData;
     readonly name = "mentionNodeDataProvider";
+    private readonly abortControllerRef;
+    private readonly emittedMentionCache;
+    private readonly subscriptionKey;
+    private lastMentionResource;
     private queuedFetches;
     private isFlushScheduled;
     constructor(fetchMentionNodeData: FetchMentionNodeData, resolveMentionNodeData?: ResolveMentionNodeData | undefined);
@@ -34,6 +42,8 @@ export declare class MentionNodeDataProvider extends NodeDataProvider<MentionDef
     fetchNodesData(nodes: MentionDefinition[]): Promise<MentionNodeData[]>;
     getMentionData(mention: MentionNodeDataIdentifier, callback: MentionNodeDataCallback): void;
     getMentionDataFromCache(mention: MentionNodeDataIdentifier): MentionNodeData | undefined;
+    connect(mentionResource: Promise<MentionProvider>): () => void;
+    private resolveMentionNodeDataFromCache;
     private enqueueFetch;
     private flushFetches;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "18.2.10",
+	"version": "18.3.1",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -59,14 +59,14 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.13.0",
+		"@atlaskit/editor-common": "^120.15.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
 		"@atlaskit/button": "^25.3.0",
-		"@atlaskit/editor-core": "^226.4.0",
+		"@atlaskit/editor-core": "^226.5.0",
 		"@testing-library/react": "^16.3.0",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",