Add type ahead to mentions

api/queries/search/searchUsers.js

@@ -7,36 +7,38 @@ import { trackQueue } from 'shared/bull/queues';
 import { events } from 'shared/analytics';
 
 export default (args: Args, { loaders, user }: GraphQLContext) => {
-  const { queryString, filter } = args;
-  const searchFilter = filter;
+  // const { queryString, filter } = args;
+  // const searchFilter = filter;
 
-  // if we are searching for community members, find *everyone*
-  const hitsPerPage = searchFilter && searchFilter.communityId ? 100000 : 20;
+  // // if we are searching for community members, find *everyone*
+  // const hitsPerPage = searchFilter && searchFilter.communityId ? 100000 : 20;
 
-  return usersSearchIndex
-    .search({ query: queryString, hitsPerPage })
-    .then(content => {
-      const event =
-        searchFilter && searchFilter.communityId
-          ? events.SEARCHED_COMMUNITY_MEMBERS
-          : events.SEARCHED_USERS;
+  // return usersSearchIndex
+  //   .search({ query: queryString, hitsPerPage })
+  //   .then(content => {
+  //     const event =
+  //       searchFilter && searchFilter.communityId
+  //         ? events.SEARCHED_COMMUNITY_MEMBERS
+  //         : events.SEARCHED_USERS;
 
-      if (user && user.id) {
-        trackQueue.add({
-          userId: user.id,
-          event,
-          properties: {
-            queryString,
-            hitsCount: content.hits ? content.hits.length : 0,
-          },
-        });
-      }
+  //     if (user && user.id) {
+  //       trackQueue.add({
+  //         userId: user.id,
+  //         event,
+  //         properties: {
+  //           queryString,
+  //           hitsCount: content.hits ? content.hits.length : 0,
+  //         },
+  //       });
+  //     }
 
-      if (!content.hits || content.hits.length === 0) return [];
+  //     if (!content.hits || content.hits.length === 0) return [];
 
-      const userIds = content.hits.map(o => o.objectID);
-      return loaders.user.loadMany(userIds);
-    })
+  //     const userIds = content.hits.map(o => o.objectID);
+  //   })
+  // TODO: revert entire file.  Mocking this out to return two known users in the test fixtures right now
+  return loaders.user
+    .loadMany(['2', '3', '4', '5', '6'])
     .then(data => data.filter(Boolean))
     .catch(err => {
       console.error('err', err);

package.json

@@ -85,6 +85,7 @@
     "draft-js-import-markdown": "^1.2.1",
     "draft-js-linkify-plugin": "^2.0.0-beta1",
     "draft-js-markdown-plugin": "^3.0.1",
+    "draft-js-mention-plugin": "^3.1.0",
     "draft-js-plugins-editor": "^2.1.1",
     "draft-js-prism-plugin": "0.1.3",
     "draftjs-to-markdown": "^0.5.1",

shared/clients/draft-js/mentionEntry/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { UserAvatar } from 'src/components/avatar/userAvatar';
+import Img from 'react-image';
+
+const MentionEntry = props => {
+  const {
+    mention,
+    theme,
+    isFocused, // eslint-disable-line no-unused-vars
+    searchValue, // eslint-disable-line no-unused-vars
+    ...parentProps
+  } = props;
+
+  return (
+    <div {...parentProps}>
+      <Img
+        src={[mention.avatar, '/img/default_avatar.svg']}
+        className={theme.mentionSuggestionsEntryAvatar}
+        role="presentation"
+      />
+      <span className={theme.mentionSuggestionsEntryText}>{mention.name}</span>
+    </div>
+  );
+};
+
+export { MentionEntry };

shared/clients/draft-js/mentions-decorator/core.js

@@ -39,10 +39,12 @@ const createMentionsDecorator = (
 ) => ({
   strategy: (
     contentBlock: ContentBlock,
-    callback: (...args?: Array<any>) => any
+    callback: (...args?: Array<any>) => any,
+    contentState: any
   ) => {
     // This prevents the search for mentions when we're inside of a code-block
     if (contentBlock.type === 'code-block') return;
+    if (!contentState) return;
 
     // -> "@brian_lovin, what's up with @mxstbr?"
     const text = contentBlock.getText();
@@ -57,7 +59,15 @@ const createMentionsDecorator = (
 
     const mentionCoordinates = getMentionsPositionsFromMessage(text);
 
+    const selectionKeyOffset = contentState
+      .getSelectionAfter()
+      .getStartOffset();
+
     mentionCoordinates.forEach(({ startPos, endPos }) => {
+      // if cursor is currently on a mention, don't match
+      // this is so that the decorator doesn't conflict with the
+      // decorator from draft-js-mention-plugin that renders the suggestions portal
+      if (startPos < selectionKeyOffset && selectionKeyOffset < endPos) return;
       callback(startPos, endPos);
     });
   },

shared/clients/draft-js/message/renderer.web.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import mentionsDecorator from '../mentions-decorator/index.web';
 import linksDecorator from '../links-decorator/index.web';
+import { Mention } from 'src/components/rich-text-editor/style.js';
 import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
 import type { Node } from 'react';
 import type { KeyObj, KeysObj } from './types';

shared/regexps.js

@@ -1,5 +1,5 @@
 // @flow
 
-module.exports.MENTIONS = /\/?\B@[a-z0-9_-]+/gi;
+module.exports.MENTIONS = /\/?\B@[a-z0-9._-]+/gi;
 module.exports.URL = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&\/=]*)/gi;
 module.exports.RELATIVE_URL = /^\/([^\/].*|$)/g;

src/components/chatInput/MentionSuggestions/Entry/Avatar/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Avatar = ({ mention, theme = {} }) => {
+  if (mention.avatar) {
+    return (
+      <img
+        src={mention.avatar}
+        className={theme.mentionSuggestionsEntryAvatar}
+        role="presentation"
+      />
+    );
+  }
+
+  return null;
+};
+
+export default Avatar;

src/components/chatInput/MentionSuggestions/Entry/defaultEntryComponent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Avatar from './Avatar';
+
+const defaultEntryComponent = props => {
+  const {
+    mention,
+    theme,
+    isFocused, // eslint-disable-line no-unused-vars
+    searchValue, // eslint-disable-line no-unused-vars
+    ...parentProps
+  } = props;
+
+  return (
+    <div {...parentProps}>
+      <Avatar mention={mention} theme={theme} />
+      <span className={theme.mentionSuggestionsEntryText}>{mention.name}</span>
+    </div>
+  );
+};
+
+export default defaultEntryComponent;

src/components/chatInput/MentionSuggestions/Entry/index.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class Entry extends Component {
+  static propTypes = {
+    entryComponent: PropTypes.any.isRequired,
+    searchValue: PropTypes.string,
+    onMentionSelect: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.mouseDown = false;
+  }
+
+  componentDidUpdate() {
+    this.mouseDown = false;
+  }
+
+  onMouseUp = () => {
+    if (this.mouseDown) {
+      this.props.onMentionSelect(this.props.mention);
+      this.mouseDown = false;
+    }
+  };
+
+  onMouseDown = event => {
+    // Note: important to avoid a content edit change
+    event.preventDefault();
+
+    this.mouseDown = true;
+  };
+
+  onMouseEnter = () => {
+    this.props.onMentionFocus(this.props.index);
+  };
+
+  render() {
+    const { theme = {}, mention, searchValue, isFocused, id } = this.props;
+    const className = isFocused
+      ? theme.mentionSuggestionsEntryFocused
+      : theme.mentionSuggestionsEntry;
+    const EntryComponent = this.props.entryComponent;
+    return (
+      <EntryComponent
+        className={className}
+        onMouseDown={this.onMouseDown}
+        onMouseUp={this.onMouseUp}
+        onMouseEnter={this.onMouseEnter}
+        role="option"
+        id={id}
+        aria-selected={isFocused ? 'true' : null}
+        theme={theme}
+        mention={mention}
+        isFocused={isFocused}
+        searchValue={searchValue}
+      />
+    );
+  }
+}