@atlaskit/editor-plugin-mentions 9.2.10 → 9.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-mentions
 
+## 9.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.3.0
+
+### Minor Changes
+
+- [`0e055e3f3f4e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0e055e3f3f4e9) -
+  [ux] Mentionplaceholder plugin to display placeholder for inline invite
+- [`0942e8da58d56`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0942e8da58d56) -
+  Add currentUserId option to support immediate self-mention highlighting without waiting for
+  provider
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.2.10
 
 ### Patch Changes

package/README.md

@@ -1,10 +1,20 @@
-# Editor plugin mentions
+# Editor Plugin Mentions
 
 Mentions plugin for @atlaskit/editor-core
 
 **Note:** This component is designed for internal Atlassian development.
 External contributors will be able to use this component but will not be able to submit issues.
 
+## Overview
+
+The Mentions plugin provides the ability to mention users and other entities within the Atlassian Editor. It integrates with @atlaskit/editor-core to enable mention functionality for editor users.
+
+## Key features
+
+- **User mentions** - Mention users within editor content
+- **Entity resolution** - Resolve mentions to user profiles and data
+- **Mention rendering** - Display mentions with appropriate styling and information
+
 ## Install
 ---
 - **Install** - *yarn add @atlaskit/editor-plugin-mentions*

package/dist/cjs/mentionsPlugin.js

@@ -23,6 +23,7 @@ var _editorCommands = require("./editor-commands");
 var _mentionNodeSpec = require("./nodeviews/mentionNodeSpec");
 var _key = require("./pm-plugins/key");
 var _main = require("./pm-plugins/main");
+var _mentionPlaceholder = require("./pm-plugins/mentionPlaceholder");
 var _InlineInviteRecaptchaContainer = require("./ui/InlineInviteRecaptchaContainer");
 var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
 var _typeAhead = require("./ui/type-ahead");
@@ -115,7 +116,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'mention',
         plugin: function plugin(pmPluginFactoryParams) {
           return (0, _main.createMentionPlugin)({
@@ -126,6 +127,15 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           });
         }
       }];
+      if ((0, _platformFeatureFlags.fg)('jira_invites_auto_tag_new_user_in_mentions_fg')) {
+        plugins.push({
+          name: 'mentionPlaceholder',
+          plugin: function plugin() {
+            return (0, _mentionPlaceholder.createMentionPlaceholderPlugin)();
+          }
+        });
+      }
+      return plugins;
     },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView,

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -159,18 +159,34 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         this.mentionPrimitiveElement.textContent = name;
       }
     }
+  }, {
+    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 : {},
+        currentUserId = _ref4.currentUserId;
+      // Check options first (immediate), then provider (async), then default to false
+      if (currentUserId && this.node.attrs.id === currentUserId) {
+        return true;
+      } else {
+        var _mentionProvider$shou;
+        return (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+          id: this.node.attrs.id
+        })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+      }
+    }
   }, {
     key: "updateState",
     value: function () {
       var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
-        var _mentionProvider$shou, _this$config$options;
+        var _mentionProvider$shou2, _this$config$options2;
         var isHighlighted, newState, name;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+              isHighlighted = (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? this.shouldHighlightMention(mentionProvider) : (_mentionProvider$shou2 = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
                 id: this.node.attrs.id
-              })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+              })) !== null && _mentionProvider$shou2 !== void 0 ? _mentionProvider$shou2 : false;
               newState = getNewState(isHighlighted, (0, _types.isRestricted)(this.node.attrs.accessLevel));
               if (newState !== this.state) {
                 this.setClassList(newState);
@@ -181,7 +197,7 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
             case 5:
               name = _context2.sent;
               this.setTextContent(name);
-              if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+              if (name && this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider) {
                 this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
               }
             case 8:
@@ -198,8 +214,8 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "nodeIsEqual",
     value: function nodeIsEqual(nextNode) {
-      var _this$config$options2;
-      if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+      var _this$config$options3;
+      if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.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

@@ -23,7 +23,7 @@ var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "9.2.9";
+var PACKAGE_VERSION = "0.0.0-development";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MENTION_PLACEHOLDER_ACTIONS = void 0;
+exports.createMentionPlaceholderPlugin = createMentionPlaceholderPlugin;
+exports.mentionPlaceholderPluginKey = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _colors = require("@atlaskit/theme/colors");
+var mentionPlaceholderPluginKey = exports.mentionPlaceholderPluginKey = new _state.PluginKey('mentionPlaceholderPlugin');
+var MENTION_PLACEHOLDER_ACTIONS = exports.MENTION_PLACEHOLDER_ACTIONS = {
+  SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
+  HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
+};
+function createMentionPlaceholderPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: mentionPlaceholderPluginKey,
+    state: {
+      init: function init() {
+        return {};
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(mentionPlaceholderPluginKey);
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
+          return {
+            placeholder: meta.placeholder
+          };
+        }
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
+          return {};
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = mentionPlaceholderPluginKey.getState(state);
+        if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
+          var selection = state.selection;
+          var span = document.createElement('span');
+          span.textContent = pluginState.placeholder;
+          span.style.setProperty('color', "var(--ds-text-accent-blue, ".concat(_colors.B400, ")"));
+          return _view.DecorationSet.create(state.doc, [_view.Decoration.widget(selection.from, span)]);
+        }
+        return null;
+      }
+    }
+  });
+}

package/dist/cjs/ui/InlineInviteRecaptchaContainer.js

@@ -10,6 +10,7 @@ exports.InlineInviteRecaptchaContainer = void 0;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _mentionPlaceholder = require("../pm-plugins/mentionPlaceholder");
 var _analytics = require("../ui/type-ahead/analytics");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -19,7 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
  */
 var InlineInviteRecaptchaContainer = exports.InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContainer(_ref) {
-  var _api$mention2, _api$core2;
+  var _api$mention2, _api$core3;
   var mentionProvider = _ref.mentionProvider,
     api = _ref.api;
   var _useState = (0, _react.useState)(null),
@@ -56,10 +57,27 @@ var InlineInviteRecaptchaContainer = exports.InlineInviteRecaptchaContainer = fu
       userType: 'DEFAULT',
       accessLevel: 'CONTAINER'
     }));
+    api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(_mentionPlaceholder.mentionPlaceholderPluginKey, {
+        action: _mentionPlaceholder.MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
   }, [api]);
   var handleClose = (0, _react.useCallback)(function () {
-    // No-op: recaptcha state is managed by the hook-based component
-  }, []);
+    var _api$core2;
+    if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
+      return;
+    }
+    api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      tr.setMeta(_mentionPlaceholder.mentionPlaceholderPluginKey, {
+        action: _mentionPlaceholder.MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
+  }, [api]);
   var handleReady = (0, _react.useCallback)(function (showRecaptcha) {
     if (provider) {
       if (showRecaptcha) {
@@ -69,7 +87,7 @@ var InlineInviteRecaptchaContainer = exports.InlineInviteRecaptchaContainer = fu
       }
     }
   }, [provider]);
-  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
+  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
     return null;
   }
   var RecaptchaComponent = provider.InlineInviteRecaptcha;

package/dist/cjs/ui/type-ahead/index.js

@@ -20,6 +20,7 @@ var _resource = require("@atlaskit/mention/resource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("../../editor-commands");
+var _mentionPlaceholder = require("../../pm-plugins/mentionPlaceholder");
 var _utils2 = require("../../pm-plugins/utils");
 var _InviteItem = _interopRequireWildcard(require("../InviteItem"));
 var _InviteItemWithEmailDomain = _interopRequireDefault(require("../InviteItem/InviteItemWithEmailDomain"));
@@ -361,6 +362,12 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
             // If query already includes @, use it as is
             if (email && mentionProvider.showInlineInviteRecaptcha) {
               mentionProvider.showInlineInviteRecaptcha(email);
+              var tr = state.tr;
+              tr.setMeta(_mentionPlaceholder.mentionPlaceholderPluginKey, {
+                action: _mentionPlaceholder.MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER,
+                placeholder: "@".concat(query)
+              });
+              return tr;
             }
           } else if (mentionProvider.onInviteItemClick) {
             // Fallback to old behavior for backward compatibility

package/dist/es2019/mentionsPlugin.js

@@ -13,6 +13,7 @@ import { insertMention } from './editor-commands';
 import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
 import { mentionPluginKey } from './pm-plugins/key';
 import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
+import { createMentionPlaceholderPlugin } from './pm-plugins/mentionPlaceholder';
 import { InlineInviteRecaptchaContainer } from './ui/InlineInviteRecaptchaContainer';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 import { createTypeAheadConfig } from './ui/type-ahead';
@@ -113,7 +114,7 @@ const mentionsPlugin = ({
       }];
     },
     pmPlugins() {
-      return [{
+      const plugins = [{
         name: 'mention',
         plugin: pmPluginFactoryParams => createMentionPlugin({
           pmPluginFactoryParams,
@@ -122,6 +123,13 @@ const mentionsPlugin = ({
           api
         })
       }];
+      if (fg('jira_invites_auto_tag_new_user_in_mentions_fg')) {
+        plugins.push({
+          name: 'mentionPlaceholder',
+          plugin: () => createMentionPlaceholderPlugin()
+        });
+      }
+      return plugins;
     },
     contentComponent({
       editorView,

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -125,11 +125,26 @@ export class MentionNodeView {
       this.mentionPrimitiveElement.textContent = name;
     }
   }
+  shouldHighlightMention(mentionProvider) {
+    var _this$config$options;
+    const {
+      currentUserId
+    } = (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 ? _this$config$options : {};
+    // Check options first (immediate), then provider (async), then default to false
+    if (currentUserId && this.node.attrs.id === currentUserId) {
+      return true;
+    } else {
+      var _mentionProvider$shou;
+      return (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+        id: this.node.attrs.id
+      })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+    }
+  }
   async updateState(mentionProvider) {
-    var _mentionProvider$shou, _this$config$options;
-    const isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+    var _mentionProvider$shou2, _this$config$options2;
+    const isHighlighted = expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? this.shouldHighlightMention(mentionProvider) : (_mentionProvider$shou2 = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
       id: this.node.attrs.id
-    })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+    })) !== null && _mentionProvider$shou2 !== void 0 ? _mentionProvider$shou2 : false;
     const newState = getNewState(isHighlighted, isRestricted(this.node.attrs.accessLevel));
     if (newState !== this.state) {
       this.setClassList(newState);
@@ -137,13 +152,13 @@ export class MentionNodeView {
     }
     const name = await handleProviderName(mentionProvider, this.node);
     this.setTextContent(name);
-    if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+    if (name && this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider) {
       this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
     }
   }
   nodeIsEqual(nextNode) {
-    var _this$config$options2;
-    if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+    var _this$config$options3;
+    if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.sanitizePrivateContent) {
       // Compare nodes but ignore the text parameter as it may be sanitized
       const nextNodeAttrs = {
         ...nextNode.attrs,

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

@@ -12,7 +12,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "9.2.9";
+const PACKAGE_VERSION = "0.0.0-development";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

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

@@ -0,0 +1,44 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { B400 } from '@atlaskit/theme/colors';
+export const mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
+export const MENTION_PLACEHOLDER_ACTIONS = {
+  SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
+  HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
+};
+export function createMentionPlaceholderPlugin() {
+  return new SafePlugin({
+    key: mentionPlaceholderPluginKey,
+    state: {
+      init: () => ({}),
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(mentionPlaceholderPluginKey);
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
+          return {
+            placeholder: meta.placeholder
+          };
+        }
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
+          return {};
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: state => {
+        const pluginState = mentionPlaceholderPluginKey.getState(state);
+        if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
+          const {
+            selection
+          } = state;
+          const span = document.createElement('span');
+          span.textContent = pluginState.placeholder;
+          span.style.setProperty('color', `var(--ds-text-accent-blue, ${B400})`);
+          return DecorationSet.create(state.doc, [Decoration.widget(selection.from, span)]);
+        }
+        return null;
+      }
+    }
+  });
+}

package/dist/es2019/ui/InlineInviteRecaptchaContainer.js

@@ -1,6 +1,7 @@
 /* InlineInviteRecaptchaContainer.tsx generated by @compiled/babel-plugin v0.38.1 */
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';
+import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../pm-plugins/mentionPlaceholder';
 import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
 /**
  * Container that renders the recaptcha component from the mention provider and manages handleSuccess.
@@ -12,7 +13,7 @@ export const InlineInviteRecaptchaContainer = ({
   mentionProvider,
   api
 }) => {
-  var _api$mention2, _api$mention2$command, _api$core2, _api$core2$actions;
+  var _api$mention2, _api$mention2$command, _api$core3, _api$core3$actions;
   const [provider, setProvider] = useState(null);
   useEffect(() => {
     if (!mentionProvider) {
@@ -44,10 +45,29 @@ export const InlineInviteRecaptchaContainer = ({
       userType: 'DEFAULT',
       accessLevel: 'CONTAINER'
     }));
+    api.core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(mentionPlaceholderPluginKey, {
+        action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
   }, [api]);
   const handleClose = useCallback(() => {
-    // No-op: recaptcha state is managed by the hook-based component
-  }, []);
+    var _api$core2, _api$core2$actions;
+    if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2$actions = _api$core2.actions) !== null && _api$core2$actions !== void 0 && _api$core2$actions.execute)) {
+      return;
+    }
+    api.core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(mentionPlaceholderPluginKey, {
+        action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
+  }, [api]);
   const handleReady = useCallback(showRecaptcha => {
     if (provider) {
       if (showRecaptcha) {
@@ -57,7 +77,7 @@ export const InlineInviteRecaptchaContainer = ({
       }
     }
   }, [provider]);
-  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2$command = _api$mention2.commands) !== null && _api$mention2$command !== void 0 && _api$mention2$command.insertMention) || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2$actions = _api$core2.actions) !== null && _api$core2$actions !== void 0 && _api$core2$actions.execute)) {
+  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2$command = _api$mention2.commands) !== null && _api$mention2$command !== void 0 && _api$mention2$command.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3$actions = _api$core3.actions) !== null && _api$core3$actions !== void 0 && _api$core3$actions.execute)) {
     return null;
   }
   const RecaptchaComponent = provider.InlineInviteRecaptcha;

package/dist/es2019/ui/type-ahead/index.js

@@ -10,6 +10,7 @@ import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createSingleMentionFragment } from '../../editor-commands';
+import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../../pm-plugins/mentionPlaceholder';
 import { getMentionPluginState } from '../../pm-plugins/utils';
 import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../InviteItem';
 import InviteItemWithEmailDomain from '../InviteItem/InviteItemWithEmailDomain';
@@ -350,6 +351,14 @@ export const createTypeAheadConfig = ({
             // If query already includes @, use it as is
             if (email && mentionProvider.showInlineInviteRecaptcha) {
               mentionProvider.showInlineInviteRecaptcha(email);
+              const {
+                tr
+              } = state;
+              tr.setMeta(mentionPlaceholderPluginKey, {
+                action: MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER,
+                placeholder: `@${query}`
+              });
+              return tr;
             }
           } else if (mentionProvider.onInviteItemClick) {
             // Fallback to old behavior for backward compatibility

package/dist/esm/mentionsPlugin.js

@@ -18,6 +18,7 @@ import { insertMention } from './editor-commands';
 import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
 import { mentionPluginKey } from './pm-plugins/key';
 import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
+import { createMentionPlaceholderPlugin } from './pm-plugins/mentionPlaceholder';
 import { InlineInviteRecaptchaContainer } from './ui/InlineInviteRecaptchaContainer';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 import { createTypeAheadConfig } from './ui/type-ahead';
@@ -107,7 +108,7 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'mention',
         plugin: function plugin(pmPluginFactoryParams) {
           return createMentionPlugin({
@@ -118,6 +119,15 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
           });
         }
       }];
+      if (fg('jira_invites_auto_tag_new_user_in_mentions_fg')) {
+        plugins.push({
+          name: 'mentionPlaceholder',
+          plugin: function plugin() {
+            return createMentionPlaceholderPlugin();
+          }
+        });
+      }
+      return plugins;
     },
     contentComponent: function contentComponent(_ref4) {
       var editorView = _ref4.editorView,

package/dist/esm/nodeviews/mentionNodeView.js

@@ -152,18 +152,34 @@ export var MentionNodeView = /*#__PURE__*/function () {
         this.mentionPrimitiveElement.textContent = name;
       }
     }
+  }, {
+    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 : {},
+        currentUserId = _ref4.currentUserId;
+      // Check options first (immediate), then provider (async), then default to false
+      if (currentUserId && this.node.attrs.id === currentUserId) {
+        return true;
+      } else {
+        var _mentionProvider$shou;
+        return (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+          id: this.node.attrs.id
+        })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+      }
+    }
   }, {
     key: "updateState",
     value: function () {
       var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
-        var _mentionProvider$shou, _this$config$options;
+        var _mentionProvider$shou2, _this$config$options2;
         var isHighlighted, newState, name;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
+              isHighlighted = expValEquals('platform_editor_vc90_transition_fixes_batch_1', 'isEnabled', true) ? this.shouldHighlightMention(mentionProvider) : (_mentionProvider$shou2 = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
                 id: this.node.attrs.id
-              })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
+              })) !== null && _mentionProvider$shou2 !== void 0 ? _mentionProvider$shou2 : false;
               newState = getNewState(isHighlighted, isRestricted(this.node.attrs.accessLevel));
               if (newState !== this.state) {
                 this.setClassList(newState);
@@ -174,7 +190,7 @@ export var MentionNodeView = /*#__PURE__*/function () {
             case 5:
               name = _context2.sent;
               this.setTextContent(name);
-              if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+              if (name && this.domElement && (_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.profilecardProvider) {
                 this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
               }
             case 8:
@@ -191,8 +207,8 @@ export var MentionNodeView = /*#__PURE__*/function () {
   }, {
     key: "nodeIsEqual",
     value: function nodeIsEqual(nextNode) {
-      var _this$config$options2;
-      if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+      var _this$config$options3;
+      if ((_this$config$options3 = this.config.options) !== null && _this$config$options3 !== void 0 && _this$config$options3.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

@@ -15,7 +15,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "9.2.9";
+var PACKAGE_VERSION = "0.0.0-development";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

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

@@ -0,0 +1,44 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { B400 } from '@atlaskit/theme/colors';
+export var mentionPlaceholderPluginKey = new PluginKey('mentionPlaceholderPlugin');
+export var MENTION_PLACEHOLDER_ACTIONS = {
+  SHOW_PLACEHOLDER: 'SHOW_PLACEHOLDER',
+  HIDE_PLACEHOLDER: 'HIDE_PLACEHOLDER'
+};
+export function createMentionPlaceholderPlugin() {
+  return new SafePlugin({
+    key: mentionPlaceholderPluginKey,
+    state: {
+      init: function init() {
+        return {};
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(mentionPlaceholderPluginKey);
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER) {
+          return {
+            placeholder: meta.placeholder
+          };
+        }
+        if ((meta === null || meta === void 0 ? void 0 : meta.action) === MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER) {
+          return {};
+        }
+        return pluginState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        var pluginState = mentionPlaceholderPluginKey.getState(state);
+        if (pluginState !== null && pluginState !== void 0 && pluginState.placeholder) {
+          var selection = state.selection;
+          var span = document.createElement('span');
+          span.textContent = pluginState.placeholder;
+          span.style.setProperty('color', "var(--ds-text-accent-blue, ".concat(B400, ")"));
+          return DecorationSet.create(state.doc, [Decoration.widget(selection.from, span)]);
+        }
+        return null;
+      }
+    }
+  });
+}

package/dist/esm/ui/InlineInviteRecaptchaContainer.js

@@ -2,6 +2,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useState } from 'react';
+import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../pm-plugins/mentionPlaceholder';
 import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
 /**
  * Container that renders the recaptcha component from the mention provider and manages handleSuccess.
@@ -10,7 +11,7 @@ import { MENTION_SOURCE } from '../ui/type-ahead/analytics';
  * mentionProvider.showInlineInviteRecaptcha(email) which passes email to the component.
  */
 export var InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContainer(_ref) {
-  var _api$mention2, _api$core2;
+  var _api$mention2, _api$core3;
   var mentionProvider = _ref.mentionProvider,
     api = _ref.api;
   var _useState = useState(null),
@@ -47,10 +48,27 @@ export var InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContai
       userType: 'DEFAULT',
       accessLevel: 'CONTAINER'
     }));
+    api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(mentionPlaceholderPluginKey, {
+        action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
   }, [api]);
   var handleClose = useCallback(function () {
-    // No-op: recaptcha state is managed by the hook-based component
-  }, []);
+    var _api$core2;
+    if (!(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
+      return;
+    }
+    api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      tr.setMeta(mentionPlaceholderPluginKey, {
+        action: MENTION_PLACEHOLDER_ACTIONS.HIDE_PLACEHOLDER
+      });
+      return tr;
+    });
+  }, [api]);
   var handleReady = useCallback(function (showRecaptcha) {
     if (provider) {
       if (showRecaptcha) {
@@ -60,7 +78,7 @@ export var InlineInviteRecaptchaContainer = function InlineInviteRecaptchaContai
       }
     }
   }, [provider]);
-  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core2 = api.core) !== null && _api$core2 !== void 0 && (_api$core2 = _api$core2.actions) !== null && _api$core2 !== void 0 && _api$core2.execute)) {
+  if (!(provider !== null && provider !== void 0 && provider.InlineInviteRecaptcha) || !(api !== null && api !== void 0 && (_api$mention2 = api.mention) !== null && _api$mention2 !== void 0 && (_api$mention2 = _api$mention2.commands) !== null && _api$mention2 !== void 0 && _api$mention2.insertMention) || !(api !== null && api !== void 0 && (_api$core3 = api.core) !== null && _api$core3 !== void 0 && (_api$core3 = _api$core3.actions) !== null && _api$core3 !== void 0 && _api$core3.execute)) {
     return null;
   }
   var RecaptchaComponent = provider.InlineInviteRecaptcha;

package/dist/esm/ui/type-ahead/index.js

@@ -17,6 +17,7 @@ import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createSingleMentionFragment } from '../../editor-commands';
+import { mentionPlaceholderPluginKey, MENTION_PLACEHOLDER_ACTIONS } from '../../pm-plugins/mentionPlaceholder';
 import { getMentionPluginState } from '../../pm-plugins/utils';
 import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../InviteItem';
 import InviteItemWithEmailDomain from '../InviteItem/InviteItemWithEmailDomain';
@@ -352,6 +353,12 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
             // If query already includes @, use it as is
             if (email && mentionProvider.showInlineInviteRecaptcha) {
               mentionProvider.showInlineInviteRecaptcha(email);
+              var tr = state.tr;
+              tr.setMeta(mentionPlaceholderPluginKey, {
+                action: MENTION_PLACEHOLDER_ACTIONS.SHOW_PLACEHOLDER,
+                placeholder: "@".concat(query)
+              });
+              return tr;
             }
           } else if (mentionProvider.onInviteItemClick) {
             // Fallback to old behavior for backward compatibility

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

@@ -23,6 +23,7 @@ export declare class MentionNodeView implements NodeView {
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
     private setTextContent;
+    private shouldHighlightMention;
     private updateState;
     private nodeIsEqual;
     update(node: PMNode): boolean;

package/dist/types/pm-plugins/mentionPlaceholder.d.ts

@@ -0,0 +1,11 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const mentionPlaceholderPluginKey: PluginKey<any>;
+export declare const MENTION_PLACEHOLDER_ACTIONS: {
+    SHOW_PLACEHOLDER: string;
+    HIDE_PLACEHOLDER: string;
+};
+export type MentionPlaceholderPluginState = {
+    placeholder?: string;
+};
+export declare function createMentionPlaceholderPlugin(): SafePlugin<{}>;

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

@@ -23,6 +23,14 @@ export type MentionsChangedHandler = (changes: {
 export interface MentionsPluginOptions extends MentionPluginConfig {
     allowZeroWidthSpaceAfter?: boolean;
     handleMentionsChanged?: MentionsChangedHandler;
+    /**
+     * User ID to highlight as a self-mention (typically the current user).
+     *
+     * When provided, mentions matching this ID will be highlighted immediately,
+     * without waiting for the mention provider to load. This enables instant highlighting on initial render.
+     * Takes priority over `MentionProvider.shouldHighlightMention()` if both are present.
+     */
+    currentUserId?: string;
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
 }

package/dist/types-ts4.5/nodeviews/mentionNodeView.d.ts

@@ -23,6 +23,7 @@ export declare class MentionNodeView implements NodeView {
     constructor(node: PMNode, config: MentionNodeViewProps);
     private setClassList;
     private setTextContent;
+    private shouldHighlightMention;
     private updateState;
     private nodeIsEqual;
     update(node: PMNode): boolean;

package/dist/types-ts4.5/pm-plugins/mentionPlaceholder.d.ts

@@ -0,0 +1,11 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export declare const mentionPlaceholderPluginKey: PluginKey<any>;
+export declare const MENTION_PLACEHOLDER_ACTIONS: {
+    SHOW_PLACEHOLDER: string;
+    HIDE_PLACEHOLDER: string;
+};
+export type MentionPlaceholderPluginState = {
+    placeholder?: string;
+};
+export declare function createMentionPlaceholderPlugin(): SafePlugin<{}>;

package/dist/types-ts4.5/types/index.d.ts

@@ -23,6 +23,14 @@ export type MentionsChangedHandler = (changes: {
 export interface MentionsPluginOptions extends MentionPluginConfig {
     allowZeroWidthSpaceAfter?: boolean;
     handleMentionsChanged?: MentionsChangedHandler;
+    /**
+     * User ID to highlight as a self-mention (typically the current user).
+     *
+     * When provided, mentions matching this ID will be highlighted immediately,
+     * without waiting for the mention provider to load. This enables instant highlighting on initial render.
+     * Takes priority over `MentionProvider.shouldHighlightMention()` if both are present.
+     */
+    currentUserId?: string;
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "9.2.10",
+	"version": "9.3.1",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,19 +37,19 @@
 		"@atlaskit/editor-plugin-selection": "^7.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/icon": "^31.0.0",
+		"@atlaskit/icon": "^32.0.0",
 		"@atlaskit/insm": "^0.3.0",
 		"@atlaskit/link": "^3.3.0",
-		"@atlaskit/mention": "^24.4.0",
+		"@atlaskit/mention": "^24.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.2.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/profilecard": "^24.37.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^29.1.0",
+		"@atlaskit/tmp-editor-statsig": "^29.6.0",
 		"@atlaskit/tokens": "^11.0.0",
-		"@atlaskit/user-picker": "^11.22.0",
+		"@atlaskit/user-picker": "^11.23.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
@@ -57,7 +57,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.17.0",
+		"@atlaskit/editor-common": "^111.20.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"