@atlaskit/editor-plugin-mentions 21.1.1 → 21.1.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-mentions
 
+## 21.1.3
+
+### Patch Changes
+
+- [`90cc9e3c7fc0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90cc9e3c7fc0c) -
+  Support gated dark-background styling for the configured Rovo Chat agent mention in editors and
+  the renderer.
+- Updated dependencies
+
+## 21.1.2
+
+### Patch Changes
+
+- [`e824823394e78`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e824823394e78) -
+  Use CSS-escaped zero-width-space helpers for mention node views to avoid mojibake in affected
+  editor bundles. The `platform_editor_mention_zero_width_space_escape` experiment controls the
+  rollout.
+- Updated dependencies
+
 ## 21.1.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -10,6 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _bindEventListener = require("bind-event-listener");
 var _browser = require("@atlaskit/editor-common/browser");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
@@ -31,6 +32,7 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
+var mentionZeroWidthSpaceClassName = 'mentionNodeViewAddZeroWidthSpace';
 /** 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'];
@@ -104,17 +106,18 @@ var toDOM = function toDOM(node, hasAvatarSlot) {
     spellcheck: 'false',
     class: primitiveClassName
   }, mentionText];
+  var zeroWidthSpaceHelperClassName = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_zero_width_space_escape') ? mentionZeroWidthSpaceClassName : 'inlineNodeViewAddZeroWidthSpace';
   return ['span', mentionAttrs, ['span', {
     class: 'zeroWidthSpaceContainer'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, _whitespace.ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, _whitespace.ZERO_WIDTH_SPACE]] : ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, _whitespace.ZERO_WIDTH_SPACE]];
 };
 var processName = function processName(name) {
@@ -196,10 +199,16 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
     }
     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;
+    if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo')) {
+      void this.resolveRovoChatIdentity(mentionProvider);
+    }
     this.updateState(mentionProvider);
     this.subscribeToProviderDisabledStateChanges(mentionProvider);
     this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(function (_ref3) {
       var nextSharedState = _ref3.nextSharedState;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo')) {
+        void _this.resolveRovoChatIdentity(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+      }
       _this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
       _this.subscribeToProviderDisabledStateChanges(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
     });
@@ -254,6 +263,116 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "resolveRovoChatIdentity",
+    value: function () {
+      var _resolveRovoChatIdentity = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
+        var identityAccountId;
+        return _regenerator.default.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(this.rovoChatIdentityProvider === mentionProvider)) {
+                _context2.next = 1;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 1:
+              this.rovoChatIdentityProvider = mentionProvider;
+              if (!(!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+                _context2.next = 2;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
+            case 2:
+              _context2.next = 3;
+              return mentionProvider.getRovoChatAgentIdentityAccountId();
+            case 3:
+              identityAccountId = _context2.sent;
+              if (!(this.rovoChatIdentityProvider !== mentionProvider)) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              if (!(identityAccountId === undefined || identityAccountId !== this.node.attrs.id)) {
+                _context2.next = 5;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
+            case 5:
+              this.setRovoChatStyles(true);
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function resolveRovoChatIdentity(_x4) {
+        return _resolveRovoChatIdentity.apply(this, arguments);
+      }
+      return resolveRovoChatIdentity;
+    }()
+  }, {
+    key: "setRovoChatStyles",
+    value: function setRovoChatStyles(isRovoChat) {
+      var _this$cleanupRovoChat, _this$mentionTextElem2;
+      (_this$cleanupRovoChat = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat === void 0 || _this$cleanupRovoChat.call(this);
+      this.cleanupRovoChatStyles = undefined;
+      var primitive = this.mentionPrimitiveElement;
+      if (!primitive) {
+        return;
+      }
+      primitive.classList.toggle('mention-rovo-chat', isRovoChat);
+      if (!isRovoChat) {
+        var _this$mentionTextElem;
+        primitive.style.removeProperty('background-color');
+        primitive.style.removeProperty('color');
+        (_this$mentionTextElem = this.mentionTextElement) === null || _this$mentionTextElem === void 0 || _this$mentionTextElem.style.removeProperty('color');
+        return;
+      }
+      var baseBackground = "var(--ds-background-neutral-bold, #292A2E)";
+      var hoveredBackground = "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+      var pressedBackground = "var(--ds-background-neutral-bold-pressed, #505258)";
+      var inverseText = "var(--ds-text-inverse, #FFFFFF)";
+      var setBackground = function setBackground(background) {
+        primitive.style.setProperty('background-color', background);
+      };
+      setBackground(baseBackground);
+      primitive.style.setProperty('color', inverseText);
+      (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 || _this$mentionTextElem2.style.setProperty('color', inverseText);
+      var onMouseEnter = function onMouseEnter() {
+        return setBackground(hoveredBackground);
+      };
+      var onMouseLeave = function onMouseLeave() {
+        return setBackground(baseBackground);
+      };
+      var onMouseDown = function onMouseDown() {
+        return setBackground(pressedBackground);
+      };
+      var onMouseUp = function onMouseUp() {
+        return setBackground(hoveredBackground);
+      };
+      var unbinders = [(0, _bindEventListener.bind)(primitive, {
+        type: 'mouseenter',
+        listener: onMouseEnter
+      }), (0, _bindEventListener.bind)(primitive, {
+        type: 'mouseleave',
+        listener: onMouseLeave
+      }), (0, _bindEventListener.bind)(primitive, {
+        type: 'mousedown',
+        listener: onMouseDown
+      }), (0, _bindEventListener.bind)(primitive, {
+        type: 'mouseup',
+        listener: onMouseUp
+      })];
+      this.cleanupRovoChatStyles = function () {
+        unbinders.forEach(function (unbind) {
+          return unbind();
+        });
+      };
+    }
   }, {
     key: "getDisabledState",
     value: function getDisabledState(mentionProvider) {
@@ -410,11 +529,11 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "updateState",
     value: function () {
-      var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
+      var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mentionProvider) {
         var _this$config$options2;
         var isAgentMentionsEnabled, isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name, text;
-        return _regenerator.default.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regenerator.default.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               isAgentMentionsEnabled = isAgentMentionsExperimentEnabled();
               isHighlighted = this.shouldHighlightMention(mentionProvider);
@@ -430,10 +549,10 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
               // the tooltip text stays in sync if the disabled reason changes while
               // the chip is already disabled.
               this.syncDisabledTooltip(disabledState);
-              _context2.next = 1;
+              _context3.next = 1;
               return handleProviderName(mentionProvider, this.node, isAgentMentionsEnabled);
             case 1:
-              name = _context2.sent;
+              name = _context3.sent;
               this.setTextContent(name, isAgentMentionsEnabled);
               // Only overwrite the disabled-state aria-label with the name-based one
               // when the chip is NOT disabled; otherwise the disabled reason set in
@@ -446,11 +565,11 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
               }
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function updateState(_x4) {
+      function updateState(_x5) {
         return _updateState.apply(this, arguments);
       }
       return updateState;
@@ -484,7 +603,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$cleanup, _this$destroyProfileC, _this$mentionAvatar, _this$disabledTooltip, _this$unsubscribeFrom2;
+      var _this$cleanup, _this$cleanupRovoChat2, _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`).
@@ -500,6 +619,8 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         // the NodeView from cleaning up its own resources below.
       }
       (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      (_this$cleanupRovoChat2 = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat2 === void 0 || _this$cleanupRovoChat2.call(this);
+      this.cleanupRovoChatStyles = undefined;
       (_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;

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

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

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { bind } from 'bind-event-listener';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
@@ -20,6 +21,7 @@ const primitiveClassName = 'editor-mention-primitive';
 const primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 const avatarContainerClassName = 'editor-mention-avatar';
 const mentionTextClassName = 'editor-mention-text';
+const mentionZeroWidthSpaceClassName = 'mentionNodeViewAddZeroWidthSpace';
 /** 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'];
@@ -87,17 +89,18 @@ const toDOM = (node, hasAvatarSlot) => {
     spellcheck: 'false',
     class: primitiveClassName
   }, mentionText];
+  const zeroWidthSpaceHelperClassName = isExperimentEnabled('platform_editor_mention_zero_width_space_escape') ? mentionZeroWidthSpaceClassName : 'inlineNodeViewAddZeroWidthSpace';
   return ['span', mentionAttrs, ['span', {
     class: 'zeroWidthSpaceContainer'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]] : ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]];
 };
 const processName = name => {
@@ -161,11 +164,17 @@ export class MentionNodeView {
     const {
       mentionProvider
     } = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {};
+    if (isExperimentEnabled('platform_editor_mention_rovo')) {
+      void this.resolveRovoChatIdentity(mentionProvider);
+    }
     this.updateState(mentionProvider);
     this.subscribeToProviderDisabledStateChanges(mentionProvider);
     this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(({
       nextSharedState
     }) => {
+      if (isExperimentEnabled('platform_editor_mention_rovo')) {
+        void this.resolveRovoChatIdentity(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+      }
       this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
       this.subscribeToProviderDisabledStateChanges(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
     });
@@ -219,6 +228,72 @@ export class MentionNodeView {
       }
     }
   }
+  async resolveRovoChatIdentity(mentionProvider) {
+    if (this.rovoChatIdentityProvider === mentionProvider) {
+      return;
+    }
+    this.rovoChatIdentityProvider = 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) {
+      return;
+    }
+    if (identityAccountId === undefined || identityAccountId !== this.node.attrs.id) {
+      this.setRovoChatStyles(false);
+      return;
+    }
+    this.setRovoChatStyles(true);
+  }
+  setRovoChatStyles(isRovoChat) {
+    var _this$cleanupRovoChat, _this$mentionTextElem2;
+    (_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;
+    }
+    primitive.classList.toggle('mention-rovo-chat', isRovoChat);
+    if (!isRovoChat) {
+      var _this$mentionTextElem;
+      primitive.style.removeProperty('background-color');
+      primitive.style.removeProperty('color');
+      (_this$mentionTextElem = this.mentionTextElement) === null || _this$mentionTextElem === void 0 ? void 0 : _this$mentionTextElem.style.removeProperty('color');
+      return;
+    }
+    const baseBackground = "var(--ds-background-neutral-bold, #292A2E)";
+    const hoveredBackground = "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+    const pressedBackground = "var(--ds-background-neutral-bold-pressed, #505258)";
+    const inverseText = "var(--ds-text-inverse, #FFFFFF)";
+    const setBackground = background => {
+      primitive.style.setProperty('background-color', background);
+    };
+    setBackground(baseBackground);
+    primitive.style.setProperty('color', inverseText);
+    (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 ? void 0 : _this$mentionTextElem2.style.setProperty('color', inverseText);
+    const onMouseEnter = () => setBackground(hoveredBackground);
+    const onMouseLeave = () => setBackground(baseBackground);
+    const onMouseDown = () => setBackground(pressedBackground);
+    const onMouseUp = () => setBackground(hoveredBackground);
+    const unbinders = [bind(primitive, {
+      type: 'mouseenter',
+      listener: onMouseEnter
+    }), bind(primitive, {
+      type: 'mouseleave',
+      listener: onMouseLeave
+    }), bind(primitive, {
+      type: 'mousedown',
+      listener: onMouseDown
+    }), bind(primitive, {
+      type: 'mouseup',
+      listener: onMouseUp
+    })];
+    this.cleanupRovoChatStyles = () => {
+      unbinders.forEach(unbind => unbind());
+    };
+  }
   getDisabledState(mentionProvider) {
     var _mentionProvider$getM;
     const input = {
@@ -410,7 +485,7 @@ export class MentionNodeView {
     return true;
   }
   destroy() {
-    var _this$cleanup, _this$destroyProfileC, _this$mentionAvatar2, _this$disabledTooltip, _this$unsubscribeFrom2;
+    var _this$cleanup, _this$cleanupRovoChat2, _this$destroyProfileC, _this$mentionAvatar2, _this$disabledTooltip, _this$unsubscribeFrom2;
     this.isDestroyed = true;
     // Surface the destruction to the provider before tearing down so the
     // chat layer can react (e.g. drop the agent id from `selectedAgentIds`).
@@ -426,6 +501,8 @@ export class MentionNodeView {
       // the NodeView from cleaning up its own resources below.
     }
     (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 ? void 0 : _this$cleanup.call(this);
+    (_this$cleanupRovoChat2 = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat2 === void 0 ? void 0 : _this$cleanupRovoChat2.call(this);
+    this.cleanupRovoChatStyles = undefined;
     (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 ? void 0 : _this$destroyProfileC.call(this);
     (_this$mentionAvatar2 = this.mentionAvatar) === null || _this$mentionAvatar2 === void 0 ? void 0 : _this$mentionAvatar2.destroy();
     this.mentionAvatar = undefined;

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

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

package/dist/esm/nodeviews/mentionNodeView.js

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 { bind } from 'bind-event-listener';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
@@ -26,6 +27,7 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
+var mentionZeroWidthSpaceClassName = 'mentionNodeViewAddZeroWidthSpace';
 /** 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'];
@@ -99,17 +101,18 @@ var toDOM = function toDOM(node, hasAvatarSlot) {
     spellcheck: 'false',
     class: primitiveClassName
   }, mentionText];
+  var zeroWidthSpaceHelperClassName = isExperimentEnabled('platform_editor_mention_zero_width_space_escape') ? mentionZeroWidthSpaceClassName : 'inlineNodeViewAddZeroWidthSpace';
   return ['span', mentionAttrs, ['span', {
     class: 'zeroWidthSpaceContainer'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]], mentionContentSpec, browser.android ? ['span', {
     class: 'zeroWidthSpaceContainer',
     contenteditable: 'false'
   }, ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]] : ['span', {
-    class: 'inlineNodeViewAddZeroWidthSpace'
+    class: zeroWidthSpaceHelperClassName
   }, ZERO_WIDTH_SPACE]];
 };
 var processName = function processName(name) {
@@ -191,10 +194,16 @@ export var MentionNodeView = /*#__PURE__*/function () {
     }
     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;
+    if (isExperimentEnabled('platform_editor_mention_rovo')) {
+      void this.resolveRovoChatIdentity(mentionProvider);
+    }
     this.updateState(mentionProvider);
     this.subscribeToProviderDisabledStateChanges(mentionProvider);
     this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(function (_ref3) {
       var nextSharedState = _ref3.nextSharedState;
+      if (isExperimentEnabled('platform_editor_mention_rovo')) {
+        void _this.resolveRovoChatIdentity(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+      }
       _this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
       _this.subscribeToProviderDisabledStateChanges(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
     });
@@ -249,6 +258,116 @@ export var MentionNodeView = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "resolveRovoChatIdentity",
+    value: function () {
+      var _resolveRovoChatIdentity = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
+        var identityAccountId;
+        return _regeneratorRuntime.wrap(function (_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(this.rovoChatIdentityProvider === mentionProvider)) {
+                _context2.next = 1;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 1:
+              this.rovoChatIdentityProvider = mentionProvider;
+              if (!(!isExperimentEnabled('platform_editor_mention_rovo') || !(mentionProvider !== null && mentionProvider !== void 0 && mentionProvider.getRovoChatAgentIdentityAccountId))) {
+                _context2.next = 2;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
+            case 2:
+              _context2.next = 3;
+              return mentionProvider.getRovoChatAgentIdentityAccountId();
+            case 3:
+              identityAccountId = _context2.sent;
+              if (!(this.rovoChatIdentityProvider !== mentionProvider)) {
+                _context2.next = 4;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 4:
+              if (!(identityAccountId === undefined || identityAccountId !== this.node.attrs.id)) {
+                _context2.next = 5;
+                break;
+              }
+              this.setRovoChatStyles(false);
+              return _context2.abrupt("return");
+            case 5:
+              this.setRovoChatStyles(true);
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function resolveRovoChatIdentity(_x4) {
+        return _resolveRovoChatIdentity.apply(this, arguments);
+      }
+      return resolveRovoChatIdentity;
+    }()
+  }, {
+    key: "setRovoChatStyles",
+    value: function setRovoChatStyles(isRovoChat) {
+      var _this$cleanupRovoChat, _this$mentionTextElem2;
+      (_this$cleanupRovoChat = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat === void 0 || _this$cleanupRovoChat.call(this);
+      this.cleanupRovoChatStyles = undefined;
+      var primitive = this.mentionPrimitiveElement;
+      if (!primitive) {
+        return;
+      }
+      primitive.classList.toggle('mention-rovo-chat', isRovoChat);
+      if (!isRovoChat) {
+        var _this$mentionTextElem;
+        primitive.style.removeProperty('background-color');
+        primitive.style.removeProperty('color');
+        (_this$mentionTextElem = this.mentionTextElement) === null || _this$mentionTextElem === void 0 || _this$mentionTextElem.style.removeProperty('color');
+        return;
+      }
+      var baseBackground = "var(--ds-background-neutral-bold, #292A2E)";
+      var hoveredBackground = "var(--ds-background-neutral-bold-hovered, #3B3D42)";
+      var pressedBackground = "var(--ds-background-neutral-bold-pressed, #505258)";
+      var inverseText = "var(--ds-text-inverse, #FFFFFF)";
+      var setBackground = function setBackground(background) {
+        primitive.style.setProperty('background-color', background);
+      };
+      setBackground(baseBackground);
+      primitive.style.setProperty('color', inverseText);
+      (_this$mentionTextElem2 = this.mentionTextElement) === null || _this$mentionTextElem2 === void 0 || _this$mentionTextElem2.style.setProperty('color', inverseText);
+      var onMouseEnter = function onMouseEnter() {
+        return setBackground(hoveredBackground);
+      };
+      var onMouseLeave = function onMouseLeave() {
+        return setBackground(baseBackground);
+      };
+      var onMouseDown = function onMouseDown() {
+        return setBackground(pressedBackground);
+      };
+      var onMouseUp = function onMouseUp() {
+        return setBackground(hoveredBackground);
+      };
+      var unbinders = [bind(primitive, {
+        type: 'mouseenter',
+        listener: onMouseEnter
+      }), bind(primitive, {
+        type: 'mouseleave',
+        listener: onMouseLeave
+      }), bind(primitive, {
+        type: 'mousedown',
+        listener: onMouseDown
+      }), bind(primitive, {
+        type: 'mouseup',
+        listener: onMouseUp
+      })];
+      this.cleanupRovoChatStyles = function () {
+        unbinders.forEach(function (unbind) {
+          return unbind();
+        });
+      };
+    }
   }, {
     key: "getDisabledState",
     value: function getDisabledState(mentionProvider) {
@@ -405,11 +524,11 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "updateState",
     value: function () {
-      var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
+      var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mentionProvider) {
         var _this$config$options2;
         var isAgentMentionsEnabled, isHighlighted, disabledState, isDisabled, newState, disabledTooltip, name, text;
-        return _regeneratorRuntime.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               isAgentMentionsEnabled = isAgentMentionsExperimentEnabled();
               isHighlighted = this.shouldHighlightMention(mentionProvider);
@@ -425,10 +544,10 @@ export var MentionNodeView = /*#__PURE__*/function () {
               // the tooltip text stays in sync if the disabled reason changes while
               // the chip is already disabled.
               this.syncDisabledTooltip(disabledState);
-              _context2.next = 1;
+              _context3.next = 1;
               return handleProviderName(mentionProvider, this.node, isAgentMentionsEnabled);
             case 1:
-              name = _context2.sent;
+              name = _context3.sent;
               this.setTextContent(name, isAgentMentionsEnabled);
               // Only overwrite the disabled-state aria-label with the name-based one
               // when the chip is NOT disabled; otherwise the disabled reason set in
@@ -441,11 +560,11 @@ export var MentionNodeView = /*#__PURE__*/function () {
               }
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
-      function updateState(_x4) {
+      function updateState(_x5) {
         return _updateState.apply(this, arguments);
       }
       return updateState;
@@ -479,7 +598,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$cleanup, _this$destroyProfileC, _this$mentionAvatar, _this$disabledTooltip, _this$unsubscribeFrom2;
+      var _this$cleanup, _this$cleanupRovoChat2, _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`).
@@ -495,6 +614,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
         // the NodeView from cleaning up its own resources below.
       }
       (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      (_this$cleanupRovoChat2 = this.cleanupRovoChatStyles) === null || _this$cleanupRovoChat2 === void 0 || _this$cleanupRovoChat2.call(this);
+      this.cleanupRovoChatStyles = undefined;
       (_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;

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

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

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

@@ -23,6 +23,8 @@ export declare class MentionNodeView implements NodeView {
     private mentionPrimitiveElement;
     private mentionTextElement;
     private mentionAvatar;
+    private cleanupRovoChatStyles;
+    private rovoChatIdentityProvider;
     private hasAvatarSlot;
     private isDestroyed;
     private disabledTooltip;
@@ -32,6 +34,8 @@ export declare class MentionNodeView implements NodeView {
     private subscribedProvider;
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
+    private resolveRovoChatIdentity;
+    private setRovoChatStyles;
     private getDisabledState;
     /**
      * Subscribes this NodeView to disabled-state-change notifications on the

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "21.1.1",
+	"version": "21.1.3",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -60,7 +60,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.5.0",
+		"@atlaskit/editor-common": "^123.6.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"