@atlaskit/editor-plugin-mentions 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-mentions
 
+## 1.3.0
+
+### Minor Changes
+
+-   [#98647](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98647)
+    [`19eb20751225`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/19eb20751225) -
+    [ux] [ED-23248] -
+
+    **@atlaskit/editor-core**: Added optional profilecardProvider to Mention plugin in universal
+    composable editor **@atlaskit/editor-plugin-mentions**: Made mentions render with profile cards
+    on click if the feature flag: `platform.editor.mentions-in-editor-popup-on-click` is turned on
+
+## 1.2.1
+
+### Patch Changes
+
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mention.js

@@ -17,11 +17,9 @@ var _Mention = _interopRequireDefault(require("../ui/Mention"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var UNKNOWN_USER_ID = '_|unknown|_';
-var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref) {
+var useResolvedName = function useResolvedName(_ref) {
   var id = _ref.id,
     text = _ref.text,
-    providers = _ref.providers,
-    accessLevel = _ref.accessLevel,
     mentionProvider = _ref.mentionProvider;
   var _useState = (0, _react.useState)(text),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -78,33 +76,28 @@ var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref)
       });
     }
   }, [id, text, mentionProvider]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Mention.default, {
-    id: id,
-    text: resolvedName,
-    accessLevel: accessLevel,
-    providers: providers
-  })));
+  return resolvedName;
 };
 var MentionNodeView = exports.MentionNodeView = function MentionNodeView(props) {
-  var providerFactory = props.providerFactory;
+  var _props$options;
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text,
-    accessLevel = _props$node$attrs.accessLevel;
-  var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
-    var _ref3 = providers,
-      mentionProvider = _ref3.mentionProvider;
-    return /*#__PURE__*/_react.default.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel
-    });
-  };
-  return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
-    providers: ['mentionProvider', 'profilecardProvider'],
-    providerFactory: providerFactory,
-    renderNode: renderAssistiveTextWithProviders
+    accessLevel = _props$node$attrs.accessLevel,
+    localId = _props$node$attrs.localId;
+  var mentionProvider = (0, _providerFactory.useProvider)('mentionProvider');
+  var profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+  var resolvedName = useResolvedName({
+    id: id,
+    text: text,
+    mentionProvider: mentionProvider
   });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Mention.default, {
+    id: id,
+    text: resolvedName,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    profilecardProvider: profilecardProvider,
+    localId: localId
+  })));
 };

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

@@ -178,7 +178,8 @@ var buildNodesForTeamMention = function buildNodesForTeamMention(schema, selecte
       text: text,
       id: member.id,
       accessLevel: accessLevel,
-      userType: 'DEFAULT'
+      userType: 'DEFAULT',
+      localId: (0, _uuid.default)()
     });
     inlineNodes.push(userMentionNode);
     // should not add empty space after the last user mention.
@@ -332,7 +333,8 @@ var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeA
         text: text,
         id: id,
         accessLevel: accessLevel,
-        userType: userType === 'DEFAULT' ? null : userType
+        userType: userType === 'DEFAULT' ? null : userType,
+        localId: (0, _uuid.default)()
       });
       var space = schema.text(' ');
       return insert(_model.Fragment.from([mentionNode, space]));

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

