Discussion on: ReactQuill with NextJS

[Ankit kumar]

toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element

[Robersom Aquino]

Add this CSS in your global style:

.quill > .ql-toolbar:first-child {
display: none !important;
}

Or in your next.config.js
reactStrictMode: false,

[MarceloPatropi]

SAme here. Didi you find a solution?

[Marco Mesen Campos]

Simple solution, I guess not the best:

// component:
<Editor value={html} onChange={setHtml} id="html-editor" />

// css
  #html-editor > div:nth-child(1) {
    display: none !important;
  }

I don't think it's the best either, but definitely better than the previous one

export function TextEditor(props: TextEditorProps) {
  const refElement = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState('The template will be here');

  useEffect(() => {
    if (refElement.current?.firstChild) {
      const children = Array.from(
        refElement.current.firstChild.childNodes
      ) as HTMLElement[];
      const duplicateTooltips = children.filter((el) => {
        return el.classList.contains('ql-toolbar');
      });
      if (duplicateTooltips.length > 1) {
        duplicateTooltips[0].remove();
      }
    }
  }, [refElement.current]);

  return (
    <div ref={refElement}>
      <Editor value={html} onChange={setHtml} />
    </div>
  );
}