[CKEDITOR5] - Cannot read properties of undefined (reading 'name') after clear format

Thanks for this issue and the especially the steps to reproduce.

I just stopped in to update the title. The issue is already in the ckeditor5 component, no need to shout it in the title. Also, restoring the template, which helps us keep track of the work.

Probably related with change record CKEditor 5 plugin definitions must explicitly indicate which tags they can create →

Same problem with "ckeditor5_language" https://www.drupal.org/node/3283526#comment-15391076 →

It seems that the core ckeditor5_language plugin should be updated thusly:

elements:
-
-
Right now if you want to enable the language plugin but do not want to enable source editing, you have no options. The following error appears:

"The Language 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."

This is confusing. See https://www.drupal.org/project/drupal/issues/3388978 🐛 Eliminate or improve error upon adding the language plug-in Active

It seems natural to allow the language plugin to also create the tag it may modify.

Is there any problem with this?

Fixes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies. Also, 10.2 is in security mode now.

The problem comes because the Style plugin that has the following styles defined does not define the span element and then gives an error message that the span should be defined by any plugin, but if there is no plugin, it can be defined on the source plugin, but it has the reported side effect.

span.text-primary|Color primary
span.text-beige|Color beige
span.text-yellow|Color yellow
span.text-white|Color white

Style plugin message:

The Style plugin needs another plugin to create <span>, for it to be able to create the following attributes: <span class="text-primary text-beige text-yellow text-white">. Enable a plugin that supports creating this tag. If none exists, you can configure the Source Editing plugin to support it.

The workaround is to define the span on a plugin from docroot/core/modules/ckeditor5/ckeditor5.ckeditor5.yml, clear the caches and remove the span from the source editing text area.

ckeditor5_removeFormat:
  ckeditor5:
    plugins: [removeFormat.RemoveFormat]
  drupal:
    label: Remove Format
    library: core/ckeditor5.removeFormat
    admin_library: ckeditor5/internal.admin.removeFormat
    toolbar_items:
      removeFormat:
        label: Remove Format
    elements:
     - <span>

If we add the span on the Style plugin we get the following error:

Definition:

ckeditor5_style:
  ckeditor5:
    plugins: [style.Style]
  drupal:
    label: Style
    library: core/ckeditor5.style
    admin_library: ckeditor5/internal.admin.style
    class: Drupal\ckeditor5\Plugin\CKEditor5Plugin\Style
    toolbar_items:
      style:
        label: Style
    # This plugin is able to add any configured class on any tag that can be
    # created by some other CKEditor 5 plugin. Hence it indicates it allows all
    # classes on all tags. Its subset then restricts this to a concrete set of
    # tags, and a concrete set of classes.
    # @todo Update in https://www.drupal.org/project/drupal/issues/3280124
    # @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Style::getElementsSubset()
    # @see \Drupal\ckeditor5\Plugin\Validation\Constraint\StyleSensibleElementConstraintValidator
    elements:
      - <span>
      - <$any-html5-element class>

Error:

The website encountered an unexpected error. Try again later.

LogicException: The "ckeditor5_style" CKEditor 5 plugin implements ::getElementsSubset() and did return a subset ("<span class="text-primary text-beige text-yellow text-white">") but the following tags can no longer be created: "<span>". in Drupal\ckeditor5\Plugin\CKEditor5PluginManager->getProvidedElements() (line 416 of core/modules/ckeditor5/src/Plugin/CKEditor5PluginManager.php).Drupal\ckeditor5\Plugin\CKEditor5PluginManager->getEnabledDefinitions() (Line: 792)
Drupal\ckeditor5\Plugin\Editor\CKEditor5->getEventualEditorWithPrimedFilterFormat() (Line: 679)
Drupal\ckeditor5\Plugin\Editor\CKEditor5->validateConfigurationForm() (Line: 207)
editor_form_filter_admin_format_validate()
call_user_func_array() (Line: 82)
Drupal\Core\Form\FormValidator->executeValidateHandlers() (Line: 274)
Drupal\Core\Form\FormValidator->doValidateForm() (Line: 118)
Drupal\Core\Form\FormValidator->validateForm() (Line: 593)
Drupal\Core\Form\FormBuilder->processForm() (Line: 326)
Drupal\Core\Form\FormBuilder->buildForm() (Line: 73)
Drupal\Core\Controller\FormController->getContentResult()
call_user_func_array() (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 669)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 53)
Asm89\Stack\Cors->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 55)
Drupal\http_headers_cleaner\Middleware\HttpHeadersCleanerMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 741)
Drupal\Core\DrupalKernel->handle() (Line: 19) 

The final solution should be that the style plugin supports any element defined by itself, but we will apply the workaround.

Workaround:

/**
 * Implements hook_ckeditor5_plugin_info_alter().
 */
function mymodule_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);
  }
}

Thank you for the workaround!

Since I would prefer not to enable the source editing for basic html, this is the only solution for now.