Problem/Motivation

Steps to reproduce

Create new custom form (e.g. Download form).

Form Elements > Help text cannot be translated.

Goto Settings. None of the boxes where CKEditor 5 can be used to write are accessible directly. You have to write the text after clicking "Source" icon.

Tokens cannot be inserted in such boxes.

Proposed resolution

Make boxes with CKEditor 5 accessible to write and edit. Allow tokens can be inserted.

Remaining tasks

Make boxes with CKEditor 5 accessible to write and edit. Allow tokens can be inserted.

CommentFileSizeAuthor
#9 3329097-9.patch780 bytesjrockowitz
#7 Translation_issue2.png3.92 KBredseujac
#7 Translation_issue.png14.78 KBredseujac
#5 Boxes_issue.png10.66 KBredseujac

Comments

redseujac created an issue. See original summary.

jrockowitz’s picture

jrockowitz commented
Priority: Normal » Major

Not being able to use CKEditor 5 via translation is a major issue.

Inserting token not working as expected probably needs to be handled via the token module's issue queue. Please create a new ticket to deal with the token insertion issue.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

Not being able to use CKEditor 5 via translation is a major issue.

Not via translation, but the boxes with CKEditor 5 icons above are not directly accessible. It's not possible to write in it.

One has to click the "Source" icon to be able to write/edit in those boxes.

The translation of Help text for the form Elements is another problem. It is possible to create some Help text for each form element but it is not possible to translate it in Settings. Not sure this has something to dot with CKEditor 5. I think "Translation" part in the "Settings" is unrelated to CKEditor 5.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

Inserting token not working as expected probably needs to be handled via the token module's issue queue. Please create a new ticket to deal with the token insertion issue.

I think that the token problem is related to the the problem I mentioned about the boxes with CKEditor 5 icons above them not being accessible directly. It's impossible to write something into those boxes nor to insert tokens.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented
StatusFileSize
new Boxes_issue.png10.66 KB
jrockowitz’s picture

jrockowitz commented
Status: Active » Postponed (maintainer needs more info)

I am not able to replicate this issue via Drupal 9.5.x and 10.0.x.

My steps are

  • Clean installation
  • Enable webform
  • Enable configuration translation
  • Enable Spanish
  • Add description, help, and more to an element in the default Contact webform
  • Translate the default Contact webform into Spanish
redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented
StatusFileSize
new Translation_issue.png14.78 KB
new Translation_issue2.png3.92 KB

I stiil cannot translate the "Help text" element.

Look at the images Translation_issue.png and Translation_issue2.png. There is no box available to enter the translation.

