Added capability to add blob url images

[didix16]

This adds the capability to add images with blob urls. #4207

[luin]

Thanks for the contribution! I think we can't support all protocols in the core as applications have different requirements. You should be able to extend the built-in Image format and override the sanitize method.

[didix16]

Hi, thanks for your reply.
I don't understand this:

I think we can't support all protocols in the core as applications have different requirements

If you add more functionality to the core, aren't you improving the software? I mean, It becomes better in such way that It can handle more things and covers more needs.

That being said, how can I extend the Image module and override the sanitize function.

I think my contribution does that, right? I mean, I simply expanded the capabilities of the Image module.

Thanks.

[luin]

Yeah you can extend Image and register your own image module with Quill.register().

If you add more functionality to the core, aren't you improving the software? I mean, It becomes better in such way that It can handle more things and covers more needs.

Supporting more things is not always better - applications may not want blob at all just like some of them don't like http.

[didix16]

Mmmm I see.

So, to be able to extend Image to allow blob urls and register it to my Quill editor I must do something like this?

import Image from 'quill/formats/image'
import { sanitize } from 'quill/formats/link';
import Quill from 'quill';

class MyImage extends Image {
    static sanitize(url) {
        return sanitize(url, ['http', 'https', 'data', 'blob']) ? url : '//:0';
    }
}

Quill.register('formats/image', MyImage)

Is that correct?

EDIT:

I've tried it but I'm getting this error on insertImage:

Error: [Parchment] Cannot insert image into block

[luin]

Yes, that's the way to register a custom image. Here's an example. Please provide a reproducible example if you encounter any issues.

[didix16]

Thanks @luin, seems that with your example works. I don't know why, but if I try to import the image class directly don't work. After webpack done the compilation, MyImage is a function and imported Image is a class but using your example, by calling Quill.import('formats/image'), the Image is also a function and maybe there was a problem with the prototype chain when Quill checks if the custom format is an instanceof EmbledBlot...

Anyways, the problem is solved and working. Thanks