Editor 😄

package.json

@@ -35,10 +35,11 @@
     "babel-preset-react": "6.24.1",
     "cheerio": "1.0.0-rc.2",
     "cookie-parser": "1.4.3",
+    "draft-js": "^0.10.5",
     "emoji-js": "3.4.0",
     "express": "4.14.0",
     "moment": "2.19.3",
-    "parcel-bundler": "1.4.1",
+    "parcel-bundler": "1.6",
     "react": "16.2.0",
     "react-cookie": "0.4.8",
     "react-dom": "16.2.0",

src/app/components/Editor.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { Editor, EditorState } from 'draft-js';
+
+export default class MyEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+  }
+  render() {
+    return (
+        <Editor editorState={this.state.editorState} onChange={this.onChange} />
+    );
+  }
+}

src/app/components/HomePage.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import Streams from './Streams';
 import Messages from './Messages';
+import Editor from './Editor';
 import Users from './Users';
 import Header from './Header';
 import wrapper from '../styles/homePage';
 import body from '../styles/body';
+import centerColumn from '../styles/centerColumn';
 
 class HomePage extends React.Component {
   render() {
@@ -13,7 +15,10 @@ class HomePage extends React.Component {
         <Header />
         <div style={body}>
           <Streams />
-          <Messages />
+          <div style={centerColumn}>
+            <Messages />
+            <Editor />
+          </div>
           <Users />
         </div>
       </div>

src/app/components/Messages.jsx

@@ -8,7 +8,6 @@ import {
   fetchMessages,
   updateCurrentMessage,
 } from '../actions';
-import centerColumn from '../styles/centerColumn';
 
 const listeners = {};
 const messagesToBeFlagged = [];
@@ -49,7 +48,7 @@ function Messages({ messages, markAsRead, updatePointer, fetchMessages, updateHe
     updateHandler={update}
     updateHeader={updateCurrentMessage}
   />;
-  const style = {...centerColumn, overflowY: 'scroll' };
+  const style = { flex: 1, overflowY: 'scroll' };
   const throttledOnScroll = throttle(onScroll, 1000);
   return (
     <div style={style} onScroll={throttledOnScroll}>