Strange behaviour with custom toolbar

[masterodi]

Hello,

I am trying to implement an editor using quill and React + Next.js. I am using 'use client' and dynamic from Next.js to turn off any server side rendering. Here is my code:

import Quill from 'quill';
import { useEffect, useRef } from 'react';

export default function Editor({ id }) {
    const editorContainerRef = useRef(null);
    const toolbarRef = useRef(null);
    
    useEffect(() => {
        const editorContainer = editorContainerRef.current;
        const toolbarContainer = toolbarRef.current;
        
        new Quill(editorContainer!, {
	        modules: {
		        toolbar: {
			        container: toolbarContainer,
		        },
	        },
        });
        
        return () => {
	        editorContainer!.innerHTML = '';
        };
    }, []);
    
    return (
    <div>
	    <div ref={toolbarRef} className="flex flex-wrap gap-1">
		    <button className="ql-bold btn btn-neutral btn-sm">Bold</button>
		    <button className="ql-italic btn btn-neutral btn-sm">
			    Italic
		    </button>
		    <button className="ql-underline btn btn-neutral btn-sm">
			    Underline
		    </button>
	    </div>
	    <div ref={editorContainerRef} id={id} className="prose" />
    </div>
    );
}

Everything works fine, the only problem is that once I format a text using Bold/Italic/Underline, if I try to toggle them off, it's not working. Am I doing something wrong? I would really appreciate some guidance.

[kbruccoleri]

I am also experiencing this in a project of mine.

I haven't gotten to the bottom of this yet, but I found that I was the toolbar events were being rendered and attached twice, causing it to toggle back and forth in one render.