quill: Error: The given range isn't in document

I solve this issue by caching the modules props, instead of keep creating a new instance during each render.

Before:

<ReactQuill
        modules={{...}}
        ...
      />

After:

<ReactQuill
        modules={this.modules}
        ...
      />

Had the same problem and fixed it by not using the ‘value’ prop on the editor, but rather the ‘defaultValue’, which is apparently unmanaged to some extent. Using ‘react-quill’, fyi. Hope it helps.

 <ReactQuill 
            theme={'snow'}
            onChange={this.props.onChange}
            defaultValue={this.state.text}
            modules={ReactQuillEditor.modules}
            formats={ReactQuillEditor.formats}
            placeholder={'Write something...'}
        />

I wrapped the <ReacQuill/> component within a <div> container, and it worked

<div name="desciption-container">
   <ReactQuill
          defaultValue={this.state.description}
          onChange={this.handleDescriptionChange}
   />
</div>

Someone in the future may appreciate this:

You can’t assign a prop to value directly. You must assign it to state first. If you dont do this, the value of content will be always the prop value.

class RichEditor extends Component {
    static propTypes = {
        content: PropTypes.string,
    }

    componentDidMount() {
        this.setState({
            text: this.props.content,
        })
    }

    state = {
        text: '',
       

    handleChange = (value) => {
        this.setState({ text: value })
    }

    render() {
        return (
            <ReactQuill
                value={this.state.text}
                onChange={this.handleChange}
            />
        )
    }
}

RichEditor.defaultProps = {
    content: '',
}

export default RichEditor

I’m getting the same error when using mobx to observe the entire delta object returned by the editor.

@observer
export class FormPage extends React.Component {
   @observable comment;

    render(){
          return <ReactQuill value={comment} onChange={this._onChange}/>
    }   

    _onChange = (content, delta, source editor)=> {
          this.comment = editor.getContent()
    }
}

Also have the same message using pasteHTML with a large text containing a embed image:

The given range isn't in document.
setNativeRange @ app-features-admin-_core-error-admin-error-module~app-features-admin-admin-activity-admin-activity-a~b97c2df6.js:3149
setRange @ app-features-admin-_core-error-admin-error-module~app-features-admin-admin-activity-admin-activity-a~b97c2df6.js:3170
setSelection @ app-features-admin-_core-error-admin-error-module~app-features-admin-admin-activity-admin-activity-a~b97c2df6.js:1487
dangerouslyPasteHTML @ app-features-admin-_core-error-admin-error-module~app-features-admin-admin-activity-admin-activity-a~b97c2df6.js:8906
pasteHTML @ app-features-admin-_core-error-admin-error-module~app-features-admin-admin-

@jhchen should we re-open this one?

@jhchen @kayahr I found the bug always occurring when text is null. I rewrite the paste function to fix it.

// 修复粘贴时编辑器跳动的bug
Clipboard.prototype.onPaste = function(e) {
  if (e.defaultPrevented || !this.quill.isEnabled()) return;
  // fix quill's bug on chrome: given range isn't in document
  if (!this.quill.getText().trim()) {this.quill.setText(' ', Quill.sources.API);}
  try {
    let range = this.quill.getSelection();
    let delta = new Delta().retain(range.index);
    let scrollTop = this.quill.scrollingContainer.scrollTop;
    // this.container.focus();  // 源代码中此句会导致粘贴时页面跳动或闪动的bug，很hack的解决方案->原型覆盖
    this.quill.selection.update(Quill.sources.SILENT);
    setTimeout(() => {
      delta = delta.concat(this.convert()).delete(range.length);
      this.quill.updateContents(delta, Quill.sources.USER);
      this.quill.focus();
    }, 1);
  } catch (e) {
    console.log(e);
  }
}

I have the same problem when using Angular and PrimeNG UI library. The error is occurring however only when Quill editor is being used in a modal dialog. The error is occurring in this function of the PrimeNG wrapper for Quill editor.

