Track active CKEditor 5 instance

[quicksketch]

Description of the need

Previous WYSIWYG systems (like the D7 WYSIWYG module) tracked the last active editor with Drupal.wysiwyg.activeId. And tinyMCE tracks the current editor with tinyMCE.activeEditor.

CKEditor does not provide this ability, and accomplishing it in CKEditor 5 is particularly tricky, see this StackOverflow post on getting active instances.

Some contrib modules like Insert would like the ability to insert into CKEditor 5 instances. Since this is difficult to add from outside of core, it would be preferable if core could provide this mechanism for use by contrib.

Proposed solution

Backdrop core's ckeditor5.js file should track the active instance in Backdrop.ckeditor5.activeEditor.

Alternatives that have been considered

The Insert module is trying to do this and sort of achieves it by using a window.timeout(), but it's not 100% reliable. It would be better to use the .then() promise after an instance is created.

[quicksketch]

PR filed at backdrop/backdrop#4920

Steps to test:

• Edit the "Page" content type and add an additional long text field. Add multiple if desired.
• Visit node/add/page.
• Open the JavaScript console in the browser. Run the following:

Backdrop.ckeditor5.activeEditor.sourceElement.id;

• It should print the HTML ID of the first text area on the page.
• Click into another CKEditor instance, and run the code again. It should print the HTML ID of the new CKEditor instance's source field.
• Clicking back and forth should always print the given editor's text area ID.

[indigoxela]

Oh, this is a missing feature in CKE! 👏 I tested in the sandbox and was excited at first (yay, can get ID!), but...

Opening a Backdrop (jQuery UI) dialog doesn't update the value, it seems.

To reproduce on a page with two editors:

• click into an editor area (to put the focus there), check ID - that works
• now click on a Backdrop toolbar item on the other editor (like opening image dialog) and check again - it's the old (previous) id. But the image gets inserted to the right editor - the editor itself seems to be aware, where the toolbar item belongs to

Clicking on other buttons (that don't open a dialog / ship with CKE ootb) does update the activeEditor value, it seems (I didn't test all of them).

I'm not sure, if this is a big enough problem to even handle, and whether it's a problem with Backdrop integration or CKE, but it's at least something to consider.

[quicksketch]

Thank you @indigoxela! I greatly appreciate your review; always helping with CKEditor shenanigans.

now click on a Backdrop toolbar item on the other editor (like opening image dialog) and check again - it's the old (previous) id

I think this is probably because the focus tracking is based on when you click into the editor, not the toolbar? Here's the line of code:

editor.editing.view.document.on('change:isFocused', ...

There might be a similar thing we can do for the toolbar.

[quicksketch]

I think this is fixed by instead using:

editor.ui.focusTracker.on('change:isFocused', ...

See https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/ui/focus-tracking.html#a-note-about-the-global-focus-tracker

That "global focus tracker" applies to both the toolbar and the editing area, as well as balloon editors and other CKEditor 5 UI elements. It seems to work with our custom Image and Link buttons as well. I updated the PR.

[indigoxela]

That "global focus tracker" applies to both the toolbar and the editing area, as well as balloon editors and other CKEditor 5 UI elements. It seems to work with our custom Image and Link buttons as well.

Brilliant, this works like a charm! RTBC 👍