--- a/client/src/components/Note.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/components/Note.js	Fri Aug 04 09:48:09 2017 +0200
@@ -45,7 +45,8 @@
         <div className="note-content">
           <SlateEditor ref="editor"
             onButtonClick={ this.onClickButton }
-            note={ this.props.note } />
+            note={ this.props.note }
+            annotationCategories={ this.props.annotationCategories } />
         </div>
       )
     }

--- a/client/src/components/NoteInput.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/components/NoteInput.js	Fri Aug 04 09:48:09 2017 +0200
@@ -64,7 +64,8 @@
               onButtonClick={this.onAddNoteClick}
               onCheckboxChange={this.onCheckboxChange}
               isChecked={this.props.autoSubmit}
-              isButtonDisabled={this.state.buttonDisabled} />
+              isButtonDisabled={this.state.buttonDisabled}
+              annotationCategories={ this.props.annotationCategories } />
           </div>
           <div className="editor-right">
             <FormControl

--- a/client/src/components/NotesList.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/components/NotesList.js	Fri Aug 04 09:48:09 2017 +0200
@@ -62,7 +62,8 @@
             onClose={ this.closeNote }
             onDelete={ this.confirmDelete.bind(this, note) }
             onSave={ this.updateNote }
-            isEditing={ this.state.editingNote && note === this.state.editingNote } />
+            isEditing={ this.state.editingNote && note === this.state.editingNote }
+            annotationCategories={this.props.annotationCategories} />
         )}
 
         <Modal show={this.state.showModal} onHide={this.closeModal}>

--- a/client/src/components/Session.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/components/Session.js	Fri Aug 04 09:48:09 2017 +0200
@@ -13,6 +13,7 @@
 import * as userActions from '../actions/userActions';
 import { getSession, getSessionNotes } from '../selectors/coreSelectors';
 import { getAutoSubmit } from '../selectors/authSelectors';
+import { extractAnnotationCategories, defaultAnnotationsCategories } from '../constants';
 
 class Session extends Component {
   render() {
@@ -31,6 +32,7 @@
                 notes={this.props.notes}
                 deleteNote={this.props.notesActions.deleteNote}
                 updateNote={this.props.notesActions.updateNote}
+                annotationCategories={this.props.annotationCategories}
               />
             </div>
           </div>
@@ -42,7 +44,8 @@
                     session={this.props.currentSession}
                     autoSubmit={this.props.autoSubmit}
                     addNote={this.props.notesActions.addNote}
-                    setAutoSubmit={this.props.userActions.setAutoSubmit} />
+                    setAutoSubmit={this.props.userActions.setAutoSubmit}
+                    annotationCategories={this.props.annotationCategories}/>
                 </Col>
               </Row>
             </Grid>
@@ -60,11 +63,13 @@
   const autoSubmit = getAutoSubmit(state);
   const currentSession = getSession(sessionId, state);
   const currentNotes = getSessionNotes(sessionId, state);
+  const annotationCategories = currentSession?extractAnnotationCategories(currentSession.get('protocol')):defaultAnnotationsCategories;
 
   return {
     currentSession,
     notes: currentNotes,
-    autoSubmit
+    autoSubmit,
+    annotationCategories
   };
 }
 

--- a/client/src/components/SlateEditor.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/components/SlateEditor.js	Fri Aug 04 09:48:09 2017 +0200
@@ -7,6 +7,7 @@
 import AnnotationPlugin from '../AnnotationPlugin'
 import CategoriesTooltip from './CategoriesTooltip'
 import { now } from '../utils';
+import { defaultAnnotationsCategories } from '../constants';
 
 const plugins = [];
 
@@ -46,12 +47,6 @@
   }
 }
 
-const annotationCategories = [
-  { key: 'important', name: 'Important',    color: '#F1C40F' },
-  { key: 'keyword',   name: 'Mot-clé',      color: '#2ECC71' },
-  { key: 'comment',   name: 'Commentaire',  color: '#3498DB', hasComment: true }
-];
-
 /**
  * The rich text example.
  *
@@ -531,7 +526,7 @@
         onClose={this.onPortalClose}
         closeOnOutsideClick={false} closeOnEsc={true}>
         <div className="hovering-menu">
-          <CategoriesTooltip categories={annotationCategories} onCategoryClick={this.onCategoryClick} />
+          <CategoriesTooltip categories={this.props.annotationCategories || defaultAnnotationsCategories} onCategoryClick={this.onCategoryClick} />
         </div>
       </Portal>
     )

--- a/client/src/constants/index.js	Thu Aug 03 23:04:33 2017 +0200
+++ b/client/src/constants/index.js	Fri Aug 04 09:48:09 2017 +0200
@@ -4,3 +4,26 @@
   UPDATED: 2,
   DELETED: 3
 }
+
+export const defaultAnnotationsCategories = [
+  { key: 'important', name: 'Important',    color: '#F1C40F' },
+  { key: 'keyword',   name: 'Mot-clé',      color: '#2ECC71' },
+  { key: 'comment',   name: 'Commentaire',  color: '#3498DB', hasComment: true }
+];
+
+
+export const extractAnnotationCategories = (protocol) => {
+  const metacategories = (protocol)?protocol['metacategories']:null;
+  if(!metacategories) {
+    return defaultAnnotationsCategories;
+  }
+  return metacategories.map((m) => {
+    return {
+      key: m.id,
+      name: m.name,
+      description: m.description,
+      color: m.color,
+      hasComment: m.has_comment
+    }
+  })
+}