@atlaskit/editor-plugin-mentions 2.6.4 → 2.6.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-mentions
 
+## 2.6.5
+
+### Patch Changes
+
+- [#145765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/145765)
+  [`eded181672815`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eded181672815) -
+  [ED-23481] Clean up `platform.editor.mentions-in-editor-popup-on-click`
+- Updated dependencies
+
 ## 2.6.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mention.js

@@ -1,94 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MentionNodeView = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(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 && {}.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 id = _ref.id,
-    text = _ref.text,
-    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],
-    setResolvedName = _useState2[1];
-  var processName = function processName(name) {
-    if (name.status === _mention.MentionNameStatus.OK) {
-      return "@".concat(name.name || '');
-    } else {
-      return "@".concat(UNKNOWN_USER_ID);
-    }
-  };
-  (0, _react.useEffect)(function () {
-    if (mentionProvider) {
-      mentionProvider.then( /*#__PURE__*/function () {
-        var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(provider) {
-          var nameDetail;
-          return _regenerator.default.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-                if (!(!text && (0, _mention.isResolvingMentionProvider)(provider))) {
-                  _context.next = 13;
-                  break;
-                }
-                nameDetail = provider.resolveMentionName(id);
-                if (!(0, _types.isPromise)(nameDetail)) {
-                  _context.next = 10;
-                  break;
-                }
-                _context.t0 = processName;
-                _context.next = 6;
-                return nameDetail;
-              case 6:
-                _context.t1 = _context.sent;
-                return _context.abrupt("return", (0, _context.t0)(_context.t1));
-              case 10:
-                return _context.abrupt("return", processName(nameDetail));
-              case 11:
-                _context.next = 14;
-                break;
-              case 13:
-                return _context.abrupt("return", text);
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        return function (_x) {
-          return _ref2.apply(this, arguments);
-        };
-      }()).then(function (resolvedName) {
-        setResolvedName(resolvedName);
-      });
-    }
-  }, [id, text, mentionProvider]);
-  return /*#__PURE__*/_react.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 _Mention = require("../ui/Mention");
 var MentionNodeView = exports.MentionNodeView = function MentionNodeView(props) {
   var providerFactory = props.providerFactory;
   var _props$node$attrs = props.node.attrs,
@@ -98,34 +17,17 @@ var MentionNodeView = exports.MentionNodeView = function MentionNodeView(props)
     localId = _props$node$attrs.localId;
   var renderAssistiveTextWithProviders = function renderAssistiveTextWithProviders(providers) {
     var _props$options;
-    var _ref3 = providers,
-      mentionProvider = _ref3.mentionProvider;
-    var profilecardProvider = (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
-      });
-    }
+    var _ref = providers,
+      mentionProvider = _ref.mentionProvider;
+    var profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+    return /*#__PURE__*/_react.default.createElement(_Mention.Mention, {
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    });
   };
   return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
     providers: ['mentionProvider', 'profilecardProvider'],

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

@@ -5,23 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Mention = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _browser = require("@atlaskit/editor-common/browser");
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _mention = require("@atlaskit/editor-common/mention");
 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 && {}.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(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-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,71 +30,150 @@ var refreshBrowserSelection = function refreshBrowserSelection() {
     }
   }
 };
-/**
- * @deprecated should be replaced with `editor-plugin-mentions/src/ui/Mention/mention.tsx`
- * when the feature flag `platform.editor.mentions-in-editor-popup-on-click` is tidied up.
- */
-var Mention = 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 () {};
-      });
-      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 (_browser.browser.safari) {
-        setTimeout(refreshBrowserSelection, 0);
-      }
+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();
     }
-  }, {
-    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();
-      }
+    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 (_browser.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)({
+      autoFocus: false,
+      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|_";
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
-        providers: ['mentionProvider', 'profilecardProvider'],
-        providerFactory: this.providerFactory,
-        renderNode: this.renderWithProvider
+  };
+  (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);
       });
     }
-  }]);
-  return Mention;
-}(_react.PureComponent);
-(0, _defineProperty2.default)(Mention, "displayName", 'Mention');
+  }, [id, text, mentionProvider]);
+  return resolvedName;
+};

package/dist/es2019/nodeviews/mention.js

@@ -1,53 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention';
-import { isPromise } from '@atlaskit/mention/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import Mention from '../ui/Mention';
-import { Mention as MentionNext } from '../ui/Mention/mention';
-const UNKNOWN_USER_ID = '_|unknown|_';
-const MentionAssistiveTextComponent = ({
-  id,
-  text,
-  providers,
-  accessLevel,
-  mentionProvider,
-  localId
-}) => {
-  const [resolvedName, setResolvedName] = useState(text);
-  const processName = name => {
-    if (name.status === MentionNameStatus.OK) {
-      return `@${name.name || ''}`;
-    } else {
-      return `@${UNKNOWN_USER_ID}`;
-    }
-  };
-  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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Mention, {
-    id: id,
-    text: resolvedName,
-    accessLevel: accessLevel,
-    providers: providers,
-    localId: localId
-  })));
-};
+import { Mention } from '../ui/Mention';
 export const MentionNodeView = props => {
   const {
     providerFactory
@@ -63,32 +16,15 @@ export const MentionNodeView = props => {
     const {
       mentionProvider
     } = providers;
-    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
-      });
-    }
+    const profilecardProvider = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.profilecardProvider;
+    return /*#__PURE__*/React.createElement(Mention, {
+      id: id,
+      text: text,
+      accessLevel: accessLevel,
+      mentionProvider: mentionProvider,
+      profilecardProvider: profilecardProvider,
+      localId: localId
+    });
   };
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mentionProvider', 'profilecardProvider'],