Problem/Motivation
CKEditor5 is now standard in Drupal 10. Let's get this module compatible with it.
Proposed resolution
I had started some work at https://github.com/LukeLeber/ckeditor5-drupal-token that the project maintainers are welcome to take over / copy if they find it useful :).
I did some work on the Drupal integration side as well, but ran into some non-trivial conflicts between the token
module and how the dialogs within ckeditor5
work. I don't have any of the Drupal side published, because I had to hack up the token module a good bit to make things work.
Remaining tasks
TBD
User interface changes
TBD
API changes
TBD
Data model changes
TBD
Comment | File | Size | Author |
---|---|---|---|
#19 | token_filter-2.x-dev-3262052-19.patch | 319.06 KB | bskibinski |
#17 | token-8.x-1.x-3262052-17.patch | 1.96 KB | bala_28 |
Issue fork token_filter-3262052
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:
Comments
Comment #2
darvanen@Luke.Leber what functionality are you trying to achieve? Is it the display of the available tokens? Token replacement should work regardless of the editor library.
Comment #3
Luke.LeberHello!
I'm sure you're right that the filter plugin is agnostic of the actual editor, however since there's a ckeditor 4 plugin that integrates with the token browser UI, it would also be nice to have an equivalent UI integration for ckeditor 5.
An equivalent UX would offer end users a smoother transition into Drupal 10 and beyond.
Comment #4
darvanenOh the button! I completely forgot that was there (I'm more of a caretaker here than anything else).
Yes I agree. Thanks for the link to your work so far, unfortunately I don't have the capacity to work on it but I will review patches that have reached a state of readiness.
I'll leave this issue open for anyone who want to work on it.
Comment #5
darvanenComment #8
tgauges CreditAttribution: tgauges commentedI developed a patch in the issue fork.
This only works with the patch i developed for 3334784!
This does not implement a schema or converter for CKEditor 5 but only inserts the token from the dialog as is the case for CKEditor 4.
I based the new files on the starter template of the CKEditor 5 Dev Tools.
Comment #9
darvanenWow! Thanks for this @tgauges.
Previously the token module was the one that had the token browser classes, not this one. I'd suggest for continuity purposes to keep doing it that way.Uh, yeah I was wrong about that.Comment #10
oliverpolden CreditAttribution: oliverpolden commentedI'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:
I don't know if this is particular to my install. Does anyone else get this issue?
Edit: I just checked out of curiosity whether inserting into another (non-ckeditor) text field works and it does.
Comment #11
oliverpolden CreditAttribution: oliverpolden commentedWith further testing I've found the following:
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 {}:
And with some debugging, I can see that the
drupalSettings.tokenFocusedCkeditor5 = editor;
isn't initially called:Comment #12
darvanenI take back #9, I was wrong.
Marking NW for #10/#11.
Comment #13
bala_28 CreditAttribution: bala_28 commentedOn 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.
Comment #14
darvanenYeah 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.
Comment #15
bala_28 CreditAttribution: bala_28 commentedThis patch works for me. But I have not verified on text_format change.
Comment #16
darvanenThanks @bala_28... that looks like a patch for the token module?
I've decided to simply set
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.
Comment #17
bala_28 CreditAttribution: bala_28 commentedYes @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.
Comment #18
darvanen@bala_28 ah, I see it's almost exactly the patch from #3334784: Implement Token-Click-Insert for CKEditor 5 which is called out as necessary in comment #8 here. I have been using that patch to test the work on this issue with.
Comment #19
bskibinskiI'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!
Comment #20
darvanenOk cool, I'm not going to commit this until the token module commits #3334784: Implement Token-Click-Insert for CKEditor 5 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.
Comment #21
techlead CreditAttribution: techlead as a volunteer commentedHi @darvanen; looks like the fix you were waiting for has been committed within the Token module.
Comment #23
darvanen@techlead so it does, thank you, I just haven't had time to address this until now.
Thanks for your work on this everyone!