diff -r 812b94e9a4a8 -r 6fb4de54acea client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Wed May 31 17:26:20 2017 +0200
+++ b/client/src/components/SlateEditor.js	Wed May 31 17:28:12 2017 +0200
@@ -1,6 +1,5 @@
-import { Editor, Raw, Plain } from 'slate'
+import { Editor, Plain } from 'slate'
 import React from 'react'
-import initialState from './state.json'
 
 /**
  * Define the default node type.
@@ -55,10 +54,16 @@
    *
    * @type {Object}
    */
+  constructor(props) {
+    super(props);
+    this.state = {
+      state: Plain.deserialize('')
+    };
+  }
 
-  state = {
-    state: ''
-  };
+  componentDidMount() {
+    this.focus();
+  }
 
   /**
    * Check if the current selection has a mark with `type` in it.
@@ -92,10 +97,9 @@
 
   onChange = (state) => {
     this.setState({ state })
-    if(typeof(this.props.onChange) === 'function') {
-      this.props.onChange({target: { value: Plain.serialize(state)}});
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(state);
     }
-    
   }
 
   asPlain = () => {
@@ -107,6 +111,10 @@
     this.onChange(state);
   }
 
+  focus = () => {
+    this.refs.editor.focus();
+  }
+
   /**
    * On key down, if it's a formatting command toggle a mark.
    *
@@ -224,8 +232,8 @@
   }
 
   /**
-   * 
-   * @param {*Cosntructor} props 
+   *
+   * @param {*Cosntructor} props
    */
   componentWillMount() {
     const initialValue = Raw.deserialize(initialState, { terse: true });
@@ -318,6 +326,7 @@
     return (
       <div className="editor">
         <Editor
+          ref="editor"
           spellCheck
           placeholder={'Enter some rich text...'}
           schema={schema}
@@ -335,4 +344,4 @@
  * Export.
  */
 
-export default SlateEditor
\ No newline at end of file
+export default SlateEditor