How to create undo/redo buttons in angular with quill-editor?

Question

I'm working on a rich text with ngx-quill and quill in angular 13 and trying to add a undo and redo functionality

import Quill from 'quill';
import { QuillEditorComponent } from 'ngx-quill';
import 'quill/modules/history';

editorConfig = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote', 'code-block'],

      [{ header: 1 }, { header: 2 }], // custom button values
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
      [{ direction: 'rtl' }], // text direction
      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],
      ['clean'], // remove formatting button
      ['link', 'image'], // link and image
      ['undo', 'redo']
    ],
    handlers: {
      'undo': () => this.editor.quillEditor.history.undo(),
      'redo': () => this.editor.quillEditor.history.redo(),
    },
    imageResize: true,
    history: {
      delay: 1000,
      maxStack: 500,
      userOnly: true
    }
  };

I algo change this code to try if it works but it doesn't

handlers: {
      // 'undo': () => (this.editor.quillEditor as any).history.undo(),
      // 'redo': () => (this.editor.quillEditor as any).history.redo(),
      'undo': () => {
        const quill = this.editor.quillEditor;
        (quill as any).history.undo();
      },
      'redo': () => {
        const quill = this.editor.quillEditor;
        (quill as any).history.redo();
      },
    },

Please I am still junior y I'm trying my best. Any help will be great