Using with react-quill got an error

[murilomothsin]

Hello,

I'm trying to use your lib with react-quill and I'm getting this error:

The given range isn't in document.

Here's my code snippet:

import React      from 'react'
import ReactQuill, { Quill } from 'react-quill'
import { ImageUpload } from 'quill-image-upload';

Quill.register('modules/imageUpload', ImageUpload);

const QuillEditor = (props) => {
  const defaultHeaderOptions = [2, 3, false]

  return (
    <ReactQuill
      value={props.value}
      onChange={props.onChange}
      theme="bubble"
      modules={{
        toolbar: {
          container: [
           ...
        ]},
        imageUpload: {
          url: '/api/articles/image_upload',
          method: "POST",
          headers: {
            'X-CSRF-TOKEN': document.querySelector('[name="csrf-token"]').content
          },
          callbackOK: (serverResponse, next) => {
            console.log(serverResponse)
            next(serverResponse)
          },
          callbackKO: (serverError) => {
            console.log(serverError);
          },
          checkBeforeSend: (file, next) => {
            console.log(file);
            next(file);
          }
        }
      }}
    />
  )
}

export default QuillEditor

Thanks,

[fxmontigny]

Sorry @murilomothsin i have never use React with quill. This is probably a react error.

Good luck