@atlaskit/editor-plugin-mentions 31.0.0 → 31.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-mentions
 
+## 31.0.1
+
+### Patch Changes
+
+- [`84e89f54232c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/84e89f54232c1) -
+  Render preloaded Rovo mention identity styling during SSR behind platform_editor_mention_rovo.
+- Updated dependencies
+
 ## 31.0.0
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -62,6 +62,11 @@ var isAgentMentionUserType = function isAgentMentionUserType(userType) {
   return userType === 'APP' || userType === 'AGENT';
 };
 
+// In SSR `HTMLElement` is not defined, so we need to use duck typing here, follow the same pattern used from the emoji and layout plugins.
+var isHTMLElement = function isHTMLElement(node) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') && (0, _isSsr.isSSR)() ? 'innerHTML' in node && 'style' in node && 'classList' in node : node instanceof HTMLElement;
+};
+
 /**
  * Returns true if the node is an APP/AGENT mention whose stored text is a raw
  * AAID (e.g. '@712020:uuid') rather than a resolved display name.
@@ -173,6 +178,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       _this$domElement$quer,
       _api$mention$sharedSt;
     (0, _classCallCheck2.default)(this, MentionNodeView);
+    // Undefined until the initial styling state has been applied.
     (0, _defineProperty2.default)(this, "hasAvatarSlot", false);
     (0, _defineProperty2.default)(this, "isDestroyed", false);
     (0, _defineProperty2.default)(this, "reportAvatarFailure", function (reason) {
@@ -210,7 +216,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     if (canReportMissingProvider && isAvatarEnabled) {
       this.reportAvatarFailure('missing_provider');
     }
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.domElement = isHTMLElement(dom) ? 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) {
@@ -293,51 +299,83 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "isRovoChatFromCache",
+    value: function isRovoChatFromCache() {
+      var _this$config$options;
+      return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') && ((_this$config$options = this.config.options) === null || _this$config$options === void 0 || (_this$config$options = _this$config$options.mentionNodeDataProvider) === null || _this$config$options === void 0 || (_this$config$options = _this$config$options.getMentionDataFromCache({
+        id: this.node.attrs.id,
+        userType: this.node.attrs.userType
+      })) === null || _this$config$options === void 0 ? void 0 : _this$config$options.isRovoChat) === true;
+    }
   }, {
     key: "resolveRovoChatIdentity",
     value: function () {
       var _resolveRovoChatIdentity = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
-        var identityAccountId;
+        var identityAccountId, _t;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(this.rovoChatIdentityProvider === mentionProvider)) {
+              if (!this.isRovoChatFromCache()) {
                 _context2.next = 1;
                 break;
               }
+              this.lastMentionProviderForRovoIdentity = mentionProvider;
+              this.setRovoChatStyles(true);
               return _context2.abrupt("return");
             case 1:
-              this.rovoChatIdentityProvider = mentionProvider;
-              if (!(!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+              if (!(this.lastMentionProviderForRovoIdentity === mentionProvider)) {
                 _context2.next = 2;
                 break;
               }
-              this.setRovoChatStyles(false);
               return _context2.abrupt("return");
             case 2:
-              _context2.next = 3;
-              return mentionProvider.getRovoChatAgentIdentityAccountId();
+              this.lastMentionProviderForRovoIdentity = mentionProvider;
+              if (!(!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+                _context2.next = 3;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
             case 3:
+              _context2.prev = 3;
+              _context2.next = 4;
+              return mentionProvider.getRovoChatAgentIdentityAccountId();
+            case 4:
               identityAccountId = _context2.sent;
-              if (!(this.rovoChatIdentityProvider !== mentionProvider)) {
-                _context2.next = 4;
+              _context2.next = 6;
+              break;
+            case 5:
+              _context2.prev = 5;
+              _t = _context2["catch"](3);
+            case 6:
+              if (!(this.isDestroyed || this.lastMentionProviderForRovoIdentity !== mentionProvider)) {
+                _context2.next = 7;
                 break;
               }
               return _context2.abrupt("return");
-            case 4:
+            case 7:
+              if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo')) {
+                _context2.next = 8;
+                break;
+              }
+              // Recheck after awaiting: newer cached identity must take precedence over this lookup's result.
+              this.setRovoChatStyles(this.isRovoChatFromCache() || identityAccountId !== undefined && identityAccountId === this.node.attrs.id);
+              return _context2.abrupt("return");
+            case 8:
               if (!(identityAccountId === undefined || identityAccountId !== this.node.attrs.id)) {
-                _context2.next = 5;
+                _context2.next = 9;
                 break;
               }
               this.setRovoChatStyles(false);
               return _context2.abrupt("return");
-            case 5:
+            case 9:
               this.setRovoChatStyles(true);
-            case 6:
+            case 10:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this);
+        }, _callee2, this, [[3, 5]]);
       }));
       function resolveRovoChatIdentity(_x4) {
         return _resolveRovoChatIdentity.apply(this, arguments);
@@ -348,12 +386,17 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     key: "setRovoChatStyles",
     value: function setRovoChatStyles(isRovoChat) {
       var _this$cleanupRovoChat, _this$mentionTextElem2;
+      // Avoid resetting styles and rebinding mouse listeners when the state is unchanged.
+      if (this.hasRovoChatStyles === isRovoChat) {
+        return;
+      }
       (_this$cleanupRovoChat = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat === void 0 || _this$cleanupRovoChat.call(this);
       this.cleanupRovoChatStyles = undefined;
       var primitive = this.mentionPrimitiveElement;
       if (!primitive) {
         return;
       }
+      this.hasRovoChatStyles = isRovoChat;
       primitive.classList.toggle('mention-rovo-chat', isRovoChat);
       if (!isRovoChat) {
         var _this$mentionTextElem;
@@ -372,6 +415,10 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       setBackground(baseBackground);
       primitive.style.setProperty('color', inverseText);
       (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 || _this$mentionTextElem2.style.setProperty('color', inverseText);
+      // SSR needs the styles above; mouse listeners are attached only on the client.
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') && (0, _isSsr.isSSR)()) {
+        return;
+      }
       var onMouseEnter = function onMouseEnter() {
         return setBackground(hoveredBackground);
       };
@@ -555,8 +602,8 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "shouldHighlightMention",
     value: function shouldHighlightMention(mentionProvider) {
-      var _this$config$options;
-      var _ref4 = (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 ? _this$config$options : {},
+      var _this$config$options2;
+      var _ref4 = (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 ? _this$config$options2 : {},
         currentUserId = _ref4.currentUserId;
       // Check options first (immediate), then provider (async), then default to false
       if (currentUserId && this.node.attrs.id === currentUserId) {
@@ -572,7 +619,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     key: "updateState",
     value: function () {
       var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mentionProvider) {
-        var _this$config$options2;
+        var _this$config$options3;
         var isAgentMentionsEnabled, isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name, text;
         return _regenerator.default.wrap(function (_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -599,7 +646,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
               // Only overwrite the disabled-state aria-label with the name-based one
               // when the chip is NOT disabled; otherwise the disabled reason set in
               // `setClassList` would be silently clobbered, regressing a11y.
-              if (this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider && newState !== 'disabled') {
+              if (this.domElement && (_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.profilecardProvider && newState !== 'disabled') {
                 text = name !== null && name !== void 0 ? name : this.node.attrs.text;
                 if (text && !isAgentAaidText(this.node, isAgentMentionsEnabled)) {
                   this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(text));
@@ -619,8 +666,8 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "nodeIsEqual",
     value: function nodeIsEqual(nextNode) {
-      var _this$config$options3;
-      if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.sanitizePrivateContent) {
+      var _this$config$options4;
+      if ((_this$config$options4 = this.config.options) !== null && _this$config$options4 !== void 0 && _this$config$options4.sanitizePrivateContent) {
         // Compare nodes but ignore the text parameter as it may be sanitized
         var nextNodeAttrs = _objectSpread(_objectSpread({}, nextNode.attrs), {}, {
           text: this.node.attrs.text

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

@@ -45,7 +45,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 = "30.0.3";
+var PACKAGE_VERSION = "31.0.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -43,6 +43,9 @@ const isMentionTextAnAaid = text => AAID_MENTION_TEXT_PATTERN.test(text);
 const isAgentMentionsExperimentEnabled = () => expVal('platform_editor_agent_mentions', 'isEnabled', false);
 const isAgentMentionUserType = userType => userType === 'APP' || userType === 'AGENT';
 
+// In SSR `HTMLElement` is not defined, so we need to use duck typing here, follow the same pattern used from the emoji and layout plugins.
+const isHTMLElement = node => isExperimentEnabled('platform_editor_mention_rovo') && isSSR() ? 'innerHTML' in node && 'style' in node && 'classList' in node : node instanceof HTMLElement;
+
 /**
  * Returns true if the node is an APP/AGENT mention whose stored text is a raw
  * AAID (e.g. '@712020:uuid') rather than a resolved display name.
@@ -132,6 +135,7 @@ const getNewState = (isHighlighted, isRestricted, isDisabled) => {
 export class MentionNodeView {
   constructor(node, config) {
     var _this$domElement$quer, _api$mention$sharedSt;
+    // Undefined until the initial styling state has been applied.
     _defineProperty(this, "hasAvatarSlot", false);
     _defineProperty(this, "isDestroyed", false);
     _defineProperty(this, "reportAvatarFailure", reason => {
@@ -172,7 +176,7 @@ export class MentionNodeView {
     if (canReportMissingProvider && isAvatarEnabled) {
       this.reportAvatarFailure('missing_provider');
     }
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.domElement = isHTMLElement(dom) ? 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) {
@@ -254,17 +258,40 @@ export class MentionNodeView {
       }
     }
   }
+  isRovoChatFromCache() {
+    var _this$config$options, _this$config$options$, _this$config$options$2;
+    return isExperimentEnabled('platform_editor_mention_rovo') && ((_this$config$options = this.config.options) === null || _this$config$options === void 0 ? void 0 : (_this$config$options$ = _this$config$options.mentionNodeDataProvider) === null || _this$config$options$ === void 0 ? void 0 : (_this$config$options$2 = _this$config$options$.getMentionDataFromCache({
+      id: this.node.attrs.id,
+      userType: this.node.attrs.userType
+    })) === null || _this$config$options$2 === void 0 ? void 0 : _this$config$options$2.isRovoChat) === true;
+  }
   async resolveRovoChatIdentity(mentionProvider) {
-    if (this.rovoChatIdentityProvider === mentionProvider) {
+    // Apply cached identity immediately so SSR includes Rovo styling before the async lookup.
+    if (this.isRovoChatFromCache()) {
+      this.lastMentionProviderForRovoIdentity = mentionProvider;
+      this.setRovoChatStyles(true);
+      return;
+    }
+    if (this.lastMentionProviderForRovoIdentity === mentionProvider) {
       return;
     }
-    this.rovoChatIdentityProvider = mentionProvider;
+    this.lastMentionProviderForRovoIdentity = mentionProvider;
     if (!isExperimentEnabled('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId)) {
       this.setRovoChatStyles(false);
       return;
     }
-    const identityAccountId = await mentionProvider.getRovoChatAgentIdentityAccountId();
-    if (this.rovoChatIdentityProvider !== mentionProvider) {
+    let identityAccountId;
+    try {
+      identityAccountId = await mentionProvider.getRovoChatAgentIdentityAccountId();
+    } catch {
+      // Fall back to cached identity or ordinary mention styling if the lookup fails.
+    }
+    if (this.isDestroyed || this.lastMentionProviderForRovoIdentity !== mentionProvider) {
+      return;
+    }
+    if (isExperimentEnabled('platform_editor_mention_rovo')) {
+      // Recheck after awaiting: newer cached identity must take precedence over this lookup's result.
+      this.setRovoChatStyles(this.isRovoChatFromCache() || identityAccountId !== undefined && identityAccountId === this.node.attrs.id);
       return;
     }
     if (identityAccountId === undefined || identityAccountId !== this.node.attrs.id) {
@@ -275,12 +302,17 @@ export class MentionNodeView {
   }
   setRovoChatStyles(isRovoChat) {
     var _this$cleanupRovoChat, _this$mentionTextElem2;
+    // Avoid resetting styles and rebinding mouse listeners when the state is unchanged.
+    if (this.hasRovoChatStyles === isRovoChat) {
+      return;
+    }
     (_this$cleanupRovoChat = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat === void 0 ? void 0 : _this$cleanupRovoChat.call(this);
     this.cleanupRovoChatStyles = undefined;
     const primitive = this.mentionPrimitiveElement;
     if (!primitive) {
       return;
     }
+    this.hasRovoChatStyles = isRovoChat;
     primitive.classList.toggle('mention-rovo-chat', isRovoChat);
     if (!isRovoChat) {
       var _this$mentionTextElem;
@@ -299,6 +331,10 @@ export class MentionNodeView {
     setBackground(baseBackground);
     primitive.style.setProperty('color', inverseText);
     (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 ? void 0 : _this$mentionTextElem2.style.setProperty('color', inverseText);
+    // SSR needs the styles above; mouse listeners are attached only on the client.
+    if (isExperimentEnabled('platform_editor_mention_rovo') && isSSR()) {
+      return;
+    }
     const onMouseEnter = () => setBackground(hoveredBackground);
     const onMouseLeave = () => setBackground(baseBackground);
     const onMouseDown = () => setBackground(pressedBackground);
@@ -456,10 +492,10 @@ export class MentionNodeView {
     });
   }
   shouldHighlightMention(mentionProvider) {
-    var _this$config$options;
+    var _this$config$options2;
     const {
       currentUserId
-    } = (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 ? _this$config$options : {};
+    } = (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 ? _this$config$options2 : {};
     // Check options first (immediate), then provider (async), then default to false
     if (currentUserId && this.node.attrs.id === currentUserId) {
       return true;
@@ -471,7 +507,7 @@ export class MentionNodeView {
     }
   }
   async updateState(mentionProvider) {
-    var _this$config$options2;
+    var _this$config$options3;
     const isAgentMentionsEnabled = isAgentMentionsExperimentEnabled();
     const isHighlighted = this.shouldHighlightMention(mentionProvider);
     const disabledState = this.getDisabledState(mentionProvider);
@@ -492,7 +528,7 @@ export class MentionNodeView {
     // Only overwrite the disabled-state aria-label with the name-based one
     // when the chip is NOT disabled; otherwise the disabled reason set in
     // `setClassList` would be silently clobbered, regressing a11y.
-    if (this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider && newState !== 'disabled') {
+    if (this.domElement && (_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.profilecardProvider && newState !== 'disabled') {
       const text = name !== null && name !== void 0 ? name : this.node.attrs.text;
       if (text && !isAgentAaidText(this.node, isAgentMentionsEnabled)) {
         this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(text));
@@ -500,8 +536,8 @@ export class MentionNodeView {
     }
   }
   nodeIsEqual(nextNode) {
-    var _this$config$options3;
-    if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.sanitizePrivateContent) {
+    var _this$config$options4;
+    if ((_this$config$options4 = this.config.options) !== null && _this$config$options4 !== void 0 && _this$config$options4.sanitizePrivateContent) {
       // Compare nodes but ignore the text parameter as it may be sanitized
       const nextNodeAttrs = {
         ...nextNode.attrs,

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

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

package/dist/esm/nodeviews/mentionNodeView.js

@@ -57,6 +57,11 @@ var isAgentMentionUserType = function isAgentMentionUserType(userType) {
   return userType === 'APP' || userType === 'AGENT';
 };
 
+// In SSR `HTMLElement` is not defined, so we need to use duck typing here, follow the same pattern used from the emoji and layout plugins.
+var isHTMLElement = function isHTMLElement(node) {
+  return isExperimentEnabled('platform_editor_mention_rovo') && isSSR() ? 'innerHTML' in node && 'style' in node && 'classList' in node : node instanceof HTMLElement;
+};
+
 /**
  * Returns true if the node is an APP/AGENT mention whose stored text is a raw
  * AAID (e.g. '@712020:uuid') rather than a resolved display name.
@@ -168,6 +173,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
       _this$domElement$quer,
       _api$mention$sharedSt;
     _classCallCheck(this, MentionNodeView);
+    // Undefined until the initial styling state has been applied.
     _defineProperty(this, "hasAvatarSlot", false);
     _defineProperty(this, "isDestroyed", false);
     _defineProperty(this, "reportAvatarFailure", function (reason) {
@@ -205,7 +211,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
     if (canReportMissingProvider && isAvatarEnabled) {
       this.reportAvatarFailure('missing_provider');
     }
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.domElement = isHTMLElement(dom) ? 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) {
@@ -288,51 +294,83 @@ export var MentionNodeView = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "isRovoChatFromCache",
+    value: function isRovoChatFromCache() {
+      var _this$config$options;
+      return isExperimentEnabled('platform_editor_mention_rovo') && ((_this$config$options = this.config.options) === null || _this$config$options === void 0 || (_this$config$options = _this$config$options.mentionNodeDataProvider) === null || _this$config$options === void 0 || (_this$config$options = _this$config$options.getMentionDataFromCache({
+        id: this.node.attrs.id,
+        userType: this.node.attrs.userType
+      })) === null || _this$config$options === void 0 ? void 0 : _this$config$options.isRovoChat) === true;
+    }
   }, {
     key: "resolveRovoChatIdentity",
     value: function () {
       var _resolveRovoChatIdentity = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
-        var identityAccountId;
+        var identityAccountId, _t;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(this.rovoChatIdentityProvider === mentionProvider)) {
+              if (!this.isRovoChatFromCache()) {
                 _context2.next = 1;
                 break;
               }
+              this.lastMentionProviderForRovoIdentity = mentionProvider;
+              this.setRovoChatStyles(true);
               return _context2.abrupt("return");
             case 1:
-              this.rovoChatIdentityProvider = mentionProvider;
-              if (!(!isExperimentEnabled('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+              if (!(this.lastMentionProviderForRovoIdentity === mentionProvider)) {
                 _context2.next = 2;
                 break;
               }
-              this.setRovoChatStyles(false);
               return _context2.abrupt("return");
             case 2:
-              _context2.next = 3;
-              return mentionProvider.getRovoChatAgentIdentityAccountId();
+              this.lastMentionProviderForRovoIdentity = mentionProvider;
+              if (!(!isExperimentEnabled('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+                _context2.next = 3;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
             case 3:
+              _context2.prev = 3;
+              _context2.next = 4;
+              return mentionProvider.getRovoChatAgentIdentityAccountId();
+            case 4:
               identityAccountId = _context2.sent;
-              if (!(this.rovoChatIdentityProvider !== mentionProvider)) {
-                _context2.next = 4;
+              _context2.next = 6;
+              break;
+            case 5:
+              _context2.prev = 5;
+              _t = _context2["catch"](3);
+            case 6:
+              if (!(this.isDestroyed || this.lastMentionProviderForRovoIdentity !== mentionProvider)) {
+                _context2.next = 7;
                 break;
               }
               return _context2.abrupt("return");
-            case 4:
+            case 7:
+              if (!isExperimentEnabled('platform_editor_mention_rovo')) {
+                _context2.next = 8;
+                break;
+              }
+              // Recheck after awaiting: newer cached identity must take precedence over this lookup's result.
+              this.setRovoChatStyles(this.isRovoChatFromCache() || identityAccountId !== undefined && identityAccountId === this.node.attrs.id);
+              return _context2.abrupt("return");
+            case 8:
               if (!(identityAccountId === undefined || identityAccountId !== this.node.attrs.id)) {
-                _context2.next = 5;
+                _context2.next = 9;
                 break;
               }
               this.setRovoChatStyles(false);
               return _context2.abrupt("return");
-            case 5:
+            case 9:
               this.setRovoChatStyles(true);
-            case 6:
+            case 10:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this);
+        }, _callee2, this, [[3, 5]]);
       }));
       function resolveRovoChatIdentity(_x4) {
         return _resolveRovoChatIdentity.apply(this, arguments);
@@ -343,12 +381,17 @@ export var MentionNodeView = /*#__PURE__*/function () {
     key: "setRovoChatStyles",
     value: function setRovoChatStyles(isRovoChat) {
       var _this$cleanupRovoChat, _this$mentionTextElem2;
+      // Avoid resetting styles and rebinding mouse listeners when the state is unchanged.
+      if (this.hasRovoChatStyles === isRovoChat) {
+        return;
+      }
       (_this$cleanupRovoChat = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat === void 0 || _this$cleanupRovoChat.call(this);
       this.cleanupRovoChatStyles = undefined;
       var primitive = this.mentionPrimitiveElement;
       if (!primitive) {
         return;
       }
+      this.hasRovoChatStyles = isRovoChat;
       primitive.classList.toggle('mention-rovo-chat', isRovoChat);
       if (!isRovoChat) {
         var _this$mentionTextElem;
@@ -367,6 +410,10 @@ export var MentionNodeView = /*#__PURE__*/function () {
       setBackground(baseBackground);
       primitive.style.setProperty('color', inverseText);
       (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 || _this$mentionTextElem2.style.setProperty('color', inverseText);
+      // SSR needs the styles above; mouse listeners are attached only on the client.
+      if (isExperimentEnabled('platform_editor_mention_rovo') && isSSR()) {
+        return;
+      }
       var onMouseEnter = function onMouseEnter() {
         return setBackground(hoveredBackground);
       };
@@ -550,8 +597,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "shouldHighlightMention",
     value: function shouldHighlightMention(mentionProvider) {
-      var _this$config$options;
-      var _ref4 = (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 ? _this$config$options : {},
+      var _this$config$options2;
+      var _ref4 = (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 ? _this$config$options2 : {},
         currentUserId = _ref4.currentUserId;
       // Check options first (immediate), then provider (async), then default to false
       if (currentUserId && this.node.attrs.id === currentUserId) {
@@ -567,7 +614,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
     key: "updateState",
     value: function () {
       var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mentionProvider) {
-        var _this$config$options2;
+        var _this$config$options3;
         var isAgentMentionsEnabled, isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name, text;
         return _regeneratorRuntime.wrap(function (_context3) {
           while (1) switch (_context3.prev = _context3.next) {
@@ -594,7 +641,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
               // Only overwrite the disabled-state aria-label with the name-based one
               // when the chip is NOT disabled; otherwise the disabled reason set in
               // `setClassList` would be silently clobbered, regressing a11y.
-              if (this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider && newState !== 'disabled') {
+              if (this.domElement && (_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.profilecardProvider && newState !== 'disabled') {
                 text = name !== null && name !== void 0 ? name : this.node.attrs.text;
                 if (text && !isAgentAaidText(this.node, isAgentMentionsEnabled)) {
                   this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(text));
@@ -614,8 +661,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "nodeIsEqual",
     value: function nodeIsEqual(nextNode) {
-      var _this$config$options3;
-      if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.sanitizePrivateContent) {
+      var _this$config$options4;
+      if ((_this$config$options4 = this.config.options) !== null && _this$config$options4 !== void 0 && _this$config$options4.sanitizePrivateContent) {
         // Compare nodes but ignore the text parameter as it may be sanitized
         var nextNodeAttrs = _objectSpread(_objectSpread({}, nextNode.attrs), {}, {
           text: this.node.attrs.text

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

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

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

@@ -24,7 +24,8 @@ export declare class MentionNodeView implements NodeView {
     private mentionTextElement;
     private mentionAvatar;
     private cleanupRovoChatStyles;
-    private rovoChatIdentityProvider;
+    private lastMentionProviderForRovoIdentity;
+    private hasRovoChatStyles;
     private hasAvatarSlot;
     private isDestroyed;
     private disabledTooltip;
@@ -34,6 +35,7 @@ export declare class MentionNodeView implements NodeView {
     private subscribedProvider;
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
+    private isRovoChatFromCache;
     private resolveRovoChatIdentity;
     private setRovoChatStyles;
     private getDisabledState;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "31.0.0",
+	"version": "31.0.1",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/popup": "^10.0.0",
 		"@atlaskit/portal": "^7.0.0",
 		"@atlaskit/primitives": "^22.6.0",
-		"@atlaskit/profilecard": "^27.2.0",
+		"@atlaskit/profilecard": "^27.3.0",
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/teams-app-config": "^3.1.0",
 		"@atlaskit/theme": "^28.2.0",