--- a/client/src/components/SlateEditor.js	Thu Jun 08 18:54:36 2017 +0200
+++ b/client/src/components/SlateEditor.js	Fri Jun 09 15:24:53 2017 +0200
@@ -2,6 +2,7 @@
 import React from 'react'
 import Portal from 'react-portal'
 import moment from 'moment'
+import Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
 import AnnotationPlugin from '../AnnotationPlugin'
 import CategoriesTooltip from './CategoriesTooltip'
@@ -80,7 +81,8 @@
       finishedAt: null,
       currentSelectionText: '',
       hoveringMenu: null,
-      isPortalOpen: false
+      isPortalOpen: false,
+      categories: Immutable.List([]),
     };
   }
 
@@ -166,6 +168,15 @@
     return HtmlSerializer.serialize(this.state.state);
   }
 
+  asCategories = () => {
+    return this.state.categories
+  }
+
+  removeCategory = (categories, key, text) => {
+    const categoryIndex = categories.findIndex(category => category.key === key && category.text === text)
+    return categories.delete(categoryIndex)
+  }
+
   clear = () => {
     const state = Plain.deserialize('');
     this.onChange(state);
@@ -221,6 +232,7 @@
   onClickMark = (e, type) => {
     e.preventDefault()
     const { state } = this.state
+    let { categories } = this.state
     const transform = state.transform()
 
     let isPortalOpen = false;
@@ -229,7 +241,15 @@
       // Can't use toggleMark here, because it expects the same object
       // @see https://github.com/ianstormtaylor/slate/issues/873
       if (this.hasMark('category')) {
-        state.marks.forEach(mark => transform.removeMark(mark));
+        const categoryMarks = state.marks.filter(mark => mark.type === 'category')
+        categoryMarks.forEach(mark => {
+          const key = mark.data.get('key');
+          const text = mark.data.get('text');
+
+          categories = this.removeCategory(categories, key, text)
+          transform.removeMark(mark)
+        })
+
       } else {
         isPortalOpen = !this.state.isPortalOpen;
       }
@@ -239,7 +259,8 @@
 
     this.setState({
       state: transform.apply(),
-      isPortalOpen: isPortalOpen
+      isPortalOpen: isPortalOpen,
+      categories: categories
     })
   }
 
@@ -318,22 +339,31 @@
 
   onCategoryClick = (category) => {
 
-    const { state } = this.state;
+    const { state, currentSelectionText } = this.state;
+    let { categories } = this.state;
     const transform = state.transform();
 
-    state.marks.forEach(mark => transform.removeMark(mark));
+    const categoryMarks = state.marks.filter(mark => mark.type === 'category')
+    categoryMarks.forEach(mark => transform.removeMark(mark));
+
     transform.addMark({
       type: 'category',
       data: {
-        text: this.state.currentSelectionText,
+        text: currentSelectionText,
         color: category.color,
         key: category.key
       }
     })
 
+    Object.assign(category, {
+      text: currentSelectionText
+    });
+    categories = categories.push(category);
+
     this.setState({
       state: transform.apply(),
-      isPortalOpen: false
+      isPortalOpen: false,
+      categories: categories
     });
   }