--- a/client/src/components/SlateEditor.js	Thu Jun 01 16:15:08 2017 +0200
+++ b/client/src/components/SlateEditor.js	Thu Jun 01 17:32:07 2017 +0200
@@ -1,5 +1,6 @@
 import { Editor, Plain, Raw } from 'slate'
 import React from 'react'
+import moment from 'moment';
 
 /**
  * Define the default node type.
@@ -57,7 +58,9 @@
   constructor(props) {
     super(props);
     this.state = {
-      state: Plain.deserialize('')
+      state: Plain.deserialize(''),
+      startedAt: null,
+      finishedAt: null
     };
   }
 
@@ -96,9 +99,33 @@
    */
 
   onChange = (state) => {
-    this.setState({ state })
+
+    let newState = {
+      state: state,
+      startedAt: this.state.startedAt
+    };
+
+    const isEmpty = state.document.length === 0;
+
+    // Reset timers when the text is empty
+    if (isEmpty) {
+      Object.assign(newState, {
+        startedAt: null,
+        finishedAt: null
+      });
+    } else {
+      Object.assign(newState, { finishedAt: moment().format('H:mm:ss') });
+    }
+
+    // Store start time once when the first character is typed
+    if (!isEmpty && this.state.startedAt === null) {
+      Object.assign(newState, { startedAt: moment().format('H:mm:ss') });
+    }
+
+    this.setState(newState)
+
     if (typeof this.props.onChange === 'function') {
-      this.props.onChange(state);
+      this.props.onChange(newState);
     }
   }
 
@@ -235,16 +262,6 @@
     this.setState({ state })
   }
 
-  // /**
-  //  *
-  //  * @param {*Cosntructor} props
-  //  */
-  // componentWillMount() {
-  //   const initialValue = Raw.deserialize(initialState, { terse: true });
-  //   this.state = { state: initialValue};
-  //   this.onChange(initialValue);
-  // }
-
   /**
    * Render.
    *