Add Editor, handle and hashtag strategies and components

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

Hide file tree

Showing 11 changed files with 148 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "draft-js": "^0.10.1",
+    "es6-shim": "^0.35.3",
     "history": "^4.7.2",
     "material-ui": "^0.19.1",
     "prop-types": "^15.5.10",

diff --git a/src/components/Home/AutocompleteEditor/HandleSpan/index.jsx b/src/components/Home/AutocompleteEditor/HandleSpan/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const styles = {
+  container: {
+    color: '#03A9F4',
+    direction: 'ltr',
+    unicodeBidi: 'bidi-override',
+  },
+};
+
+const HandleSpan = ({ offsetKey, children }) => (
+  <span
+    style={styles.container}
+    data-offset-key={offsetKey}
+  >
+    {children}
+  </span>
+);
+
+export default HandleSpan;
diff --git a/src/components/Home/AutocompleteEditor/HashtagSpan/index.jsx b/src/components/Home/AutocompleteEditor/HashtagSpan/index.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const styles = {
+  container: {
+    color: '#E91E63',
+  },
+};
+
+const HashtagSpan = ({ offsetKey, children }) => (
+  <span
+    style={styles.container}
+    data-offset-key={offsetKey}
+  >
+    {children}
+  </span>
+);
+
+export default HashtagSpan;
diff --git a/src/components/Home/AutocompleteEditor/index.jsx b/src/components/Home/AutocompleteEditor/index.jsx
@@ -0,0 +1,60 @@
+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';
+
+const styles = {
+  root: {
+    padding: 20,
+    width: 600,
+  },
+  editor: {
+    border: '1px solid #ddd',
+    cursor: 'text',
+    fontSize: 16,
+    minHeight: 40,
+    padding: 10,
+  },
+};
+
+class AutocompleteEditor extends Component {
+  constructor() {
+    super();
+    const compositeDecorator = new CompositeDecorator([
+      {
+        strategy: handleStrategy,
+        component: HandleSpan,
+      },
+      {
+        strategy: hashtagStrategy,
+        component: HashtagSpan,
+      },
+    ]);
+
+    this.state = {
+      editorState: EditorState.createEmpty(compositeDecorator),
+    };
+
+    this.focus = () => this.refs.editor.focus();
+    this.onChange = editorState => this.setState({ editorState });
+  }
+
+  render() {
+    return (
+      <div style={styles.root}>
+        <div style={styles.editor} onClick={this.focus}>
+          <Editor
+            editorState={this.state.editorState}
+            onChange={this.onChange}
+            ref="editor"
+            spellCheck
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default AutocompleteEditor;
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import AppBar from 'material-ui/AppBar';
+import AutocompleteEditor from './AutocompleteEditor';
 
 const styles = {
   container: {
@@ -17,7 +18,7 @@ const Home = () => (
   <div style={styles.container}>
     <AppBar title="Autocomplete" />
     <div style={styles.main}>
-      Hello world!
+      <AutocompleteEditor />
     </div>
   </div>
 );

diff --git a/src/components/Home/__snapshots__/Home.spec.jsx.snap b/src/components/Home/__snapshots__/Home.spec.jsx.snap
@@ -23,7 +23,7 @@ exports[`Home renders correctly 1`] = `
       }
     }
   >
-    Hello world!
+    <AutocompleteEditor />
   </div>
 </div>
 `;
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 /* global document */
 /* eslint-disable react/jsx-filename-extension */
+import 'es6-shim';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import createHistory from 'history/createBrowserHistory';

diff --git a/src/utils/decoratorStrategies/handle/index.js b/src/utils/decoratorStrategies/handle/index.js
@@ -0,0 +1,7 @@
+import { findWithRegex } from '../';
+
+const regex = /\@[\w]+/g;
+
+export default function strategy(contentBlock, callback) {
+  findWithRegex(regex, contentBlock, callback);
+}
diff --git a/src/utils/decoratorStrategies/hashtag/index.js b/src/utils/decoratorStrategies/hashtag/index.js
@@ -0,0 +1,7 @@
+import { findWithRegex } from '../';
+
+const regex = /\#[\w\u0590-\u05ff]+/g;
+
+export default function strategy(contentBlock, callback) {
+  findWithRegex(regex, contentBlock, callback);
+}
diff --git a/src/utils/decoratorStrategies/index.js b/src/utils/decoratorStrategies/index.js
@@ -0,0 +1,10 @@
+export function findWithRegex(regex, contentBlock, callback) {
+  const text = contentBlock.getText();
+  let matchArr;
+  let start;
+
+  while ((matchArr = regex.exec(text)) !== null) {
+    start = matchArr.index;
+    callback(start, start + matchArr[0].length);
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ exports[`Home renders correctly 1`] = ` @@
           }
         }
       >
-        Hello world!
+        <AutocompleteEditor />
       </div>
     </div>
     `;