@atlaskit/editor-plugin-mentions 0.1.0

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

@@ -0,0 +1,338 @@
+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';
+const createInviteItem = ({
+  mentionProvider,
+  onInviteItemMount
+}) => ({
+  title: INVITE_ITEM_DESCRIPTION.id,
+  render: ({
+    isSelected,
+    onClick,
+    onHover
+  }) => /*#__PURE__*/React.createElement(InviteItem, {
+    productName: mentionProvider ? mentionProvider.productName : undefined,
+    selected: isSelected,
+    onMount: onInviteItemMount,
+    onMouseEnter: onHover,
+    onSelection: onClick,
+    userRole: mentionProvider.userRole
+  }),
+  mention: INVITE_ITEM_DESCRIPTION
+});
+const withInviteItem = ({
+  mentionProvider,
+  firstQueryWithoutResults,
+  currentQuery,
+  onInviteItemMount
+}) => mentionItems => {
+  const inviteItem = createInviteItem({
+    mentionProvider,
+    onInviteItemMount
+  });
+  const keepInviteItem = shouldKeepInviteItem(currentQuery, firstQueryWithoutResults);
+  if (mentionItems.length === 0) {
+    return keepInviteItem ? [inviteItem] : [];
+  }
+  return [...mentionItems,
+  // invite item should be shown at the bottom
+  inviteItem];
+};
+export const mentionToTypeaheadItem = mention => {
+  return {
+    title: mention.id,
+    render: ({
+      isSelected,
+      onClick,
+      onHover
+    }) => /*#__PURE__*/React.createElement(MentionItem, {
+      mention: mention,
+      selected: isSelected,
+      onMouseEnter: onHover,
+      onSelection: onClick
+    }),
+    getCustomComponentHeight: () => {
+      return MENTION_ITEM_HEIGHT;
+    },
+    mention
+  };
+};
+export function memoize(fn) {
+  // Cache results here
+  const seen = new Map();
+  function memoized(mention) {
+    // Check cache for hits
+    const hit = seen.get(mention.id);
+    if (hit) {
+      return hit;
+    }
+
+    // Generate new result and cache it
+    const result = fn(mention);
+    seen.set(mention.id, result);
+    return result;
+  }
+  return {
+    call: memoized,
+    clear: seen.clear.bind(seen)
+  };
+}
+const memoizedToItem = memoize(mentionToTypeaheadItem);
+const buildAndSendElementsTypeAheadAnalytics = fireEvent => ({
+  query,
+  mentions,
+  stats
+}) => {
+  let duration = 0;
+  let userOrTeamIds = null;
+  let 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(mention => mention.id);
+  } else {
+    // is from dedicated team-only mention endpoint
+    duration = stats && stats.teamMentionDuration;
+    userOrTeamIds = null;
+    teams = mentions.map(mention => isTeamType(mention.userType) ? {
+      teamId: mention.id,
+      includesYou: mention.context.includesYou,
+      memberCount: mention.context.memberCount
+    } : null).filter(m => !!m);
+  }
+  const 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
+ */
+const buildNodesForTeamMention = (schema, selectedMention, mentionProvider, sanitizePrivateContent) => {
+  const {
+    nodes,
+    marks
+  } = schema;
+  const {
+    name,
+    id: teamId,
+    accessLevel,
+    context
+  } = selectedMention;
+
+  // build team link
+  const defaultTeamLink = `${window.location.origin}/people/team/${teamId}`;
+  const teamLink = context && context.teamLink ? context.teamLink : defaultTeamLink;
+  const teamLinkNode = schema.text(name, [marks.link.create({
+    href: teamLink
+  })]);
+  const openBracketText = schema.text('(');
+  const closeBracketText = schema.text(')');
+  const emptySpaceText = schema.text(' ');
+  const inlineNodes = [teamLinkNode, emptySpaceText, openBracketText];
+  const members = context && context.members ? context.members : [];
+  members.forEach((member, index) => {
+    const {
+      name,
+      id
+    } = member;
+    const mentionName = `@${name}`;
+    const text = sanitizePrivateContent ? '' : mentionName;
+    if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+      mentionProvider.cacheMentionName(id, name);
+    }
+    const userMentionNode = nodes.mention.createChecked({
+      text,
+      id: member.id,
+      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 const createTypeAheadConfig = ({
+  sanitizePrivateContent,
+  mentionInsertDisplayName,
+  fireEvent,
+  HighlightComponent
+}) => {
+  let sessionId = uuid();
+  let firstQueryWithoutResults = null;
+  const subscriptionKeys = new Set();
+  const 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: state => {
+      const CustomHighlightComponent = HighlightComponent;
+      if (CustomHighlightComponent) {
+        return /*#__PURE__*/React.createElement(CustomHighlightComponent, null);
+      }
+      return null;
+    },
+    getItems({
+      query,
+      editorState
+    }) {
+      const pluginState = getMentionPluginState(editorState);
+      if (!(pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider)) {
+        return Promise.resolve([]);
+      }
+      const {
+        mentionProvider,
+        contextIdentifierProvider
+      } = pluginState;
+      return new Promise(resolve => {
+        const key = `loadingMentionsForTypeAhead_${uuid()}`;
+        const mentionsSubscribeCallback = (mentions, resultQuery = '', stats) => {
+          if (query !== resultQuery) {
+            return;
+          }
+          mentionProvider.unsubscribe(key);
+          subscriptionKeys.delete(key);
+          const mentionItems = mentions.map(mention => memoizedToItem.call(mention));
+          buildAndSendElementsTypeAheadAnalytics(fireEvent)({
+            query,
+            mentions,
+            stats
+          });
+          if (mentions.length === 0 && firstQueryWithoutResults === null) {
+            firstQueryWithoutResults = query;
+          }
+
+          // Growth (El-dorado) experiment design hard requirement
+          if (mentionItems.length <= 2) {
+            const {
+              inviteExperimentCohort,
+              userRole
+            } = mentionProvider;
+            fireEvent(buildTypeAheadInviteExposurePayload(sessionId, contextIdentifierProvider, inviteExperimentCohort, userRole));
+          }
+          if (!mentionProvider.shouldEnableInvite || mentionItems.length > 2) {
+            resolve(mentionItems);
+          } else {
+            const items = withInviteItem({
+              mentionProvider,
+              firstQueryWithoutResults: firstQueryWithoutResults || '',
+              currentQuery: query,
+              onInviteItemMount: () => {
+                fireEvent(buildTypeAheadInviteItemViewedPayload(sessionId, contextIdentifierProvider, mentionProvider.userRole));
+              }
+            })(mentionItems);
+            resolve(items);
+          }
+        };
+        subscriptionKeys.add(key);
+        mentionProvider.subscribe(key, mentionsSubscribeCallback);
+        mentionProvider.filter(query || '', {
+          ...contextIdentifierProvider,
+          sessionId
+        });
+      });
+    },
+    onOpen: () => {
+      firstQueryWithoutResults = null;
+    },
+    selectItem(state, item, insert, {
+      mode,
+      stats,
+      query,
+      sourceListItem
+    }) {
+      const {
+        schema
+      } = state;
+      const pluginState = getMentionPluginState(state);
+      const {
+        mentionProvider
+      } = pluginState;
+      const {
+        id,
+        name,
+        nickname,
+        accessLevel,
+        userType
+      } = item.mention;
+      const trimmedNickname = nickname && nickname.startsWith('@') ? nickname.slice(1) : nickname;
+      const renderName = mentionInsertDisplayName || !trimmedNickname ? name : trimmedNickname;
+      const mentionContext = {
+        ...pluginState.contextIdentifierProvider,
+        sessionId
+      };
+      if (mentionProvider && !isInviteItem(item.mention)) {
+        mentionProvider.recordMentionSelection(item.mention, mentionContext);
+      }
+
+      // use same timer as StatsModifier
+      const 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(x => 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.
+      const text = sanitizePrivateContent ? '' : `@${renderName}`;
+      if (sanitizePrivateContent && isResolvingMentionProvider(mentionProvider)) {
+        // Cache (locally) for later rendering
+        mentionProvider.cacheMentionName(id, renderName);
+      }
+      const mentionNode = schema.nodes.mention.createChecked({
+        text,
+        id,
+        accessLevel,
+        userType: userType === 'DEFAULT' ? null : userType
+      });
+      const space = schema.text(' ');
+      return insert(Fragment.from([mentionNode, space]));
+    },
+    dismiss({
+      editorState,
+      query,
+      stats,
+      wasItemInserted
+    }) {
+      firstQueryWithoutResults = null;
+      const pickerElapsedTime = stats.startedAt ? performance.now() - stats.startedAt : 0;
+      if (!wasItemInserted) {
+        fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      }
+      const pluginState = getMentionPluginState(editorState);
+      if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {
+        const mentionProvider = pluginState.mentionProvider;
+        for (let key of subscriptionKeys) {
+          mentionProvider.unsubscribe(key);
+        }
+      }
+      subscriptionKeys.clear();
+      sessionId = uuid();
+    }
+  };
+  return typeAhead;
+};

package/dist/es2019/types.js

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

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

@@ -0,0 +1,67 @@
+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 const INVITE_ITEM_DESCRIPTION = {
+  id: 'invite-teammate'
+};
+const leftClick = event => {
+  return event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+};
+const InviteItem = ({
+  productName,
+  onMount,
+  onMouseEnter,
+  onSelection,
+  selected,
+  userRole,
+  intl
+}) => {
+  const onSelected = useCallback(event => {
+    if (leftClick(event) && onSelection) {
+      event.preventDefault();
+      onSelection(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onSelection]);
+  const onItemMouseEnter = useCallback(event => {
+    if (onMouseEnter) {
+      onMouseEnter(INVITE_ITEM_DESCRIPTION, event);
+    }
+  }, [onMouseEnter]);
+  useEffect(() => {
+    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, ${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/es2019/ui/InviteItem/styles.js

@@ -0,0 +1,47 @@
+import { css } from '@emotion/react';
+import { N30, N300 } from '@atlaskit/theme/colors';
+export const ROW_SIDE_PADDING = 14;
+export const rowStyle = css`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow: hidden;
+  padding: ${"var(--ds-space-075, 6px)"} ${ROW_SIDE_PADDING}px;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+`;
+export const AVATAR_HEIGHT = 36;
+export const avatarStyle = css`
+  position: relative;
+  flex: initial;
+  opacity: inherit;
+  width: 36px;
+  height: ${AVATAR_HEIGHT}px;
+
+  > span {
+    width: 24px;
+    height: 24px;
+    padding: ${"var(--ds-space-075, 6px)"};
+  }
+`;
+export const nameSectionStyle = css`
+  flex: 1;
+  min-width: 0;
+  margin-left: 14px;
+  color: ${`var(--ds-text-subtle, ${N300})`};
+  opacity: inherit;
+`;
+export const mentionItemStyle = css`
+  background-color: transparent;
+  display: block;
+  overflow: hidden;
+  list-style-type: none;
+  cursor: pointer;
+`;
+export const mentionItemSelectedStyle = css`
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N30})`};
+`;
+export const capitalizedStyle = css`
+  text-transform: capitalize;
+`;

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

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from 'react';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { browser } from '@atlaskit/editor-common/utils';
+import { ResourcedMention } from '@atlaskit/mention/element';
+// Workaround for a firefox issue where dom selection is off sync
+// https://product-fabric.atlassian.net/browse/ED-12442
+const refreshBrowserSelection = () => {
+  const domSelection = window.getSelection();
+  if (domSelection) {
+    const domRange = domSelection && domSelection.rangeCount === 1 && domSelection.getRangeAt(0).cloneRange();
+    if (domRange) {
+      domSelection.removeAllRanges();
+      domSelection.addRange(domRange);
+    }
+  }
+};
+export default class Mention extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "renderWithProvider", providers => {
+      const {
+        accessLevel,
+        eventHandlers,
+        id,
+        text
+      } = this.props;
+      const {
+        mentionProvider
+      } = providers;
+      const actionHandlers = {};
+      ['onClick', 'onMouseEnter', 'onMouseLeave'].forEach(handler => {
+        actionHandlers[handler] = eventHandlers && eventHandlers[handler] || (() => {});
+      });
+      return /*#__PURE__*/React.createElement(ResourcedMention, _extends({
+        id: id,
+        text: text,
+        accessLevel: accessLevel,
+        mentionProvider: mentionProvider
+      }, actionHandlers));
+    });
+    this.providerFactory = props.providers || new ProviderFactory();
+  }
+  componentDidMount() {
+    // Workaround an issue where the selection is not updated immediately after adding
+    // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+    // This affects both insertion and paste behaviour it is applied to the component.
+    // https://product-fabric.atlassian.net/browse/ED-14859
+    if (browser.safari) {
+      setTimeout(refreshBrowserSelection, 0);
+    }
+  }
+  componentWillUnmount() {
+    if (!this.props.providers) {
+      // new ProviderFactory is created if no `providers` has been set
+      // in this case when component is unmounted it's safe to destroy this providerFactory
+      this.providerFactory.destroy();
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['mentionProvider', 'profilecardProvider'],
+      providerFactory: this.providerFactory,
+      renderNode: this.renderWithProvider
+    });
+  }
+}
+_defineProperty(Mention, "displayName", 'Mention');

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

@@ -0,0 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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';
+class ToolbarMention extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleInsertMention", () => {
+      if (!this.props.editorView) {
+        return false;
+      }
+      this.props.onInsertMention();
+      return true;
+    });
+  }
+  render() {
+    const 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
+      })
+    });
+  }
+}
+export default injectIntl(ToolbarMention);

package/dist/es2019/utils.js

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