Support CKEditor 5

I've been trying this in combination with the patch for #3334784.
The button works to show the token browser but when I click a token to insert it I get a JS popup:
First click a text field to insert your tokens into.
I'm definitely putting the cursor in the text area first. I do notice that the cursor seems to disappear immediately upon clicking the button but in CKEditor 4 the cursor stays flashing until the token browser appears or at least until a "Loading" popup appears at the top of the text area.

I also get an error in the browser console:

Uncaught TypeError: can't access property "contains", event.target.classList is undefined
    _allowInteraction ckeditor5.dialog.fix.js:10

I don't know if this is particular to my install. Does anyone else get this issue?

With further testing I've found the following:

1. Position cursor, click button to insert token: "First click a text field to insert your tokens into."
2. Close token browser.
3. Position cursor, click button to insert token: Success.

This also works if you click the token browser button, close the token browser, position the cursor again and then click the button.

It seems initially drupalSettings.tokenFocusedCkeditor5 is undefined in token.js:Drupal.behaviors.tokenInsert, so it drops out into the last else {}:

            alert(Drupal.t('First click a text field to insert your tokens into.'));

And with some debugging, I can see that the drupalSettings.tokenFocusedCkeditor5 = editor; isn't initially called:

      if (Drupal.CKEditor5Instances) {
        Drupal.CKEditor5Instances.forEach(function (editor) {
          editor.editing.view.document.on('change:isFocused', (event, data, isFocused) => {
            if (isFocused) {
              drupalSettings.tokenFocusedCkeditor5 = editor;
            }
          });
        })
      }

I take back #9, I was wrong.

Marking NW for #10/#11.

On page load, the token.js loads first and then comes the ckeditor5.js.
Before the ckeditor is applied, we are trying to iterate the Drupal.CKEditor5Instances which is null by default.

Hope the patch #8 works after changing the js order.

Yeah I noticed that, in the patch I'm working on (slowly) I'm looking for a way to trigger the behaviour every time a CKEditor instance is started because even loading them in that order won't fix what happens when the text_format is changed.

This patch works for me. But I have not verified on text_format change.

Thanks @bala_28... that looks like a patch for the token module?

I've decided to simply set

drupalSettings.tokenFocusedCkeditor5

whenever the token_filter plugin button is clicked.

If/when this passes community testing I'll release a 2.1 version for CKEditor5 compatibility and keep 2.0 until the end of the year for CKEditor4 compatibility because that's EOL for the ckeditor contrib replacement.

I haven't tried the upgrade path on this, I'd be very grateful if someone could do that.

Yes @darvanen. It's for token module.

And here is the updated patch, where we included ckeditor5 under dependencies.
This will make the ckeditor5 lib to load before the token.js and prevents the "'First click a text field to insert your tokens into.'" alert display and inserts the token into editor.

@bala_28 ah, I see it's almost exactly the patch from ✨ Implement Token-Click-Insert for CKEditor 5 Fixed which is called out as necessary in comment #8 here. I have been using that patch to test the work on this issue with.

I've tested the patches, and it seems to work well here.
No more warning that there is no upgrade path for token_filter, and in my testing, all tokens we used were preserved when testing this in our product on multiple sites.

I can't review the code itself, but functionally it seems to work well!

For future testers, it was a bit confusing at first what patch applied where, if you want to test this patch you have to:
Apply patch #17 to the drupal/token module.

And the patch for drupal/token_filter i've attached to this comment: it's the same patch as the "MR5!" patch, but can be applied without worrying that the merge request will change in the future and perhaps breaks your site.

Thanks for all the work everyone!

Ok cool, I'm not going to commit this until the token module commits ✨ Implement Token-Click-Insert for CKEditor 5 Fixed so this is postponed until that happens. I'm watching that issue.

The reason behind this is that the maintainers of token *could* decide to go a completely different direction.

If you need this functionality, for now, use the patches.

Hi @darvanen; looks like the fix you were waiting for has been committed within the Token module.

@techlead so it does, thank you, I just haven't had time to address this until now.

Thanks for your work on this everyone!

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