--- a/client/src/components/SlateEditor.js	Thu Jun 01 19:01:03 2017 +0200
+++ b/client/src/components/SlateEditor.js	Tue Jun 06 15:56:41 2017 +0200
@@ -2,6 +2,9 @@
 import React from 'react'
 import moment from 'moment';
 import HtmlSerializer from '../HtmlSerializer'
+import AnnotationPlugin from '../AnnotationPlugin';
+
+const plugins = [];
 
 /**
  * Define the default node type.
@@ -17,10 +20,7 @@
 
 const schema = {
   nodes: {
-    'block-quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
     'bulleted-list': props => <ul {...props.attributes}>{props.children}</ul>,
-    'heading-one': props => <h1 {...props.attributes}>{props.children}</h1>,
-    'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
     'list-item': props => <li {...props.attributes}>{props.children}</li>,
     'numbered-list': props => <ol {...props.attributes}>{props.children}</ol>,
   },
@@ -28,11 +28,12 @@
     bold: {
       fontWeight: 'bold'
     },
-    code: {
-      fontFamily: 'monospace',
-      backgroundColor: '#eee',
-      padding: '3px',
-      borderRadius: '4px'
+    // TODO Check if we can move this to the plugin using the schema option
+    // https://docs.slatejs.org/reference/plugins/plugin.html#schema
+    annotation: {
+      textDecoration: 'underline',
+      textDecorationStyle: 'dotted',
+      backgroundColor: 'yellow',
     },
     italic: {
       fontStyle: 'italic'
@@ -58,10 +59,20 @@
    */
   constructor(props) {
     super(props);
+
+    const annotationPlugin = AnnotationPlugin({
+      onChange: (text) => {
+        this.setState({ currentSelectionText: text });
+      }
+    });
+
+    plugins.push(annotationPlugin);
+
     this.state = {
       state: Plain.deserialize(''),
       startedAt: null,
-      finishedAt: null
+      finishedAt: null,
+      currentSelectionText: ''
     };
   }
 
@@ -174,9 +185,6 @@
       case 'u':
         mark = 'underlined'
         break
-      case '`':
-        mark = 'code'
-        break
       default:
         return
     }
@@ -201,9 +209,16 @@
     e.preventDefault()
     let { state } = this.state
 
+    let toggleMarkOptions;
+    if (type === 'annotation') {
+      toggleMarkOptions = { type: type, data: { text: this.state.currentSelectionText } }
+    } else {
+      toggleMarkOptions = type;
+    }
+
     state = state
       .transform()
-      .toggleMark(type)
+      .toggleMark(toggleMarkOptions)
       .apply()
 
     this.setState({ state })
@@ -294,10 +309,8 @@
         {this.renderMarkButton('bold', 'format_bold')}
         {this.renderMarkButton('italic', 'format_italic')}
         {this.renderMarkButton('underlined', 'format_underlined')}
-        {this.renderMarkButton('code', 'code')}
-        {this.renderBlockButton('heading-one', 'looks_one')}
-        {this.renderBlockButton('heading-two', 'looks_two')}
-        {this.renderBlockButton('block-quote', 'format_quote')}
+        {this.renderMarkButton('annotation', 'label')}
+
         {this.renderBlockButton('numbered-list', 'format_list_numbered')}
         {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
       </div>
@@ -356,6 +369,7 @@
           spellCheck
           placeholder={'Enter some rich text...'}
           schema={schema}
+          plugins={plugins}
           state={this.state.state}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}