For the last two weeks, I have been working on my FrontMatter extension for Visual Studio Code. This extension helps others and myself make it easier to manage their static markdown pages' metadata. Some time ago, I received the question to enhance the tag and category experience. As when you have many tags or categories, it is not optimal to use the selectors/pickers VSCode provides you.
The idea I came up with to improve the experience is to use a custom view panel. From where you can quickly see the SEO recommendations and perform all actions the extension offers. I released this panel functionality in version 1.10.0
.
Info: You can find the extension on the VSCode marketplace: Front Matter.
After releasing it, I got positive feedback and the question if I could make it possible to open the panel and focus on the tag/category input field.
The solution is a two-step process:
- Trigger your panel to open
- Post a message to the panel to specify it has to focus on an input
1. Open a panel from your extension
The first step is "easy", although I was looking at the VSCode API for a long time, which seemed to be the wrong direction. The solution is to use the workbench.view.extension.<your-panel-id>
command.
You can use the following snippet to include it in your extension:
let insertTags = vscode.commands.registerCommand('frontMatter.insertTags', async () => {
await vscode.commands.executeCommand('workbench.view.extension.frontmatter-explorer');
});
Info: Link to my extension file: extension.ts.
2. Posting message to your panel
Step two is to post a message and needs to perform after opening your extension panel. In my extension, I make use of React in my WebView, and this is not a requirement.
First of all, you need to send a message to your panel to let it know you want to set the focus on the input.
// Post message from your extension to the WebView
this.panel!.webview.postMessage({ command: "focus" });
In the WebView, where you listen to all these incoming messages, you create the focus listener.
window.addEventListener('message', event => {
const message = event.data;
switch (message.command) {
case "focus":
const elm = document.querySelector('input');
elm!.focus();
break;
}
});
Once you have these two things in place, you can do something similar to this:
Happy coding
First published on: https://www.eliostruyf.com/devhack-open-custom-vscode-webview-panel-focus-input/
Top comments (0)