How to add custom handlers in react-quill modules when toolbar is array of options?

Question

I have config for React-quill text editor, and it works fine but when I try to add handlers to make my custom undo, redo actions it doesnt works

 const modules = {
    history: [{ delay: 500 }, { maxStack: 100 }, { userOnly: false }],
    toolbar: [
      [{ header: [1, 2, false] }],
      [{ font: [] }], // fonts
      [{ size: ["12px", "14px", "16px", "18px", "20px"] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
      [{ color: [] }, { background: [] }],
      [{ align: [] }],
      ["link"],
      /* ["undo", "redo"],*/
      [
        {
          handlers: {
            undo: () => {
              alert("dsdsd");
            },
          },
        },
      ],
    ],
  };

So the question is how add custom handlers to toolbar when toolbar is array of options

score 2 · Answer 1 · edited Apr 10 '23 at 07:05

Remember to pay attention to re-renders. Re-renders wasted a lot of time for me. Use useMemo() Hook in react JS like this:

const modules = useMemo(
    () => ({
      toolbar: {
        container: [
          [{ font: [] }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          ["bold", "italic", "underline", "strike"],
          [{ color: [] }, { background: [] }],
          [{ script: "sub" }, { script: "super" }],
          ["blockquote", "code-block"],
          [{ list: "ordered" }, { list: "bullet" }],

          [
            { indent: "-1" },
            { indent: "+1" },
            { align: [] },
          ],
          [{ direction: "rtl" }],
          [{ size: ["small", false, "large", "huge"] }],
          ["link", "image", "video"],
          ["clean"],
        ],

        handlers: {
          image: handleClick,
        },
        history: {
          delay: 500,
          maxStack: 100,
          userOnly: true,
        },
      },
    }),
    []
  );

Yes! unless I added useMemo, my ReactQuill component would not work at all! So a more severe problem that over-rendering. — Michael Coxon, Aug 17 '23 at 00:05

score 1 · Accepted Answer · answered Sep 22 '22 at 13:28

In React-quill, the toolbar contains containers and handlers( see: https://quilljs.com/docs/modules/toolbar/). If you set the toolbar value to string or array, it uses the value as a container, and if set Object use as handlers. And if you want to set both containers and handlers, You should set the toolbar as a key value structure:

toolbar: {
  container: [
    [{ header: [1, 2, false] }]
  ], 
  handlers: {
    'bold': customBoldHandler
  }
}

How to add custom handlers in react-quill modules when toolbar is array of options?

2 Answers2