CKEditor 5 toolbar configuration not show buttons in Spanish installation due to broken HTML in translation

I can reproduce this problem. It happens when JavaScript aggregation is enabled.

With aggregation enabled there are console errors:

 [Error] TypeError: undefined is not an object (evaluating 'drupalSettings.user.permissionsHash')
	(anonymous function) (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:25:291)
	Global Code (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:25:3996)
[Error] TypeError: undefined is not an object (evaluating 'drupalSettings.path.currentPath')
	(anonymous function) (js_F7WsnhtVKV7_6ZWb9s-G7PFzyprMK_tn32m4HkrJky0.js:19:82)
	Global Code (js_F7WsnhtVKV7_6ZWb9s-G7PFzyprMK_tn32m4HkrJky0.js:19:2561)
[Error] TypeError: undefined is not a function (near '...$('[data-ckeditor5-plugin-id="ckeditor5_style"]').drupalSetSummary...')
	(anonymous function) (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:23:176)
[Error] TypeError: undefined is not a function (near '...$('[data-ckeditor5-plugin-id="ckeditor5_image"]').drupalSetSummary...')
	(anonymous function) (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:23:176)
[Error] TypeError: undefined is not an object (evaluating 'Object.keys(settings.machineName)')
	(anonymous function) (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:23:176)
[Error] TypeError: debounce is not a function. (In 'debounce(displace,200)', 'debounce' is undefined)
	(anonymous function) (js_A3yZCkx5B4LlAmOttgH0S7fvtuWTHlND-Jxep_q4D0U.js:23:176)

With aggregation disabled there are console errors:

[Error] TypeError: undefined is not an object (evaluating 'drupalSettings.user.permissionsHash')
	(anonymous function) (contextual.js:23)
	Global Code (contextual.js:313)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.contextual')
	(anonymous function) (StateModel.js:17)
	Global Code (StateModel.js:130)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.contextual')
	(anonymous function) (AuralView.js:11)
	Global Code (AuralView.js:59)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.contextual')
	(anonymous function) (KeyboardView.js:11)
	Global Code (KeyboardView.js:62)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.contextual')
	(anonymous function) (RegionView.js:11)
	Global Code (RegionView.js:75)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.contextual')
	(anonymous function) (VisualView.js:11)
	Global Code (VisualView.js:109)
[Error] TypeError: undefined is not an object (evaluating 'drupalSettings.path.currentPath')
	(anonymous function) (toolbar.menu.js:15)
	Global Code (toolbar.menu.js:208)
[Error] TypeError: undefined is not an object (evaluating 'pathInfo.currentPathIsAdmin')
	(anonymous function) (escapeAdmin.js:16)
	Global Code (escapeAdmin.js:45)
[Error] TypeError: undefined is not an object (evaluating 'drupalSettings.ajaxTrustedUrl[originalUrl]')
	(anonymous function) (ajax.js:486)
	(anonymous function) (ajax.js:267)
	(anonymous function) (big_pipe.js:22)
	Global Code (big_pipe.js:138)
[Error] TypeError: undefined is not an object (near '...abs__active-tab')[0].value =...')
	(anonymous function) (drupal.js:64)
[Error] TypeError: undefined is not an object (evaluating 'path.currentQuery')
	(anonymous function) (drupal.js:64)
[Error] TypeError: undefined is not an object (evaluating 'Drupal.tableDrag['filter-order'].restripeTable')
	(anonymous function) (drupal.js:64)
[Error] TypeError: undefined is not an object (evaluating 'Object.keys(settings.machineName)')
	(anonymous function) (drupal.js:64)

Hi @pozo, I replicated all the steps (Install Drupal 10.1.2 in Spanish) and indeed the icons are not showing up on my end (see attachment ck5-spa-2.png), but If you go to /admin/config/development/performance, you can see that the options "Aggregate CSS files" and "Aggregate JS files" are checked by default for Spanish installations, so if you un-check these and clear cache, you'll be able to see the CKEditor buttons (see attachment ck5-spa-3.png)

That is exactly what I did and said, no?

Thank you so much. The problem is solved as you indicated.

No, this is not really solved. JavaScript aggregation is a standard performance feature. Not using aggregation is a workaround.

Breaking Drupal by just installing it is not acceptable. Bumping to .

This is likely related to 🐛 Stampedes and cold cache performance issues with css/js aggregation Fixed and friends.

This is not exactly what was reported, but this at least passes just fine on 11.x locally, let's see if it does on 10.1.x too.

Worst case, this is at least a starting point for test coverage.

🙄

Sorry. The fix for uncheck options "Aggregate CSS files" and "Aggregate JS files" prevents the "CKEditor 5 plugin settings" from working correctly.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

Tried to fix minor spacing errors in #10.

Patch #12 applies fine for me on 10.1.2

3382630-13.patch doesn't work for me, but I applied it manually. The problem persists.

Disabling the "Source" button (put it in the "Available buttons" area) the problem disappears, in a new installation in Spanish, without patches.

You can do this by going to /admin/config/development/performance, unchecking "Add CSS Files" and "Add JS Files". After disabling the "Source" button, you can check them again.

On that page there is a <strong> tag that is not closed properly, and it wraps the whole <scripts> making the drupalSettingsLoader.js script fail since that selector is pretty specific (on purpose for security reasons).

doesn't appear to have the problem in 11.x

The problem is the spanish translation of this string:

Cadena fuente (Inglés incorporado)
A list of HTML tags that can be used while editing source. It is only necessary to add tags that are not already supported by other enabled plugins. For example, if "Bold" is enabled, it is not necessary to add the <code>&lt;strong&gt;

tag, but it may be necessary to add <dl><dt><dd> in a format that does not have a definition list plugin, but requires definition list markup. *

And the default translation is:
Una lista de etiquetas HTML que se pueden usar al editar la fuente. Solo es necesario agregar etiquetas que aún no son compatibles con otros complementos habilitados. Por ejemplo, si está habilitado "Negrita", no es necesario agregar la etiqueta <code><strong>, pero puede ser necesario agregar <dl><dt><dd> en un formato que no tiene un complemento de lista de definiciones, pero requiere marcado de lista de definiciones.

The <code> tag does not escape anything in descriptions and makes the strong tag spill over everything. Fix the translation = fix the bug. I don't think we need to do anything in this issue. Having a new one to test validity of the html in the translations maybe but nothing specific to this.

downgrading to major since fixing the translated text will resolve the bug and there is no data loss

Actually going by the priority descriptions this is normal since there is a workaround.

That works correctly for me. Thank you.

Even though it sounds like an error in the translation is there anything to be added that could catch instances like this?

@nod_ 🤯 WOW! 😅

I agree with @smustgrave, how can we detect invalid HTML causing problems elsewhere? 😳

Bumping back to because this is a pretty epic weakness in the translation system that could explain many inexplicable bugs I've seen wrt JavaScript errors… 🤔

We already have a valid HTML checker on translations when they get imported. Does that catch this one and users just ignore the warning? Or is it not good enough to catch this?

So the checks happens in locale_string_is_safe function and it doesn't seem to check validity of the html string. So we'd need some more code in here.

This works for my case
https://www.drupal.org/project/drupal/issues/3291764#comment-15219258 🐛 The [0] hatch in misc/vertical-tabs.js causes issues if there are multiple forms with vertical tabs. Needs work