Add mentions plugin

arisgk · Sep 15, 2017 · 1c3db21 · 1c3db21
1 parent e0ec180
commit 1c3db21
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,9 @@
   "private": true,
   "dependencies": {
     "draft-js": "^0.10.1",
+    "draft-js-hashtag-plugin": "^2.0.0-rc7",
+    "draft-js-mention-plugin": "^2.0.0-rc7",
+    "draft-js-plugins-editor": "^2.0.0-rc7",
     "es6-shim": "^0.35.3",
     "history": "^4.7.2",
     "material-ui": "^0.19.1",

diff --git a/src/components/Home/AutocompleteEditor/index.jsx b/src/components/Home/AutocompleteEditor/index.jsx
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
-import { CompositeDecorator, Editor, EditorState } from 'draft-js';
-import HandleSpan from './HandleSpan';
-import HashtagSpan from './HashtagSpan';
-import handleStrategy from '../../../utils/decoratorStrategies/handle';
-import hashtagStrategy from '../../../utils/decoratorStrategies/hashtag';
+import { CompositeDecorator, EditorState } from 'draft-js';
+import Editor from 'draft-js-plugins-editor';
+import 'draft-js-mention-plugin/lib/plugin.css';
+import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin';
+import mentions from '../../../data/mentions';
+
+const mentionPlugin = createMentionPlugin();
+const { MentionSuggestions } = mentionPlugin;
+const plugins = [mentionPlugin];
 
 const styles = {
   root: {
@@ -22,23 +26,21 @@ const styles = {
 class AutocompleteEditor extends Component {
   constructor() {
     super();
-    const compositeDecorator = new CompositeDecorator([
-      {
-        strategy: handleStrategy,
-        component: HandleSpan,
-      },
-      {
-        strategy: hashtagStrategy,
-        component: HashtagSpan,
-      },
-    ]);
 
     this.state = {
-      editorState: EditorState.createEmpty(compositeDecorator),
+      editorState: EditorState.createEmpty(),
+      suggestions: mentions,
     };
 
     this.focus = () => this.refs.editor.focus();
     this.onChange = editorState => this.setState({ editorState });
+    this.onSearchChange = this.onSearchChange.bind(this);
+  }
+
+  onSearchChange({ value }) {
+    this.setState({
+      suggestions: defaultSuggestionsFilter(value, mentions),
+    });
   }
 
   render() {
@@ -49,8 +51,14 @@ class AutocompleteEditor extends Component {
             editorState={this.state.editorState}
             onChange={this.onChange}
             ref="editor"
+            plugins={plugins}
             spellCheck
           />
+          <MentionSuggestions
+            onSearchChange={this.onSearchChange}
+            suggestions={this.state.suggestions}
+            onAddMention={this.onAddMention}
+          />
         </div>
       </div>
     );

diff --git a/src/data/mentions/index.js b/src/data/mentions/index.js
@@ -0,0 +1,34 @@
+const mentions = [
+  {
+    name: 'matthew',
+    title: 'Senior Software Engineer',
+    avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
+  },
+  {
+    name: 'julian',
+    title: 'United Kingdom',
+    avatar: 'https://avatars2.githubusercontent.com/u/1188186?v=3&s=400',
+  },
+  {
+    name: 'jyoti',
+    title: 'New Delhi, India',
+    avatar: 'https://avatars0.githubusercontent.com/u/2182307?v=3&s=400',
+  },
+  {
+    name: 'max',
+    title: 'Travels around the world, brews coffee, skis mountains and makes stuff on the web.',
+    avatar: 'https://pbs.twimg.com/profile_images/763033229993574400/6frGyDyA_400x400.jpg',
+  },
+  {
+    name: 'nik',
+    title: 'Passionate about Software Architecture, UX, Skiing & Triathlons',
+    avatar: 'https://avatars0.githubusercontent.com/u/223045?v=3&s=400',
+  },
+  {
+    name: 'pascal',
+    title: 'HeathIT hacker and researcher',
+    avatar: 'https://pbs.twimg.com/profile_images/688487813025640448/E6O6I011_400x400.png',
+  },
+];
+
+export default mentions;