From 7419ff1b4d5f39e9643a472037537f40ee2a2f3a Mon Sep 17 00:00:00 2001
From: Flo <fpellet@ensc.fr>
Date: Wed, 9 Oct 2019 11:34:22 +0200
Subject: [PATCH] Allowing for more fine tuning of Quill without rewriting
 RichTextInput (#3714)

* allowing for more fine tuning of Quill without rewriting RichTextInput

* Adding coma to pass travis-ci

* Adding coma to pass travis-ci

* documenting new  prop for RichTextInput

* Renaming new props as per @Kmaschta's request
---
 docs/Inputs.md                           | 12 ++++++++++++
 packages/ra-input-rich-text/README.md    | 12 ++++++++++++
 packages/ra-input-rich-text/src/index.js |  5 +++++
 3 files changed, 29 insertions(+)

diff --git a/docs/Inputs.md b/docs/Inputs.md
index 693bb4da71a..496b39fb0e0 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -873,6 +873,18 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as
 <RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />
 ```
 
+If you need more customization, you can access the quill object through the `configureQuill` callback that will be called just after its initialization.
+
+```js
+const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" configureQuill={configureQuill}/>
+```
+
 ## `<SelectInput>`
 
 To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](http://material-ui.com/api/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples):
diff --git a/packages/ra-input-rich-text/README.md b/packages/ra-input-rich-text/README.md
index 4a265a8f575..e1caa20b476 100644
--- a/packages/ra-input-rich-text/README.md
+++ b/packages/ra-input-rich-text/README.md
@@ -43,6 +43,18 @@ You can customize the rich text editor toolbar using the `toolbar` attribute, as
 <RichTextInput source="body" toolbar={[ ['bold', 'italic', 'underline', 'link'] ]} />
 ```
 
+If you need more customization, you can access the quill object through the `configureQuill` callback that will be called just after its initialization.
+
+```js
+const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" configureQuill={configureQuill}/>
+```
+
 ## License
 
 This library is licensed under the MIT License, and sponsored by [marmelab](http://marmelab.com).
diff --git a/packages/ra-input-rich-text/src/index.js b/packages/ra-input-rich-text/src/index.js
index 9d3ce6cd460..a9c2636f339 100644
--- a/packages/ra-input-rich-text/src/index.js
+++ b/packages/ra-input-rich-text/src/index.js
@@ -29,6 +29,7 @@ export class RichTextInput extends Component {
             }),
         ]),
         fullWidth: PropTypes.bool,
+        configureQuill: PropTypes.func,
     };
 
     static defaultProps = {
@@ -52,6 +53,10 @@ export class RichTextInput extends Component {
             ...options,
         });
 
+        if (this.props.configureQuill) {
+            this.props.configureQuill(this.quill);
+        }
+
         this.quill.setContents(this.quill.clipboard.convert(value));
 
         this.editor = this.divRef.querySelector('.ql-editor');