Problem/Motivation

Toolbar button tooltipps are not translated if different language then English is enabled

Steps to reproduce

  • Install Drupal in Englisch via Simplytest.me
  • Enable Interface Translation Local and CKEditor 5
  • Enable Ckeditor 5 in any text format e.g basic HTML
  • Insert text part select to the CKEditor toolbar
  • Add desired interface language e.g Geman
  • Set the enabled Language to default
  • Change Language Display order so that English is below the new enabled language
  • Click on Manage>> Content >>Add Content >> Article
  • Hover the mouse cursor over any button

Expected result: Tooltips should be displayed in Drupal's default UI Language
Current Result: Tooltips are still displayed in English.
Demo https://www.youtube.com/watch?v=XS-INmiEA8M

Proposed resolution

Find cause

Remaining tasks

find cause
fix
retest
release

User interface changes

Maybe translations on l.d.o are needed

API changes

maybe some

Data model changes

probably none

Release notes snippet

Comments

Joachim Namyslo created an issue. See original summary.

joachim namyslo’s picture

Title: Translation of tookbar button tooltips still not working. » Translation of toolbar button tooltips still not working.
rkoller’s picture

StatusFileSize
new178.37 KB

not only the tooltips. also the microcopy of the button labels isn't localized - see heading and language. same for the ie11 warning message on top and the title of the source editing vertical tab. i've tested with 9.3.0-beta2
ckeditor 5 textformat page with a none localized warningn message, verticla tab title and button labels as well as tooltips.

rkoller’s picture

StatusFileSize
new101.2 KB

ok things might be a bit more tricky. i've additionally added another language (french) and the parts not translated differ to german - there is no consistent pattern of parts not translated across languages. not sure if it is due to a differing degree of translated strings or another reason? :/

ckeditor 5 text format config

the title of vertical headings tab isnt translated nor its content, same for source editing. but in contrast the language tab and its content is translated completely.

wim leers’s picture

Status: Active » Needs review
StatusFileSize
new2.26 KB

@rkoller These are all Drupal-owned UI strings, because you're in the CKEditor 5 toolbar configuration UI, which is Drupal-owned. If the translation for a string is not available in Drupal, then it won't be translated.
Still, we should still add test coverage for the admin UI too, to prove that it works if there are translated strings available.

Is the actual CKEditor 5 UX translated? Thanks to @Joachim Namyslo's YouTube video, I can see that this is broken! Even despite the test coverage in \Drupal\Tests\ckeditor5\FunctionalJavascript\LanguageTest::test() that tests this explicitly, this definitely does not work for you!

@Joachim Namyslo: what langcode is your browser sending? Maybe CKEditor 5 is not interpreting yours correctly. That'd be required for us to reproduce this.

Let's test German explicitly to see if something is up with that…

joachim namyslo’s picture

I found out, that it actually was sending de-LI instead of de-DE. Currently, I changed that and spawn up a new simpllytest.me instance to check if that's the cause of this issue. I'll update this one, asap.

Update

Changed the lang code to de-DE as you can see from the Screenshot as follows, but there's even no change. Tooltips still remaining English

Only local images are allowed.

By the way, I am not sure if lang code sent by the browser is the right option here. Because as you can see if in general there is a multilingual installation and we switch language to another Japanese, for example, the lang code sends by the browser is still the same.

See the example screenshot as follows:

Only local images are allowed.

I checked langcode also via: http://www.reliply.org/tools/requestheaders.php

Result

Only local images are allowed.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

wim leers’s picture

I wonder … if https://github.com/ckeditor/ckeditor5/issues/8510 actually fixed this. It seems very closely related.

When we update to https://github.com/ckeditor/ckeditor5/releases/tag/v31.1.0, we'll find out 🤓

(I'll only get to this in January — but you could already create a merge request or patch to get us on that version, and that'd allow you to test this ahead of time 🤞:D)

wim leers’s picture

Title: Translation of toolbar button tooltips still not working. » [PP-1] Translation of toolbar button tooltips still not working.
Status: Needs review » Postponed
Related issues: +#3258250: Update to CKEditor5 v31.1.0

Per #8.

wim leers’s picture

Title: [PP-1] Translation of toolbar button tooltips still not working. » Translation of toolbar button tooltips still not working.
Status: Postponed » Postponed (maintainer needs more info)

#3258250: Update to CKEditor5 v31.1.0 landed!

@Joachim Namyslo: could you please test this again with the latest development snapshot of Drupal core 9.3, 9.4 or 10.0 (any of those is fine!) 🙏

joachim namyslo’s picture

Status: Postponed (maintainer needs more info) » Active

Tested it on 10 and 9.4.0-dev As you can see from the video linked down below, that issue is still valid.
https://youtu.be/LvdjxXAhuP0

I forgot to check the console in th video so here is the output i got when ckeditor 5 was enabled

config.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
styles.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
ckeditor.js?v=4.17.1:253 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "default" was not found at "https://sithis.xyz/core/assets/vendor/ckeditor/styles.js?t=r5z4ki".
    at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager.<anonymous> (ckeditor.js:253:334)
    at n (ckeditor.js:248:455)
    at Array.y (ckeditor.js:249:93)
    at v (ckeditor.js:249:177)
    at HTMLScriptElement.CKEDITOR.env.ie.d.$.onerror (ckeditor.js:250:200)