Also the word "Help" is preceded by a hash (#) => #Help. What does this mean?

Notice that #Help is the title of the text that must be translated. At the right column (= Translation column) there is no box avalable to translate thist text.

There is no problem with other elements, only with the Help text. Notice that the Help title can be translated, unfortunately the Help text not.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

The issue with the form elements Help-text not being translatable maybe is annoying, but the problem with some Settings textboxes [those with CKEditor 5 icons above it] not being accessible for writing, editing and inserting tokens is worse (see #5 Boxes_issue.png).

Among other things these include the following textboxes:

  • 'Form open' message
  • 'Form closed' message
  • Message for form error messages
  • Confirmation message, etc.

In my opinion those issues are important enough to try fixing them.

I just installed the most recent dev version (from today) and those issues are still there.

jrockowitz’s picture

jrockowitz commented
StatusFileSize
new 3329097-9.patch780 bytes

Got it now. The issue is the #help property and nothing else. This is a one-line fix which I think is applicable to 6.1.x too.

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented
Status: Postponed (maintainer needs more info) » Needs review
redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

I applied the patch #9 and I confirm that it's working properly now.

I am able to translate all form elements 'Help text'. Thank you!

What about the issue with some Settings textboxes not being accessible (see #8, #5): does it seem possible to fix it?

jrockowitz’s picture

jrockowitz commented
Status: Needs review » Postponed (maintainer needs more info)

I can't reproduce "issue with some Settings textboxes not being accessible"

For now, I am going to commit the patch from #9.

  • jrockowitz authored f3283b00 on 6.1.x 
    Issue #3329097 by jrockowitz: Issues with CKEditor 5, tokens,...

  • jrockowitz authored f3283b00 on 6.x 
    Issue #3329097 by jrockowitz: Issues with CKEditor 5, tokens,...

  • jrockowitz authored f3283b00 on 6.2.x 
    Issue #3329097 by jrockowitz: Issues with CKEditor 5, tokens,...
redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

I can't reproduce "issue with some Settings textboxes not being accessible"

I'm sorry to insist, but are you sure you can enter text and tokens directly in the settings textboxes 'Form open' message, 'Form closed' message and 'Confirmation' message without having to click on the 'Source' icon previously?

Well, I cannot and that's a very annoying issue.

Do notice that I'm working in Drupal 10 and PHP 8.1. Drupal Languages are Dutch and French.

jrockowitz’s picture

jrockowitz commented

I can't reproduce this in D9 or D10. My test site has English as the default language, and then I am enabling Spanish translations.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

Thank you for your answer.

All I can do is completely remove both my custom form(s) and Webform module, start again from scratch and see what happens.

But in the meantime maybe other users have the same issue.

I will keep you informed.

jrockowitz’s picture

jrockowitz commented

One guess is there is a JS error is the browser console that is breaking the CKEditor.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

I don't know, because the issue does not occur in the text box General settings > management-description = "Basic email contact webform"

Inspection in Mozille Firefox and Google Chrome doesn't show errors there.

However inspection of the page(s) with the inaccessible textboxes in Firefox and Chrome shows multiple errors, e.g

in Firefox:

Uncaught CKEditorError: debounce is not a function
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-debounce is not a function
    attach https://daproverbn.be/sites/default/files/js/js_qxJhd2iPYeFxhr4V1mUwH3dIieM1eqUQxwXGc93n4V4.js:434
    fire https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _handleChangeBlock https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    _runPendingChanges https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    enqueueChange https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    execute https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    decorate https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    fire https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    e https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    execute https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    execute https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    init https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    fire https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5
    We https://daproverbn.be/core/assets/vendor/ckeditor5/ckeditor5-dll/ckeditor5-dll.js?v=35.4.0:5

and in Chrome:

Uncaught TypeError: Drupal.announce is not a function
    at Drupal.webform.detailsToggle.setDetailsToggleLabel (js_wyQZCOwalVs96rieTJOPdaL-fmecY0DI29itJTKVo-0.js:115:12)
    at HTMLFormElement.<anonymous> (js_wyQZCOwalVs96rieTJOPdaL-fmecY0DI29itJTKVo-0.js:84:38)
    at Function.each (js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:2:3003)
    at E.fn.init.each (js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:2:1481)
    at Object.attach (js_wyQZCOwalVs96rieTJOPdaL-fmecY0DI29itJTKVo-0.js:21:80)
    at js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:207:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:203:34)
    at js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:729:12
    at HTMLDocument.listener (js_bRa8evpQTyC7ttTKuyIKPm5YROlmU270zX2obPSAnig.js:717:7)
Drupal.webform.detailsToggle.setDetailsToggleLabel @ js_wyQZCOwalVs96rieTJOPdaL-fmecY0DI29itJTKVo-0.js:115

Can you deduce anything from that?

jrockowitz’s picture

jrockowitz commented

Any JS error will block the CKEditor from working as expected. We need to determine what is triggering those JS errors.

Can you see if disabling CSS and JS aggregation temporarily fixes the issue?

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

This fixes the issue:

/admin/config/development/performance

Bandwidth optimization:

Aggregate CSS files => disable
Aggregate JavaScript files => disable

I am glad we found it.

And now ? Should I keep those aggregate CSS/JS settings disabled ?

jrockowitz’s picture

jrockowitz commented

You have to keep aggregate CSS/JS enabled on production.

redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

Thank you.

Isn't it strange that this issue didn't occur in Drupal 9 with previous versions of the Webform module, in spite of aggregate CSS/JS being enabled in my performance settings ?

There must have been changes triggering the issue ?

jrockowitz’s picture

jrockowitz commented
Related issues: +#3222107: Library order asset weights do not work properly when a large number of javascript files is loaded between two jQuery UI libraries
redseujac’s picture

redseujac
he/him/his
Primary language Dutch
Location Ieper, BE 🇧🇪
commented

jrockowitz wrote in #21:

Any JS error will block the CKEditor from working as expected. We need to determine what is triggering those JS errors.

Look at the comments #22 and later.

The issue is NOT fixed in the most recent 6.2.x-dev version.

Notice this issue has nothing to do with translations, but with incompatibility of CKeditor and CSS/JS aggregation. If aggregation is disabled, you can write text in the textboxes with CKeditor, otherwise you cannot, because there are JS errors blocking CKEditor from working as expected. See errors in #20.

This seems a major issue.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

There's a missing dependency declaration in ckeditor5.libraries.yml that can be addressed pretty easily and miiight confuse the aggregation process as a result.

the internal.admin library should also include the following dependencies:

- core/drupal
- core/drupal.announce
- core/drupalSettings

While I'm not sure if this library is even loaded in the use case mentioned here, aggregation introduces a layer where this could still be relevant. It's worth trying!

Once I test a few additional things I will be opening a core issue for this, but wanted to mention this here ASAP as there's at least a chance it will help

jrockowitz’s picture

jrockowitz commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

@see #3222107: Library order asset weights do not work properly when a large number of javascript files is loaded between two jQuery UI libraries