@@ -7,21 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _mention = require("@atlaskit/editor-common/mention");
 var _utils = require("@atlaskit/editor-common/utils");
 var _element = require("@atlaskit/mention/element");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 var refreshBrowserSelection = function refreshBrowserSelection() {
@@ -34,65 +27,62 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-var Mention = exports.default = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(Mention, _PureComponent);
-  var _super = _createSuper(Mention);
-  function Mention(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, Mention);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
-      var _ref = providers,
-        mentionProvider = _ref.mentionProvider;
-      var actionHandlers = {};
-      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
-        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+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 = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+
+  // Resolve the profilecard provider
+  (0, _react.useEffect)(function () {
+    if (profilecardProviderPromise) {
+      profilecardProviderPromise.then(function (profilecardProvider) {
+        setProfilecardProvider(profilecardProvider);
+      }).catch(function () {
+        setProfilecardProvider(null);
       });
-      return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, (0, _extends2.default)({
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider
-      }, actionHandlers));
-    });
-    _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
-    return _this;
-  }
-  (0, _createClass2.default)(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 (_utils.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();
-      }
+    } else {
+      setProfilecardProvider(null);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
-        providers: ['mentionProvider', 'profilecardProvider'],
-        providerFactory: this.providerFactory,
-        renderNode: this.renderWithProvider
-      });
+  }, [profilecardProviderPromise]);
+  (0, _react.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 (_utils.browser.safari) {
+      setTimeout(refreshBrowserSelection, 0);
     }
-  }]);
-  return Mention;
-}(_react.PureComponent);
-(0, _defineProperty2.default)(Mention, "displayName", 'Mention');
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.mentions-in-editor-popup-on-click') && profilecardProvider) {
+    return /*#__PURE__*/_react.default.createElement(_mention.MentionWithProfileCard, (0, _extends2.default)({
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, (0, _extends2.default)({
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
+  }
+};
+Mention.displayName = 'Mention';
+var _default = exports.default = Mention;

package/dist/es2019/nodeviews/mention.js

@@ -1,14 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
 import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
 import { isPromise } from '@atlaskit/mention/types';
 import Mention from '../ui/Mention';
 const UNKNOWN_USER_ID = '_|unknown|_';
-const MentionAssistiveTextComponent = ({
+const useResolvedName = ({
   id,
   text,
-  providers,
-  accessLevel,
   mentionProvider
 }) => {
   const [resolvedName, setResolvedName] = useState(text);
@@ -37,37 +35,29 @@ const MentionAssistiveTextComponent = ({
       });
     }
   }, [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
-  })));
+  return resolvedName;
 };
 export const MentionNodeView = props => {
-  const {
-    providerFactory
-  } = props;
+  var _props$options;
   const {
     id,
     text,
-    accessLevel
+    accessLevel,
+    localId
   } = props.node.attrs;
-  const renderAssistiveTextWithProviders = providers => {
-    const {
-      mentionProvider
-    } = providers;
-    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel
-    });
-  };
-  return /*#__PURE__*/React.createElement(WithProviders, {
-    providers: ['mentionProvider', 'profilecardProvider'],
-    providerFactory: providerFactory,
-    renderNode: renderAssistiveTextWithProviders
+  const mentionProvider = useProvider('mentionProvider');
+  const profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+  const resolvedName = useResolvedName({
+    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,
+    mentionProvider: mentionProvider,
+    profilecardProvider: profilecardProvider,
+    localId: localId
+  })));
 };

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

@@ -154,7 +154,8 @@ const buildNodesForTeamMention = (schema, selectedMention, mentionProvider, sani
       text,
       id: member.id,
       accessLevel,
-      userType: 'DEFAULT'
+      userType: 'DEFAULT',
+      localId: uuid()
     });
     inlineNodes.push(userMentionNode);
     // should not add empty space after the last user mention.
@@ -316,7 +317,8 @@ export const createTypeAheadConfig = ({
         text,
         id,
         accessLevel,
-        userType: userType === 'DEFAULT' ? null : userType
+        userType: userType === 'DEFAULT' ? null : userType,
+        localId: uuid()
       });
       const space = schema.text(' ');
       return insert(Fragment.from([mentionNode, space]));

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import React, { useEffect, useState } from 'react';
+import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
 import { browser } from '@atlaskit/editor-common/utils';
 import { ResourcedMention } from '@atlaskit/mention/element';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 const refreshBrowserSelection = () => {
@@ -17,33 +17,31 @@ const refreshBrowserSelection = () => {
     }
   }
 };
-export default class Mention extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "renderWithProvider", providers => {
-      const {
-        accessLevel,
-        eventHandlers,
-        id,
-        text
-      } = this.props;
-      const {
-        mentionProvider
-      } = providers;
-      const actionHandlers = {};
-      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(handler => {
-        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || (() => {});
+const Mention = props => {
+  const {
+    accessLevel,
+    eventHandlers,
+    id,
+    text,
+    localId,
+    mentionProvider,
+    profilecardProvider: profilecardProviderPromise
+  } = props;
+  const [profilecardProvider, setProfilecardProvider] = useState(null);
+
+  // Resolve the profilecard provider
+  useEffect(() => {
+    if (profilecardProviderPromise) {
+      profilecardProviderPromise.then(profilecardProvider => {
+        setProfilecardProvider(profilecardProvider);
+      }).catch(() => {
+        setProfilecardProvider(null);
       });
-      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        mentionProvider: mentionProvider
-      }, actionHandlers));
-    });
-    this.providerFactory = props.providers || new ProviderFactory();
-  }
-  componentDidMount() {
+    } else {
+      setProfilecardProvider(null);
+    }
+  }, [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.
@@ -51,20 +49,29 @@ 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 (getBooleanFF('platform.editor.mentions-in-editor-popup-on-click') && profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+      id: id,
+      text: text,
+      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();
-    }
-  }
-  render() {
-    return /*#__PURE__*/React.createElement(WithProviders, {
-      providers: ['mentionProvider', 'profilecardProvider'],
-      providerFactory: this.providerFactory,
-      renderNode: this.renderWithProvider
-    });
-  }
-}
-_defineProperty(Mention, "displayName", 'Mention');
+};
+Mention.displayName = 'Mention';
+export default Mention;

