@atlaskit/editor-plugin-mentions 2.6.4 → 2.6.6

package/dist/es2019/ui/Mention/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { PureComponent } from 'react';
+import React, { useEffect, useState } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
 import { ResourcedMention } from '@atlaskit/mention/element';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
+import { isPromise } from '@atlaskit/mention/types';
+
 // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 const refreshBrowserSelection = () => {
@@ -16,39 +18,42 @@ const refreshBrowserSelection = () => {
     }
   }
 };
-/**
- * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
- * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
- */
-export default class Mention extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "renderWithProvider", providers => {
-      const {
-        accessLevel,
-        eventHandlers,
-        id,
-        text,
-        localId
-      } = this.props;
-      const {
-        mentionProvider
-      } = providers;
-      const actionHandlers = {};
-      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(handler => {
-        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || (() => {});
-      });
-      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        localId: localId,
-        mentionProvider: mentionProvider
-      }, actionHandlers));
-    });
-    this.providerFactory = props.providers || new ProviderFactory();
-  }
-  componentDidMount() {
+export const Mention = props => {
+  const {
+    accessLevel,
+    eventHandlers,
+    id,
+    text,
+    localId,
+    mentionProvider,
+    profilecardProvider: profilecardProviderPromise
+  } = props;
+  const [profilecardProvider, setProfilecardProvider] = useState(undefined);
+  const resolvedName = useResolvedName(id, text, mentionProvider);
+
+  // Resolve the profilecard provider
+  useEffect(() => {
+    let isCancelled = false;
+    const resolveProfilecardProvider = async () => {
+      try {
+        const profilecardProvider = await profilecardProviderPromise;
+        if (!isCancelled) {
+          setProfilecardProvider(profilecardProvider);
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          setProfilecardProvider(undefined);
+        }
+      }
+    };
+    if (profilecardProviderPromise) {
+      resolveProfilecardProvider();
+    }
+    return () => {
+      isCancelled = true;
+    };
+  }, [profilecardProviderPromise]);
+  useEffect(() => {
     // Workaround an issue where the selection is not updated immediately after adding
     // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
     // This affects both insertion and paste behaviour it is applied to the component.
@@ -56,20 +61,57 @@ export default class Mention extends PureComponent {
     if (browser.safari) {
       setTimeout(refreshBrowserSelection, 0);
     }
+  }, []);
+  const actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(handler => {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || (() => {});
+  });
+  if (profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      autoFocus: false,
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
   }
-  componentWillUnmount() {
-    if (!this.props.providers) {
-      // new ProviderFactory is created if no `providers` has been set
-      // in this case when component is unmounted it's safe to destroy this providerFactory
-      this.providerFactory.destroy();
+};
+const useResolvedName = (id, text, mentionProvider) => {
+  const [resolvedName, setResolvedName] = useState(text);
+  const processName = name => {
+    if (name.status === MentionNameStatus.OK) {
+      return `@${name.name || ''}`;
+    } else {
+      return `@_|unknown|_`;
     }
-  }
-  render() {
-    return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mentionProvider', 'profilecardProvider'],
-      providerFactory: this.providerFactory,
-      renderNode: this.renderWithProvider
-    });
-  }
-}
-_defineProperty(Mention, "displayName", 'Mention');
+  };
+  useEffect(() => {
+    if (mentionProvider) {
+      mentionProvider.then(async provider => {
+        if (!text && isResolvingMentionProvider(provider)) {
+          const nameDetail = provider.resolveMentionName(id);
+          if (isPromise(nameDetail)) {
+            return processName(await nameDetail);
+          } else {
+            return processName(nameDetail);
+          }
+        } else {
+          return text;
+        }
+      }).then(resolvedName => {
+        setResolvedName(resolvedName);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

package/dist/esm/nodeviews/mention.js

@@ -1,84 +1,6 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
-import { isPromise } from '@atlaskit/mention/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Mention from '../ui/Mention';
-import { Mention as MentionNext } from '../ui/Mention/mention';
-var UNKNOWN_USER_ID = '_|unknown|_';
-var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref) {
-  var id = _ref.id,
-    text = _ref.text,
-    providers = _ref.providers,
-    accessLevel = _ref.accessLevel,
-    mentionProvider = _ref.mentionProvider,
-    localId = _ref.localId;
-  var _useState = useState(text),
-    _useState2 = _slicedToArray(_useState, 2),
-    resolvedName = _useState2[0],
-    setResolvedName = _useState2[1];
-  var processName = function processName(name) {
-    if (name.status === MentionNameStatus.OK) {
-      return "@".concat(name.name || '');
-    } else {
-      return "@".concat(UNKNOWN_USER_ID);
-    }
-  };
-  useEffect(function () {
-    if (mentionProvider) {
-      mentionProvider.then( /*#__PURE__*/function () {
-        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(provider) {
-          var nameDetail;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!(!text && isResolvingMentionProvider(provider))) {
-                  _context.next = 13;
-                  break;
-                }
-                nameDetail = provider.resolveMentionName(id);
-                if (!isPromise(nameDetail)) {
-                  _context.next = 10;
-                  break;
-                }
-                _context.t0 = processName;
-                _context.next = 6;
-                return nameDetail;
-              case 6:
-                _context.t1 = _context.sent;
-                return _context.abrupt("return", (0, _context.t0)(_context.t1));
-              case 10:
-                return _context.abrupt("return", processName(nameDetail));
-              case 11:
-                _context.next = 14;
-                break;
-              case 13:
-                return _context.abrupt("return", text);
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }()).then(function (resolvedName) {
-        setResolvedName(resolvedName);
-      });
-    }
-  }, [id, text, mentionProvider]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Mention, {
-    id: id,
-    text: resolvedName,
-    accessLevel: accessLevel,
-    providers: providers,
-    localId: localId
-  })));
-};
+import { Mention } from '../ui/Mention';
 export var MentionNodeView = function MentionNodeView(props) {
   var providerFactory = props.providerFactory;
   var _props$node$attrs = props.node.attrs,
@@ -88,34 +10,17 @@ export var MentionNodeView = function MentionNodeView(props) {
     localId = _props$node$attrs.localId;
   var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
     var _props$options;
-    var _ref3 = providers,
-      mentionProvider = _ref3.mentionProvider;
-    var profilecardProvider = getBooleanFF('platform.editor.mentions-in-editor-popup-on-click') ? (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider : undefined;
-    if (profilecardProvider) {
-      return (
-        /*#__PURE__*/
-        /**
-         * Rename this to `Mention` when `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
-         */
-        React.createElement(MentionNext, {
-          id: id,
-          text: text,
-          accessLevel: accessLevel,
-          mentionProvider: mentionProvider,
-          profilecardProvider: profilecardProvider,
-          localId: localId
-        })
-      );
-    } else {
-      return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-        mentionProvider: mentionProvider,
-        id: id,
-        text: text,
-        providers: providerFactory,
-        accessLevel: accessLevel,
-        localId: localId
-      });
-    }
+    var _ref = providers,
+      mentionProvider = _ref.mentionProvider;
+    var profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+    return /*#__PURE__*/React.createElement(Mention, {
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    });
   };
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mentionProvider', 'profilecardProvider'],

package/dist/esm/ui/Mention/index.js

@@ -1,17 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { PureComponent } from 'react';
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
 import { ResourcedMention } from '@atlaskit/mention/element';
+import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention/resource';
+import { isPromise } from '@atlaskit/mention/types';
+
 // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 var refreshBrowserSelection = function refreshBrowserSelection() {
@@ -24,72 +21,150 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-/**
- * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
- * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
- */
-var Mention = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Mention, _PureComponent);
-  var _super = _createSuper(Mention);
-  function Mention(props) {
-    var _this;
-    _classCallCheck(this, Mention);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "renderWithProvider", function (providers) {
-      var _this$props = _this.props,
-        accessLevel = _this$props.accessLevel,
-        eventHandlers = _this$props.eventHandlers,
-        id = _this$props.id,
-        text = _this$props.text,
-        localId = _this$props.localId;
-      var _ref = providers,
-        mentionProvider = _ref.mentionProvider;
-      var actionHandlers = {};
-      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
-        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
-      });
-      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        localId: localId,
-        mentionProvider: mentionProvider
-      }, actionHandlers));
-    });
-    _this.providerFactory = props.providers || new ProviderFactory();
-    return _this;
-  }
-  _createClass(Mention, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Workaround an issue where the selection is not updated immediately after adding
-      // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
-      // This affects both insertion and paste behaviour it is applied to the component.
-      // https://product-fabric.atlassian.net/browse/ED-14859
-      if (browser.safari) {
-        setTimeout(refreshBrowserSelection, 0);
-      }
+export var Mention = function Mention(props) {
+  var accessLevel = props.accessLevel,
+    eventHandlers = props.eventHandlers,
+    id = props.id,
+    text = props.text,
+    localId = props.localId,
+    mentionProvider = props.mentionProvider,
+    profilecardProviderPromise = props.profilecardProvider;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+  var resolvedName = useResolvedName(id, text, mentionProvider);
+
+  // Resolve the profilecard provider
+  useEffect(function () {
+    var isCancelled = false;
+    var resolveProfilecardProvider = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _profilecardProvider;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return profilecardProviderPromise;
+            case 3:
+              _profilecardProvider = _context.sent;
+              if (!isCancelled) {
+                setProfilecardProvider(_profilecardProvider);
+              }
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              if (!isCancelled) {
+                setProfilecardProvider(undefined);
+              }
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 7]]);
+      }));
+      return function resolveProfilecardProvider() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    if (profilecardProviderPromise) {
+      resolveProfilecardProvider();
+    }
+    return function () {
+      isCancelled = true;
+    };
+  }, [profilecardProviderPromise]);
+  useEffect(function () {
+    // Workaround an issue where the selection is not updated immediately after adding
+    // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+    // This affects both insertion and paste behaviour it is applied to the component.
+    // https://product-fabric.atlassian.net/browse/ED-14859
+    if (browser.safari) {
+      setTimeout(refreshBrowserSelection, 0);
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (!this.props.providers) {
-        // new ProviderFactory is created if no `providers` has been set
-        // in this case when component is unmounted it's safe to destroy this providerFactory
-        this.providerFactory.destroy();
-      }
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if (profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      autoFocus: false,
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
+  }
+};
+var useResolvedName = function useResolvedName(id, text, mentionProvider) {
+  var _useState3 = useState(text),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resolvedName = _useState4[0],
+    setResolvedName = _useState4[1];
+  var processName = function processName(name) {
+    if (name.status === MentionNameStatus.OK) {
+      return "@".concat(name.name || '');
+    } else {
+      return "@_|unknown|_";
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(WithProviders, {
-        providers: ['mentionProvider', 'profilecardProvider'],
-        providerFactory: this.providerFactory,
-        renderNode: this.renderWithProvider
+  };
+  useEffect(function () {
+    if (mentionProvider) {
+      mentionProvider.then( /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(provider) {
+          var nameDetail;
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(!text && isResolvingMentionProvider(provider))) {
+                  _context2.next = 13;
+                  break;
+                }
+                nameDetail = provider.resolveMentionName(id);
+                if (!isPromise(nameDetail)) {
+                  _context2.next = 10;
+                  break;
+                }
+                _context2.t0 = processName;
+                _context2.next = 6;
+                return nameDetail;
+              case 6:
+                _context2.t1 = _context2.sent;
+                return _context2.abrupt("return", (0, _context2.t0)(_context2.t1));
+              case 10:
+                return _context2.abrupt("return", processName(nameDetail));
+              case 11:
+                _context2.next = 14;
+                break;
+              case 13:
+                return _context2.abrupt("return", text);
+              case 14:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function (_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }()).then(function (resolvedName) {
+        setResolvedName(resolvedName);
       });
     }
-  }]);
-  return Mention;
-}(PureComponent);
-_defineProperty(Mention, "displayName", 'Mention');
-export { Mention as default };
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

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

@@ -1,24 +1,14 @@
-import { PureComponent } from 'react';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+/// <reference types="react" />
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { MentionEventHandlers } from '@atlaskit/editor-common/ui';
+import { type MentionProvider } from '@atlaskit/mention/resource';
 export interface MentionProps {
     id: string;
-    providers?: ProviderFactory;
     eventHandlers?: MentionEventHandlers;
     text: string;
     accessLevel?: string;
     localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
-/**
- * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
- * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
- */
-export default class Mention extends PureComponent<MentionProps, {}> {
-    static displayName: string;
-    private providerFactory;
-    constructor(props: MentionProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private renderWithProvider;
-    render(): JSX.Element;
-}
+export declare const Mention: (props: MentionProps) => JSX.Element;

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

@@ -1,24 +1,14 @@
-import { PureComponent } from 'react';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+/// <reference types="react" />
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { MentionEventHandlers } from '@atlaskit/editor-common/ui';
+import { type MentionProvider } from '@atlaskit/mention/resource';
 export interface MentionProps {
     id: string;
-    providers?: ProviderFactory;
     eventHandlers?: MentionEventHandlers;
     text: string;
     accessLevel?: string;
     localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
-/**
- * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
- * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
- */
-export default class Mention extends PureComponent<MentionProps, {}> {
-    static displayName: string;
-    private providerFactory;
-    constructor(props: MentionProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private renderWithProvider;
-    render(): JSX.Element;
-}
+export declare const Mention: (props: MentionProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "2.6.4",
+	"version": "2.6.6",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,16 +33,16 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
-		"@atlaskit/editor-common": "^91.0.0",
+		"@atlaskit/editor-common": "^92.0.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.3.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/icon": "^22.18.0",
-		"@atlaskit/mention": "^23.2.0",
+		"@atlaskit/icon": "^22.19.0",
+		"@atlaskit/mention": "^23.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.61.0",
+		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"uuid": "^3.1.0"
@@ -103,9 +103,6 @@
 		]
 	},
 	"platform-feature-flags": {
-		"platform.editor.mentions-in-editor-popup-on-click": {
-			"type": "boolean"
-		},
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},