Allowing for more fine tuning of Quill without rewriting RichTextInput

docs/Inputs.md

@@ -961,6 +961,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 `quillInit` callback that will be called just after its initialization.
+
+```js
+const quillInit = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" quillInit={quillInit}/>
+```
+
 ## `<SelectInput>`
 
 To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](http://v1.material-ui.com/api/select). Set the `choices` attribute to determine the options (with `id`, `name` tuples):

packages/ra-input-rich-text/README.md

@@ -44,6 +44,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 `quillInit` callback that will be called just after its initialization.
+
+```js
+const quillInit = quill => quill.getModule('toolbar').addHandler('bold', function (value) {
+    this.quill.format('bold', value)
+});
+
+// ...
+
+<RichTextInput source="text" quillInit={quillInit}/>
+```
+
 ## License
 
 This library is licensed under the MIT License, and sponsored by [marmelab](http://marmelab.com).

packages/ra-input-rich-text/src/index.js

@@ -29,6 +29,7 @@ export class RichTextInput extends Component {
             }),
         ]),
         fullWidth: PropTypes.bool,
+        quillInit: PropTypes.func,
     };
 
     static defaultProps = {
@@ -52,6 +53,10 @@ export class RichTextInput extends Component {
             ...options,
         });
 
+        if (this.props.quillInit) {
+            this.props.quillInit(this.quill);
+        }
+
         this.quill.setContents(this.quill.clipboard.convert(value));
 
         this.editor = this.divRef.querySelector('.ql-editor');