--- a/client/src/components/NoteInput.js	Tue May 23 16:42:07 2017 +0200
+++ b/client/src/components/NoteInput.js	Tue May 23 16:18:34 2017 +0200
@@ -4,6 +4,7 @@
 import { Form, FormControl, FormGroup, Button } from 'react-bootstrap';
 
 import PropTypes from 'prop-types';
+import SlateEditor from './SlateEditor';
 
 class NoteInput extends Component {
   constructor(props) {
@@ -20,27 +21,20 @@
   }
 
   onAddNoteClick(event) {
-    this.props.addNote(this.state.value);
-
-    this.noteInput.value = "";
-
-    this.noteInput.focus();
+    const text = this.refs.editor.asPlain();
+    this.props.addNote(text);
+    this.refs.editor.clear();
   }
 
   componentDidMount() {
-    this.noteInput.focus();
+    // this.noteInput.focus();
   }
 
   render() {
     return (
       <Form>
         <FormGroup>
-          <FormControl
-              componentClass="textarea"
-              placeholder="Enter note"
-              onChange={this.handleChange}
-              ref={(input) => { this.noteInput = ReactDOM.findDOMNode(input); }}
-          />
+          <SlateEditor ref="editor" />
         </FormGroup>
         <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
       </Form>