@atlaskit/editor-plugin-mentions 16.1.4 → 16.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-mentions
 
+## 16.2.0
+
+### Minor Changes
+
+- [`13e86ff9f1588`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/13e86ff9f1588) -
+  [ux] Display avatars for mention nodes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.1.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.1.4
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/7492c730-d44c-453e-af94-85a8b85e8279
 name: '@atlaskit/editor-plugin-mentions'
-ownerId: ari:cloud:identity::team/0250ee69-f755-47fd-a468-bf8a9d10a3c5 # Editor AI
+ownerId: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb # Editor Developers
 labels:
   - platform-code
   - platform-afm
@@ -23,7 +23,7 @@ links:
 customFields:
   - name: Department
     type: text
-    value: Eng - Editor AI
+    value: Editor Developers
   - name: Trusted Reviewer Teams
     type: text
     value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MentionNodeDataProvider", {
+  enumerable: true,
+  get: function get() {
+    return _mentionNodeDataProvider.MentionNodeDataProvider;
+  }
+});
+var _mentionNodeDataProvider = require("../providers/mention-node-data-provider");

package/dist/cjs/nodeviews/mentionAvatarRenderer.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mentionAvatarRenderer = void 0;
+var _bindEventListener = require("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.
+ */
+var mentionAvatarRenderer = exports.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 = (0, _bindEventListener.bind)(image, {
+          type: 'error',
+          listener: showFallback
+        });
+        container.appendChild(image);
+      }
+      image.src = avatarUrl;
+    }
+  };
+};

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -13,16 +13,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _browser = require("@atlaskit/editor-common/browser");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _constants = require("@atlaskit/mention/constants");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _disabledTooltipRenderer = require("./disabledTooltipRenderer");
+var _mentionAvatarRenderer = require("./mentionAvatarRenderer");
 var _profileCardRenderer2 = require("./profileCardRenderer");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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) { (0, _defineProperty2.default)(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; }
 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(_constants.UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp
 var AT_PREFIX_REGEX = /^@/;
 var getAccessibilityLabelFromName = function getAccessibilityLabelFromName(name) {
@@ -53,7 +61,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',
@@ -78,14 +86,25 @@ var toDOM = function toDOM(node) {
   }
   var browser = (0, _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'
-  }, _whitespace.ZERO_WIDTH_SPACE]], ['span', {
-    spellcheck: 'false',
-    class: primitiveClassName
-  }, node.attrs.text && !hasAgentAaidText ? node.attrs.text : '@…'], browser.android ? ['span', {
+  }, _whitespace.ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
@@ -95,7 +114,7 @@ var toDOM = function toDOM(node) {
   }, _whitespace.ZERO_WIDTH_SPACE]];
 };
 var processName = function processName(name) {
-  return name.status === _resource.MentionNameStatus.OK ? "@".concat(name.name || '') : "@_|unknown|_";
+  return name.status === _resource.MentionNameStatus.OK ? "@".concat(name.name || '') : unknownMentionText;
 };
 var handleProviderName = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mentionProvider, node, isAgentMentionsEnabled) {
@@ -143,11 +162,14 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       _api$mention$sharedSt,
       _this = this;
     (0, _classCallCheck2.default)(this, MentionNodeView);
+    (0, _defineProperty2.default)(this, "hasAvatarSlot", false);
+    (0, _defineProperty2.default)(this, "isDestroyed", false);
     var options = config.options,
       api = config.api,
       portalProviderAPI = config.portalProviderAPI,
       editorView = config.editorView;
-    var _DOMSerializer$render = _model.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) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_node_avatar');
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node, this.hasAvatarSlot)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.dom = dom;
@@ -156,6 +178,18 @@ var MentionNodeView = exports.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 = (0, _mentionAvatarRenderer.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);
@@ -287,9 +321,41 @@ var MentionNodeView = exports.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",
@@ -386,7 +452,8 @@ var MentionNodeView = exports.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,
@@ -402,6 +469,8 @@ var MentionNodeView = exports.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/cjs/nodeviews/profileCardRenderer.js

@@ -66,13 +66,15 @@ var profileCardRenderer = exports.profileCardRenderer = function profileCardRend
   var renderEditorProfileCard = function renderEditorProfileCard() {
     var isReducedProfileCards = (0, _expVal.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
         })
       };
     }() : {
@@ -108,10 +110,10 @@ var profileCardRenderer = exports.profileCardRenderer = function profileCardRend
       });
     });
   };
-  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/cjs/pm-plugins/main.js

