[react-quill] addrange() the given range isn't in document

오류 코드

addrange() the given range isn't in document

 

해결 방법

매 렌더링 마다 moudles을 계속 생성하고 있기 때문에 발생하는 오류

따라서 module 변수를 useMemo를 사용해주면된다.

const modules = useMemo(() => {
  return {
    toolbar: {
      container: [
        ['image'],
        [{ header: [1, 2, 3, false] }],
        ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      ],
      handlers: {
        // 이미지 처리는 우리가 직접 imageHandler라는 함수로 처리할 것이다.
        image: imageHandler,
      },
    },
  };
}, []);

 

참고

https://github.com/quilljs/quill/issues/1940#issuecomment-379536850

Error: The given range isn't in document · Issue #1940 · quilljs/quill