Missing <p> and <br> tags

Created on 15 November 2023, about 1 year ago
Updated 22 November 2023, about 1 year ago

When I create a new text format and try to enable this filter, saving the format gives me this validation 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.

I can reproduce this at simplytest.me, generating an example Drupal 9 site.

πŸ› Bug report
Status

Closed: duplicate

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States brad.bulger

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @brad.bulger
  • πŸ‡΅πŸ‡±Poland ad0z

    I investigated issue and it might be because of outdated FilterHtml plugin definition in core. More about it: https://www.drupal.org/project/drupal/issues/3402515 πŸ› CKEditor 5 html filter - fundamental elements Active

  • πŸ‡ΊπŸ‡ΈUnited States brad.bulger

    The only AJAX change from the core "Limit allowed HTML" filter that I see is from the default elements allowed without CKEditor5
    <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>

    to the default elements allowed with CKEditor5
    <br> <p> <h2> <h3> <h4> <h5> <h6> <strong> <em>

    Adding <p> and <br> to the settings for "Extended HTML filter" just moves to another error:

    The current CKEditor 5 build requires the following elements and attributes:
    <br> <p> <h2> <h3> <h4> <h5> <h6> <strong> <em>
    The following elements are not supported:
    <a href hreflang> <cite> <blockquote cite> <code> <ul type> <ol start type="1 A I"> <li> <dl> <dt> <dd> <h2 id="jump-*"> <h3 id> <h4 id> <h5 id> <h6 id> <* style lang dir="ltr rtl">

    That <* style> is wrong, in that it would allow any value for the style attribute, instead of the whitelisted values in the plugin config.

    And in any case, trying to add <* style lang dir="ltr rtl"> to the Allowed HTML tags causes a fatal error in the validation:

    Uncaught PHP Exception InvalidArgumentException: ""__zqh6vxfbk3cg__" is not a valid HTML tag name." at /path/to/drupal/web/core/modules/ckeditor5/src/HTMLRestrictions.php line 177,

    There is core code expanding wildcards to that arbitrary string value, which is fine for attributes but not so much for elements.

  • πŸ‡ΊπŸ‡ΈUnited States brad.bulger
  • πŸ‡΅πŸ‡±Poland ad0z

    @brad.bulger figured out the reason.

    https://www.drupal.org/node/3283526 β†’

    I've added extended_html_filter.ckeditor5.yml file with:

    # https://html.spec.whatwg.org/multipage/dom.html#attr-dir
    extended_html_filter_globalAttributeDir:
      ckeditor5:
        plugins: [htmlSupport.GeneralHtmlSupport]
        config:
          htmlSupport:
            allow:
              -
                # @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute::getDynamicPluginConfig()
                name: ~
                attributes:
                  - key: dir
                    value:
                      regexp:
                        pattern: /^(ltr|rtl)$/
      drupal:
        label: Global `dir` attribute
        class: \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute
        # @see \Drupal\filter\Plugin\Filter\FilterHtml::getHTMLRestrictions()
        elements:
          - <* dir="ltr rtl">
        library: core/ckeditor5.htmlSupport
        conditions:
          filter: extended_html_filter
    
    # https://html.spec.whatwg.org/multipage/dom.html#attr-lang
    extended_html_filter_globalAttributeLang:
      ckeditor5:
        plugins: [htmlSupport.GeneralHtmlSupport]
        config:
          htmlSupport:
            allow:
              -
                # @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute::getDynamicPluginConfig()
                name: ~
                attributes: lang
      drupal:
        label: Global `lang` attribute
        class: \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute
        # @see \Drupal\filter\Plugin\Filter\FilterHtml::getHTMLRestrictions()
        elements:
          - <* lang>
        library: core/ckeditor5.htmlSupport
        conditions:
          filter: extended_html_filter
    
    extended_html_filter_globalAttributeStyle:
      ckeditor5:
        plugins: [htmlSupport.GeneralHtmlSupport]
        config:
          htmlSupport:
            allow:
              -
                # @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute::getDynamicPluginConfig()
                name: ~
                attributes: style
      drupal:
        label: Global `style` attribute
        class: \Drupal\ckeditor5\Plugin\CKEditor5Plugin\GlobalAttribute
        # @see \Drupal\filter\Plugin\Filter\FilterHtml::getHTMLRestrictions()
        elements:
          - <* style>
        library: core/ckeditor5.htmlSupport
        conditions:
          filter: extended_html_filter
    

    and form is saving now, but it does not seem to be working as expected so, I suppose there still still plenty to do to support CKE5.

  • πŸ‡ΊπŸ‡ΈUnited States brad.bulger

    Ah, I had missed that change.

    Yes, it seems complicated. Possibly the changes in ✨ Match the filter_html <> ckeditor5 integration in Drupal core Needs work address this, or need to do so.

  • Status changed to Closed: duplicate about 1 year ago
  • πŸ‡§πŸ‡ͺBelgium wim leers Ghent πŸ‡§πŸ‡ͺπŸ‡ͺπŸ‡Ί
Production build 0.71.5 2024