@atlaskit/editor-plugin-mentions 0.1.0

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

@@ -0,0 +1,350 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import uuid from 'uuid';
+import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { MENTION_ITEM_HEIGHT, MentionItem } from '@atlaskit/mention/item';
+import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
+import { buildTypeAheadCancelPayload, buildTypeAheadInsertedPayload, buildTypeAheadInviteExposurePayload, buildTypeAheadInviteItemClickedPayload, buildTypeAheadInviteItemViewedPayload, buildTypeAheadRenderedPayload } from '../analytics';
+import { getMentionPluginState } from '../pm-plugins/utils';
+import InviteItem, { INVITE_ITEM_DESCRIPTION } from '../ui/InviteItem';
+import { isInviteItem, isTeamStats, isTeamType, shouldKeepInviteItem } from '../utils';
+var createInviteItem = function createInviteItem(_ref) {
+  var mentionProvider = _ref.mentionProvider,
+    onInviteItemMount = _ref.onInviteItemMount;
+  return {
+    title: INVITE_ITEM_DESCRIPTION.id,
+    render: function render(_ref2) {
+      var isSelected = _ref2.isSelected,
+        onClick = _ref2.onClick,
+        onHover = _ref2.onHover;
+      return /*#__PURE__*/React.createElement(InviteItem, {
+        productName: mentionProvider ? mentionProvider.productName : undefined,
+        selected: isSelected,
+        onMount: onInviteItemMount,
+        onMouseEnter: onHover,
+        onSelection: onClick,
+        userRole: mentionProvider.userRole
+      });
+    },
+    mention: INVITE_ITEM_DESCRIPTION
+  };
+};
+var withInviteItem = function withInviteItem(_ref3) {
+  var mentionProvider = _ref3.mentionProvider,
+    firstQueryWithoutResults = _ref3.firstQueryWithoutResults,
+    currentQuery = _ref3.currentQuery,
+    onInviteItemMount = _ref3.onInviteItemMount;
+  return function (mentionItems) {
+    var inviteItem = createInviteItem({
+      mentionProvider: mentionProvider,
+      onInviteItemMount: onInviteItemMount
+    });
+    var keepInviteItem = shouldKeepInviteItem(currentQuery, firstQueryWithoutResults);
+    if (mentionItems.length === 0) {
+      return keepInviteItem ? [inviteItem] : [];
+    }
+    return [].concat(_toConsumableArray(mentionItems), [
+    // invite item should be shown at the bottom
+    inviteItem]);
+  };
+};
+export var mentionToTypeaheadItem = function mentionToTypeaheadItem(mention) {
+  return {
+    title: mention.id,
+    render: function render(_ref4) {
+      var isSelected = _ref4.isSelected,
+        onClick = _ref4.onClick,
+        onHover = _ref4.onHover;
+      return /*#__PURE__*/React.createElement(MentionItem, {
+        mention: mention,
+        selected: isSelected,
+        onMouseEnter: onHover,
+        onSelection: onClick
+      });
+    },
+    getCustomComponentHeight: function getCustomComponentHeight() {
+      return MENTION_ITEM_HEIGHT;
+    },
+    mention: mention
+  };
+};
+export function memoize(fn) {
+  // Cache results here
+  var seen = new Map();
+  function memoized(mention) {
+    // Check cache for hits
+    var hit = seen.get(mention.id);
+    if (hit) {
+      return hit;
+    }
+
+    // Generate new result and cache it
+    var result = fn(mention);
+    seen.set(mention.id, result);
+    return result;
+  }
+  return {
+    call: memoized,
+    clear: seen.clear.bind(seen)
+  };
+}
+var memoizedToItem = memoize(mentionToTypeaheadItem);
+var buildAndSendElementsTypeAheadAnalytics = function buildAndSendElementsTypeAheadAnalytics(fireEvent) {
+  return function (_ref5) {
+    var query = _ref5.query,
+      mentions = _ref5.mentions,
+      stats = _ref5.stats;
+    var duration = 0;
+    var userOrTeamIds = null;
+    var teams = null;
+    if (!isTeamStats(stats)) {
+      // is from primary mention endpoint which could be just user mentions or user/team mentions
+      duration = stats && stats.duration;
+      teams = null;
+      userOrTeamIds = mentions.map(function (mention) {
+        return mention.id;
+      });
+    } else {
+      // is from dedicated team-only mention endpoint
+      duration = stats && stats.teamMentionDuration;
+      userOrTeamIds = null;
+      teams = mentions.map(function (mention) {
+        return isTeamType(mention.userType) ? {
+          teamId: mention.id,
+          includesYou: mention.context.includesYou,
+          memberCount: mention.context.memberCount
+        } : null;
+      }).filter(function (m) {
+        return !!m;
+      });
+    }
+    var payload = buildTypeAheadRenderedPayload(duration, userOrTeamIds, query, teams);
+    fireEvent(payload);
+  };
+};
+
+/**
+ * When a team mention is selected, we render a team link and list of member/user mentions
+ * in editor content
+ */
+var buildNodesForTeamMention = function buildNodesForTeamMention(schema, selectedMention, mentionProvider, sanitizePrivateContent) {
+  var nodes = schema.nodes,
+    marks = schema.marks;
+  var name = selectedMention.name,
+    teamId = selectedMention.id,
+    accessLevel = selectedMention.accessLevel,
+    context = selectedMention.context;
+
+  // build team link
+  var defaultTeamLink = "".concat(window.location.origin, "/people/team/").concat(teamId);
+  var teamLink = context && context.teamLink ? context.teamLink : defaultTeamLink;
+  var teamLinkNode = schema.text(name, [marks.link.create({
+    href: teamLink
+  })]);
+  var openBracketText = schema.text('(');
+  var closeBracketText = schema.text(')');
+  var emptySpaceText = schema.text(' ');
+  var inlineNodes = [teamLinkNode, emptySpaceText, openBracketText];
+  var members = context && context.members ? context.members : [];
+  members.forEach(function (member, index) {
+    var name = member.name,
+      id = member.id;
+    var mentionName = "@".concat(name);
+    var text = sanitizePrivateContent ? '' : mentionName;
+    if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+      mentionProvider.cacheMentionName(id, name);
+    }
+    var userMentionNode = nodes.mention.createChecked({
+      text: text,
+      id: member.id,
+      accessLevel: accessLevel,
+      userType: 'DEFAULT'
+    });
+    inlineNodes.push(userMentionNode);
+    // should not add empty space after the last user mention.
+    if (index !== members.length - 1) {
+      inlineNodes.push(emptySpaceText);
+    }
+  });
+  inlineNodes.push(closeBracketText);
+  return Fragment.fromArray(inlineNodes);
+};
+export var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
+  var sanitizePrivateContent = _ref6.sanitizePrivateContent,
+    mentionInsertDisplayName = _ref6.mentionInsertDisplayName,
+    fireEvent = _ref6.fireEvent,
+    HighlightComponent = _ref6.HighlightComponent;
+  var sessionId = uuid();
+  var firstQueryWithoutResults = null;
+  var subscriptionKeys = new Set();
+  var typeAhead = {
+    id: TypeAheadAvailableNodes.MENTION,
+    trigger: '@',
+    // Custom regex must have a capture group around trigger
+    // so it's possible to use it without needing to scan through all triggers again
+    customRegex: '\\(?(@)',
+    getHighlight: function getHighlight(state) {
+      var CustomHighlightComponent = HighlightComponent;
+      if (CustomHighlightComponent) {
+        return /*#__PURE__*/React.createElement(CustomHighlightComponent, null);
+      }
+      return null;
+    },
+    getItems: function getItems(_ref7) {
+      var query = _ref7.query,
+        editorState = _ref7.editorState;
+      var pluginState = getMentionPluginState(editorState);
+      if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
+        return Promise.resolve([]);
+      }
+      var mentionProvider = pluginState.mentionProvider,
+        contextIdentifierProvider = pluginState.contextIdentifierProvider;
+      return new Promise(function (resolve) {
+        var key = "loadingMentionsForTypeAhead_".concat(uuid());
+        var mentionsSubscribeCallback = function mentionsSubscribeCallback(mentions) {
+          var resultQuery = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+          var stats = arguments.length > 2 ? arguments[2] : undefined;
+          if (query !== resultQuery) {
+            return;
+          }
+          mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
+          var mentionItems = mentions.map(function (mention) {
+            return memoizedToItem.call(mention);
+          });
+          buildAndSendElementsTypeAheadAnalytics(fireEvent)({
+            query: query,
+            mentions: mentions,
+            stats: stats
+          });
+          if (mentions.length === 0 && firstQueryWithoutResults === null) {
+            firstQueryWithoutResults = query;
+          }
+
+          // Growth (El-dorado) experiment design hard requirement
+          if (mentionItems.length <= 2) {
+            var inviteExperimentCohort = mentionProvider.inviteExperimentCohort,
+              userRole = mentionProvider.userRole;
+            fireEvent(buildTypeAheadInviteExposurePayload(sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
+          }
+          if (!mentionProvider.shouldEnableInvite || mentionItems.length > 2) {
+            resolve(mentionItems);
+          } else {
+            var items = withInviteItem({
+              mentionProvider: mentionProvider,
+              firstQueryWithoutResults: firstQueryWithoutResults || '',
+              currentQuery: query,
+              onInviteItemMount: function onInviteItemMount() {
+                fireEvent(buildTypeAheadInviteItemViewedPayload(sessionId, contextIdentifierProvider, mentionProvider.userRole));
+              }
+            })(mentionItems);
+            resolve(items);
+          }
+        };
+        subscriptionKeys.add(key);
+        mentionProvider.subscribe(key, mentionsSubscribeCallback);
+        mentionProvider.filter(query || '', _objectSpread(_objectSpread({}, contextIdentifierProvider), {}, {
+          sessionId: sessionId
+        }));
+      });
+    },
+    onOpen: function onOpen() {
+      firstQueryWithoutResults = null;
+    },
+    selectItem: function selectItem(state, item, insert, _ref8) {
+      var mode = _ref8.mode,
+        stats = _ref8.stats,
+        query = _ref8.query,
+        sourceListItem = _ref8.sourceListItem;
+      var schema = state.schema;
+      var pluginState = getMentionPluginState(state);
+      var mentionProvider = pluginState.mentionProvider;
+      var _item$mention = item.mention,
+        id = _item$mention.id,
+        name = _item$mention.name,
+        nickname = _item$mention.nickname,
+        accessLevel = _item$mention.accessLevel,
+        userType = _item$mention.userType;
+      var trimmedNickname = nickname && nickname.startsWith('@') ? nickname.slice(1) : nickname;
+      var renderName = mentionInsertDisplayName || !trimmedNickname ? name : trimmedNickname;
+      var mentionContext = _objectSpread(_objectSpread({}, pluginState.contextIdentifierProvider), {}, {
+        sessionId: sessionId
+      });
+      if (mentionProvider && !isInviteItem(item.mention)) {
+        mentionProvider.recordMentionSelection(item.mention, mentionContext);
+      }
+
+      // use same timer as StatsModifier
+      var pickerElapsedTime = stats.startedAt ? performance.now() - stats.startedAt : 0;
+      if (mentionProvider && mentionProvider.shouldEnableInvite && isInviteItem(item.mention)) {
+        // Don't fire event and the callback with selection by space press
+        if (mode !== 'space') {
+          fireEvent(buildTypeAheadInviteItemClickedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, query, pluginState.contextIdentifierProvider, mentionProvider.userRole));
+          if (mentionProvider.onInviteItemClick) {
+            mentionProvider.onInviteItemClick('mention');
+          }
+        }
+        return state.tr;
+      }
+      fireEvent(buildTypeAheadInsertedPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, sourceListItem.map(function (x) {
+        return x.mention;
+      }), query, pluginState.contextIdentifierProvider));
+      sessionId = uuid();
+      if (mentionProvider && isTeamType(userType)) {
+        return insert(buildNodesForTeamMention(schema, item.mention, mentionProvider, sanitizePrivateContent));
+      }
+
+      // Don't insert into document if document data is sanitized.
+      var text = sanitizePrivateContent ? '' : "@".concat(renderName);
+      if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+        // Cache (locally) for later rendering
+        mentionProvider.cacheMentionName(id, renderName);
+      }
+      var mentionNode = schema.nodes.mention.createChecked({
+        text: text,
+        id: id,
+        accessLevel: accessLevel,
+        userType: userType === 'DEFAULT' ? null : userType
+      });
+      var space = schema.text(' ');
+      return insert(Fragment.from([mentionNode, space]));
+    },
+    dismiss: function dismiss(_ref9) {
+      var editorState = _ref9.editorState,
+        query = _ref9.query,
+        stats = _ref9.stats,
+        wasItemInserted = _ref9.wasItemInserted;
+      firstQueryWithoutResults = null;
+      var pickerElapsedTime = stats.startedAt ? performance.now() - stats.startedAt : 0;
+      if (!wasItemInserted) {
+        fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      }
+      var pluginState = getMentionPluginState(editorState);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        var mentionProvider = pluginState.mentionProvider;
+        var _iterator = _createForOfIteratorHelper(subscriptionKeys),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var key = _step.value;
+            mentionProvider.unsubscribe(key);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
+      subscriptionKeys.clear();
+      sessionId = uuid();
+    }
+  };
+  return typeAhead;
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
+import React, { useCallback, useEffect } from 'react';
+import { jsx } from '@emotion/react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import AddIcon from '@atlaskit/icon/glyph/add';
+import { N300 } from '@atlaskit/theme/colors';
+import { messages } from '../../messages';
+import { avatarStyle, capitalizedStyle, mentionItemSelectedStyle, mentionItemStyle, nameSectionStyle, rowStyle } from './styles';
+export var INVITE_ITEM_DESCRIPTION = {
+  id: 'invite-teammate'
+};
+var leftClick = function leftClick(event) {
+  return event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+};
+var InviteItem = function InviteItem(_ref) {
+  var productName = _ref.productName,
+    onMount = _ref.onMount,
+    onMouseEnter = _ref.onMouseEnter,
+    onSelection = _ref.onSelection,
+    selected = _ref.selected,
+    userRole = _ref.userRole,
+    intl = _ref.intl;
+  var onSelected = useCallback(function (event) {
+    if (leftClick(event) && onSelection) {
+      event.preventDefault();
+      onSelection(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onSelection]);
+  var onItemMouseEnter = useCallback(function (event) {
+    if (onMouseEnter) {
+      onMouseEnter(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onMouseEnter]);
+  useEffect(function () {
+    if (onMount) {
+      onMount();
+    }
+  }, [onMount]);
+  return jsx("div", {
+    css: [mentionItemStyle, selected && mentionItemSelectedStyle],
+    onMouseDown: onSelected,
+    onMouseEnter: onItemMouseEnter,
+    "data-id": INVITE_ITEM_DESCRIPTION.id
+  }, jsx("div", {
+    css: rowStyle
+  }, jsx("span", {
+    css: avatarStyle
+  }, jsx(AddIcon, {
+    label: intl.formatMessage(messages.mentionsAddLabel),
+    primaryColor: "var(--ds-icon-subtle, ".concat(N300, ")")
+  })), jsx("div", {
+    css: nameSectionStyle,
+    "data-testid": "name-section"
+  }, jsx(FormattedMessage, _extends({}, messages.inviteItemTitle, {
+    values: {
+      userRole: userRole || 'basic',
+      productName: jsx("span", {
+        css: capitalizedStyle,
+        "data-testid": "capitalized-message"
+      }, productName)
+    }
+  })))));
+};
+export default injectIntl(InviteItem);

package/dist/esm/ui/InviteItem/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { css } from '@emotion/react';
+import { N30, N300 } from '@atlaskit/theme/colors';
+export var ROW_SIDE_PADDING = 14;
+export var rowStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  overflow: hidden;\n  padding: ", " ", "px;\n  text-overflow: ellipsis;\n  vertical-align: middle;\n"])), "var(--ds-space-075, 6px)", ROW_SIDE_PADDING);
+export var AVATAR_HEIGHT = 36;
+export var avatarStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: initial;\n  opacity: inherit;\n  width: 36px;\n  height: ", "px;\n\n  > span {\n    width: 24px;\n    height: 24px;\n    padding: ", ";\n  }\n"])), AVATAR_HEIGHT, "var(--ds-space-075, 6px)");
+export var nameSectionStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(N300, ")"));
+export var mentionItemStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
+export var mentionItemSelectedStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")"));
+export var capitalizedStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  text-transform: capitalize;\n"])));

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

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+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';
+// 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);
+    }
+  }
+};
+var Mention = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Mention, _PureComponent);
+  var _super = _createSuper(Mention);
+  function Mention(props) {
+    var _this;
+    _classCallCheck(this, Mention);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "renderWithProvider", function (providers) {
+      var _this$props = _this.props,
+        accessLevel = _this$props.accessLevel,
+        eventHandlers = _this$props.eventHandlers,
+        id = _this$props.id,
+        text = _this$props.text;
+      var _ref = providers,
+        mentionProvider = _ref.mentionProvider;
+      var actionHandlers = {};
+      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+      });
+      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+        id: id,
+        text: text,
+        accessLevel: accessLevel,
+        mentionProvider: mentionProvider
+      }, actionHandlers));
+    });
+    _this.providerFactory = props.providers || new ProviderFactory();
+    return _this;
+  }
+  _createClass(Mention, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // Workaround an issue where the selection is not updated immediately after adding
+      // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+      // This affects both insertion and paste behaviour it is applied to the component.
+      // https://product-fabric.atlassian.net/browse/ED-14859
+      if (browser.safari) {
+        setTimeout(refreshBrowserSelection, 0);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (!this.props.providers) {
+        // new ProviderFactory is created if no `providers` has been set
+        // in this case when component is unmounted it's safe to destroy this providerFactory
+        this.providerFactory.destroy();
+      }
+    }
+  }, {
+    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/esm/ui/ToolbarMention/index.js

@@ -0,0 +1,53 @@
+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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React, { PureComponent } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import { messages } from '../../messages';
+var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ToolbarMention, _PureComponent);
+  var _super = _createSuper(ToolbarMention);
+  function ToolbarMention() {
+    var _this;
+    _classCallCheck(this, ToolbarMention);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleInsertMention", function () {
+      if (!_this.props.editorView) {
+        return false;
+      }
+      _this.props.onInsertMention();
+      return true;
+    });
+    return _this;
+  }
+  _createClass(ToolbarMention, [{
+    key: "render",
+    value: function render() {
+      var mentionStringTranslated = this.props.intl.formatMessage(messages.mentionsIconLabel);
+      return /*#__PURE__*/React.createElement(ToolbarButton, {
+        testId: this.props.testId,
+        buttonId: TOOLBAR_BUTTON.MENTION,
+        spacing: "none",
+        onClick: this.handleInsertMention,
+        disabled: this.props.isDisabled,
+        title: mentionStringTranslated + '@',
+        iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
+          label: mentionStringTranslated
+        })
+      });
+    }
+  }]);
+  return ToolbarMention;
+}(PureComponent);
+export default injectIntl(ToolbarMention);

