Inserting images via URL does not validate input

[FilipTokarski]

📝 Provide detailed reproduction steps (if any)

1. On latest release branch go to docs /features/image.html#inserting-images-via-source-url
2. Try using insert image via URL with following data:
   • pressing space
   • random letters
   • random digits

✔️ Expected result

Input gets validated ( at least rubbish input like the one mentioned above )

❌ Actual result

You can type anything, plugin will insert broken image placeholder or empty widget:

📃 Other details

• Browser: any

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

I'm glad you brought this up @FilipTokarski, this is a valid improvement. 

I'm not sure if we can validate all URLs because there are millions of use-cases (with protocol, protocol-less, relative, absolute, base64, etc.) but for sure we could filter empty URLs out. Media embed already implements input validation so we could copy the UX.

[dzpt]

where the hell is /features/image.html? i couldn't find anyway to implement attach image by URL?

[oleq]

where the hell is /features/image.html? i couldn't find anyway to implement attach image by URL?

Hi @dzpt, it's an unfortunate reference to the project documentation. 

Anyway, although CKEditor 5 v22.0.0 has already been released on npm, the updated documentation with the feature you're looking for will be out along with the blog post later this week. Until then, check out our nightly docs instead. Sorry for the ambiguity!

[Reinmar]

Solution for now: let's copy the code from the media embed form (it already implements some sort of validation).

What we can do: check for empty values (including trimming). What we shouldn't do: try to be smart on what URL could be or not as even "adfgh" could be a valid relative URL or an image ID in your database.

[LangQian]

Hi, I'm wondering if it is possible to expose the URL validation to be configurable by developers, along with the error messages if something went wrong? Due to the needs of our customers, we need to apply much stricter rules to the inserted hyperlinks or image urls. I'm right now patching the source codes to achieve this, which is not very convenient, since you guys are rolling out new releases every month (which is great, thanks!) and I don't want to check the compatibility of my codes every time I do an update.

I believe different products have different requirements on this depending on the security needs, so if the validation rules can be customizable, that would be really great! Hope you can consider this :)

[pkwasnik]

@olek I see that here when input is empty, the button is disabled, but in media embed not (there is error message). Maybe in media embed I will implement the same, disabling "ok" button when input is empty or has only spaces?

[oleq]

@olek I see that here when input is empty, the button is disabled, but in media embed not (there is error message). Maybe in media embed I will implement the same, disabling "ok" button when input is empty or has only spaces?

Sounds like a plan!