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

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

Does it mean we cannot use span out of the box in CKE5 styles on Drupal 11 ?

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).

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?

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);
  }
}

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.

Using Drupal v11.1.3 it is possible to add the span tags without changing any code.

1. Go to /admin/config/content/formats
2. Click the 'Configure' button of the Text format you want to change
3. Add <span class> to the 'Source editing' tab under the 'CKEditor 5 plugin settings' section
4. Click 'Save configuration' button
5. Click the 'Configure' button of the Text format you want to change again
6. Under the 'Toolbar configuration' section move the 'Style' button from 'Available buttons' to 'Active toolbar'
7. Click the 'Style' tab under the 'CKEditor 5 plugin settings' section
8. Add the following styles:

span.text-large|Large
span.text-primary|Primary Color
span.text-secondary|Secondary Color

9. Click 'Save configuration' button

The 3 styles are now available under the Style menu in the CKEditor toolbar.