@atlaskit/editor-plugin-mentions 0.1.0

package/dist/cjs/pm-plugins/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.canMentionBeCreatedInRange = void 0;
+exports.getMentionPluginState = getMentionPluginState;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _key = require("./key");
+function getMentionPluginState(state) {
+  return _key.mentionPluginKey.getState(state);
+}
+var canMentionBeCreatedInRange = exports.canMentionBeCreatedInRange = function canMentionBeCreatedInRange(from, to) {
+  return function (state) {
+    var $from = state.doc.resolve(from);
+    var $to = state.doc.resolve(to);
+    var mention = state.schema.nodes.mention.createChecked();
+    if ($from.parent === $to.parent && (0, _utils.canInsert)($from, mention)) {
+      return true;
+    }
+    return false;
+  };
+};

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

@@ -0,0 +1,362 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTypeAheadConfig = void 0;
+exports.memoize = memoize;
+exports.mentionToTypeaheadItem = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _uuid = _interopRequireDefault(require("uuid"));
+var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _item = require("@atlaskit/mention/item");
+var _resource = require("@atlaskit/mention/resource");
+var _analytics = require("../analytics");
+var _utils = require("../pm-plugins/utils");
+var _InviteItem = _interopRequireWildcard(require("../ui/InviteItem"));
+var _utils2 = require("../utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
+var createInviteItem = function createInviteItem(_ref) {
+  var mentionProvider = _ref.mentionProvider,
+    onInviteItemMount = _ref.onInviteItemMount;
+  return {
+    title: _InviteItem.INVITE_ITEM_DESCRIPTION.id,
+    render: function render(_ref2) {
+      var isSelected = _ref2.isSelected,
+        onClick = _ref2.onClick,
+        onHover = _ref2.onHover;
+      return /*#__PURE__*/_react.default.createElement(_InviteItem.default, {
+        productName: mentionProvider ? mentionProvider.productName : undefined,
+        selected: isSelected,
+        onMount: onInviteItemMount,
+        onMouseEnter: onHover,
+        onSelection: onClick,
+        userRole: mentionProvider.userRole
+      });
+    },
+    mention: _InviteItem.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 = (0, _utils2.shouldKeepInviteItem)(currentQuery, firstQueryWithoutResults);
+    if (mentionItems.length === 0) {
+      return keepInviteItem ? [inviteItem] : [];
+    }
+    return [].concat((0, _toConsumableArray2.default)(mentionItems), [
+    // invite item should be shown at the bottom
+    inviteItem]);
+  };
+};
+var mentionToTypeaheadItem = exports.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.default.createElement(_item.MentionItem, {
+        mention: mention,
+        selected: isSelected,
+        onMouseEnter: onHover,
+        onSelection: onClick
+      });
+    },
+    getCustomComponentHeight: function getCustomComponentHeight() {
+      return _item.MENTION_ITEM_HEIGHT;
+    },
+    mention: mention
+  };
+};
+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 (!(0, _utils2.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 (0, _utils2.isTeamType)(mention.userType) ? {
+          teamId: mention.id,
+          includesYou: mention.context.includesYou,
+          memberCount: mention.context.memberCount
+        } : null;
+      }).filter(function (m) {
+        return !!m;
+      });
+    }
+    var payload = (0, _analytics.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 && (0, _resource.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 _model.Fragment.fromArray(inlineNodes);
+};
+var createTypeAheadConfig = exports.createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
+  var sanitizePrivateContent = _ref6.sanitizePrivateContent,
+    mentionInsertDisplayName = _ref6.mentionInsertDisplayName,
+    fireEvent = _ref6.fireEvent,
+    HighlightComponent = _ref6.HighlightComponent;
+  var sessionId = (0, _uuid.default)();
+  var firstQueryWithoutResults = null;
+  var subscriptionKeys = new Set();
+  var typeAhead = {
+    id: _typeAhead.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.default.createElement(CustomHighlightComponent, null);
+      }
+      return null;
+    },
+    getItems: function getItems(_ref7) {
+      var query = _ref7.query,
+        editorState = _ref7.editorState;
+      var pluginState = (0, _utils.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((0, _uuid.default)());
+        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((0, _analytics.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((0, _analytics.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 = (0, _utils.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 && !(0, _utils2.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 && (0, _utils2.isInviteItem)(item.mention)) {
+        // Don't fire event and the callback with selection by space press
+        if (mode !== 'space') {
+          fireEvent((0, _analytics.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((0, _analytics.buildTypeAheadInsertedPayload)(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, mode, item.mention, sourceListItem.map(function (x) {
+        return x.mention;
+      }), query, pluginState.contextIdentifierProvider));
+      sessionId = (0, _uuid.default)();
+      if (mentionProvider && (0, _utils2.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 && (0, _resource.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(_model.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((0, _analytics.buildTypeAheadCancelPayload)(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      }
+      var pluginState = (0, _utils.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 = (0, _uuid.default)();
+    }
+  };
+  return typeAhead;
+};

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.INVITE_ITEM_DESCRIPTION = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../messages");
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+var INVITE_ITEM_DESCRIPTION = exports.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 = (0, _react.useCallback)(function (event) {
+    if (leftClick(event) && onSelection) {
+      event.preventDefault();
+      onSelection(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onSelection]);
+  var onItemMouseEnter = (0, _react.useCallback)(function (event) {
+    if (onMouseEnter) {
+      onMouseEnter(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onMouseEnter]);
+  (0, _react.useEffect)(function () {
+    if (onMount) {
+      onMount();
+    }
+  }, [onMount]);
+  return (0, _react2.jsx)("div", {
+    css: [_styles.mentionItemStyle, selected && _styles.mentionItemSelectedStyle],
+    onMouseDown: onSelected,
+    onMouseEnter: onItemMouseEnter,
+    "data-id": INVITE_ITEM_DESCRIPTION.id
+  }, (0, _react2.jsx)("div", {
+    css: _styles.rowStyle
+  }, (0, _react2.jsx)("span", {
+    css: _styles.avatarStyle
+  }, (0, _react2.jsx)(_add.default, {
+    label: intl.formatMessage(_messages.messages.mentionsAddLabel),
+    primaryColor: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
+  })), (0, _react2.jsx)("div", {
+    css: _styles.nameSectionStyle,
+    "data-testid": "name-section"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.inviteItemTitle, {
+    values: {
+      userRole: userRole || 'basic',
+      productName: (0, _react2.jsx)("span", {
+        css: _styles.capitalizedStyle,
+        "data-testid": "capitalized-message"
+      }, productName)
+    }
+  })))));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(InviteItem);

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rowStyle = exports.nameSectionStyle = exports.mentionItemStyle = exports.mentionItemSelectedStyle = exports.capitalizedStyle = exports.avatarStyle = exports.ROW_SIDE_PADDING = exports.AVATAR_HEIGHT = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var ROW_SIDE_PADDING = exports.ROW_SIDE_PADDING = 14;
+var rowStyle = exports.rowStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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);
+var AVATAR_HEIGHT = exports.AVATAR_HEIGHT = 36;
+var avatarStyle = exports.avatarStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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)");
+var nameSectionStyle = exports.nameSectionStyle = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-width: 0;\n  margin-left: 14px;\n  color: ", ";\n  opacity: inherit;\n"])), "var(--ds-text-subtle, ".concat(_colors.N300, ")"));
+var mentionItemStyle = exports.mentionItemStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  display: block;\n  overflow: hidden;\n  list-style-type: none;\n  cursor: pointer;\n"])));
+var mentionItemSelectedStyle = exports.mentionItemSelectedStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")"));
+var capitalizedStyle = exports.capitalizedStyle = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: capitalize;\n"])));

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _utils = require("@atlaskit/editor-common/utils");
+var _element = require("@atlaskit/mention/element");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { 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; } }
+// 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 = exports.default = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(Mention, _PureComponent);
+  var _super = _createSuper(Mention);
+  function Mention(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, Mention);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderWithProvider", function (providers) {
+      var _this$props = _this.props,
+        accessLevel = _this$props.accessLevel,
+        eventHandlers = _this$props.eventHandlers,
+        id = _this$props.id,
+        text = _this$props.text;
+      var _ref = providers,
+        mentionProvider = _ref.mentionProvider;
+      var actionHandlers = {};
+      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(function (handler) {
+        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || function () {};
+      });
+      return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, (0, _extends2.default)({
+        id: id,
+        text: text,
+        accessLevel: accessLevel,
+        mentionProvider: mentionProvider
+      }, actionHandlers));
+    });
+    _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
+    return _this;
+  }
+  (0, _createClass2.default)(Mention, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // Workaround an issue where the selection is not updated immediately after adding
+      // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+      // This affects both insertion and paste behaviour it is applied to the component.
+      // https://product-fabric.atlassian.net/browse/ED-14859
+      if (_utils.browser.safari) {
+        setTimeout(refreshBrowserSelection, 0);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (!this.props.providers) {
+        // new ProviderFactory is created if no `providers` has been set
+        // in this case when component is unmounted it's safe to destroy this providerFactory
+        this.providerFactory.destroy();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+        providers: ['mentionProvider', 'profilecardProvider'],
+        providerFactory: this.providerFactory,
+        renderNode: this.renderWithProvider
+      });
+    }
+  }]);
+  return Mention;
+}(_react.PureComponent);
+(0, _defineProperty2.default)(Mention, "displayName", 'Mention');

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _mention = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/mention"));
+var _messages = require("../../messages");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { 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; } }
+var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(ToolbarMention, _PureComponent);
+  var _super = _createSuper(ToolbarMention);
+  function ToolbarMention() {
+    var _this;
+    (0, _classCallCheck2.default)(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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInsertMention", function () {
+      if (!_this.props.editorView) {
+        return false;
+      }
+      _this.props.onInsertMention();
+      return true;
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ToolbarMention, [{
+    key: "render",
+    value: function render() {
+      var mentionStringTranslated = this.props.intl.formatMessage(_messages.messages.mentionsIconLabel);
+      return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+        testId: this.props.testId,
+        buttonId: _uiMenu.TOOLBAR_BUTTON.MENTION,
+        spacing: "none",
+        onClick: this.handleInsertMention,
+        disabled: this.props.isDisabled,
+        title: mentionStringTranslated + '@',
+        iconBefore: /*#__PURE__*/_react.default.createElement(_mention.default, {
+          label: mentionStringTranslated
+        })
+      });
+    }
+  }]);
+  return ToolbarMention;
+}(_react.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ToolbarMention);