--- a/client/src/HtmlSerializer.js	Wed Sep 05 13:48:10 2018 +0200
+++ b/client/src/HtmlSerializer.js	Tue Sep 25 02:02:13 2018 +0200
@@ -1,15 +1,18 @@
 import React from 'react'
-import { Html } from 'slate'
+import Html from 'slate-html-serializer'
 
 const BLOCK_TAGS = {
   p: 'paragraph',
+  ul: 'bulleted-list',
+  ol: 'numbered-list',
+  li: 'list-item',
 }
 
 // Add a dictionary of mark tags.
 const MARK_TAGS = {
   em: 'italic',
   strong: 'bold',
-  u: 'underline',
+  u: 'underlined',
   category: 'span'
 }
 
@@ -20,16 +23,23 @@
       const type = BLOCK_TAGS[el.tagName]
       if (!type) return
       return {
-        kind: 'block',
+        object: 'block',
         type: type,
-        nodes: next(el.children)
+        nodes: next(el.childNodes)
       }
     },
-    serialize(object, children) {
-      if (object.kind !== 'block') return
-      switch (object.type) {
+    serialize(obj, children) {
+      if (obj.object !== 'block') return
+      switch (obj.type) {
+        case 'numbered-list':
+          return <ol>{children}</ol>;
+        case 'bulleted-list':
+          return <ul>{children}</ul>;
+         case 'list-item':
+          return <li>{children}</li>;
         case 'paragraph':
-        case 'line': return <p>{children}</p>
+        case 'line':
+          return <p>{children}</p>
         default: return;
       }
     }
@@ -40,18 +50,22 @@
       const type = MARK_TAGS[el.tagName]
       if (!type) return
       return {
-        kind: 'mark',
+        object: 'mark',
         type: type,
-        nodes: next(el.children)
+        nodes: next(el.childNodes)
       }
     },
-    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>
-        case 'category': return <span style={{ backgroundColor: object.data.get('color') }}>{children}</span>
+    serialize(obj, children) {
+      if (obj.object !== 'mark') return
+      switch (obj.type) {
+        case 'bold':
+          return <strong>{children}</strong>
+        case 'italic':
+          return <em>{children}</em>
+        case 'underlined':
+          return <ins>{children}</ins>
+        case 'category':
+          return <span style={{ backgroundColor: obj.data.get('color') }}>{children}</span>
         default: return;
       }
     }