[10.2 regression] CKEditor 5 prevents Styles from adding span as allowed HTML

Created on 17 January 2024, about 1 year ago

Problem/Motivation

The Style plugin needs another plugin to create , for it to be able to create the following attributes: . Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

Previously you could just add <span class> to allowed "Allowed HTML tags"

Steps to reproduce

  1. Define text format
  2. Enable 'Limit allowed HTML tags and correct faulty HTML' features
  3. Enable "Styles" button with
    span.text-large|Large
    span.text-primary|Primary Color
    span.text-secondary|Secondary Color
  4. Save text format
šŸ› Bug report
Status

Active

Version

11.0 šŸ”„

Component
CKEditor 5Ā  ā†’

Last updated about 1 hour ago

Created by

šŸ‡ØšŸ‡¦Canada joelpittet Vancouver

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Regression

    It restores functionality that was present in earlier versions.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @joelpittet
  • šŸ‡ØšŸ‡¦Canada joelpittet Vancouver

    There is a workaround but maybe undesirable to Add "Source editing" button
    <span class>

  • šŸ‡ŖšŸ‡øSpain eduardo morales alberti Spain, šŸ‡ŖšŸ‡ŗ
  • Does it mean we cannot use span out of the box in CKE5 styles on Drupal 11 ?

  • šŸ‡ŗšŸ‡øUnited States wheelercreek

    The solution to this is to add the desired tags that are being disallowed to the Source Editing plugin. So you can just add into the Source editing plugin configuration field. The plugins that are enabled determines what tags will be allowed in the editor, and if it's complaining about any that it cannot allow, you just add them in the Source Editing plugin (the "allowed HTML tags" field is no longer editable).

  • šŸ‡ØšŸ‡¦Canada joelpittet Vancouver

    Thanks for clarifying @wheelercreek

    Iā€™m exploring a potential solution by parsing the Styles plugin to dynamically add or update span elements. This would allow editors to define and manage styles more flexibly without creating a new plugin or allowing source editing workaround.

    Would there be interest in pursuing this direction? Any thoughts or concerns?

  • šŸ‡ŖšŸ‡øSpain eduardo morales alberti Spain, šŸ‡ŖšŸ‡ŗ

    Workaround:

    /**
     * Implements hook_ckeditor5_plugin_info_alter().
     */
    function my_module_forms_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
      // Adding span to remove format plugin to avoid error reported on issue
      // https://www.drupal.org/project/drupal/issues/3449576.
      if ($plugin_definitions['ckeditor5_removeFormat'] instanceof CKEditor5PluginDefinition) {
        $removeFormat_plugin_definition = $plugin_definitions['ckeditor5_removeFormat']->toArray();
        $removeFormat_plugin_definition['drupal']['elements'] = [
          '<span>',
        ];
        $plugin_definitions['ckeditor5_removeFormat'] = new CKEditor5PluginDefinition($removeFormat_plugin_definition);
      }
    }
    
  • First commit to issue fork.
  • šŸ‡¦šŸ‡ŗAustralia bradtreloar

    It should be implicit that any tag used in Styles be allowed by the HTML filter. The Style plugin just isn't telling the validator which tags it creates.

    In this case, Style::getElementsSubset returns these elements:

    <span class="text-large">
    <span class="text-primary">
    <span class="text-secondary">
    

    None of these are considered createable because they all have attributes.

    The plain (creatable) element is missing, i.e.

    <span>
    

    To fix this, Style::getElementsSubset could add a plain element for each tag used in the styles list.

    e.g.

      public function getElementsSubset(): array {
        $elements = array_column($this->configuration['styles'], 'element');
    
        // Add a creatable element for each tag used in styles.
        $ghs_config = HTMLRestrictions::fromString(implode($elements))->toGeneralHtmlSupportConfig();
        $tags = array_column($ghs_config, 'name');
        foreach ($tags as $tag) {
          $elements[] = "<{$tag}>";
        }
    
        return $elements;
      }
    

    The tags and classes used in all of the styles are automatically added to/removed from the HTML filter's list of allowed HTML tags as the list of styles is updated by the user.

  • Pipeline finished with Failed
    19 days ago
    Total: 900s
    #448011
Production build 0.71.5 2024