@mantine/rte 4.2.8 onImageUpload not handling image properly

What package has an issue

@mantine/rte

Describe the bug

The image upload functionality seems to work fine whenever I don’t supply a function to onImageUpload, but when I have a function provided that uploads the file to storage and returns the url the RTE component does not render the image and also won’t allow me to insert new lines when typing text by hitting enter.

Here’s my component:

            <RichTextEditor
              value={content}
              style={{ listStyleType: "disc" }}
              classNames={{
                root: "min-h-[280px]",
                toolbar: "!static",
              }}
              onChange={setContent}
              modules={modules}
              controls={richTextControls}
              onImageUpload={handleImageUpload}
              mentions={mentions}
            />

and my handleImageUpload function:

const handleImageUpload = (file: File): Promise<string> =>
    new Promise((resolve, reject) => {
      supabase.storage
        .from("BUCKET_NAME")
        .upload(`${teamId}/${file.name}`, file, {
          cacheControl: "3600",
          upsert: true,
        })
        .then(() => {
          const { publicURL } = supabase.storage
            .from("BUCKET_NAME")
            .getPublicUrl(`${teamId}/${file.name}`);
          resolve(publicURL!);
        })
        .catch(() => reject(new Error("upload failed")));
    });

I’ve replaced the actual bucket name with a placeholder. I’ve also console logged the url prior to resolve and confirmed that it’s getting the actual url string as expected, so I’m not sure what’s happening. As soon as I comment out the “onImageUploads” prop of the RTE component everything works fine (aside from not being able to save my file).

I’ve also noticed that when I have onImageUploads set to a function (even a dummy function that returns just a Promise with a placeholder string) I’m getting “addRange(): The given range isn’t in document.” with every keystroke when typing in the editor and the enter key no longer inserts newlines.

Any help with this would be greatly appreciated, thank you for all the hard work in building and maintaining this project!

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

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

Yes

Possible fix

No response

[wes337]

There was recently a problem similar to this, and it was solved when the handleImageUpload function was wrapped in a useCallback hook.

[rtivital]

Yep, I think we can add useCallback to the documentation