package/dist/esm/nodeviews/mention.js

@@ -2,16 +2,14 @@ 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 { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
 import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
 import { isPromise } from '@atlaskit/mention/types';
 import Mention from '../ui/Mention';
 var UNKNOWN_USER_ID = '_|unknown|_';
-var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref) {
+var useResolvedName = function useResolvedName(_ref) {
   var id = _ref.id,
     text = _ref.text,
-    providers = _ref.providers,
-    accessLevel = _ref.accessLevel,
     mentionProvider = _ref.mentionProvider;
   var _useState = useState(text),
     _useState2 = _slicedToArray(_useState, 2),
@@ -68,33 +66,28 @@ var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref)
       });
     }
   }, [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
-  })));
+  return resolvedName;
 };
 export var MentionNodeView = function MentionNodeView(props) {
-  var providerFactory = props.providerFactory;
+  var _props$options;
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text,
-    accessLevel = _props$node$attrs.accessLevel;
-  var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
-    var _ref3 = providers,
-      mentionProvider = _ref3.mentionProvider;
-    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel
-    });
-  };
-  return /*#__PURE__*/React.createElement(WithProviders, {
-    providers: ['mentionProvider', 'profilecardProvider'],
-    providerFactory: providerFactory,
-    renderNode: renderAssistiveTextWithProviders
+    accessLevel = _props$node$attrs.accessLevel,
+    localId = _props$node$attrs.localId;
+  var mentionProvider = useProvider('mentionProvider');
+  var profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+  var resolvedName = useResolvedName({
+    id: id,
+    text: text,
+    mentionProvider: mentionProvider
   });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Mention, {
+    id: id,
+    text: resolvedName,
+    accessLevel: accessLevel,
+    mentionProvider: mentionProvider,
+    profilecardProvider: profilecardProvider,
+    localId: localId
+  })));
 };

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

@@ -166,7 +166,8 @@ var buildNodesForTeamMention = function buildNodesForTeamMention(schema, selecte
       text: text,
       id: member.id,
       accessLevel: accessLevel,
-      userType: 'DEFAULT'
+      userType: 'DEFAULT',
+      localId: uuid()
     });
     inlineNodes.push(userMentionNode);
     // should not add empty space after the last user mention.
@@ -320,7 +321,8 @@ export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
         text: text,
         id: id,
         accessLevel: accessLevel,
-        userType: userType === 'DEFAULT' ? null : userType
+        userType: userType === 'DEFAULT' ? null : userType,
+        localId: uuid()
       });
       var space = schema.text(' ');
       return insert(Fragment.from([mentionNode, space]));

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

@@ -1,18 +1,11 @@
 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(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { PureComponent } from 'react';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
 import { browser } from '@atlaskit/editor-common/utils';
 import { ResourcedMention } from '@atlaskit/mention/element';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 var refreshBrowserSelection = function refreshBrowserSelection() {
@@ -25,66 +18,62 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-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;
-      var _ref = providers,
-        mentionProvider = _ref.mentionProvider;
-      var actionHandlers = {};
-      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
-        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+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(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+
+  // Resolve the profilecard provider
+  useEffect(function () {
+    if (profilecardProviderPromise) {
+      profilecardProviderPromise.then(function (profilecardProvider) {
+        setProfilecardProvider(profilecardProvider);
+      }).catch(function () {
+        setProfilecardProvider(null);
       });
-      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        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);
-      }
-    }
-  }, {
-    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();
-      }
+    } else {
+      setProfilecardProvider(null);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(WithProviders, {
-        providers: ['mentionProvider', 'profilecardProvider'],
-        providerFactory: this.providerFactory,
-        renderNode: this.renderWithProvider
-      });
+  }, [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);
     }
