--- 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

--- a/client/src/components/state.json	Wed May 31 17:26:20 2017 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,95 +0,0 @@
-{
-  "nodes": [
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "ranges": [
-            {
-              "text": "This is editable "
-            },
-            {
-              "text": "rich",
-              "marks": [
-                {
-                  "type": "bold"
-                }
-              ]
-            },
-            {
-              "text": " text, "
-            },
-            {
-              "text": "much",
-              "marks": [
-                {
-                  "type": "italic"
-                }
-              ]
-            },
-            {
-              "text": " better than a "
-            },
-            {
-              "text": "<textarea>",
-              "marks": [
-                {
-                  "type": "code"
-                }
-              ]
-            },
-            {
-              "text": "!"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "ranges": [
-            {
-              "text": "Since it's rich text, you can do things like turn a selection of text "
-            },
-            {
-              "text": "bold",
-              "marks": [
-                {
-                  "type": "bold"
-                }
-              ]
-            },{
-              "text": ", or add a semantically rendered block quote in the middle of the page, like this:"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "block-quote",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "A wise quote."
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "text": "Try it out for yourself!"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file