@atlaskit/editor-plugin-mentions 17.0.0 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-mentions
 
+## 17.0.1
+
+### Patch Changes
+
+- [`4273da2e1a648`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4273da2e1a648) -
+  Register native Quick Insert items behind `platform_editor_slash_command`.
+- [`fa754a973daeb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fa754a973daeb) -
+  Keep the pending mention chip visible until the invite popup is dismissed on failure, instead of
+  removing it immediately, and fix keyboard navigation in the project role picker rendered inside
+  the popup.
+- Updated dependencies
+
 ## 17.0.0
 
 ### Patch Changes

package/dist/cjs/mentionsPlugin.js

@@ -16,11 +16,11 @@ var _uuid = _interopRequireDefault(require("uuid"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _assets = require("@atlaskit/editor-common/assets");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("./editor-commands");
 var _mentionNodeSpec = require("./nodeviews/mentionNodeSpec");
@@ -30,6 +30,7 @@ var _main = require("./pm-plugins/main");
 var _InlineInvitePopupContainer = require("./ui/InlineInvitePopupContainer");
 var _SecondaryToolbarComponent = require("./ui/SecondaryToolbarComponent");
 var _typeAhead = require("./ui/type-ahead");
+var _getMentionQuickInsertComponents = require("./ui/quick-insert/getMentionQuickInsertComponents");
 var _excluded2 = ["pendingPastedAgentMention"]; // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 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); }
 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; }
@@ -113,6 +114,14 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
     fireEvent: fireEvent,
     api: api
   });
+  var isRegisteredSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getMentionQuickInsertComponents.getMentionQuickInsertComponents)({
+      api: api,
+      typeAhead: typeAhead
+    }));
+  }
   return {
     name: 'mention',
     nodes: function nodes() {
@@ -164,7 +173,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Component, {
             mentionProvider: mentionProvider,
             api: api
-          }), (0, _platformFeatureFlags.fg)('inline_invite_from_mentions_kill_switch') && /*#__PURE__*/_react.default.createElement(_InlineInvitePopupContainer.InlineInvitePopupContainer, {
+          }), (0, _fg.fg)('inline_invite_from_mentions_kill_switch') && /*#__PURE__*/_react.default.createElement(_InlineInvitePopupContainer.InlineInvitePopupContainer, {
             mentionProvider: mentionProvider,
             api: api,
             editorView: editorView
@@ -219,7 +228,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                if ((0, _platformFeatureFlags.fg)('platform_editor_mention_provider_via_plugin_config')) {
+                if ((0, _fg.fg)('platform_editor_mention_provider_via_plugin_config')) {
                   _context.next = 1;
                   break;
                 }
@@ -282,7 +291,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref9) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref9) {
         var formatMessage = _ref9.formatMessage;
         return [{
           id: 'mention',
@@ -292,7 +301,7 @@ var mentionsPlugin = exports.mentionsPlugin = function mentionsPlugin(_ref3) {
           priority: 400,
           keyshortcut: '@',
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconMention, null);
+            return /*#__PURE__*/_react.default.createElement(_assets.IconMention, null);
           },
           action: function action(insert, state) {
             var _api$typeAhead3;

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

@@ -67,7 +67,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "16.2.0";
+var PACKAGE_VERSION = "17.0.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/AnchoredPopup.js

@@ -33,5 +33,10 @@ function AnchoredPopup(_ref) {
     placement: "bottom-start",
     content: renderContent,
     trigger: renderTrigger
+    // Drops this popup's own `overflow: auto`, which otherwise clips the role picker's
+    // menu — it renders as a normal DOM child here (not a body portal) so it stays inside
+    // this popup's focus trap.
+    ,
+    shouldRenderToParent: true
   });
 }

package/dist/cjs/ui/InlineInvitePopupContainer.js

@@ -104,7 +104,6 @@ var InlineInvitePopupContainer = exports.InlineInvitePopupContainer = function I
     }
     var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
     if (!invitedUser || !(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) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention)) {
-      removePendingMention();
       return;
     }
     var userId = invitedUser.id,
@@ -122,7 +121,7 @@ var InlineInvitePopupContainer = exports.InlineInvitePopupContainer = function I
     }));
     pendingMentionRef.current = null;
     setAnchorElement(null);
-  }, [api, removePendingMention]);
+  }, [api]);
   var handleReady = (0, _react.useCallback)(function (show) {
     if (!provider) {
       return;

package/dist/cjs/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionQuickInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _messages = require("@atlaskit/editor-common/messages");
+var _assets = require("@atlaskit/editor-common/assets");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _key = require("../../pm-plugins/key");
+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); }
+var MentionQuickInsertMenuItem = exports.MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _mentionPluginKey$get, _api$typeAhead;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert;
+    if (((_mentionPluginKey$get = _key.mentionPluginKey.getState(editorView.state)) === null || _mentionPluginKey$get === void 0 ? void 0 : _mentionPluginKey$get.canInsertMention) === false) {
+      return false;
+    }
+    var tr = insert(undefined);
+    api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
+      triggerHandler: typeAhead,
+      inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+    })(tr);
+    return tr;
+  }, [api, typeAhead]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_assets.IconMention, null),
+    onSelect: onSelect,
+    shortcut: "@",
+    title: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+  });
+};

package/dist/cjs/ui/quick-insert/getMentionQuickInsertComponents.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMentionQuickInsertComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _rank = require("@atlaskit/editor-common/quick-insert/rank");
+var _MentionQuickInsertMenuItem = require("./MentionQuickInsertMenuItem");
+var getMentionQuickInsertComponents = exports.getMentionQuickInsertComponents = function getMentionQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  return [{
+    key: _keys.MENTION_MENU_ITEM.key,
+    type: _keys.MENTION_MENU_ITEM.type,
+    parents: [{
+      key: _keys.MEDIA_SECTION.key,
+      type: _keys.MEDIA_SECTION.type,
+      rank: _rank.MEDIA_SECTION_RANK[_keys.MENTION_MENU_ITEM.key]
+    }],
+    match: (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(_messages.toolbarInsertBlockMessages.mentionDescription),
+        keywords: ['team', 'user'],
+        shortcut: '@',
+        title: formatMessage(_messages.toolbarInsertBlockMessages.mention)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_MentionQuickInsertMenuItem.MentionQuickInsertMenuItem, {
+        api: api,
+        typeAhead: typeAhead
+      });
+    }
+  }];
+};

package/dist/es2019/mentionsPlugin.js

@@ -5,11 +5,11 @@ import uuid from 'uuid';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages, mentionMessages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IconMention } from '@atlaskit/editor-common/quick-insert';
+import { IconMention } from '@atlaskit/editor-common/assets';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MentionNameStatus, isPromise } from '@atlaskit/mention/types';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertMention } from './editor-commands';
 import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
@@ -19,6 +19,7 @@ import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
 import { InlineInvitePopupContainer } from './ui/InlineInvitePopupContainer';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 import { createTypeAheadConfig } from './ui/type-ahead';
+import { getMentionQuickInsertComponents } from './ui/quick-insert/getMentionQuickInsertComponents';
 const processName = (name, intl) => {
   const unknownLabel = intl.formatMessage(mentionMessages.unknownLabel);
   if (name.status === MentionNameStatus.OK) {
@@ -109,6 +110,14 @@ const mentionsPlugin = ({
     fireEvent,
     api
   });
+  const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getMentionQuickInsertComponents({
+      api,
+      typeAhead
+    }));
+  }
   return {
     name: 'mention',
     nodes() {
@@ -256,7 +265,7 @@ const mentionsPlugin = ({
       };
     },
     pluginsOptions: {
-      quickInsert: ({
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : ({
         formatMessage
       }) => [{
         id: 'mention',

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

@@ -51,7 +51,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 const AGENT_MENTION_INACTIVITY_MS = 3000;
 const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "16.2.0";
+const PACKAGE_VERSION = "17.0.0";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/AnchoredPopup.js

@@ -24,5 +24,10 @@ export function AnchoredPopup({
     placement: "bottom-start",
     content: renderContent,
     trigger: renderTrigger
+    // Drops this popup's own `overflow: auto`, which otherwise clips the role picker's
+    // menu — it renders as a normal DOM child here (not a body portal) so it stays inside
+    // this popup's focus trap.
+    ,
+    shouldRenderToParent: true
   });
 }

package/dist/es2019/ui/InlineInvitePopupContainer.js

@@ -90,7 +90,6 @@ export const InlineInvitePopupContainer = ({
     }
     const invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
     if (!invitedUser || !(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) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention$commands = _api$mention.commands) !== null && _api$mention$commands !== void 0 && _api$mention$commands.insertMention)) {
-      removePendingMention();
       return;
     }
     const {
@@ -111,7 +110,7 @@ export const InlineInvitePopupContainer = ({
     }));
     pendingMentionRef.current = null;
     setAnchorElement(null);
-  }, [api, removePendingMention]);
+  }, [api]);
   const handleReady = useCallback(show => {
     if (!provider) {
       return;

package/dist/es2019/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconMention } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { mentionPluginKey } from '../../pm-plugins/key';
+export const MentionQuickInsertMenuItem = ({
+  api,
+  typeAhead
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const onSelect = useCallback(({
+    editorView,
+    insert
+  }) => {
+    var _mentionPluginKey$get, _api$typeAhead;
+    if (((_mentionPluginKey$get = mentionPluginKey.getState(editorView.state)) === null || _mentionPluginKey$get === void 0 ? void 0 : _mentionPluginKey$get.canInsertMention) === false) {
+      return false;
+    }
+    const tr = insert(undefined);
+    api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.openAtTransaction({
+      triggerHandler: typeAhead,
+      inputMethod: INPUT_METHOD.QUICK_INSERT
+    })(tr);
+    return tr;
+  }, [api, typeAhead]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
+    onSelect: onSelect,
+    shortcut: "@",
+    title: formatMessage(messages.mention)
+  });
+};

package/dist/es2019/ui/quick-insert/getMentionQuickInsertComponents.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { MEDIA_SECTION, MENTION_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { MEDIA_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { MentionQuickInsertMenuItem } from './MentionQuickInsertMenuItem';
+export const getMentionQuickInsertComponents = ({
+  api,
+  typeAhead
+}) => [{
+  key: MENTION_MENU_ITEM.key,
+  type: MENTION_MENU_ITEM.type,
+  parents: [{
+    key: MEDIA_SECTION.key,
+    type: MEDIA_SECTION.type,
+    rank: MEDIA_SECTION_RANK[MENTION_MENU_ITEM.key]
+  }],
+  match: createQuickInsertMatcher(({
+    formatMessage
+  }) => ({
+    description: formatMessage(messages.mentionDescription),
+    keywords: ['team', 'user'],
+    shortcut: '@',
+    title: formatMessage(messages.mention)
+  })),
+  component: () => /*#__PURE__*/React.createElement(MentionQuickInsertMenuItem, {
+    api: api,
+    typeAhead: typeAhead
+  })
+}];

package/dist/esm/mentionsPlugin.js

@@ -12,11 +12,11 @@ import uuid from 'uuid';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages, mentionMessages } from '@atlaskit/editor-common/messages';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { IconMention } from '@atlaskit/editor-common/quick-insert';
+import { IconMention } from '@atlaskit/editor-common/assets';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 import { MentionNameStatus, isPromise } from '@atlaskit/mention/types';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { fg } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertMention } from './editor-commands';
 import { mentionNodeSpec } from './nodeviews/mentionNodeSpec';
@@ -26,6 +26,7 @@ import { ACTIONS, createMentionPlugin } from './pm-plugins/main';
 import { InlineInvitePopupContainer } from './ui/InlineInvitePopupContainer';
 import { SecondaryToolbarComponent } from './ui/SecondaryToolbarComponent';
 import { createTypeAheadConfig } from './ui/type-ahead';
+import { getMentionQuickInsertComponents } from './ui/quick-insert/getMentionQuickInsertComponents';
 var processName = function processName(name, intl) {
   var unknownLabel = intl.formatMessage(mentionMessages.unknownLabel);
   if (name.status === MentionNameStatus.OK) {
@@ -105,6 +106,14 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
     fireEvent: fireEvent,
     api: api
   });
+  var isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
+  if (isRegisteredSlashCommandEnabled) {
+    var _api$uiControlRegistr;
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getMentionQuickInsertComponents({
+      api: api,
+      typeAhead: typeAhead
+    }));
+  }
   return {
     name: 'mention',
     nodes: function nodes() {
@@ -274,7 +283,7 @@ var mentionsPlugin = function mentionsPlugin(_ref3) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref9) {
+      quickInsert: isRegisteredSlashCommandEnabled ? undefined : function (_ref9) {
         var formatMessage = _ref9.formatMessage;
         return [{
           id: 'mention',

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

@@ -58,7 +58,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "16.2.0";
+var PACKAGE_VERSION = "17.0.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/AnchoredPopup.js

@@ -25,5 +25,10 @@ export function AnchoredPopup(_ref) {
     placement: "bottom-start",
     content: renderContent,
     trigger: renderTrigger
+    // Drops this popup's own `overflow: auto`, which otherwise clips the role picker's
+    // menu — it renders as a normal DOM child here (not a body portal) so it stays inside
+    // this popup's focus trap.
+    ,
+    shouldRenderToParent: true
   });
 }

package/dist/esm/ui/InlineInvitePopupContainer.js

@@ -95,7 +95,6 @@ export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref
     }
     var invitedUser = (_result$invited$ = result.invited[0]) !== null && _result$invited$ !== void 0 ? _result$invited$ : result.requested[0];
     if (!invitedUser || !(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) || !(api !== null && api !== void 0 && (_api$mention = api.mention) !== null && _api$mention !== void 0 && (_api$mention = _api$mention.commands) !== null && _api$mention !== void 0 && _api$mention.insertMention)) {
-      removePendingMention();
       return;
     }
     var userId = invitedUser.id,
@@ -113,7 +112,7 @@ export var InlineInvitePopupContainer = function InlineInvitePopupContainer(_ref
     }));
     pendingMentionRef.current = null;
     setAnchorElement(null);
-  }, [api, removePendingMention]);
+  }, [api]);
   var handleReady = useCallback(function (show) {
     if (!provider) {
       return;

package/dist/esm/ui/quick-insert/MentionQuickInsertMenuItem.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { IconMention } from '@atlaskit/editor-common/assets';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { mentionPluginKey } from '../../pm-plugins/key';
+export var MentionQuickInsertMenuItem = function MentionQuickInsertMenuItem(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = useCallback(function (_ref2) {
+    var _mentionPluginKey$get, _api$typeAhead;
+    var editorView = _ref2.editorView,
+      insert = _ref2.insert;
+    if (((_mentionPluginKey$get = mentionPluginKey.getState(editorView.state)) === null || _mentionPluginKey$get === void 0 ? void 0 : _mentionPluginKey$get.canInsertMention) === false) {
+      return false;
+    }
+    var tr = insert(undefined);
+    api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
+      triggerHandler: typeAhead,
+      inputMethod: INPUT_METHOD.QUICK_INSERT
+    })(tr);
+    return tr;
+  }, [api, typeAhead]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(IconMention, null),
+    onSelect: onSelect,
+    shortcut: "@",
+    title: formatMessage(messages.mention)
+  });
+};

package/dist/esm/ui/quick-insert/getMentionQuickInsertComponents.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { MEDIA_SECTION, MENTION_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { MEDIA_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { MentionQuickInsertMenuItem } from './MentionQuickInsertMenuItem';
+export var getMentionQuickInsertComponents = function getMentionQuickInsertComponents(_ref) {
+  var api = _ref.api,
+    typeAhead = _ref.typeAhead;
+  return [{
+    key: MENTION_MENU_ITEM.key,
+    type: MENTION_MENU_ITEM.type,
+    parents: [{
+      key: MEDIA_SECTION.key,
+      type: MEDIA_SECTION.type,
+      rank: MEDIA_SECTION_RANK[MENTION_MENU_ITEM.key]
+    }],
+    match: createQuickInsertMatcher(function (_ref2) {
+      var formatMessage = _ref2.formatMessage;
+      return {
+        description: formatMessage(messages.mentionDescription),
+        keywords: ['team', 'user'],
+        shortcut: '@',
+        title: formatMessage(messages.mention)
+      };
+    }),
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MentionQuickInsertMenuItem, {
+        api: api,
+        typeAhead: typeAhead
+      });
+    }
+  }];
+};

package/dist/types/mentionsPluginType.d.ts

@@ -3,6 +3,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { UiControlRegistryPlugin } from '@atlaskit/editor-plugin-ui-control-registry';
 import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead/type-ahead-plugin-type';
 import type { TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead/types';
 import type { MentionProvider } from '@atlaskit/mention/resource';
@@ -23,7 +24,8 @@ export type MentionPluginDependencies = [
     TypeAheadPlugin,
     OptionalPlugin<ContextIdentifierPlugin>,
     OptionalPlugin<BasePlugin>,
-    OptionalPlugin<SelectionPlugin>
+    OptionalPlugin<SelectionPlugin>,
+    OptionalPlugin<UiControlRegistryPlugin>
 ];
 export type MentionsPlugin = NextEditorPlugin<'mention', {
     actions: MentionActions;

package/dist/types/ui/quick-insert/MentionQuickInsertMenuItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadHandler } from '@atlaskit/editor-plugin-type-ahead';
+import type { MentionsPlugin } from '../../mentionsPluginType';
+type Props = {
+    api: ExtractInjectionAPI<MentionsPlugin> | undefined;
+    typeAhead: TypeAheadHandler;
+};
+export declare const MentionQuickInsertMenuItem: ({ api, typeAhead }: Props) => React.JSX.Element;
+export {};

package/dist/types/ui/quick-insert/getMentionQuickInsertComponents.d.ts

@@ -0,0 +1,8 @@
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TypeAheadHandler } from '@atlaskit/editor-plugin-type-ahead';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+import type { MentionsPlugin } from '../../mentionsPluginType';
+export declare const getMentionQuickInsertComponents: ({ api, typeAhead, }: {
+    api: ExtractInjectionAPI<MentionsPlugin> | undefined;
+    typeAhead: TypeAheadHandler;
+}) => RegisterMenuItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "17.0.0",
+	"version": "17.0.1",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
-		"@atlaskit/user-picker": "^13.8.0",
+		"@atlaskit/user-picker": "^13.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -58,7 +58,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.0.0",
+		"@atlaskit/editor-common": "^119.1.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"