-  }]);
-  return Mention;
-}(PureComponent);
-_defineProperty(Mention, "displayName", 'Mention');
-export { Mention as default };
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if (getBooleanFF('platform.editor.mentions-in-editor-popup-on-click') && profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
+  }
+};
+Mention.displayName = 'Mention';
+export default Mention;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
 import type { MentionPluginOptions } from '../types';
 export type Props = InlineNodeViewComponentProps & {

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

@@ -1,4 +1,5 @@
+import type { GasPayload } from '@atlaskit/analytics-gas-types';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { MentionPluginOptions, MentionPluginState } from '../types';
-export declare function createMentionPlugin(pmPluginFactoryParams: PMPluginFactoryParams, fireEvent: (payload: any) => void, options?: MentionPluginOptions): SafePlugin<MentionPluginState>;
+export declare function createMentionPlugin(pmPluginFactoryParams: PMPluginFactoryParams, fireEvent: (payload: GasPayload) => void, options?: MentionPluginOptions): SafePlugin<MentionPluginState>;

package/dist/types/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -13,6 +14,7 @@ export interface TeamInfoAttrAnalytics {
 export interface MentionPluginConfig {
     HighlightComponent?: React.ComponentType<React.PropsWithChildren<unknown>>;
     insertDisplayName?: boolean;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
 export interface MentionPluginOptions extends MentionPluginConfig {
     sanitizePrivateContent?: boolean;

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

@@ -1,19 +1,18 @@
-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>;
 }
-export default class Mention extends PureComponent<MentionProps, {}> {
-    static displayName: string;
-    private providerFactory;
-    constructor(props: MentionProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private renderWithProvider;
-    render(): JSX.Element;
-}
+declare const Mention: {
+    (props: MentionProps): JSX.Element;
+    displayName: string;
+};
+export default Mention;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
 import type { MentionPluginOptions } from '../types';
 export type Props = InlineNodeViewComponentProps & {

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

@@ -1,4 +1,5 @@
+import type { GasPayload } from '@atlaskit/analytics-gas-types';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { MentionPluginOptions, MentionPluginState } from '../types';
-export declare function createMentionPlugin(pmPluginFactoryParams: PMPluginFactoryParams, fireEvent: (payload: any) => void, options?: MentionPluginOptions): SafePlugin<MentionPluginState>;
+export declare function createMentionPlugin(pmPluginFactoryParams: PMPluginFactoryParams, fireEvent: (payload: GasPayload) => void, options?: MentionPluginOptions): SafePlugin<MentionPluginState>;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
 import type { NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContextIdentifierPlugin } from '@atlaskit/editor-plugin-context-identifier';
@@ -13,6 +14,7 @@ export interface TeamInfoAttrAnalytics {
 export interface MentionPluginConfig {
     HighlightComponent?: React.ComponentType<React.PropsWithChildren<unknown>>;
     insertDisplayName?: boolean;
+    profilecardProvider?: Promise<ProfilecardProvider>;
 }
 export interface MentionPluginOptions extends MentionPluginConfig {
     sanitizePrivateContent?: boolean;

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

@@ -1,19 +1,18 @@
-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>;
 }
-export default class Mention extends PureComponent<MentionProps, {}> {
-    static displayName: string;
-    private providerFactory;
-    constructor(props: MentionProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private renderWithProvider;
-    render(): JSX.Element;
-}
+declare const Mention: {
+    (props: MentionProps): JSX.Element;
+    displayName: string;
+};
+export default Mention;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-mentions",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Mentions plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,17 +33,18 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.3.0",
+    "@atlaskit/adf-schema": "^36.8.0",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/editor-common": "^80.1.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-context-identifier": "^1.1.0",
     "@atlaskit/editor-plugin-type-ahead": "^1.2.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
-    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/mention": "^23.0.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/theme": "^12.8.0",
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "uuid": "^3.1.0"
@@ -104,5 +105,10 @@
       "@atlassian/tangerine/project-structure"
     ]
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "platform-feature-flags": {
+    "platform.editor.mentions-in-editor-popup-on-click": {
+      "type": "boolean"
+    }
+  }
 }