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's also undo() and redo() functions. I'm kind of new to coding and don't know how to access these things and make them work. I'm using React. Here's my code so far:

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.bubble.css';

class QuillTextEditor extends Component {
    constructor(props) {
        super(props);

        this.modules = {
            toolbar: [
              [{ 'header': [false, 1, 2, 3] }],
              [{ 'align': [] }],
              ['bold', 'italic', 'underline',],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{ 'indent': '-1'}, { 'indent': '+1' }],
              [{ 'script': 'super' }, 'strike'],
              [{ 'color': [] }, { 'background': [] }], 
              ['link', 'image'],
            ]
        };

        this.formats = [
            'header',
            'align',
            'bold', 'italic', 'underline', 
            'list', 'bullet',
            'indent', 'indent',
            'script', 'strike',
            'color', 'background',
            'link', 'image',
        ];
    }

    render() {
        return (
          <div>
            <ReactQuill 
                theme="snow"  
                modules={this.modules}
                formats={this.formats} 
                value={''}/>
            </div>
          </div>
        );
    }

}

export default QuillTextEditor;

Does anyone know exactly what code I would need to write and where in order to add undo/redo icons to the toolbar that are connected to the undo/redo functions build into Quill? I've been trying for days and can't figure it out.

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:

    <ReactQuill 
        ...
        ref={(el) => {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!

Answer 2

Not sure how this would or wouldn't integrate with React, but I was able to get svg icons using this issue on the quill repo.

toolbarOptions = [
    ['bold', 'italic', 'underline'],
    ['undo' , 'redo' ],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
    ['image']
];

var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
  </svg>`;

var quill = new Quill('div#content', {
    modules: {
        toolbar: toolbarOptions,
...

Answer 3

Does anyone know exactly what code I would need to write and where in order to add undo/redo icons to the toolbar that are connected to the undo/redo functions build into Quill?

Hi. Unfortunately I still don't know how to connect buttons to native Quill functions. But you can do something else that can give you the desired result.

Take a look at this. Search for items 020, 021 and 026.

You can add a new button, and set it to call the following code:

quill.history.undo();

History Module

If you have additional questions, please leave a comment. As soon as I can, I will answer you.

Answer 4

I just want to add something for developers who are using react-quill. on this line:

 var icons = Quill.import("ui/icons");

You do not get Quill reference. so instead of the above line you can use:

 var icons = ReactQuill.Quill.import("ui/icons");

This solves the problem for ReactQuill.