Problem/Motivation

Helping out at #3358205: <span style> breaks 'Limit allowed HTML tags and correct faulty HTML' validation is what led me here.

In order for this filter to truly be a viable alternative to Drupal core's filter_html, this should also:

  1. Match the automatic loading of certain CKEditor 5 plugins whenever filter_html is active for a text format ⇒ otherwise CKEditor 5 does not correctly match the filter
  2. Match the automatic updating of the "Allowed HTML tags" setting whenever updating the CKEditor 5 configuration ⇒ otherwise configuring this filter is much more difficult (i.e. 100% manual)

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

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

Wim Leers created an issue. See original summary.

wim leers’s picture

Title: Match the filter_html <> ckeditor5 integration » Match the filter_html <> ckeditor5 integration in Drupal core
Status: Active » Needs review
StatusFileSize
new34.98 MB

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?

brad.bulger’s picture

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.

wim leers’s picture

#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? 🙏

brad.bulger’s picture

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>
brad.bulger’s picture

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.

wim leers’s picture

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
quentin.le-delas’s picture

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

wim leers’s picture

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

brad.bulger’s picture

StatusFileSize
new2.33 KB

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.

brad.bulger’s picture

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.

damienmckenna’s picture

Status: Needs review » Needs work

I'm able to reproduce the problem on a 10.2.1 site.

pasqualle’s picture

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>
pasqualle’s picture

The problem is not related to multilingual.

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

pasqualle’s picture

pasqualle’s picture

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

damienmckenna’s picture

zaurav’s picture

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

jvdkolk’s picture

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

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

andriy khomych changed the visibility of the branch 3401513-match-core-behavior-and-usability to hidden.

andriy khomych changed the visibility of the branch 3401513-match-core-behavior-and-usability to active.

andriy khomych changed the visibility of the branch 1.0.x to hidden.