wim leers’s picture

Thanks for checking! 🙏 We'll investigate.

My initial hunch: this only happens when changing the default language, i.e. when there is not a translation requested through language negotiation. Nope, that can't be it, because \Drupal\Tests\ckeditor5\FunctionalJavascript\LanguageTest::test() is testing exactly that! 😬

P.S.: next time just test on a single branch — they're all kept in sync functionality-wise 🤓
P.P.S.: the console log entries are for CKEditor 4, not for CKEditor 5, so should not explain this. But who knows 🤪

lauriii’s picture

Title: Translation of toolbar button tooltips still not working. » Translation of toolbar button tooltips not working when text part language plugin is enabled
Assigned: Unassigned » lauriii

I was able to reproduce this when text part language plugin is enabled. Based on #11, it seems like text part language was also enabled on the environment where the issue was reported from.

lauriii’s picture

Assigned: lauriii » Unassigned
Issue tags: +Needs tests

The root cause of the problem is that the text part language and UI translation both use the language key for their configuration. This is not something we take into account in Drupal.editors.ckeditor5.attach(), meaning that the configuration coming from text part language is overriding the previously set language configuration which is configuring the language CKEditor should be using.

wim leers’s picture

Issue tags: +JavaScript

Wow, thanks for the digging, @lauriii!

lauriii’s picture

Issue summary: View changes
nod_’s picture

Version: 9.4.x-dev » 10.0.x-dev
Status: Active » Needs review
StatusFileSize
new2.42 KB
new4.96 KB
nod_’s picture

wim leers’s picture

Issue tags: -Needs tests
+++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5LanguagePluginTest.php
@@ -0,0 +1,72 @@
+class CKEditor5LanguagePluginTest extends CKEditor5TestBase {

Why not add this to \Drupal\Tests\ckeditor5\FunctionalJavascript\LanguageTest?

nod_’s picture

Mainly I didn't want to find how to add a second test method when there is a data provider and I wanted to test only the conflict, not the translation feature at the same time.

wim leers’s picture

Status: Needs review » Needs work

Mainly I didn't want to find how to add a second test method when there is a data provider

It's just @dataProvider METHODNAME :)

and I wanted to test only the conflict, not the translation feature at the same time.

The test methods run separately, so there is no risk of that. Or if you meant you didn't want the tests to run in parallel … well, sadly, FunctionalJavascript tests do not support that all, so no risk there :P

Upon further inspection …

… the test method is identical to what we already have in \Drupal\Tests\ckeditor5\FunctionalJavascript\LanguageTest::test(), only the second parameter has a different name! So … then we should just add a new case to the existing data provider? Or am I missing something? 🤔

nod_’s picture

not identical, check the button that is clicked. It's textPartLanguage, not blockQuote :), will reroll.

nod_’s picture

Status: Needs work » Needs review
StatusFileSize
new5.29 KB

extended the test data a bit, better, thanks :)

wim leers’s picture

Status: Needs review » Needs work

#22 Gah missed that — makes sense!

  1. +++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/LanguageTest.php
    @@ -29,18 +29,20 @@ class LanguageTest extends CKEditor5TestBase {
    -    $this->assertNotEmpty($assert_session->waitForElement('css', '.ckeditor5-toolbar-item-blockQuote'));
    ...
    +    $this->assertNotEmpty($assert_session->waitForElement('css', ".ckeditor5-toolbar-item-$plugin"));
    

    Let's rename $plugin to $toolbar_item_name — because a single plugin can provide multiple toolbar items, and these are definitely toolbar items.

  2. If you fix that nitpick in point 1, and also upload a failing test-only patch variation of #23, I'll instantly RTBC this :)
nod_’s picture

Status: Needs work » Needs review
StatusFileSize
new2.91 KB
new5.4 KB

Here you go

wim leers’s picture

RTBC assuming one red and one green patch in #25 — sadly no tests have run in the past 2 hours due to 10.0.x HEAD currently not passing

The last submitted patch, 25: core-ckeditor5-textpart-3250191-25-FAIL.patch, failed testing. View results

wim leers’s picture

Status: Needs review » Reviewed & tested by the community
lauriii’s picture

StatusFileSize
new5.75 KB

  • lauriii committed 414c7a4 on 10.0.x
    Issue #3250191 by nod_, Wim Leers, lauriii, rkoller, Joachim Namyslo:...

  • lauriii committed bb3ee2e on 9.4.x
    Issue #3250191 by nod_, Wim Leers, lauriii, rkoller, Joachim Namyslo:...

  • lauriii committed 1aaaa87 on 9.3.x
    Issue #3250191 by nod_, Wim Leers, lauriii, rkoller, Joachim Namyslo:...
lauriii’s picture

Version: 10.0.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed

Committed 414c7a4 and pushed to 10.0.x. Also committed patch from #29 to 9.4.x and cherry-picked to 9.3.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.