Match the filter_html <> ckeditor5 integration

I figured it'd be worth me spending 2 hours on making this nice to avoid more people from pulling their hair out:

Attached is a 1.5 minute screencast demonstrating:

1. Starting from a fresh Standard install
2. Update Basic HTML to use extended_html_filter instead of filter_html
3. Show that the "allowed tags" setting now does get updated correctly
4. Show it's possible to seamlessly switch to extended_html_filter, and disable filter_html
5. Show it's working correctly in the editor and on the front end, and extended_html_filter.settings is respected

P.S.: the only thing that's not yet implemented is ensuring that when extended_html_filter.settings changes, all rendered/filtered content have their caches wiped. That'd be a one-line addition to the filter, but it's such a rare operation that it was perhaps intentional?

The core "Limit allowed HTML" filter is taking other plugins into account in the read-only list of allowed HTML that it generates. The "Extended HTML Filter" is not, at least not for me.

For example, in the Alignment plugin settings, I have all of the available alignments enabled: left, center, right, and justify. In the HTML tags allowed by "Limit allowed HTML", it includes alignment classes on the header tags: <h2 class="text-align-left text-align-center text-align-right text-align-justify"> etc. The tags for "Extended HTML" only include the "id" attribute for the header tags - except for <h2 id='jump-*'> which I don't recognize offhand.

#4: I cannot reproduce any of that. 🤔 All symptoms you mention (thanks for describing them in such detail 👏) are consistent with not having cleared all caches. That's necessary after modifying the code like this. Could you do a drush cr and try again? 🙏

I wasn't using the issue fork code properly. I've moved to a vanilla Drupal 10 installation, with none of the other CKEditor modules I had installed in the first instance. I create a new text format, that uses CKEditor. The only buttons enabled are the default ones: Headings, bold, and italic. The only filter enabled is Extended HTML Filter. Now the "Allowed HTML tags" field of the Extended HTML filter settings is read-only, like the core Limit HTML filter. The tags enabled are <br> <p> <h2> <h3> <h4> <h5> <h6> <strong> <em>. Trying to save this, I get an error:

The current CKEditor 5 build requires the following elements and attributes:
<br> <p> <h2> <h3> <h4> <h5> <h6> <strong> <em> <* style dir="ltr rtl" lang>
The following elements are missing:
<* style>

I ended up having to change extended_html_filter.ckeditor5.yml to set the <* style> element to match the styles I defined on the Extended HTML config page. Otherwise, it seems it wants that unrestricted style attribute and gives a validation error on the restricted style values from the plugin config.

Trying to save this, I get an error:

I cannot reproduce this either.

Can you please provide

1. a config export of your text format + text editor
2. a patch of your changes to this module

I'm reproduce the same issue as @brad.bulger.
Can you give a example of your extended_html_filter.ckeditor5.yml workarround ?

@Quentin.Le-Delas Please see #8. You too can help me reproduce this.

I don't have the change to the ckeditor5.yml file around anymore, unfortunately. Our development is stuck in 9.5 for the moment, I don't think it's worth testing in this too much. I'm attaching config files for what it's worth.

I spun up a test site on simplytest.me using 10.2 and extended_html_filter 1.0.x, applying the patch https://git.drupalcode.org/project/extended_html_filter/-/merge_requests... (that link should be good for 12 hours, then you will need to recreate the site)

This shows the first issue I described: if you enable the filter and try to save the format, you get an error that <* style> is missing.

Trying to enable Source editing and add <* style> to the allowed tags fails:

The following attribute(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Global `style` attribute (<* style>).

I can't attach config for this text format because I can't save these changes due to the error.

I'm able to reproduce the problem.

Enabling the extended html filter (with this patch) on a multilingual site:

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>

The problem is not related to multilingual.

The problem is that the <* style> element is not part of the generated allowed html values.

🐛 FilterHtml accepts <*> but does not support it, resulting in inaccurate ::getHtmlRestrictions() return value Needs work seems a bit related, but does not solve the <* style> error.

Ok, found the source of the problem.

<* style> vs <* style="width height">

This check here:
FundamentalCompatibilityConstraintValidator.php#L158

creates a diff between

$provided->elements[*][style] = TRUE
$allowed->elements[*][style][width => TRUE, height => TRUE]

and shows the error

#3226368 does seem related.

Installed the extended_html_filter module and patched it with the MR !2 plaindiff but still getting the <* style> element missing message.

This is on clean install of drupal: 10.3.5

Got the same error on Drupal 10.3.6...

In addition, I also got the following error after trying to save the text format with MR !2 in place:

'allowed_html' is an unknown key because filters.extended_html_filter.id is extended_html_filter (see config schema type filter_settings.*).

Folks at https://www.drupal.org/project/shortcode → had the same issue, and it was solved here https://www.drupal.org/project/shortcode/issues/3457731#comment-15681072 🐛 Unable to save text format config form in 10.3 Fixed

So I managed to solve the additional error by adding a file

config/schema/extended_html_filter.schema.yml

with contents

filter_settings.extended_html_filter:
  type: sequence
  sequence:
    type: boolean