Fatal error when enabling CKEditor 5 syles. AssertionError: assert(NestedArray::keyExists($subform, $parts)) in assert()

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies.

I tested on a fresh install of 11.x HEAD, using the steps in the issue summary and did not get an error.

Information in comment #3 suggests there are additional steps to reproduce.

I have updated the drupal version now 11.x and with this the issue does not exist.

Steps I followed as per the description:

• In admin/config/content/formats click on configure of Basic HTML text format
• Add Styles plugin to the active toolbar list
• In the CKEditor 5 plugin settings add style format like a.test|Test for example
• Save Configuration

The configuration gets saved.

The fatal error that appeared before is not shown.

Screenshot

Moving to RTBC.

I'm getting the same error when enabling Styles in CKE5 and Drupal 10.4.3.

When I drag the Style button to the active toolbar, the Manually editable HTML tags box in the Source editing settings goes red. I don't get Style settings.

Upon saving, I get the error:

The website encountered an unexpected error. Try again later.

AssertionError: assert(NestedArray::keyExists($subform, $parts)) in assert() (line 886 of core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php).

Backtrace:
#0 /var/src/web/core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php(886): assert(false, 'assert(NestedAr...')
#1 /var/src/web/core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php(922): Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapViolationPropertyPathsToFormNames('settings.plugin...', Array)
#2 /var/src/web/core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php(707): Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapPairViolationPropertyPathsToFormNames('settings.plugin...', Array)
#3 /var/src/web/core/modules/editor/editor.module(207): Drupal\ckeditor5\Plugin\Editor\CKEditor5->validateConfigurationForm(Array, Object(Drupal\Core\Form\SubformState))
#4 [internal function]: editor_form_filter_admin_format_validate(Array, Object(Drupal\Core\Form\FormState))
#5 /var/src/web/core/lib/Drupal/Core/Form/FormValidator.php(82): call_user_func_array('editor_form_fil...', Array)
#6 /var/src/web/core/lib/Drupal/Core/Form/FormValidator.php(274): Drupal\Core\Form\FormValidator->executeValidateHandlers(Array, Object(Drupal\Core\Form\FormState))
#7 /var/src/web/core/lib/Drupal/Core/Form/FormValidator.php(118): Drupal\Core\Form\FormValidator->doValidateForm(Array, Object(Drupal\Core\Form\FormState), 'filter_format_e...')
#8 /var/src/web/core/lib/Drupal/Core/Form/FormBuilder.php(593): Drupal\Core\Form\FormValidator->validateForm('filter_format_e...', Array, Object(Drupal\Core\Form\FormState))
#9 /var/src/web/core/lib/Drupal/Core/Form/FormBuilder.php(326): Drupal\Core\Form\FormBuilder->processForm('filter_format_e...', Array, Object(Drupal\Core\Form\FormState))
#10 /var/src/web/core/lib/Drupal/Core/Controller/FormController.php(73): Drupal\Core\Form\FormBuilder->buildForm(Object(Drupal\filter\FilterFormatEditForm), Object(Drupal\Core\Form\FormState))
#11 /var/src/web/core/modules/layout_builder/src/Controller/LayoutBuilderHtmlEntityFormController.php(39): Drupal\Core\Controller\FormController->getContentResult(Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\RouteMatch))
#12 [internal function]: Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult(Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\RouteMatch))
#13 /var/src/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array(Array, Array)
#14 /var/src/web/core/lib/Drupal/Core/Render/Renderer.php(638): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#15 /var/src/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(124): Drupal\Core\Render\Renderer->executeInRenderContext(Object(Drupal\Core\Render\RenderContext), Object(Closure))
#16 /var/src/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array)
#17 /var/src/vendor/symfony/http-kernel/HttpKernel.php(181): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}()
#18 /var/src/vendor/symfony/http-kernel/HttpKernel.php(76): Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object(Symfony\Component\HttpFoundation\Request), 1)
#19 /var/src/web/core/lib/Drupal/Core/StackMiddleware/Session.php(53): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#20 /var/src/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#21 /var/src/web/core/lib/Drupal/Core/StackMiddleware/ContentLength.php(28): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#22 /var/src/web/core/modules/big_pipe/src/StackMiddleware/ContentLength.php(32): Drupal\Core\StackMiddleware\ContentLength->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#23 /var/src/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(116): Drupal\big_pipe\StackMiddleware\ContentLength->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#24 /var/src/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(90): Drupal\page_cache\StackMiddleware\PageCache->pass(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#25 /var/src/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Drupal\page_cache\StackMiddleware\PageCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#26 /var/src/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#27 /var/src/web/core/lib/Drupal/Core/StackMiddleware/AjaxPageState.php(36): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#28 /var/src/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\Core\StackMiddleware\AjaxPageState->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#29 /var/src/web/core/lib/Drupal/Core/DrupalKernel.php(741): Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#30 /var/src/web/index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request))
#31 {main}

I get this error when trying to add styles. I'm on Drupal 11.1.4 (local ddev instance)

The website encountered an unexpected error. Try again later.

AssertionError: assert(NestedArray::keyExists($subform, $parts)) in assert() (line 857 of core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php).

Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapViolationPropertyPathsToFormNames() (Line: 893)
Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapPairViolationPropertyPathsToFormNames() (Line: 678)
Drupal\ckeditor5\Plugin\Editor\CKEditor5->validateConfigurationForm() (Line: 59)
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: 585)
Drupal\Core\Form\FormBuilder->processForm() (Line: 321)
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: 593)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 183)
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: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 116)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 90)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 709)
Drupal\Core\DrupalKernel->handle() (Line: 19)

