Create undo/redo buttons in Quill JS: use react-quill

Programming
,
1

I am trying to add undo/redo buttons to the toolbar of the QuillJS editor. I have the undo/redo icons saved in a folder in the node_modules directory and Quill also has undo() and redo() functions built in.

I need help understanding how to access these icons and functions and make them work in my React code. Here is the code I have 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 what code I need to write and where, in order to add the undo/redo icons to the toolbar and link them to the undo() and redo() functions?

2

To add the undo/redo buttons to the toolbar and link them to the undo() and redo() functions in your QuillJS editor, you can modify the toolbar array in the modules object as follows:

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'],
        [{ 'undo': {} }, { 'redo': {} }]
    ]
};

This adds new array elements to the toolbar array for the undo and redo buttons. The undo and redo buttons are represented as objects with empty properties, which will be used to customize the button appearance using CSS.

To link the undo() and redo() functions to these buttons, you can pass a reference to the Quill instance to a function that adds event listeners to the undo and redo buttons. Here’s an example of how you can modify your render() method to add these event listeners:

render() {
    return (
        <div>
            <div id="toolbar">
                <select className="ql-header" defaultValue={''}>
                    <option value="1"></option>
                    <option value="2"></option>
                    <<option value="3"></option>
                    <option value="false"></option>
                </select>
                <button className="ql-bold"></button>
                <button className="ql-italic"></button>
                <button className="ql-underline"></button>
                <button className="ql-list" value="ordered"></button>
                <button className="ql-list" value="bullet"></button>
                <button className="ql-indent" value="-1"></button>
                <button className="ql-indent" value="+1"></button>
                <button className="ql-script" value="super"></button>
                <button className="ql-strike"></button>
                <select className="ql-color"></select>
                <select className="ql-background"></select>
                <button className="ql-link"></button>
                <button className="ql-image"></button>
                <button className="ql-undo"></button>
                <button className="ql-redo"></button>
            </div>
            <ReactQuill 
                theme="snow"  
                modules={this.modules}
                formats={this.formats} 
                value={''}
                ref={(el) => { this.quillRef = el; }} />
        </div>
    );
}

componentDidMount() {
    const toolbar = document.querySelector('#toolbar');
    toolbar.addEventListener('click', (event) => {
        const button = event.target;
        if (button.classList.contains('ql-undo')) {
            this.quillRef.getEditor().history.undo();
        } else if (button.classList.contains('ql-redo')) {
            this.quillRef.getEditor().history.redo();
        }
    });
}

In this example, we’ve added the undo and redo buttons directly to the toolbar in the render method. We’ve also added an event listener to the toolbar element in the componentDidMount() method. This listener checks if the clicked button has the ql-undo or ql-redo class, and if so, it calls the undo() or redo() function on the Quill editor’s history object, respectively.

Note that we’ve also added a ref to the ReactQuill component, which allows us to get a reference to the Quill instance and call its getEditor() method to access the history object.