Problem/Motivation

CKEditor5 only supports SVGs for the embed icons. If a user uploads an image for the icon which is not in an SVG format, it will not show up on the toolbar for CKEditor5. Embed should reflect this, and only allow SVGs, or at least add an info message when a user tries to upload anything else it might not show up on the toolbar. We might also want to consider a BC aspect of this change, as there might be sites using other extensions already for CKEditor4, and they would probably "lose" their icons when updating to CKEditor5.

Steps to reproduce

Proposed resolution

Change the file_validate_extensions value on EmbedButtonForm to only allow SVGs.

Remaining tasks

User interface changes

There might be some changes on the form, depending on the decision if we want to add an info message here.

API changes

-

Data model changes

-

CommentFileSizeAuthor
#12 status.png38.33 KBsamlerner

Issue fork embed-3310328

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

balintpekker created an issue. See original summary.

immaculatexavier made their first commit to this issue’s fork.

dave reid’s picture

It probably makes sense to start a new 2.x branch only for ckeditor5 compatibility.

dave reid’s picture

We probably don't need file_validate_image_resolution anymore either if we're requiring SVGs.

dave reid’s picture

balintpekker’s picture

I agree with we don't need the file_validate_image_resolution upload validator anymore, however we would want to convert the size of the uploaded image on the list of embed buttons not to have different SVG sizes, which would ruin the UI.

idiaz.roncero’s picture

+1 to this. I opened an issue related to SVG sizing, I guess it could be marked as fixed when this issue is solved.

Added to related issues.

wim leers’s picture

Can we not instead allow both SVG and PNG, to address the BC concern? #6 is interesting but we can't call those automatically from within Drupal. So perhaps a context-dependent validation would be appropriate: if the CKEditor 5 module is installed, trigger a validation error if Embed only has a PNG button icon and not also a SVG button icon?

Then there's zero effect for existing sites. There's a reasonable change in behavior for sites using CKEditor 5, but only an essential change.

What do you think about that middle ground, @Dave Reid?

dave reid’s picture

Yeah I feel like allowing for both PNG and SVG for now is the best solution. I think we could also add a hook_requirement runtime check that if only the ckeditor5 module is enabled (and not ckeditor), that if any embed buttons do not have SVGs to add an error that it needs to be fixed. We could potentially look at writing an update hook to programatically update PNGs to SVG, but that will require a larger effort.

dave reid’s picture

Status: Active » Needs review

I can work on updating the MR to get this ready today.

samlerner’s picture

StatusFileSize
new38.33 KB

I tested this out and it works great. I cloned the MR and when I went to the Status Report, I saw this output:

Status page output

dave reid’s picture

dave reid’s picture

Title: Only allow SVGs for button icons » When CKEditor5 is installed, only allow SVGs for button icons
dave reid’s picture

dave reid’s picture

Issue tags: +ckeditor5

I've thoroughly been testing this and am going to merge it since it helps unblock Entity Embed and CKEditor5.

dave reid’s picture

Status: Needs review » Fixed
wim leers’s picture

Epic turn-around time here! 🤩 Talked to @Dave Reid yesterday, and now it's already fixed 🤯

dave reid’s picture

I need to make it to more events! :D

wim leers’s picture

😄 When I told Megh & Tim about our encounter on the street where you informed me of this having landed, they said "THAT IS SOOOOO DAVE!" 😁

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.