RichTextEditor image upload (Cannot read properties of null (reading 'index'))

[timahuna]

What package has an issue

@mantine/rte

Describe the bug

1. Wrap react app in a Strict Mode component.
2. Add a RichTextEditor component.
3. Add an image via the embed image icon in the toolbar:

4. You should see the error `Cannot read properties of null (reading 'index')`

Drag/drop works, pasting works, just the toolbar is causing this error (when wrapped in <StrictMode>).

In which browser did the problem occur

Chrome

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

https://codesandbox.io/s/bold-field-ilkjez?file=/src/App.js

Do you know how to fix the issue

No

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

No response

Possible fix

Looks like this.range is reset in the ImageUploader in strict mode.

I could be wrong (and I haven't tested this) but I think we might want to set the range here via this.range = this.quill.getSelection();.

[wes337]

Duplicate of or closely related to #1386

[rtivital]

Fixed in 4.2.7

[mvskvortsov]

I'm still have this error on almost all of toolbar button: lists, image... And "addRange(): The given range isn't in document." on other toolbar buttons.

[wes337]

I'm still have this error on almost all of toolbar button: lists, image... And "addRange(): The given range isn't in document." on other toolbar buttons.

I'm seeing it on lists too. But it is fixed with images, just make sure you're using at least version 4.2.7

But everything else is fine. What do you mean when you say "almost all of the toolbar button"? I'm also seeing the "index is null" error, and not "addRange()". Could we be talking about different issues?

[rtivital]

The issue happens only in with react strict mode, disable strict mode to fix it. The issue cannot currently be resolved on library side.