I tried updating to v11.2-dev and get the same error. I get the error when trying to save the "Style" contents.
AssertionError: assert(NestedArray::keyExists($subform, $parts)) in assert() (line 857 of core/modules/ckeditor5/src/Plugin/Editor/CKEditor5.php).

Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapViolationPropertyPathsToFormNames() (Line: 893)
Drupal\ckeditor5\Plugin\Editor\CKEditor5::mapPairViolationPropertyPathsToFormNames() (Line: 678)
Drupal\ckeditor5\Plugin\Editor\CKEditor5->validateConfigurationForm() (Line: 59)
editor_form_filter_admin_format_validate()
call_user_func_array() (Line: 82)
Drupal\Core\Form\FormValidator->executeValidateHandlers() (Line: 275)
Drupal\Core\Form\FormValidator->doValidateForm() (Line: 118)
Drupal\Core\Form\FormValidator->validateForm() (Line: 585)
Drupal\Core\Form\FormBuilder->processForm() (Line: 321)
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: 593)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 183)
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: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 116)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 90)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 53)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 715)
Drupal\Core\DrupalKernel->handle() (Line: 19)

Steps to reproduce:
* Install a fresh copy of Drupal v11.1.4
* drush si -y
* Login in as admin
* In admin/config/content/formats click on configure of Full Html
* Drag "Styles" to active toolbar
* Add a test style to the box
* Click "Save"

Error appears.

This might be a race condition. I was able to reproduce the trace by dragging the style button to the toolbar, then immediately clicking on save configuration. The moment when I hit the button, the following error appeared in the browser console:

Object { message: "\nAn AJAX HTTP request terminated abnormally.\nDebugging information follows.\nPath: /admin/config/content/formats/manage/basic_html?destination=/admin/config/content/formats%3Fcheck_logged_in%3D1&ajax_form=1\nStatusText: error\nReadyState: 0", name: "AjaxError", stack: "@http://localhost:8888/core/misc/ajax.js?v=11.1.4:196:32\n@http://localhost:8888/core/misc/ajax.js?v=11.1.4:1926:3\n" }

My hunch is that the XHR request following the drag&drop action has been terminated before it had a chance to update the form on the server.

The assertion triggers inside form validation code. If the site crashes while validating user input, then the validation process is maybe not implemented properly.

How about converting this assertion into an if-condition?

I’ve identified that the AssertionError no longer occurs and saving works as expected when following these steps:

1. Drag the Styles button to the active toolbar.
2. Immediately afterwards, define the classes in the Styles textarea (do not leave it empty).
3. Wait for 1 to 2 minutes.
4. After that period, proceed to save.

I'm using DDEV, Drupal 10.3.7.

However, another issue remains: the Styles dropdown in CKEditor does not display any available classes (screenshot attached for reference).

Solution: You have to click the tab key to get the values saved. Then you can save the configuration.

Hello
lluisandreu,

I've faced the same issue when I enable the "styles" in the active toolbar.
Then, as mentioned in #16, I clicked on the styles tab, added one style, and saved the configuration.
It's working fine for me.
Please check the screencast below for the same.

Working Link: Ckeditor5 Style

Please check and review

Thank you!

So question is if still an issue in D11

It is an issue and it is reproducible reliably with the steps in the IS. But probably not easy for test automation (because its a race condition).

Hello smustgrave,
As I mentioned in my above comment, it's working for me.
Can you please check my video, as I added a working link.

Solution Link: https://www.loom.com/share/18cbf606ea6c4fc38db627ee944e343c?sid=1e497ea1...

Please review and let me know your thoughts.

Thank you!

This is still and issue for me in D11. Following the instructions in #15 was the only way to make it work.

#16 solution worked for me. I was able to successfully save a style, Drupal core 10.5.3

Solution: You have to click the tab key to get the values saved. Then you can save the configuration.

Wow ... it really did work.

I ran into this issue on a fresh install of Drupal 11.3. I tried the tab solution in #16 and it didn't work for me. Resubmitting the form values consistently reproduced the error.

Strangely, I reverted to a db backup from just before I had edited the text format, and when I tried to reproduce the error on the same site following the same steps it worked as expected. It does indeed seem to be some kind of race condition.

Something interesting to note: I also came across #3256616: AssertionError: assert($value === TRUE || Inspector::assertAllStrings($value)) in assert() (line 242 of core/modules/ckeditor5/src/HTMLRestrictionsUtilities.php) which was closed as a duplicate of #3262484: AJAX desync when quickly changing multiple form values in plugin settings vertical tab, with a temporary solution at https://www.drupal.org/project/drupal/issues/3326261#comment-15181215 that is similar to the tab solution suggested in #16 here.

Maybe this should also be closed as a duplicate? It sure would be nice to see some momentum in #3262484: AJAX desync when quickly changing multiple form values in plugin settings vertical tab though.

I found another way to break this (I'm on 11.3.8) that I think doesn't require any AJAX race conditions, for anyone who might possibly run into it.

1. If you have a text filter with the "Source editing" (ckeditor5_sourceEditing) plugin active
2. And you have anything in its "Manually editable HTML tags" (allowed_tags) field (in my case, I was allowing editors to add classes to elements, so I had <h2 class> <h3 class> <h4 class> <h5 class> <h6 class> <div class> <span class> <p class>)
3. If you come back later and try to add the "Style" (ckeditor5_style) plugin...
4. Then the Style plugin's elements: ['<$any-html5-element class>'] validation wildcard overlaps with the Source editing allowed tags, causes a validation error, and prevents the Style plugin from properly loading.

You can even cause this by enabling the style plugin directly via valid config. If you then visit the filter format configuration page, you'll see the AssertionError in non-AJAX form.

The workaround is to clear the conflicting <tag class> entries from the Source editing allowed tags, then enable the Style plugin.