    Editor.prototype.writeValue = function (value) {
        this.value = value;
        if (this.quill) {
            if (value)
                this.quill.pasteHTML(value);
            else
                this.quill.setText('');
        }
    };

Hi! Just wanted to leave what solved the issue for me: After removing the object modules in the ReactQuill component , the issue stopped. So i realized, that the modules object passed directly into the component makes it render all modules on every keypress.

Hope it works for you guys!

More info in : (https://stackoverflow.com/questions/59825450/react-quill-custom-image-handler-module-causing-typing-issues-with-the-editor)

Had the same problem and fixed it by not using the ‘value’ prop on the editor, but rather the ‘defaultValue’, which is apparently unmanaged to some extent. Using ‘react-quill’, fyi. Hope it helps.

 <ReactQuill 
            theme={'snow'}
            onChange={this.props.onChange}
            defaultValue={this.state.text}
            modules={ReactQuillEditor.modules}
            formats={ReactQuillEditor.formats}
            placeholder={'Write something...'}
        />

thanks a lot. This works like charm. You saved my day!

Fixed it in Angular 7 by adding below code. @ViewChild(‘editor’) editor: Editor; setTimeout(() => { this.editor.writeValue(data); this.editor.quill.setSelection(null, data.length, null); }, 100);

Where do you get the Editor class from?

Fixed it in Angular 7 by adding below code. @ViewChild(‘editor’) editor: Editor; setTimeout(() => { this.editor.writeValue(data); this.editor.quill.setSelection(null, data.length, null); }, 100);

using this library via react-quill, i ended up switching to uncontrolled component which helped

In my case, I was able to solve this issue (at least in Chrome 69) by performing the update asynchronously:

const selection = quill.getSelection();
setImmediate(() => {
  quill.setContents(delta);
  quill.setSelection(selection);
});

I don’t know if this causes issues in other browsers or environments, and literally just now figured this out. In my case, I have a custom React wrapper around Quill which may periodically (but not too frequently) receive an updated value of the editor.

@DeyLak I’ve tried your solution and I don’t see the error anymore although when the component was re-rendered the range position is always at the start. Might need to add something at the componentWillUnmount()?

@abelski21 I was able to fix this issue the same way, with this dirty hack(I’m using react-quill, but I think, something similar is possible for main library, cause it uses internal Quill objects via react ref):

<ReactQuill {...{
  ref: (node) => {
    if (!node) return
    const originalSetRange = node.editor.selection.__proto__.setNativeRange.bind(node.editor.selection)
    node.editor.selection.__proto__.setNativeRange = (startNode, startNodeOffset, endNode, endNodeOffset) => {
      if (
        node.editor.root.contains(startNode) &&
        node.editor.root.contains(endNode)
        ) {
          originalSetRange(startNode, startNodeOffset, endNode, endNodeOffset)
        }
      }
    },
...

Ofcourse, this is only a temporarily solution.

I’ve stumbled upon this problem as well, or at least very similar.

I managed to track the down the problem and workaround it. On my case I created a custom embed and applied some style to it. When you select the embed and type over it, there seems to be a change on quill to adjust styling or something like that.

What I did was to apply the styling to the underlying tag instead of the main one. This may not work for this case since my embed is immutable and has an editable wrapper to handle changes attempts (default Quill construction for this kind of blots).

Here’s my use case: https://codepen.io/ivanalejandro0/pen/GdOBjQ

To solve this problem I just had to change:

.quill-mention {

to

.quill-mention > span {

@jhchen why is this issue closed if it was merged in develop (the unstable version of Quill as far as I understand)? Can you please offer a solution for the 1.3.6 stable version? Or do an intermediate release?

IMHO the fix you have committed doesn’t seem to be a breaking change and it can easily be a minor bump.

@evonox I’m having the same issue. Did you find a solution? NOTE: oddly, i don’t get the message the first time, but all subsequent times. I’m also using a NgPrime modal window and editor. importing through Angular-cli

PING

Any updates or fix for this? I’m also having the same problem using ReactQuill with custom toolbar handlers. It appears to be working fine if I only use the mention custom toolbar together with combination of generic toolbar buttons, but when I click the markImportant (which only updates the observable) it throws an error same with what others experienced above:

quill.js:3145 The given range isn't in document.
setNativeRange @ quill.js:3145
setRange @ quill.js:3166
focus @ quill.js:2879
focus @ quill.js:1189

Here’s my code:

render(): {
   return (
     <ReactQuill ref={this.onEditorRendered}
                    theme="snow"
                    defaultValue={defaultValue}
                    onChange={this.onHandleChange}
                    modules={this.editorModules()}
                    placeholder={placeholder}/>
   );
}

private editorModules = (): any => {
    return {
      toolbar: {
        container: "#" + this.id,
        handlers: {
          markImportant: this.markImportant,
          insertMention: this.insertMention
        }
      },
      keyboard: {
        bindings: this.keyboardBindings
      }
    }
  };

private insertMention = (): void => {
    const data = {
      name: 'John Doe',
      id: '1'
    };
    const range = this.quillEditor.selection.savedRange;
    if (!range || range.length != 0) return;
    const position = range.index;
    this.quillEditor.insertEmbed(position, 'mention', data, Quill.sources.API);
    this.quillEditor.insertText(position + 1, ' ', Quill.sources.API);
    this.quillEditor.setSelection(position + 2, Quill.sources.API);
};

private markImportant = (): void => {
    this.markedPriority = !this.markedPriority;
    this.props.markPriority(this.markedPriority);
};