[Feature Request] Image block inside markdown editor

[dallyh]

Currently if I want to use an uploaded asset inside markdown editor, then from editing an entry I have to go back to assets, upload the asset, copy its URL and then go back to editing and insert it manually by writing pure markdown. Having an entry with multiple images can get pretty time consuming. Also doing this then does not update the "Used in" field inside metadata of an uploaded asset.

Are there any plans to implement the image block before 1.0 and or before Svelte 5 migration?

Thanks!

[kyoshino]

Hi there 👋🏼 Not sure if it happens before or after the Svelte 5 migration, but I do have a plan to do it before 1.0 as mentioned in the README:

Editor components, including built-in image and code-block as well as custom components, are not yet supported.

Well, I’ll try to work on it later this month! (I have 2 other new features in my queue now)

[onweru]

Editor components, including built-in image and code-block as well as custom components, are not yet supported.

Well, I’ll try to work on it later this month! (I have 2 other new features in my queue now)

Assuming this is why I cannot add or preview images inside markdown blocks, I have to say this has caught me off guard. I kinda assumed this was immediately available.

[kyoshino]

@onweru You should still be able to add images when switching to raw Markdown editor, but the current status is what the README says. Anyway, I’ll bump the priority of this issue by pushing back other tasks.

[kyoshino]

Sorry for the delay here. Just wanted to let you know that I have made progress. Still have some work to do, but the functionality is basically working now. Hopefully I can ship it soon. 🤞🏼

[CarloBu]

That's super awesome news!

Will the insert have more options than the image? Would it be better for the image component to use the image icon? This is so frequently used that it's hard to understand why Decap hides the image option in the dropdown.
Technically speaking image tool is a separate component, that's why from dev point of view it's in the "add component block" but the average Joe does not care about this technicality. The user wants to add the image right away.
What I am trying to say, is that the Decap does not have the best UX :)

[kyoshino]

The Insert menu would have the Image, Code Block and custom editor components, but you’re right, Image should be just a button next to Insert for faster access 😄

[CarloBu]

Nice! 👍
Will custom editor components be react or svelte?
Edit. I just read in another topic that you want to make React components work.

[kyoshino]

Yeah, the CMS.registerEditorComponent document says the toPreview option can be either a vanilla JS template literal or a React component, so I have to eventually support the latter case.

[CarloBu]

I see. You are still committed to 100% decap support. It will be interesting to see how you glue the react component to the svelte project 👍
Godspeed! I can't wait to be able to add my custom components.

[kyoshino]

Sorry to keep you waiting, folks! One of my own clients wants this — I’ll get it done shortly.

[aloxe]

Hi @kyoshino, Was-it released or do we still have to wait? I currently don't see it, and it seems I am using the latest version: https://unpkg.com/@sveltia/[email protected]/dist/sveltia-cms.js

[kyoshino]

Not yet implemented. I’ll work on it this weekend.