@atlaskit/editor-plugin-mentions 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-mentions
 
+## 1.5.0
+
+### Minor Changes
+
+-   [#103169](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103169)
+    [`e9d45fc94064`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9d45fc94064) -
+    [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.4.1
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mention.js

@@ -13,7 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _mention = require("@atlaskit/mention");
 var _types = require("@atlaskit/mention/types");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
+var _mention2 = require("../ui/Mention/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|_';
@@ -95,16 +97,35 @@ var MentionNodeView = exports.MentionNodeView = function MentionNodeView(props)
     accessLevel = _props$node$attrs.accessLevel,
     localId = _props$node$attrs.localId;
   var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
+    var _props$options;
     var _ref3 = providers,
       mentionProvider = _ref3.mentionProvider;
-    return /*#__PURE__*/_react.default.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel,
-      localId: localId
-    });
+    var profilecardProvider = (0, _platformFeatureFlags.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.default.createElement(_mention2.Mention, {
+          id: id,
+          text: text,
+          accessLevel: accessLevel,
+          mentionProvider: mentionProvider,
+          profilecardProvider: profilecardProvider,
+          localId: localId
+        })
+      );
+    } else {
+      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'],

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

@@ -34,6 +34,10 @@ 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 = exports.default = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Mention, _PureComponent);
   var _super = _createSuper(Mention);

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

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Mention = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mention = require("@atlaskit/editor-common/mention");
+var _utils = require("@atlaskit/editor-common/utils");
+var _element = require("@atlaskit/mention/element");
+var _resource = require("@atlaskit/mention/resource");
+var _types = require("@atlaskit/mention/types");
+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; }
+// Workaround for a firefox issue where dom selection is off sync
+// https://product-fabric.atlassian.net/browse/ED-12442
+var refreshBrowserSelection = function refreshBrowserSelection() {
+  var domSelection = window.getSelection();
+  if (domSelection) {
+    var domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    if (domRange) {
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
+  }
+};
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+var Mention = exports.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)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+  var resolvedName = useResolvedName(id, text, mentionProvider);
+
+  // Resolve the profilecard provider
+  (0, _react.useEffect)(function () {
+    var isCancelled = false;
+    var resolveProfilecardProvider = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _profilecardProvider;
+        return _regenerator.default.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]);
+  (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);
+    }
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if (profilecardProvider) {
+    return /*#__PURE__*/_react.default.createElement(_mention.MentionWithProfileCard, (0, _extends2.default)({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    }, actionHandlers));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, (0, _extends2.default)({
+      id: id,
+      text: resolvedName,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      localId: localId
+    }, actionHandlers));
+  }
+};
+var useResolvedName = function useResolvedName(id, text, mentionProvider) {
+  var _useState3 = (0, _react.useState)(text),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    resolvedName = _useState4[0],
+    setResolvedName = _useState4[1];
+  var processName = function processName(name) {
+    if (name.status === _resource.MentionNameStatus.OK) {
+      return "@".concat(name.name || '');
+    } else {
+      return "@_|unknown|_";
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (mentionProvider) {
+      mentionProvider.then( /*#__PURE__*/function () {
+        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(provider) {
+          var nameDetail;
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!(!text && (0, _resource.isResolvingMentionProvider)(provider))) {
+                  _context2.next = 13;
+                  break;
+                }
+                nameDetail = provider.resolveMentionName(id);
+                if (!(0, _types.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);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

package/dist/es2019/nodeviews/mention.js

@@ -2,7 +2,9 @@ import React, { useEffect, useState } 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';
 const UNKNOWN_USER_ID = '_|unknown|_';
 const MentionAssistiveTextComponent = ({
   id,
@@ -57,17 +59,36 @@ export const MentionNodeView = props => {
     localId
   } = props.node.attrs;
   const renderAssistiveTextWithProviders = providers => {
+    var _props$options;
     const {
       mentionProvider
     } = providers;
-    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel,
-      localId: localId
-    });
+    const 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
+      });
+    }
   };
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mentionProvider', 'profilecardProvider'],

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { 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';
@@ -17,6 +16,10 @@ 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);

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

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 { 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 = () => {
+  const domSelection = window.getSelection();
+  if (domSelection) {
+    const domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    if (domRange) {
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
+  }
+};
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+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.
+    // https://product-fabric.atlassian.net/browse/ED-14859
+    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({
+      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));
+  }
+};
+const useResolvedName = (id, text, mentionProvider) => {
+  const [resolvedName, setResolvedName] = useState(text);
+  const processName = name => {
+    if (name.status === MentionNameStatus.OK) {
+      return `@${name.name || ''}`;
+    } else {
+      return `@_|unknown|_`;
+    }
+  };
+  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

@@ -5,7 +5,9 @@ import React, { useEffect, useState } 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,
@@ -85,16 +87,35 @@ export var MentionNodeView = function MentionNodeView(props) {
     accessLevel = _props$node$attrs.accessLevel,
     localId = _props$node$attrs.localId;
   var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
+    var _props$options;
     var _ref3 = providers,
       mentionProvider = _ref3.mentionProvider;
-    return /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
-      mentionProvider: mentionProvider,
-      id: id,
-      text: text,
-      providers: providerFactory,
-      accessLevel: accessLevel,
-      localId: localId
-    });
+    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
+      });
+    }
   };
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mentionProvider', 'profilecardProvider'],

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

@@ -8,8 +8,7 @@ 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 React, { 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';
@@ -25,6 +24,10 @@ 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);

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

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 { MentionWithProfileCard } from '@atlaskit/editor-common/mention';
+import { browser } from '@atlaskit/editor-common/utils';
+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() {
+  var domSelection = window.getSelection();
+  if (domSelection) {
+    var domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    if (domRange) {
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
+  }
+};
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+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);
+    }
+  }, []);
+  var actionHandlers = {};
+  ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+    actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+  });
+  if (profilecardProvider) {
+    return /*#__PURE__*/React.createElement(MentionWithProfileCard, _extends({
+      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|_";
+    }
+  };
+  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);
+      });
+    }
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

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

@@ -9,6 +9,10 @@ export interface MentionProps {
     accessLevel?: string;
     localId?: string;
 }
+/**
+ * @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;

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

@@ -0,0 +1,18 @@
+/// <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;
+    eventHandlers?: MentionEventHandlers;
+    text: string;
+    accessLevel?: string;
+    localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
+}
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+export declare const Mention: (props: MentionProps) => JSX.Element;

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

@@ -9,6 +9,10 @@ export interface MentionProps {
     accessLevel?: string;
     localId?: string;
 }
+/**
+ * @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;

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

@@ -0,0 +1,18 @@
+/// <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;
+    eventHandlers?: MentionEventHandlers;
+    text: string;
+    accessLevel?: string;
+    localId?: string;
+    mentionProvider?: Promise<MentionProvider>;
+    profilecardProvider?: Promise<ProfilecardProvider>;
+}
+/**
+ * This is the new preferred way to render mentions in the editor.
+ * Introduced behind the `platform.editor.mentions-in-editor-popup-on-click` feature flag.
+ */
+export declare const Mention: (props: MentionProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-mentions",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Mentions plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,15 +33,16 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.8.0",
+    "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/analytics-gas-types": "^5.1.0",
-    "@atlaskit/editor-common": "^80.5.0",
+    "@atlaskit/editor-common": "^81.1.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",
@@ -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"
+    }
+  }
 }