Focusing back on CKEditor inserts the token in the wrong field

Created on 30 October 2023, about 1 year ago

Problem/Motivation

After the fix from Implement Token-Click-Insert for CKEditor 5 Fixed , it's now possible again to add tokens in CKEditor 5. The issue that I'm experiencing is that when initially you focus on a text field and then focus on a CKEditor, the token is being added to the text field while the last focus was on the CKEditor.

Steps to reproduce

  • Have a content type available with CKEditor 5 (with Token Browser enabled on the editor) on a long text field
  • Create or edit a node
  • Click on the title field
  • Click on the CKEditor, fill in text (to be sure we are focusing on the CKEditor)
  • Click on Token Browser
  • Click on a token to be inserted
  • Token will be added to the title field instead of the CKEditor field

Proposed resolution

When a textarea or input text field is being focused it will have priority over CKEditor fields. I propose to set the drupalSettings.tokenFocusedField to false when a CKEditor5 instance is focused. This way the tokens will be actually inserting on last clicked fields (including CKEditor5 fields).

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇳🇱Netherlands bojan_dev

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @bojan_dev
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.3 & MariaDB 10.3.22
    last update about 1 year ago
    77 pass
  • Status changed to Needs review about 1 year ago
  • Pipeline finished with Success
    about 1 year ago
    Total: 273s
    #41440
  • 🇳🇱Netherlands bojan_dev

    There is a edge case were this issue is still occuring in an initial state, but this can be resolved when the editor:attached event lands in core, see: Trigger event when Text Editor is attached Needs work

    We can then do:

    $(document).on('editor:attached', function () {
      if (Drupal.CKEditor5Instances) {
        Drupal.CKEditor5Instances.forEach(function (editor) {
          editor.editing.view.document.on('change:isFocused', (event, data, isFocused) => {
            if (isFocused) {
              drupalSettings.tokenFocusedField = false;
              drupalSettings.tokenFocusedCkeditor5 = editor;
            }
          });
        })
      }
    });
    
  • Status changed to Needs work 10 months ago
  • 🇪🇸Spain psf_ Huelva

    Work for me, but it need a bit of debug.

  • First commit to issue fork.
  • Pipeline finished with Failed
    3 months ago
    Total: 261s
    #298753
  • 🇷🇴Romania andreic

    I have a page for a client where both simple textareas and ckeditor textareas are used for different fields in different paragraphs and if I clicked first on a simple textarea field and then on ckeditor textarea field, the focus would not work and Token Browser would not insert toke values.

    If I closed the token browser window and clicked again the ckeditor textarea, then it would work, but the first time after a page load, it does not.

    I switched the checks in the MR (first check for tokenFocusedCkeditor5 and then for tokenFocusedField) and now it works without a problem.

Production build 0.71.5 2024