@atlaskit/editor-plugin-mentions 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-mentions
 
+## 1.4.0
+
+### Minor Changes
+
+-   [#103099](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103099)
+    [`ab382e121799`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab382e121799) -
+    [ux] [ED-23248] -
+
+    **@atlaskit/editor-core**: REVERT: Added optional profilecardProvider to Mention plugin in
+    universal composable editor **@atlaskit/editor-plugin-mentions**: REVERT: Made mentions render
+    with profile cards on click if the feature flag:
+    `platform.editor.mentions-in-editor-popup-on-click` is turned on
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mention.js

@@ -17,10 +17,13 @@ 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 useResolvedName = function useResolvedName(_ref) {
+var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref) {
   var id = _ref.id,
     text = _ref.text,
-    mentionProvider = _ref.mentionProvider;
+    providers = _ref.providers,
+    accessLevel = _ref.accessLevel,
+    mentionProvider = _ref.mentionProvider,
+    localId = _ref.localId;
   var _useState = (0, _react.useState)(text),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     resolvedName = _useState2[0],
@@ -76,28 +79,36 @@ var useResolvedName = function useResolvedName(_ref) {
       });
     }
   }, [id, text, mentionProvider]);
-  return resolvedName;
+  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,
+    localId: localId
+  })));
 };
 var MentionNodeView = exports.MentionNodeView = function MentionNodeView(props) {
-  var _props$options;
+  var providerFactory = props.providerFactory;
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text,
     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
+  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,
+      localId: localId
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+    providers: ['mentionProvider', 'profilecardProvider'],
+    providerFactory: providerFactory,
+    renderNode: renderAssistiveTextWithProviders
   });
-  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/ui/Mention/index.js

@@ -7,14 +7,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _react = _interopRequireWildcard(require("react"));
-var _mention = require("@atlaskit/editor-common/mention");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 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() {
@@ -27,62 +34,67 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-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);
+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,
+        localId = _this$props.localId;
+      var _ref = providers,
+        mentionProvider = _ref.mentionProvider;
+      var actionHandlers = {};
+      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
       });
-    } else {
-      setProfilecardProvider(null);
+      return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, (0, _extends2.default)({
+        id: id,
+        text: text,
+        accessLevel: accessLevel,
+        localId: localId,
+        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);
+      }
     }
-  }, [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);
+  }, {
+    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 ((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;
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+        providers: ['mentionProvider', 'profilecardProvider'],
+        providerFactory: this.providerFactory,
+        renderNode: this.renderWithProvider
+      });
+    }
+  }]);
+  return Mention;
+}(_react.PureComponent);
+(0, _defineProperty2.default)(Mention, "displayName", 'Mention');

package/dist/es2019/nodeviews/mention.js

@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { useProvider } from '@atlaskit/editor-common/provider-factory';
+import { WithProviders } 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 useResolvedName = ({
+const MentionAssistiveTextComponent = ({
   id,
   text,
-  mentionProvider
+  providers,
+  accessLevel,
+  mentionProvider,
+  localId
 }) => {
   const [resolvedName, setResolvedName] = useState(text);
   const processName = name => {
@@ -35,29 +38,40 @@ const useResolvedName = ({
       });
     }
   }, [id, text, mentionProvider]);
-  return resolvedName;
+  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
+  })));
 };
 export const MentionNodeView = props => {
-  var _props$options;
+  const {
+    providerFactory
+  } = props;
   const {
     id,
     text,
     accessLevel,
     localId
   } = props.node.attrs;
-  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
+  const renderAssistiveTextWithProviders = providers => {
+    const {
+      mentionProvider
+    } = providers;
+    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
+      mentionProvider: mentionProvider,
+      id: id,
+      text: text,
+      providers: providerFactory,
+      accessLevel: accessLevel,
+      localId: localId
+    });
+  };
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mentionProvider', 'profilecardProvider'],
+    providerFactory: providerFactory,
+    renderNode: renderAssistiveTextWithProviders
   });
-  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/ui/Mention/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
-import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
+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 { 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,31 +17,35 @@ const refreshBrowserSelection = () => {
     }
   }
 };
-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);
+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] || (() => {});
       });
