error: addRange(): The given range isn't in document.

[VeoScript]

What package has an issue

@mantine/rte

Describe the bug

I found an error while I uploading some photo in RichTextEditor.

Error: quill.js?99f4:3195 addRange(): The given range isn't in document.

In which browser did the problem occur

Chrome

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

I think the error is from the latest version of Quill.

[wes337]

This is a duplicate of #1288

[rtivital]

The PR was merged, will be fixed with next patch, thanks @wes337!

[Hartaithan]

The PR was merged, will be fixed with next patch, thanks @wes337!

I have updated mantine to version 4.2.5, but I am still seeing this problem.
Editor component - link
Page using Editor component - link
Code - link
Demo - link (Authorization is required to access the editor page)

[Hartaithan]

@wes337 @rtivital Any updates?

[wes337]

I will take another look at this. It seems to be a bug from quilljs and there might be a workaround.

Would you be able to provide a code sandbox where this issue can be reproduced?

[rtivital]

Fixed in 4.2.7

[Hartaithan]

@rtivital @wes337
Updated to version 4.2.7. Still seeing this problem. But now file input is not triggered multiple times. And the image is displayed blurred, even after successfully loading the image.
Preview

[wes337]

@Hartaithan
If this is the code you are showing in your preview, then you should probably check if res.image_url is correct. It is probably res.data.image_url.

Also, I think there's been some confusion about this issue and the related issues, and I would really like to clear this up.

There are 2 different issues here:

1. addRange(): The given range isn't in document.. - This is a warning coming from quill. It's not causing anything to break, and is only shown in the console when React strict mode is enabled. I do not know if this is actually related to or the cause of the issue you are facing.

2. TypeError: Cannot read properties of null (reading 'index') - This is an error. It was caused by a bug in Mantine's ImageUploader file. It's been fixed for images.

[Hartaithan]

@wes337
No, that's not the problem.
Here's console.logged output from res object, there's no data object

[wes337]

@Hartaithan
Sorry, but I can't reproduce this from my end. I'm still not even sure if your problem is related to this original issue.