Quill Custom Toolbar gives `addRange(): The given range isn't in document.` in React

[ata-wt]

I copy pasted React example from https://quilljs.com/playground/react and added custom toolbar. To use with custom toolbar I added just module into example. There is no issue onChange function however when I click any item from toolbar (bold, italic) I got addRange(): The given range isn't in document. log and cannot change selected behaviour.

Here is sandbox link -> https://codesandbox.io/p/sandbox/quil-test-d4ngvg?file=%2Fsrc%2FQuill.tsx

version: "quill": "^2.0.2"

Editor.js
import React, { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
import Quill from "quill";

// Editor is an uncontrolled React component
const Editor = forwardRef(
  ({ readOnly, defaultValue, onTextChange, onSelectionChange }, ref) => {
    const containerRef = useRef(null);
    const defaultValueRef = useRef(defaultValue);
    const onTextChangeRef = useRef(onTextChange);
    const onSelectionChangeRef = useRef(onSelectionChange);

    useLayoutEffect(() => {
      onTextChangeRef.current = onTextChange;
      onSelectionChangeRef.current = onSelectionChange;
    });

    useEffect(() => {
      ref.current?.enable(!readOnly);
    }, [ref, readOnly]);

    useEffect(() => {
      const container = containerRef.current;
      const editorContainer = container.appendChild(
        container.ownerDocument.createElement("div")
      );
      const quill = new Quill(editorContainer, {
        modules: {
          toolbar: {
            container: "#toolbar",
          },
        },
        theme: "snow",
      });

      ref.current = quill;

      if (defaultValueRef.current) {
        quill.setContents(defaultValueRef.current);
      }

      quill.on(Quill.events.TEXT_CHANGE, (...args) => {
        onTextChangeRef.current?.(...args);
      });

      quill.on(Quill.events.SELECTION_CHANGE, (...args) => {
        onSelectionChangeRef.current?.(...args);
      });

      return () => {
        ref.current = null;
        container.innerHTML = "";
      };
    }, [ref]);

    return (
      <>
        <div id="toolbar">
          <span className="ql-formats">
            <button data-testid="bold" className="ql-bold" />
            <button data-testid="italic" className="ql-italic" />
          </span>
        </div>
        <div ref={containerRef}></div>
      </>
    );
  }
);

Editor.displayName = "Editor";

export default Editor;

[Libpzzz]

Hello, have you solved this problem? @ata-wt

[ata-wt]

@Libpzzz Unfortunately not. I switched to another text editor 😐. But I found temp solution for a while to use quill react version but it has deprecation warning. Then found this forked version as a temporary solution.

[Libpzzz]

All right, I'll see if there's any other solution.

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2024年9月20日(星期五) 下午3:49 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [slab/quill] Quill Custom Toolbar gives addRange(): The given range isn't in document. in React (Issue #4343)

@Libpzzz Unfortunately not. I switched to another text editor 😐. But I found temp solution for a while to use quill react version but it has deprecation warning. Then found this forked version as a temporary solution.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>