Problem/Motivation

After the fix from #3334784: Implement Token-Click-Insert for CKEditor 5, 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).

CommentFileSizeAuthor
#8 3397637-focusing-back-ckeditor-wrong.patch2.05 KBgnuget

Issue fork token-3397637

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

bojan_dev created an issue. See original summary.

bojan_dev opened merge request !47

bojan_dev’s picture

bojan_dev commented
Status: Active » Needs review
bojan_dev’s picture

bojan_dev commented

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

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;
        }
      });
    })
  }
});
psf_’s picture

psf_ commented
Status: Needs review » Needs work

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

The focus is directed to the correct field, but the field must be activated by clicking. Sometimes it is confusing, since when you click on the button in the CKEditor 5 toolbar, it does not receive focus.

andreic made their first commit to this issue’s fork.

andreic’s picture

andreic commented

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.

gnuget’s picture

gnuget
Primary language Spanish
commented
Status: Needs work » Needs review
StatusFileSize
new 3397637-focusing-back-ckeditor-wrong.patch2.05 KB

I faced this today, but in a Layout Builder block.

The thing is, when an inline block is edited on the Layout Builder page, it automatically focuses on the first field, so the Click on the title field step is not even necessary, it just doesn’t work at all. 🥲

Here’s a patch version of the PR in case someone needs it.