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
marmelab · Oct 9, 2019 · 7419ff1 · 7419ff1
1 parent d03447c
commit 7419ff1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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');