(feat): integrate Vendure Assets Picker with ProseMirror and add single image selection

[dfernandesbsolus]

Description

• Added functionality to allow the insertion of images from Vendure's Assets Picker into the ProseMirror editor.

• Implemented a restriction in the assets picker to allow only single image selection to support the ProseMirror's image handling capabilities.

Breaking changes

No

Screenshots

https://github.com/user-attachments/assets/f3dbdbfe-42fc-4c83-a760-5624c2f3a679

Checklist

📌 Always:

• [X] I have set a clear title
• [X] My PR is small and contains a single feature
• [X] I have checked my own PR

👍 Most of the time:

• [ ] I have added or updated test cases
• [ ] I have updated the README if needed

[dfernandesbsolus]

@michaelbromley I put this pull request as a draft so you can analyze whether this was the best approach.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	Sep 6, 2024 11:56am

[dfernandesbsolus]

Excellent contribution, thank you very much. Just a stray console.log that sneaked in there that needs removing. Other than that, perfect 👌

Thanks, i was just thinking, when it's a URL that isn't from the domain, it doesn't make sense to show the preset select.

[michaelbromley]

Yes, that's a very good point. Can you think of a way to implement that?

[dfernandesbsolus]

Yes, that's a very good point. Can you think of a way to implement that?

Can I validate if it is the url of the Vendure assets, if not I won't show it, can I access the url of the assets? Normally it is mysite.com/assets, correct?

[michaelbromley]

Yes, it is assets/ by default but that is configurable in the AssetServerPlugin route option. So not something we can safely assume. What if we set metadata on the inserted image tag to mark it as internal/external?

[dfernandesbsolus]

It works, but I will have to put this information in the html to later retrieve something like: <img src="" internal="true" width="" height="" />

[michaelbromley]

In that case can we use a data attribute, since "internal" is not a valid attribute of img? Also maybe inverting it and marking "external" for outside images is better than "internal"?

So it would be <img data-external="true" ... />

[dfernandesbsolus]

I agree, I will make this change :D

[dfernandesbsolus]

@michaelbromley What do you think? I blocked editing of the source when the image is internal to maintain the data-external logic, but I added the option to remove the image which enables the field again.

https://github.com/user-attachments/assets/7a02d8a3-2962-471d-afb1-00f5892b984a

[michaelbromley]

That's very good, thank you!