@@ -67,7 +67,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.3";
+var PACKAGE_VERSION = "16.1.5";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

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

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionNodeDataProvider = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _nodeDataProvider = require("@atlaskit/node-data-provider/node-data-provider");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
+var getAppType = function getAppType(userType) {
+  return userType === 'APP' || userType === 'AGENT' ? 'agent' : 'user';
+};
+var enrichMentionNodeData = function enrichMentionNodeData(mention, data) {
+  var _data$appType;
+  return _objectSpread(_objectSpread({}, data), {}, {
+    appType: (_data$appType = data === null || data === void 0 ? void 0 : data.appType) !== null && _data$appType !== void 0 ? _data$appType : getAppType(mention.userType)
+  });
+};
+var toMentionNode = function toMentionNode(_ref) {
+  var id = _ref.id,
+    userType = _ref.userType;
+  return {
+    attrs: {
+      id: id,
+      // NodeDataProvider uses an ADF node internally, so normalize the runtime-only value.
+      userType: userType === 'AGENT' ? 'APP' : userType
+    },
+    type: 'mention'
+  };
+};
+var isMentionNode = function isMentionNode(node) {
+  return 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`.
+ */
+var MentionNodeDataProvider = exports.MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
+  function MentionNodeDataProvider(fetchMentionNodeData) {
+    var _this;
+    var resolveMentionNodeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    (0, _classCallCheck2.default)(this, MentionNodeDataProvider);
+    _this = _callSuper(this, MentionNodeDataProvider);
+    (0, _defineProperty2.default)(_this, "name", 'mentionNodeDataProvider');
+    (0, _defineProperty2.default)(_this, "queuedFetches", []);
+    (0, _defineProperty2.default)(_this, "isFlushScheduled", false);
+    _this.fetchMentionNodeData = fetchMentionNodeData;
+    _this.resolveMentionNodeData = resolveMentionNodeData;
+    return _this;
+  }
+  (0, _inherits2.default)(MentionNodeDataProvider, _NodeDataProvider);
+  return (0, _createClass2.default)(MentionNodeDataProvider, [{
+    key: "isNodeSupported",
+    value: function isNodeSupported(node) {
+      return isMentionNode(node) && node.attrs.userType !== 'SPECIAL';
+    }
+  }, {
+    key: "nodeDataKey",
+    value: function nodeDataKey(node) {
+      return node.attrs.id;
+    }
+  }, {
+    key: "fetchNodesData",
+    value: function () {
+      var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(nodes) {
+        var accountIds, dataByAccountId;
+        return _regenerator.default.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              accountIds = Array.from(new Set(nodes.map(function (_ref2) {
+                var attrs = _ref2.attrs;
+                return attrs.id;
+              })));
+              _context.next = 1;
+              return this.enqueueFetch(accountIds);
+            case 1:
+              dataByAccountId = _context.sent;
+              return _context.abrupt("return", nodes.map(function (_ref3) {
+                var attrs = _ref3.attrs;
+                return enrichMentionNodeData(attrs, dataByAccountId[attrs.id]);
+              }));
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function fetchNodesData(_x) {
+        return _fetchNodesData.apply(this, arguments);
+      }
+      return fetchNodesData;
+    }()
+  }, {
+    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);
+      if (resolvedData) {
+        callback({
+          data: enrichMentionNodeData(mention, resolvedData)
+        });
+        return;
+      }
+      this.getData(toMentionNode(mention), callback);
+    }
+  }, {
+    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);
+      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: "enqueueFetch",
+    value: function enqueueFetch(accountIds) {
+      var _this2 = this;
+      var result = new Promise(function (resolve, reject) {
+        _this2.queuedFetches.push({
+          accountIds: accountIds,
+          reject: reject,
+          resolve: resolve
+        });
+      });
+      if (!this.isFlushScheduled) {
+        this.isFlushScheduled = true;
+        void Promise.resolve().then(function () {
+          return _this2.flushFetches();
+        });
+      }
+      return result;
+    }
+  }, {
+    key: "flushFetches",
+    value: function () {
+      var _flushFetches = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var queuedFetches, accountIds, data, _t;
+        return _regenerator.default.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              this.isFlushScheduled = false;
+              queuedFetches = this.queuedFetches;
+              this.queuedFetches = [];
+              accountIds = Array.from(new Set(queuedFetches.flatMap(function (request) {
+                return request.accountIds;
+              })));
+              _context2.prev = 1;
+              _context2.next = 2;
+              return this.fetchMentionNodeData(accountIds);
+            case 2:
+              data = _context2.sent;
+              queuedFetches.forEach(function (_ref4) {
+                var resolve = _ref4.resolve;
+                return resolve(data);
+              });
+              _context2.next = 4;
+              break;
+            case 3:
+              _context2.prev = 3;
+              _t = _context2["catch"](1);
+              queuedFetches.forEach(function (_ref5) {
+                var reject = _ref5.reject;
+                return reject(_t);
+              });
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[1, 3]]);
+      }));
+      function flushFetches() {
+        return _flushFetches.apply(this, arguments);
+      }
+      return flushFetches;
+    }()
+  }]);
+}(_nodeDataProvider.NodeDataProvider);

package/dist/es2019/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/es2019/nodeviews/mentionAvatarRenderer.js

@@ -0,0 +1,71 @@
+import { bind } from 'bind-event-listener';
+const avatarImageClassName = 'editor-mention-avatar-image';
+const agentAvatarClassName = 'editor-mention-avatar-agent';
+const fallbackAvatarClassName = 'editor-mention-avatar-fallback';
+const 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 const mentionAvatarRenderer = ({
+  container
+}) => {
+  let image;
+  let fallback;
+  let unbindImageError;
+  const removeImage = () => {
+    var _unbindImageError, _image;
+    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 ? void 0 : _unbindImageError();
+    unbindImageError = undefined;
+    (_image = image) === null || _image === void 0 ? void 0 : _image.remove();
+    image = undefined;
+  };
+  const removeFallback = () => {
+    var _fallback;
+    (_fallback = fallback) === null || _fallback === void 0 ? void 0 : _fallback.remove();
+    fallback = undefined;
+    container.classList.remove(fallbackAvatarClassName);
+  };
+  const showFallback = () => {
+    removeImage();
+    removeFallback();
+    fallback = container.ownerDocument.createTextNode('@');
+    container.appendChild(fallback);
+    container.classList.add(fallbackAvatarClassName);
+  };
+  const destroy = () => {
+    removeImage();
+    removeFallback();
+  };
+  return {
+    destroy,
+    render: ({
+      appType,
+      avatarUrl,
+      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;
+    }
+  };
+};