How to listen to focus event in CKEditor 5

Question

I'd like to listen to the focus event in CKEditor 5.

I thought something like this would work but the callback is never called:

document.querySelector("#editable");
ClassicEditor.create(el).then(editor => {
    editor.on('focus', () => {
        console.log("Focused");
    });
});

The editor is successfully created but the callback is not called.

Any ideas?

Answer 1

The editor comes with a FocusTracker (and the observable #isFocused property) for that purpose:

editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, value ) => {
    console.log( 'isFocused = ', value );
} );

Note that editor.ui.focusTracker.isFocused is true as long as any UI has focus, which includes the editable but also the toolbar, floating panels, etc.

To determine the focus of the editable, i.e. when the caret is blinking and typing is possible, use this listener instead:

editor.editing.view.document.on( 'change:isFocused', ( evt, name, value ) => {
    console.log( 'editable isFocused =', value );
} );

Place one listener next to the other and play with the editor and the UI to see the difference.