@atlaskit/editor-plugin-mentions 16.1.4 → 16.2.0

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

@@ -0,0 +1,198 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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) { _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 { NodeDataProvider } from '@atlaskit/node-data-provider/node-data-provider';
+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`.
+ */
+export var MentionNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
+  function MentionNodeDataProvider(fetchMentionNodeData) {
+    var _this;
+    var resolveMentionNodeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    _classCallCheck(this, MentionNodeDataProvider);
+    _this = _callSuper(this, MentionNodeDataProvider);
+    _defineProperty(_this, "name", 'mentionNodeDataProvider');
+    _defineProperty(_this, "queuedFetches", []);
+    _defineProperty(_this, "isFlushScheduled", false);
+    _this.fetchMentionNodeData = fetchMentionNodeData;
+    _this.resolveMentionNodeData = resolveMentionNodeData;
+    return _this;
+  }
+  _inherits(MentionNodeDataProvider, _NodeDataProvider);
+  return _createClass(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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes) {
+        var accountIds, dataByAccountId;
+        return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var queuedFetches, accountIds, data, _t;
+        return _regeneratorRuntime.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);

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

@@ -0,0 +1,2 @@
+export { MentionNodeDataProvider } from '../providers/mention-node-data-provider';
+export type { FetchMentionNodeData } from '../providers/mention-node-data-provider';

package/dist/types/nodeviews/mentionAvatarRenderer.d.ts

@@ -0,0 +1,12 @@
+import type { MentionNodeData } from '@atlaskit/mention/types';
+export interface MentionAvatarController {
+    destroy: () => void;
+    render: (data: MentionNodeData) => void;
+}
+/**
+ * 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 declare const mentionAvatarRenderer: ({ container, }: {
+    container: HTMLElement;
+}) => MentionAvatarController;

package/dist/types/nodeviews/mentionNodeView.d.ts

@@ -21,6 +21,10 @@ export declare class MentionNodeView implements NodeView {
     private removeProfileCard;
     private updateProfileCardNode;
     private mentionPrimitiveElement;
+    private mentionTextElement;
+    private mentionAvatar;
+    private hasAvatarSlot;
+    private isDestroyed;
     private disabledTooltip;
     private unsubscribeFromDisabledStateChanges;
     private subscribedProvider;
@@ -42,6 +46,8 @@ export declare class MentionNodeView implements NodeView {
     private subscribeToProviderDisabledStateChanges;
     private syncDisabledTooltip;
     private setTextContent;
+    private setVisibleText;
+    private resolveMentionAvatar;
     private shouldHighlightMention;
     private updateState;
     private nodeIsEqual;

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

@@ -0,0 +1,39 @@
+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';
+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 ResolveMentionNodeData = (mention: MentionNodeDataIdentifier) => MentionNodeData | undefined;
+/**
+ * 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 declare class MentionNodeDataProvider extends NodeDataProvider<MentionDefinition, MentionNodeData> implements MentionNodeDataProviderContract {
+    private readonly fetchMentionNodeData;
+    private readonly resolveMentionNodeData;
+    readonly name = "mentionNodeDataProvider";
+    private queuedFetches;
+    private isFlushScheduled;
+    constructor(fetchMentionNodeData: FetchMentionNodeData, resolveMentionNodeData?: ResolveMentionNodeData | undefined);
+    isNodeSupported(node: JSONNode): node is MentionDefinition;
+    nodeDataKey(node: MentionDefinition): string;
+    fetchNodesData(nodes: MentionDefinition[]): Promise<MentionNodeData[]>;
+    getMentionData(mention: MentionNodeDataIdentifier, callback: MentionNodeDataCallback): void;
+    getMentionDataFromCache(mention: MentionNodeDataIdentifier): MentionNodeData | undefined;
+    private enqueueFetch;
+    private flushFetches;
+}

package/dist/types/types/index.d.ts

@@ -1,5 +1,6 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { MentionNodeDataProvider } from '@atlaskit/editor-common/mention';
 import type { Providers, ProfilecardProvider } from '@atlaskit/editor-common/provider-factory';
 import type { TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { MentionDescription, MentionProvider } from '@atlaskit/mention';
@@ -48,6 +49,11 @@ export interface MentionsPluginOptions extends MentionPluginConfig {
      */
     getIsRovoPanelOpen?: () => boolean;
     handleMentionsChanged?: MentionsChangedHandler;
+    /**
+     * Resolves avatar data for persisted mention nodes on the client. The renderer
+     * and editable NodeView reserve the avatar slot before the provider resolves.
+     */
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     mentionProvider?: Providers['mentionProvider'];
     /**
      * Optional callback injected by Rovo-aware consumers (e.g. Confluence) to

package/mention-node-data-provider/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/editor-plugin-mentions/mention-node-data-provider",
+  "main": "../dist/cjs/entry-points/mention-node-data-provider.js",
+  "module": "../dist/esm/entry-points/mention-node-data-provider.js",
+  "module:es2019": "../dist/es2019/entry-points/mention-node-data-provider.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/mention-node-data-provider.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "16.1.4",
+	"version": "16.2.0",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -23,18 +23,20 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.7.0",
 		"@atlaskit/css": "^1.0.0",
+		"@atlaskit/editor-json-transformer": "^9.2.0",
 		"@atlaskit/editor-plugin-analytics": "^14.0.0",
 		"@atlaskit/editor-plugin-base": "^15.0.0",
 		"@atlaskit/editor-plugin-context-identifier": "^14.0.0",
 		"@atlaskit/editor-plugin-selection": "^14.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^15.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^15.1.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^37.3.0",
-		"@atlaskit/insm": "^1.2.0",
+		"@atlaskit/insm": "^2.0.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/lozenge": "^15.0.0",
-		"@atlaskit/mention": "^27.15.0",
+		"@atlaskit/mention": "^27.16.0",
+		"@atlaskit/node-data-provider": "^15.0.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/popper": "^9.1.0",
@@ -44,26 +46,26 @@
 		"@atlaskit/profilecard": "^26.17.0",
 		"@atlaskit/teams-app-config": "^2.2.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^146.0.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/user-picker": "^13.8.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"react-loadable": "^5.1.0",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.4.0",
+		"@atlaskit/editor-common": "^118.12.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.0.0",
-		"@atlaskit/editor-core": "^223.0.0",
+		"@atlaskit/editor-core": "^223.2.0",
 		"@testing-library/react": "^16.3.0",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
@@ -126,5 +128,11 @@
 		"platform_editor_agent_mentions_drop_one_fixes": {
 			"type": "boolean"
 		}
+	},
+	"platform-experiments": {
+		"platform_editor_mention_node_avatar": {
+			"param": "isEnabled",
+			"defaultValue": false
+		}
 	}
 }