How to create undo/redo buttons in Quill JS (react-quill)?

Question

QuillJS doesn\'t come with default undo/redo buttons. I\'m trying to add them to the toolbar. Quill has a folder with the undo/redo icons saved. In the node_modules, there\'

Answer 1

@Loa thanks for all your help. I had to mix together code from a lot of different posts, but your links started the process of finding all the posts.

Here's how to make undo/redo work for react-quill:

In the ReactQuill component in the render(), add:

     {this.reactQuillRef = el}}
        .../>   

In the constructor, add:

        var icons = Quill.import("ui/icons");
        icons["undo"] = 'UNDO';
        icons["redo"] = 'REDO';

        this.modules = {
            history: {
                delay: 1000,
                maxStack: 100,
                userOnly: false
              },
            toolbar: {
                container: [
                ['undo'],
                ['redo'],
                ...
                ],
                handlers: {
                'undo' : this.myUndo,
                'redo' : this.myRedo,
                }
            }

In the function builder area (don't know the name for it), add these functions:

    myUndo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.undo();
    }

    myRedo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.redo();
    }

That will get the undo/redo functions working. In the editor, the undo/redo buttons don't have the icons yet; I haven't figured out how to add the icons yet; they just have the words 'UNDO' and 'REDO'. But they work.

The next thing for me to figure out will be how to add the undo/redo icons. If anyone knows how to do this, please let me know. Thanks!