package/dist/esm/utils.js

@@ -0,0 +1,26 @@
+import { INVITE_ITEM_DESCRIPTION } from './ui/InviteItem';
+export var isTeamType = function isTeamType(userType) {
+  return userType === 'TEAM';
+};
+export var isTeamStats = function isTeamStats(stat) {
+  return stat && !isNaN(stat.teamMentionDuration);
+};
+export var isInviteItem = function isInviteItem(mention) {
+  return mention && mention.id === INVITE_ITEM_DESCRIPTION.id;
+};
+
+/**
+ * Actions
+ */
+export var shouldKeepInviteItem = function shouldKeepInviteItem(query, firstQueryWithoutResults) {
+  if (!firstQueryWithoutResults) {
+    return true;
+  }
+  var lastIndexWithResults = firstQueryWithoutResults.length - 1;
+  var suffix = query.slice(lastIndexWithResults);
+  if (query[lastIndexWithResults - 1] === ' ') {
+    suffix = ' ' + suffix;
+  }
+  var depletedExtraWords = /\s[^\s]+\s/.test(suffix);
+  return !depletedExtraWords;
+};

package/dist/types/analytics.d.ts

@@ -0,0 +1,13 @@
+import type { EventType, GasPayload } from '@atlaskit/analytics-gas-types';
+import type { ContextIdentifierProvider } from '@atlaskit/editor-common/provider-factory';
+import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
+import type { InviteExperimentCohort, UserRole } from '@atlaskit/mention';
+import type { MentionDescription } from '@atlaskit/mention/resource';
+import type { TeamInfoAttrAnalytics } from './types';
+export declare const buildAnalyticsPayload: (actionSubject: string, action: string, eventType: EventType, sessionId: string, otherAttributes?: {}, tags?: Array<string>) => GasPayload;
+export declare const buildTypeAheadCancelPayload: (duration: number, upKeyCount: number, downKeyCount: number, sessionId: string, query?: string) => GasPayload;
+export declare const buildTypeAheadInviteItemViewedPayload: (sessionId: string, contextIdentifierProvider?: ContextIdentifierProvider, userRole?: UserRole) => GasPayload;
+export declare const buildTypeAheadInviteExposurePayload: (sessionId: string, contextIdentifierProvider?: ContextIdentifierProvider, inviteExperimentCohort?: InviteExperimentCohort, userRole?: UserRole) => GasPayload;
+export declare const buildTypeAheadInviteItemClickedPayload: (duration: number, upKeyCount: number, downKeyCount: number, sessionId: string, insertType: SelectItemMode, query?: string, contextIdentifierProvider?: ContextIdentifierProvider, userRole?: UserRole) => GasPayload;
+export declare const buildTypeAheadInsertedPayload: (duration: number, upKeyCount: number, downKeyCount: number, sessionId: string, insertType: SelectItemMode, mention: MentionDescription, mentionList?: MentionDescription[], query?: string, contextIdentifierProvider?: ContextIdentifierProvider) => GasPayload;
+export declare const buildTypeAheadRenderedPayload: (duration: number, userIds: Array<string> | null, query: string, teams: TeamInfoAttrAnalytics[] | null) => GasPayload;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { mentionsPlugin } from './plugin';
+export type { MentionPluginConfig, MentionsPlugin } from './types';

package/dist/types/messages.d.ts

@@ -0,0 +1,22 @@
+export declare const messages: {
+    inviteItemTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    mentionsAddLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    mentionsIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    mentionsNodeLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+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 & {
+    options: MentionPluginOptions | undefined;
+    providerFactory: ProviderFactory;
+};
+export declare const MentionNodeView: React.FC<Props>;

package/dist/types/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { MentionsPlugin } from './types';
+declare const mentionsPlugin: MentionsPlugin;
+export { mentionsPlugin };

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

@@ -0,0 +1,3 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { MentionPluginState } from '../types';
+export declare const mentionPluginKey: PluginKey<MentionPluginState>;