--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/HtmlSerializer.js	Thu Jun 01 18:46:34 2017 +0200
@@ -0,0 +1,63 @@
+import React from 'react'
+import { Html } from 'slate'
+
+const BLOCK_TAGS = {
+  blockquote: 'quote',
+  p: 'paragraph',
+  pre: 'code'
+}
+
+// Add a dictionary of mark tags.
+const MARK_TAGS = {
+  em: 'italic',
+  strong: 'bold',
+  u: 'underline',
+}
+
+const rules = [
+  // Block rules
+  {
+    deserialize(el, next) {
+      const type = BLOCK_TAGS[el.tagName]
+      if (!type) return
+      return {
+        kind: 'block',
+        type: type,
+        nodes: next(el.children)
+      }
+    },
+    serialize(object, children) {
+      if (object.kind != 'block') return
+      switch (object.type) {
+        case 'code': return <pre><code>{children}</code></pre>
+        case 'paragraph':
+        case 'line': return <p>{children}</p>
+        case 'quote': return <blockquote>{children}</blockquote>
+      }
+    }
+  },
+  // Mark rules
+  {
+    deserialize(el, next) {
+      const type = MARK_TAGS[el.tagName]
+      if (!type) return
+      return {
+        kind: 'mark',
+        type: type,
+        nodes: next(el.children)
+      }
+    },
+    serialize(object, children) {
+      if (object.kind != 'mark') return
+      switch (object.type) {
+        case 'bold': return <strong>{children}</strong>
+        case 'italic': return <em>{children}</em>
+        case 'underline': return <u>{children}</u>
+      }
+    }
+  }
+]
+
+const serializer = new Html({ rules })
+
+export default serializer

--- a/client/src/actions/notesActions.js	Thu Jun 01 17:32:07 2017 +0200
+++ b/client/src/actions/notesActions.js	Thu Jun 01 18:46:34 2017 +0200
@@ -10,6 +10,7 @@
       session: session.id,
       raw: data.raw,
       plain: data.plain,
+      html: data.html,
       startedAt: data.startedAt,
       finishedAt: data.finishedAt
     }

--- a/client/src/components/Note.js	Thu Jun 01 17:32:07 2017 +0200
+++ b/client/src/components/Note.js	Thu Jun 01 18:46:34 2017 +0200
@@ -4,7 +4,8 @@
 const Note = ({note}) => {
   return (
     <div id={"note-" + note.id}>
-      {note.startedAt} ⇒ {note.finishedAt} {note.plain}
+      <h5>{note.startedAt} ⇒ {note.finishedAt}</h5>
+      <div dangerouslySetInnerHTML={{ __html: note.html }} />
     </div>
   );
 };

--- a/client/src/components/NoteInput.js	Thu Jun 01 17:32:07 2017 +0200
+++ b/client/src/components/NoteInput.js	Thu Jun 01 18:46:34 2017 +0200
@@ -25,10 +25,13 @@
   onAddNoteClick = () => {
     const plain = this.refs.editor.asPlain();
     const raw = this.refs.editor.asRaw();
+    const html = this.refs.editor.asHtml();
 
     this.props.addNote(this.props.session, {
       plain: plain,
       raw: raw,
+      html: html,
+
       startedAt: this.state.startedAt,
       finishedAt: moment().format('H:mm:ss')
     });

--- a/client/src/components/SlateEditor.js	Thu Jun 01 17:32:07 2017 +0200
+++ b/client/src/components/SlateEditor.js	Thu Jun 01 18:46:34 2017 +0200
@@ -1,6 +1,7 @@
 import { Editor, Plain, Raw } from 'slate'
 import React from 'react'
 import moment from 'moment';
+import HtmlSerializer from '../HtmlSerializer'
 
 /**
  * Define the default node type.
@@ -137,6 +138,10 @@
     return Raw.serialize(this.state.state);
   }
 
+  asHtml = () => {
+    return HtmlSerializer.serialize(this.state.state);
+  }
+
   clear = () => {
     const state = Plain.deserialize('');
     this.onChange(state);

--- a/client/src/store/noteRecord.js	Thu Jun 01 17:32:07 2017 +0200
+++ b/client/src/store/noteRecord.js	Thu Jun 01 18:46:34 2017 +0200
@@ -3,8 +3,11 @@
 export default Immutable.Record({
   id: '',
   session: '',
+
   plain: '',
   raw: {},
+  html: '',
+
   startedAt: '',
   finishedAt: '',
 });