--- a/client/src/components/NoteInput.js	Wed May 31 17:28:12 2017 +0200
+++ b/client/src/components/NoteInput.js	Wed May 31 17:51:54 2017 +0200
@@ -1,39 +1,42 @@
 import React, {Component} from 'react';
-
 import { Form, FormGroup, Button } from 'react-bootstrap';
+import { Plain } from 'slate';
 
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
 
 class NoteInput extends Component {
-  constructor(props) {
-    super(props);
 
-    this.state = {value: ''};
+  state = {
+    buttonDisabled: false
+  }
 
-    this.onAddNoteClick = this.onAddNoteClick.bind(this);
-    this.handleChange = this.handleChange.bind(this);
+  onChange = (state) => {
+    const text = Plain.serialize(state);
+    this.setState({ buttonDisabled: text.length === 0 });
   }
 
-  handleChange(event) {
-    this.setState({value : event.target.value});
+  onAddNoteClick = () => {
+    const text = this.refs.editor.asPlain();
+    this.props.addNote(this.props.session, text);
+    this.refs.editor.clear();
+    setTimeout(() => this.refs.editor.focus(), 250);
   }
 
-  onAddNoteClick(event) {
-    //const text = this.refs.editor.asPlain();
-    if(this.state.value && this.state.value.length > 0) {
-      this.props.addNote(this.state.value);
-      this.refs.editor.clear();
-    }
+  componentDidMount() {
+    const text = this.refs.editor.asPlain();
+    this.setState({ buttonDisabled: text.length === 0 });
   }
 
   render() {
     return (
       <Form>
         <FormGroup>
-          <SlateEditor ref="editor" onChange={this.handleChange} />
+          <div className="editor-wrapper">
+            <SlateEditor ref="editor" onChange={this.onChange} />
+          </div>
         </FormGroup>
-        <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
+        <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
       </Form>
     );
   }