Merge pull request #1594 from passimm/issue_1469

Issue #1469 - User mentions in the posts

Author: gondzo

package.json

@@ -62,6 +62,7 @@
     "draft-js-image-plugin": "^2.0.0-rc2",
     "draft-js-link-plugin": "^1.2.2",
     "draft-js-plugins-editor": "^2.0.0-rc2",
+    "draft-js-mention-plugin": "^2.0.0-rc2",
     "draft-js-utils": "^0.1.7",
     "fbemitter": "^2.1.1",
     "fbjs": "^0.8.12",

src/components/Feed/NewPost.jsx

@@ -11,7 +11,7 @@ class NewPost extends React.Component {
   }
 
   render() {
-    const {currentUser, titlePlaceholder, isCreating, hasError} = this.props
+    const {currentUser, allMembers, titlePlaceholder, isCreating, hasError} = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
       authorName += ' ' + currentUser.lastName
@@ -33,6 +33,7 @@ class NewPost extends React.Component {
           hasError={hasError}
           avatarUrl={currentUser.photoURL}
           authorName={authorName}
+          allMembers={allMembers}
       />
     )
   }
@@ -41,6 +42,7 @@ class NewPost extends React.Component {
 
 NewPost.propTypes = {
   currentUser: PropTypes.object.isRequired,
+  allMembers: PropTypes.object.isRequired,
   onPost: PropTypes.func.isRequired,
   onNewPostChange: PropTypes.func.isRequired,
   hasError: PropTypes.bool,

src/components/RichTextArea/RichTextArea.jsx

@@ -18,14 +18,19 @@ import stateToMarkdown from '../../helpers/stateToMarkdown'
 import 'draft-js-link-plugin/lib/plugin.css'
 import EditorIcons from './EditorIcons'
 import './RichTextArea.scss'
+import 'draft-js-mention-plugin/lib/plugin.css'
+import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin'
+import _ from 'lodash'
 
 const linkPlugin = createLinkPlugin()
 const blockDndPlugin = createBlockDndPlugin()
+const mentionPlugin = createMentionPlugin({mentionPrefix: '@'})
+
 const decorator = composeDecorators(
   blockDndPlugin.decorator
 )
 const allowImages = false
-const plugins = [linkPlugin, blockDndPlugin]
+const plugins = [linkPlugin, blockDndPlugin, mentionPlugin]
 if (allowImages){
   const imagePlugin = createImagePlugin({ decorator })
   plugins.push(handleDropPlugin)
@@ -51,7 +56,8 @@ const blocks = [
 class RichTextArea extends React.Component {
   constructor(props) {
     super(props)
-    this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: ''}
+    this.mentions = _.map(_.values(this.props.allMembers), (e) => { return {name: e.firstName + ' ' + e.lastName, handle: e.handle, userId: e.userId} })
+    this.state = {editorExpanded: false, editorState: EditorState.createEmpty(), titleValue: '', suggestions: this.mentions, mentions: []}
     this.onTitleChange = this.onTitleChange.bind(this)
     this.onEditorChange = this.onEditorChange.bind(this)
     this.handleKeyCommand = this.handleKeyCommand.bind(this)
@@ -201,12 +207,42 @@ class RichTextArea extends React.Component {
       return
     }
     const title = this.state.titleValue
-    const content = this.state.currentMDContent
+
+    var that = this
+    const replaceMentionWithUserID = (content) =>
+    {
+      const encodeContent = (text) => {
+          return text.replace(/[*_`]/g, '\\$&')
+      }
+
+      const userIdMap = _.reduce(that.mentions, (obj, item) => {
+        obj[encodeContent(item.name)] = encodeContent(item.handle)
+        return obj
+      }, {})
+      
+      for (var item in userIdMap)
+      {
+        content = content.replace('@' + item, '@' + userIdMap[item])
+      }
+      return content
+    }
+
+    const content = replaceMentionWithUserID(this.state.currentMDContent)
+
     if ((this.props.disableTitle || title) && content) {
       this.props.onPost({title, content})
     }
   }
 
+  onSearchChange = ({ value }) => {
+    this.setState({
+      suggestions: defaultSuggestionsFilter(value, this.mentions),
+    });
+  };
+
+  onAddMention = (mention) => {
+  }
+
   cancelEdit() {
     this.props.cancelEdit()
   }
@@ -220,6 +256,7 @@ class RichTextArea extends React.Component {
     this.setState({uploading})
   }
   render() {
+    const {MentionSuggestions} = mentionPlugin
     const {className, avatarUrl, authorName, titlePlaceholder, contentPlaceholder, editMode, isCreating, isGettingComment, disableTitle} = this.props
     const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading} = this.state
     let canSubmit = (disableTitle || titleValue.trim())
@@ -232,6 +269,28 @@ class RichTextArea extends React.Component {
     const currentEntity = getCurrentEntity(editorState)
     const disableForCodeBlock = blockType === 'code-block'
 
+    const Entry = (props) => {
+      const {
+        mention,
+        theme,
+        searchValue, // eslint-disable-line no-unused-vars
+        isFocused, // eslint-disable-line no-unused-vars
+        ...parentProps
+      } = props;
+
+      return (
+        <div {...parentProps}>
+          <div className={theme.mentionSuggestionsEntryContainer}>
+            <div className={theme.mentionSuggestionsEntryContainerRight}>
+              <div className={theme.mentionSuggestionsEntryText}>
+                {mention.get('handle')}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    };
+
     return (
       <div className={cn(className, 'rich-editor', {expanded: editorExpanded || editMode})} ref="richEditor">
         {(isCreating || isGettingComment) &&
@@ -258,15 +317,23 @@ class RichTextArea extends React.Component {
             />
             <div className="draftjs-editor tc-textarea">
               {!isGettingComment &&
-              <Editor
-                ref="editor"
-                placeholder={contentPlaceholder}
-                editorState={editorState}
-                onChange={this.onEditorChange}
-                handleKeyCommand={this.handleKeyCommand}
-                plugins={plugins}
-                setUploadState={this.setUploadState}
-              />
+                <div>
+                  <Editor
+                    ref="editor"
+                    placeholder={contentPlaceholder}
+                    editorState={editorState}
+                    onChange={this.onEditorChange}
+                    handleKeyCommand={this.handleKeyCommand}
+                    plugins={plugins}
+                    setUploadState={this.setUploadState}
+                  />
+                  <MentionSuggestions
+                    onSearchChange={this.onSearchChange}
+                    suggestions={this.state.suggestions}
+                    onAddMention={this.onAddMention}
+                    entryComponent={Entry}
+                  />
+                </div>
               }
               <div className="textarea-footer">
                 <div className="textarea-buttons">
@@ -358,7 +425,8 @@ RichTextArea.propTypes = {
   oldTitle: PropTypes.string,
   oldContent: PropTypes.string,
   title: PropTypes.string,
-  content: PropTypes.string
+  content: PropTypes.string,
+  allMembers: PropTypes.object
 }
 
 export default RichTextArea

src/projects/detail/containers/FeedContainer.js

@@ -338,7 +338,7 @@ class FeedView extends React.Component {
   }
 
   render () {
-    const {currentUser, project, currentMemberRole, isCreatingFeed, error } = this.props
+    const {currentUser, project, currentMemberRole, isCreatingFeed, error, allMembers} = this.props
     const { feeds } = this.state
     const showDraftSpec = project.status === PROJECT_STATUS_DRAFT && currentMemberRole === PROJECT_ROLE_CUSTOMER
     const onLeaveMessage = this.onLeave() || ''
@@ -383,6 +383,7 @@ class FeedView extends React.Component {
         />
         <NewPost
           currentUser={currentUser}
+          allMembers={allMembers}
           onPost={this.onNewPost}
           isCreating={isCreatingFeed}
           hasError={error}