Add support for images as inline content

[ClementEXWiki]

Is your feature request related to a problem? Please describe.
Images cannot be inserted as inline content, which prevents e.g. putting them in a link. This would allow to redirect the user to a page when clicking on an image, a feature we need in our app.

Describe the solution you'd like
Add support for images as inline content.

Describe alternatives you've considered
N/A

Additional context
N/A

[YousefED]

Let me reply to the two items separately:

Images as inline content
I'm not sure this is desirable at this point. Inline images would make it very easy to create distorted layouts. We're trying to follow a similar philosophy as products like Notion to favour forcing users to create consistent, good-looking documents above making it possible to "create anything the user would like to" ("MS Word" approach)

Clickable images
This seems like a very valid use-case indeed. I could see us making this possible, but I would probably do it by adding a linkUrl prop to the image block. Technically, it should be possible already to customize Image blocks like this (by creating a custom block), although it might be a bit cumbersome to make it work well with toolbars / menus related to images.

If we're starting this, imo we should create an example on how to customize the built-in block (and improve our API if needed), instead of adding this to the built-in image block out-of-the-box.

[ClementEXWiki]

Thanks for the answer.

About the linkUrl prop, how would that work? Would BlockNote wrap the <img> inside an <a> element? It would be useful to allow customizing other properties as well such as setting target="_blank".

[nperez0111]

@ClementEXWiki, yea it would likely not be implemented directly on our image block, but treated as a customization of the rendering of it, so you can add whichever additional props and completely customize the rendering of the block. We have not decided yet on how to approach this custom rendering.

So, it'd be close to what @YousefED mentioned with:

If we're starting this, imo we should create an example on how to customize the built-in block (and improve our API if needed), instead of adding this to the built-in image block out-of-the-box.