Problem/Motivation

This module provides functioanlity to insert a selected token into the currently active input/textarea/tinyMCE/CKEditor
/CodeMirror. This is handled in Drupal.behaviors.tokenInsert. I woul like to have the same functionality for CKEditor 5.

Steps to reproduce

Enable CKEditor5 for a field and try to insert a token via the click_insert functioanlity of the
token_tree_table render element. Nothing will happen.

Proposed resolution

Since there is no global CKEDITOR.currentInstance variable for CKEditor 5 i propose listening to the change:isFocused event to set a new drupalSettings.tokenFocusedCkeditor5 variable which saves the last active CKEditor5 editor instance.
This variable can then be used when trying to insert a token and no other field is focused.

Data model changes

New global JavaScript variable drupalSettings.tokenFocusedCkeditor5.

CommentFileSizeAuthor
#22 token-click-insert-ckeditor5-fix-3334784.patch956 bytestarazingo
#13 token-click-insert-ckeditor5-3334784-13.patch1.74 KBvakulrai

Issue fork token-3334784

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

tgauges created an issue. See original summary.

tgauges opened merge request !36

tgauges’s picture

tgauges
he/him
commented
Assigned: tgauges » Unassigned
Status: Needs work » Needs review
tgauges’s picture

tgauges
he/him
commented
Issue summary: View changes
michaelsoetaert’s picture

michaelsoetaert
Primary language Dutch
Location Belgium 🇧🇪
commented

I've tested the proposed solution and can confirm that it works with drupal/token 1.11.0.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Status: Needs review » Needs work
Related issues: +#3262052: Support CKEditor 5

It mostly works, however drupalSettings.tokenFocusedCkeditor5 doesn't get updated when the text_format is changed (found this while testing for #3262052: Support CKEditor 5.

I'm looking into ways to improve this. I think I could override that setting from within the token_filter module when a user clicks the browser button using a CKEditor5 emitter, but I'd rather take a more holistic approach if possible.

Any ideas?

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

I decided to work around #6 within the token_filter plugin like this:

      this.listenTo(buttonView, "execute", () => {
        drupalSettings.tokenFocusedCkeditor5 = this.editor;
        this.editor.execute("tokenBrowser")
      });

This change for token now looks good to me from manual testing.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Status: Needs work » Reviewed & tested by the community

Oops

zaporylie’s picture

zaporylie
he/him
Primary language Polish
commented

Perhaps Token module could adapt to CKEditor's Content Placeholder feature, currently (awaiting) support via #3273754: Ckeditor5 readiness?

tyler36’s picture

tyler36 commented

Confirming: MR!36 fixes issue for me on Drupal 10.1

benstallings’s picture

benstallings commented

I must be missing something... I've got MR!36 in place, but I don't see any interface element available to browse and insert tokens. Is there another step required to make this available?

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

#11: where are you not seeing it? The first step is to drag the button on to the toolbar in the configuration for your text filter which are accessed from /admin/config/content/formats

vakulrai’s picture

vakulrai commented
StatusFileSize
new token-click-insert-ckeditor5-3334784-13.patch1.74 KB

Uploading the patch diff from : https://git.drupalcode.org/project/token/-/merge_requests/36/diffs for visibility.

a_nut’s picture

a_nut commented

Hi.

Like BenStellings #11 I've applied the patch to 1.12 on D10.1.4.

I've also applied the token module patch from the parent issue.

Both of the patches apply cleanly however there is no available button relating to Tokens in the CKEditor available list.

Is there a step needed to make this button available to drag to the toolbar?

Many thanks

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

@a_nut the CKEditor button is provided by token_filter in a related issue which is postponed on this one.

#3262052: Support CKEditor 5

a_nut’s picture

a_nut commented

Thanks for clarifying @darvanen. Appreciated!

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

  • Berdir committed 52942ecc on 8.x-1.x authored by tgauges 
    Issue #3334784 by vakulrai: Implement Token-Click-Insert for CKEditor 5
berdir’s picture

berdir
Primary language German
Location Switzerland
commented

Merged.

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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

tarazingo’s picture

tarazingo commented
StatusFileSize
new token-click-insert-ckeditor5-fix-3334784.patch956 bytes

Hi everyone,
There is a small issue when you edit the node with paragraphs inside. If the paragraphs with the CKEditor field already exist, it works correctly, but when you add a new paragraph with the CKEditor field, the token insertion does not work.
Due to the presence of drupalSettings.tokenFocusedField and drupalSettings.tokenFocusedCkeditor5 in the same scope, the insertion is made to the hidden textarea field instead of the CKEditor widget.
I've attached a patch for the '^1.14' version of the module that resolves this issue.