Allow this module to work without "Limit allowed HTML tags and correct faulty HTML" filter

I think we need to test it with extended_html_filter → , especially with ✨ Match the filter_html <> ckeditor5 integration in Drupal core Needs work .

I tried using extended_html_filter and I couldn't get it to work. When I tried to save a text format that had it turned on, I get this error:

CKEditor 5 needs at least the <p> and <br> tags to be allowed to be able to function. They are not allowed by the "Extended HTML Filter" (extended_html_filter) filter.

So I add those two tags to the "Allowed HTML Tags" config and when I save I get this error:

The current CKEditor 5 build requires the following elements and attributes: 
<br> <p class> <h2 class="text-align-left text-align-center text-align-right text-align-justify"> <h3 class="text-align-left text-align-center text-align-right text-align-justify"> <h4 class="text-align-left text-align-center text-align-right text-align-justify"> <h5 class="text-align-left text-align-center text-align-right text-align-justify"> <h6 class="text-align-left text-align-center text-align-right text-align-justify"> <a class href aria-label title id target="_blank" rel> <span class="uppercase"> <ul class="purple_stars"> <strong> <em> <u> <sub> <sup> <ol reversed start> <li> <hr> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption> <img src alt height width data-entity-uuid data-entity-type data-caption data-align> <drupal-media data-entity-type data-entity-uuid alt data-caption data-align data-media-width>
The following elements are not supported: 
<a hreflang> <cite> <blockquote cite> <code> <ul type> <ol type="1 A I"> <dl> <dt> <dd> <h2 id="jump-*"> <h3 id> <h4 id> <h5 id> <h6 id> <* style lang dir="ltr rtl">

There's probably some patches or something required for extended_html_filter, but I decided not to get into that.

Yes, for now the Extended HTMK Filter module needs #3401513 to avoid problems.

Just had a co-worker also run into this issue.

Seems like a major issue as the functionality breaks when using a filter that isn't declared as a dependency?

Please forgive me my ignorance, but why is the "Limit allowed HTML tags and correct faulty HTML" filter required for this module in order to work?

Blocking issue for us. It prevents the resize value from updating on subsequent saves. Would appreciate some clarity in why this filter is needed. We cannot turn it on for customer-provided reasons.

Annoying that this is the only module that lets you do this functionality.

Asked @solariel to dive into this:

"From what I see, CKeditor5 is to blame. If you disable Drupal's 'allowed_html', a CKeditor's will be used and it'll break media resize by not allowed data attributes it's using."

Oh! Interesting! I wonder if there's a core bug/feature that needs to be fixed to work around this?

I'm testing this module and as I can see the "Limit allowed HTML tags and correct faulty HTML" filter removes the data attributes responsible for alignment in the drupal-media tag:
On Ckeditor:
<drupal-media class="image_resized" style="width:359px;" data-media-width="359px" data-entity-type="media" data-entity-uuid="a77a9f7c-a834-4bea-9a80-bc8169ee7587" data-view-mode="cke_media_resize_large" data-align="center">&nbsp;</drupal-media>

On the page:
Expected:
<div class="image_resized align-center media-embed-resized" style="width:359px;">

Actual result:
<div class="media-embed-resized" style="width:359px;">

I also tried the Extended HTML Filter module, but I had no success even applying the following patches:

1. core:
   1. https://www.drupal.org/project/drupal/issues/3226368 🐛 FilterHtml accepts <*> but does not support it, resulting in inaccurate ::getHtmlRestrictions() return value Needs work
   2. https://www.drupal.org/files/issues/2024-02-26/3226368-40.patch →
2. extended_html_filter
   1. https://www.drupal.org/project/extended_html_filter/issues/3401513 ✨ Match the filter_html <> ckeditor5 integration in Drupal core Needs work
   2. https://git.drupalcode.org/project/extended_html_filter/-/merge_requests...

It is not possible to save the text format. This is what I get from validation:

Error message
The current CKEditor 5 build requires the following elements and attributes:
<br> <p> <* style dir="ltr rtl" lang>
The following elements are missing:
<* style>

I also tried to disable the "Limit allowed HTML tags and correct faulty HTML" filter, but the resize doesn't work without it.

Is there any solution for this issue?

By the way, yesterday it seems I found a workaround. I disabled "Limit allowed HTML tags and correct faulty HTML".

I added an image and resized it: worked.

I reloaded the edit page and resized it: does not work (one can see this in the 'source' in CKeditor).

Then, I first clicked 'Original' and then did a resize: worked.

Could someone else confirm this?

#12 Yes this "works" but is unacceptable as a solution. You can't expect standard standard users to perform a trick to fix their content.

Not it is indeed not acceptable, but apparently this plugin can work without the "Limit allowed HTML tags and correct faulty HTML" filter...

I just took another look at this module and confirmed it does work with the workaround explained in #12. The workaround is only required after an image has been resized AND the node has been saved.

The workaround is just a click of a button to reset the image "original" dimensions. Maybe it's more complicated than this, but could some javascript code be written that triggers the reset to "original" dimensions for the user whenever they grab the image frame to resize it?

It seems I have something workable, but it feels kinda hacky.

When the user presses the 'Original' button, CKEditor is told: set the width to 'null'. So in the code executing after the user stopped dragging the resize handle, I added a line of code which does the same.

So:

