--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SlateEditor/HtmlSerializer.js	Mon Oct 08 18:35:47 2018 +0200
@@ -0,0 +1,77 @@
+import React from 'react'
+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: 'underlined',
+  category: 'span'
+}
+
+const rules = [
+  // Block rules
+  {
+    deserialize(el, next) {
+      const type = BLOCK_TAGS[el.tagName]
+      if (!type) return
+      return {
+        object: 'block',
+        type: type,
+        nodes: next(el.childNodes)
+      }
+    },
+    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>
+        default: return;
+      }
+    }
+  },
+  // Mark rules
+  {
+    deserialize(el, next) {
+      const type = MARK_TAGS[el.tagName]
+      if (!type) return
+      return {
+        object: 'mark',
+        type: type,
+        nodes: next(el.childNodes)
+      }
+    },
+    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.color }}>{children}</span>
+        default: return;
+      }
+    }
+  }
+]
+
+const serializer = new Html({ rules })
+
+export default serializer