--- a/client/src/components/SlateEditor/index.js	Tue Nov 06 16:19:26 2018 +0100
+++ b/client/src/components/SlateEditor/index.js	Thu Nov 08 16:03:28 2018 +0100
@@ -1,11 +1,13 @@
-import { Value } from 'slate'
-import Plain from 'slate-plain-serializer'
-import { Editor } from 'slate-react'
-import React from 'react'
-import { Portal } from 'react-portal'
-import HtmlSerializer from './HtmlSerializer'
-import AnnotationPlugin from './AnnotationPlugin'
-import CategoriesTooltip from './CategoriesTooltip'
+import { Value } from 'slate';
+import Plain from 'slate-plain-serializer';
+import { Editor } from 'slate-react';
+import React from 'react';
+import { Portal } from 'react-portal';
+import { Trans, withNamespaces } from 'react-i18next';
+import * as R from 'ramda';
+import HtmlSerializer from './HtmlSerializer';
+import AnnotationPlugin from './AnnotationPlugin';
+import CategoriesTooltip from './CategoriesTooltip';
 import './SlateEditor.css';
 import { now } from '../../utils';
 import { defaultAnnotationsCategories } from '../../constants';
@@ -114,6 +116,8 @@
       isCheckboxChecked: false,
       enterKeyValue: 0,
     };
+
+    this.editor = React.createRef();
   }
 
   componentDidMount = () => {
@@ -155,10 +159,11 @@
       Object.assign(newState, { startedAt: now() });
     }
 
+    const oldState = R.clone(this.state);
     this.setState(newState)
 
     if (typeof this.props.onChange === 'function') {
-      this.props.onChange(newState);
+      this.props.onChange(R.clone(this.state), oldState, newState);
     }
   }
 
@@ -172,7 +177,7 @@
   hasMark = type => {
     const { value } = this.state
     return value.activeMarks.some(mark => mark.type === type)
-}
+  }
 
   /**
    * Check if the any of the currently selected blocks are of `type`.
@@ -184,7 +189,7 @@
   hasBlock = type => {
     const { value } = this.state
     return value.blocks.some(node => node.type === type)
-}
+  }
 
   asPlain = () => {
     return Plain.serialize(this.state.value);
@@ -213,10 +218,12 @@
   }
 
   focus = () => {
-    this.refs.editor.focus();
+    if(this.editor.current) {
+      this.editor.current.focus();
+    }
   }
 
-      /**
+  /**
    * When a mark button is clicked, toggle the current mark.
    *
    * @param {Event} e
@@ -516,17 +523,18 @@
     return (
       <div className="checkbox float-right">
         <label className="mr-2">
-          <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /><small className="text-muted ml-1"> Appuyer sur <kbd className="bg-irinotes-form text-muted ml-1">Entrée</kbd> pour ajouter une note</small>
+          <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /><small className="text-muted ml-1"><Trans i18nKey="slate_editor.press_enter_msg">Appuyer sur <kbd className="bg-irinotes-form text-muted ml-1">Entrée</kbd> pour ajouter une note</Trans></small>
         </label>
       </div>
     )
   }
 
   renderToolbarButtons = () => {
+    const t = this.props.t;
     return (
       <div>
-        <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold float-right" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
-          { this.props.note ? 'Sauvegarder' : 'Ajouter' }
+        <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold float-right text-capitalize" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+          { this.props.note ? t('common.save') : t('common.add') }
         </button>
         { !this.props.note && this.renderToolbarCheckbox() }
       </div>
@@ -627,13 +635,14 @@
    */
 
   renderEditor = () => {
+    const t = this.props.t;
     return (
       <div className="editor-slatejs p-2">
         {this.renderHoveringMenu()}
         <Editor
-          ref="editor"
+          ref={this.editor}
           spellCheck
-          placeholder={'Votre espace de prise de note...'}
+          placeholder={t('slate_editor.placeholder')}
           schema={schema}
           plugins={plugins}
           value={this.state.value}
@@ -691,4 +700,12 @@
  * Export.
  */
 
-export default SlateEditor
+export default withNamespaces("", {
+  innerRef: (ref) => {
+    const editorRef = (ref && ref.props) ? ref.props.editorRef : null;
+    if(editorRef && editorRef.hasOwnProperty('current')) {
+      editorRef.current = ref;
+    }
+  }
+})(SlateEditor);
+// export default SlateEditor;