e.execute("resizeMediaImage", { width: null }); //Reset the width.
e.execute("resizeMediaImage", { width: i });

Because the JS is being 'compiled' and minified, to allow for quick testing I attached the deminified & compiled version of mediaResize.js (had to add _.txt otherwise I could not upload it here).

This mediaResize.js is located in /js/build:

Could you please
1) Download mediaResize.js_.txt to that folder
2) Rename the existing mediaResize.js to e.g. mediaResize.old
3) Rename the mediaResize.js_.txt to mediaResize.js
4) Clear cache and test (without "Limit allowed HTML tags and correct faulty HTML" of course)

Tried this out and it works. The only problem I noticed was that it undoes the resizing when you edit the node and are looking at the WYSIWYG in the edit form. It doesn't remove the resized value (e.g. if you save, you still have the last value you resized to) but it may be jarring to a non-technical content editor.

Testing steps (after placing new JS file)
1. Create a node that has a WYSIWYG.
2. Place a media item (We'll say it's 750px wide) in the WYSIWYG.
3. Save
4. Inspect and see that image is not resized.
5. Edit and resize image to 525px.
6. Save
7. Inspect and see that image is wrapped in a div with `width:525px` in a style attribute
8. Edit the node. You should notice that the image in the WYSIWYG looks like it has reverted back to its original size. Clicking on the image will have it say "Original" on the resize style dropdown.

If I inspect source, I see `undefined="525px"` on the drupal-media tag.

If I try to resize the image after this, I see LOTS of console errors.

ckeditor5-dll.js?v=41.3.1:5 Uncaught CKEditorError: cannot-change-view-tree
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-cannot-change-view-tree
    at St.change (ckeditor5-dll.js?v=41.3.1:5:258636)
    at ie.updateSize (ckeditor5-dll.js?v=41.3.1:5:723987)
    at ie.<anonymous> (ckeditor5-dll.js?v=41.3.1:5:666767)
    at ie.fire (ckeditor5-dll.js?v=41.3.1:5:663135)
    at <computed> [as updateSize] (ckeditor5-dll.js?v=41.3.1:5:666819)
    at ce._mouseMoveListener (ckeditor5-dll.js?v=41.3.1:5:729770)
    at ue.fire (ckeditor5-dll.js?v=41.3.1:5:663135)
    at HTMLDocument.t (ckeditor5-dll.js?v=41.3.1:5:673313)

@nessthehero: Thanks!

Just to be sure, are you on the latest version of ckeditor_media_resize? https://www.drupal.org/project/ckeditor_media_resize/releases/1.0.0-beta2 →

If I repeat the steps you mention with https://www.drupal.org/project/ckeditor_media_resize/releases/1.0.0-beta2 → , I get no errors, the tag has no attribute 'undefined' and the width is correct.

I also would not understand how my fix would cause this error, as it just mimics pressing the 'Original' button...

I'm probably not. Let me check that and I'll report back later today.

Updated to beta2.

Seems like it's working better. I was having some issues in one environment but I think there's other stuff in the project interfering with it, so I made the change in a more barebones Drupal install. The only issue I saw was that clicking "Original" didn't seem to clear the resize off the image. It was still resized after I saved, and still the same size when I went back in to edit.

I can't guarantee there isn't something still interfering with what I have so I would suggest if someone else is able to test and reproduce these problems.

I tested the fix from #16 and it worked.

The clicking of "original" didn't work before #16, so it isn't an issue created by #16.

Thanks @nessthehero and @davedg629!

The only disturbing thing for me is that I do not understand why #16 works. Maybe it works because of some bug in ckeditor, and will it stop working once that bug has been fixed...

@damienmckenna How could we move on from here?

I created a patch for the fix in #16.

Thanks @alrh, patch in #23 works great.

Thanks @alrh!

Updated the status of this ticket (not sure if it is the right one)

Patch in #23 is not working for me. Just applied the patch after installing the module.

I can resize the embedded media image one time, but when the content is saved the rendered image is broken. Following the link to the embedded image returns this error:

"Error generating image".

Marking this "needs work"

@Ihridley: Would you be so kind to

1. In a empty CKeditor, insert an image
2. Copy the contents of CKeditor 'source'
3. Resize the image
4. Copy the contents of CKeditor 'source'
5. Resize the image
6. Copy the contents of CKeditor 'source'
7. Past the results of step 2, 4 and 6 here?

This might help us to find out what is going wrong.

P.S. I dont get the 'BTW' part: Who requested to open a new issue? Who merged what?

By the way, to have configurable HTML filtering in place: I just got CKEditor + Ckeditor_media_resize + patch #16 to work with https://www.drupal.org/project/htmlpurifier → , although unfortunately also with a patch: https://www.drupal.org/project/htmlpurifier/issues/3375949#comment-15775125 💬 Unable to Use HTML Purifier Needs review . I just installed html purifier, applied the patch, enabled it for the text format and put it as the last filter.

That is good to know, thank you koosvdkolk!

I opened a separate issue so we can document using HTML Purifier: 📌 Document how to use HTML Purifier instead of core filters Active

@koosvdkolk and @lhridley Was also running into the resizing issue after save. Created a new ticket and a possible fix at
https://www.drupal.org/project/ckeditor_media_resize/issues/3484766 🐛 Re-sizing breaks after initial save or preview Active