React Quill Editor with full toolbar options and custom buttons (undo & redo)

This article shows one way to set up Quill editor within the React framework with the full spectrum of standard toolbar options as well as 2 extra common but custom buttons: Undo and Redo.

Quick backstory: some time ago I was looking for a free WYSIWYG web editor to integrate it in my React app. I decided to stop on Quill (though there are loads more free editors out there) and was searching for examples on how to set it up with a custom toolbar and make it work as a React component. The best and almost working example that I could find was https://codesandbox.io/s/6x93pk4rp3?file=/index.js from Elizabet Oliveira back in 2018. This article builds on top of Elizabet’s example with the extra of bug fixes, up-to-date React hooks, custom Redo and Undo buttons, as well as a display of all of Quill’s standard toolbar options (that I could find). It was a bit of a hassle to make all the elements to work properly (without any errors and warnings), so hopefully this will save you off from some possible pain. Enjoy!

CodeSandBox: https://codesandbox.io/s/react-quill-full-toolbar-j569z

Live demo: https://j569z.csb.app/

I would recommend that you split the code into 2 files: EditorToolbar.js — keep the toolbar component and associated stuff, and Editor.js — the editor component.

EditorToolbar.js

You can import the Undo and Redo icons directly from ‘quill/assets/icons/undo.svg’ (redo.svg) but I found that my file-loader was not handling these svg files correctly. I’m sure there is a correctly working svg-loader out there but I was too lazy to search and test, so I just copied the files outright and manually adapted the attributes for JSX. What else… to group buttons together, you can wrap them in a span tag.

Editor.js