Provide ID of active custom editor in context key

[Tyriar]

I'm trying to hook up keybindings to a custom editor only when it's focused, but struggled to create a context key within the extension because AFAICT there's no way of knowing when the webview gets hidden, I tried using blur within the webview but the webview gets suspended because the handler runs, then looked into events in VS Code and context keys and I don't think any of them do specifically what I'm after.

What I'm using now is a combination of the webview one and activeEditor == WebviewEditor && activeEditorAvailableEditorIds =~ /<viewType>/, but this still isn't specific enough as it won't catch the case where a different webview editor is opened for the same file.

What would be perfect is a new documented context key called activeCustomEditorId that is either "" or the viewType of the custom editor. Or being told how to do this properly 🙂

[Tyriar]

The missing piece was WebviewPanel.active and WebviewPanel.onDidChangeViewState. Hopefully someone having the same issue will find this 🙂

[Tyriar]

Going to reopen this because I'm still struggling to capture whether the custom editor is focused specifically, active is relatively easy. This is the current setup I'm using:

class Provider {
    resolveCustomEditor(document, webviewPanel, token): void | Promise < void> {
        // ...
        webviewPanel.onDidChangeViewState(() => this._refreshActiveState(document, webviewPanel));
        this._refreshActiveState(document, webviewPanel);
    }

    private _refreshActiveState(document, changedWebviewPanel) {
        if (changedWebviewPanel.active) {
            this._lastActiveResource = document.uri;
            setVscodeContext(VscodeContextKey.Focused, changedWebviewPanel.active);
        } else {
            // Set focused context only if this webview is the active one, this avoid an issue where
            // events may not fire in the right order (resolve for the active fires before view state
            // change for the old editor).
            if (this._lastActiveResource === document.uri) {
                setVscodeContext(VscodeContextKey.Focused, changedWebviewPanel.active);
            }
        }
        document.isActive = changedWebviewPanel.active;
    }
}

Then in the webview I have:

window.addEventListener('focus', () => {
    setFocusedContextKeyViaIpc(true);
});
window.addEventListener('blur', () => {
    setFocusedContextKeyViaIpc(false);
});

For starters this took a while to get setup, but there is also a big bug with it. When selecting the custom editor from the explorer, focus gets fired but focus remains in the explorer. This means that my single key keybindings to change tools while the editor is focused break filter in explorer, command palette entry, etc.

Here is an example of a keybinding contribution causing problems:

{ "command": "luna.tool.eraser", "key": "e", "when": "luna:focused && focusedView == '' && activeEditor == WebviewEditor && activeEditorAvailableEditorIds =~ /luna.editor/" },

Repro:

1. Install Luna Paint extension
2. Open an image by clicking in the explorer (explorer remains focused but focus fires on the webview's window)
3. Ctrl+shift+p
4. Type "resize", only "ri" will be entered because the rest change tools because luna:focused is active.

To tweak what I was asking for originally, I want focus specifically, but it also wouldn't hurt to have active conveniently available as well and documented in the custom editor doc as it seems like a pretty common thing to want for custom editors.

[Tyriar]

@mjbvz thanks, I'll look into adopting this soon. Any thoughts on also exposing one for focus as I was having problems there:

To tweak what I was asking for originally, I want focus specifically, but it also wouldn't hurt to have active conveniently available as well and documented in the custom editor doc as it seems like a pretty common thing to want for custom editors.

One of the bugs I'm tracking for example is related to this:

When selecting the custom editor from the explorer, focus gets fired but focus remains in the explorer.

I don't think it's possible for me to know if it's actually focused, I guess without checking a whole bunch of other focus keys to confirm for example that the explorer is not focused (and any other place where this may happen).

[Tyriar]

When selecting the custom editor from the explorer, focus gets fired but focus remains in the explorer.

This is still an issue and definitely feels like bug imo because it appears to be in an invalid state where focusedView == '' and sideBarFocus == true. But I've worked around the problem by using this when clause for my single key keybindings that would break quick pick:

"when": "luna:focused && focusedView == '' && !sideBarFocus && activeCustomEditorId == 'luna.editor'"