-    } else {
-      setProfilecardProvider(null);
-    }
-  }, [profilecardProviderPromise]);
-  useEffect(() => {
+      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+        id: id,
+        text: text,
+        accessLevel: accessLevel,
+        localId: localId,
+        mentionProvider: mentionProvider
+      }, actionHandlers));
+    });
+    this.providerFactory = props.providers || new ProviderFactory();
+  }
+  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.
@@ -49,29 +53,20 @@ const Mention = props => {
     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));
   }
-};
-Mention.displayName = 'Mention';
-export default Mention;
+  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');

package/dist/esm/nodeviews/mention.js

@@ -2,15 +2,18 @@ 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 { useProvider } from '@atlaskit/editor-common/provider-factory';
+import { WithProviders } 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 useResolvedName = function useResolvedName(_ref) {
+var MentionAssistiveTextComponent = function MentionAssistiveTextComponent(_ref) {
   var id = _ref.id,
     text = _ref.text,
-    mentionProvider = _ref.mentionProvider;
+    providers = _ref.providers,
+    accessLevel = _ref.accessLevel,
+    mentionProvider = _ref.mentionProvider,
+    localId = _ref.localId;
   var _useState = useState(text),
     _useState2 = _slicedToArray(_useState, 2),
     resolvedName = _useState2[0],
@@ -66,28 +69,36 @@ var useResolvedName = function useResolvedName(_ref) {
       });
     }
   }, [id, text, mentionProvider]);
-  return resolvedName;
+  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
+  })));
 };
 export var MentionNodeView = function MentionNodeView(props) {
-  var _props$options;
+  var providerFactory = props.providerFactory;
   var _props$node$attrs = props.node.attrs,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text,
     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
+  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,
+      localId: localId
+    });
+  };
+  return /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mentionProvider', 'profilecardProvider'],
+    providerFactory: providerFactory,
+    renderNode: renderAssistiveTextWithProviders
   });
-  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/ui/Mention/index.js

@@ -1,11 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useEffect, useState } from 'react';
-import { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
+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 { 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() {
@@ -18,62 +25,68 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-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);
+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 () {};
       });
-    } else {
-      setProfilecardProvider(null);
+      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);
+      }
     }
-  }, [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 (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;
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(WithProviders, {
+        providers: ['mentionProvider', 'profilecardProvider'],
+        providerFactory: this.providerFactory,
+        renderNode: this.renderWithProvider
+      });
+    }
+  }]);
+  return Mention;
+}(PureComponent);
+_defineProperty(Mention, "displayName", 'Mention');
+export { Mention as default };

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/types.d.ts

@@ -1,6 +1,5 @@
 /// <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';
@@ -14,7 +13,6 @@ 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,18 +1,20 @@
-/// <reference types="react" />
-import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
+import { PureComponent } from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 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>;
 }
-declare const Mention: {
-    (props: MentionProps): JSX.Element;
-    displayName: string;
-};
-export default Mention;
+export default class Mention extends PureComponent<MentionProps, {}> {
+    static displayName: string;
+    private providerFactory;
+    constructor(props: MentionProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private renderWithProvider;
+    render(): JSX.Element;
+}

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/types.d.ts

@@ -1,6 +1,5 @@
 /// <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';
@@ -14,7 +13,6 @@ 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,18 +1,20 @@
-/// <reference types="react" />
-import { type ProfilecardProvider } from '@atlaskit/editor-common/src/provider-factory/profile-card-provider';
+import { PureComponent } from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 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>;
 }
-declare const Mention: {
-    (props: MentionProps): JSX.Element;
-    displayName: string;
-};
-export default Mention;
+export default class Mention extends PureComponent<MentionProps, {}> {
+    static displayName: string;
+    private providerFactory;
+    constructor(props: MentionProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    private renderWithProvider;
+    render(): JSX.Element;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-mentions",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Mentions plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,14 +35,13 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^36.8.0",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/editor-common": "^80.5.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.3.0",
     "@atlaskit/mention": "^23.0.0",
-    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -105,10 +104,5 @@
       "@atlassian/tangerine/project-structure"
     ]
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
-  "platform-feature-flags": {
-    "platform.editor.mentions-in-editor-popup-on-click": {
-      "type": "boolean"
-    }
-  }
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
 }