--- a/client/src/components/SlateEditor.js	Thu Jun 08 17:57:57 2017 +0200
+++ b/client/src/components/SlateEditor.js	Thu Jun 08 18:54:36 2017 +0200
@@ -31,14 +31,7 @@
     bold: {
       fontWeight: 'bold'
     },
-    // This is a "temporary" mark added when the hovering menu is open
-    highlight: {
-      textDecoration: 'underline',
-      textDecorationStyle: 'dotted',
-      backgroundColor: '#ccc',
-    },
-    // This is the mark actually used for annotations
-    annotation: props => {
+    category: props => {
       const data = props.mark.data;
       return <span style={{ backgroundColor: data.get('color') }}>{props.children}</span>
     },
@@ -54,7 +47,7 @@
 const annotationCategories = [
   { key: 'important', name: 'Important',    color: '#F1C40F' },
   { key: 'keyword',   name: 'Mot-clé',      color: '#2ECC71' },
-  { key: 'comment',   name: 'Commentaire',  color: '#3498DB' }
+  { key: 'comment',   name: 'Commentaire',  color: '#3498DB', hasComment: true }
 ];
 
 /**
@@ -227,25 +220,25 @@
 
   onClickMark = (e, type) => {
     e.preventDefault()
-    let { state, hoveringMenu } = this.state
+    const { state } = this.state
+    const transform = state.transform()
 
-    let toggleMarkOptions;
     let isPortalOpen = false;
 
-    if (type === 'highlight') {
-      toggleMarkOptions = { type: type, data: { text: this.state.currentSelectionText } }
-      isPortalOpen = !this.state.isPortalOpen;
+    if (type === 'category') {
+      // 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));
+      } else {
+        isPortalOpen = !this.state.isPortalOpen;
+      }
     } else {
-      toggleMarkOptions = type;
+      transform.toggleMark(type)
     }
 
-    state = state
-      .transform()
-      .toggleMark(toggleMarkOptions)
-      .apply()
-
     this.setState({
-      state: state,
+      state: transform.apply(),
       isPortalOpen: isPortalOpen
     })
   }
@@ -314,16 +307,9 @@
   }
 
   onPortalClose = (portal) => {
-
     let { state } = this.state
     const transform = state.transform();
 
-    state.marks.forEach(mark => {
-      if (mark.type === 'highlight') {
-        transform.removeMark(mark)
-      }
-    });
-
     this.setState({
       state: transform.apply(),
       isPortalOpen: false
@@ -336,9 +322,8 @@
     const transform = state.transform();
 
     state.marks.forEach(mark => transform.removeMark(mark));
-
     transform.addMark({
-      type: 'annotation',
+      type: 'category',
       data: {
         text: this.state.currentSelectionText,
         color: category.color,
@@ -350,7 +335,6 @@
       state: transform.apply(),
       isPortalOpen: false
     });
-
   }
 
   /**
@@ -380,7 +364,7 @@
         {this.renderMarkButton('bold', 'format_bold')}
         {this.renderMarkButton('italic', 'format_italic')}
         {this.renderMarkButton('underlined', 'format_underlined')}
-        {this.renderMarkButton('highlight', 'label')}
+        {this.renderMarkButton('category', 'label')}
 
         {this.renderBlockButton('numbered-list', 'format_list_numbered')}
         {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}