オープンカスタムVSCODE WebViewパネルとフォーカス入力

この2週間、私はVisual Studioのコードのフロントエンド拡張機能に取り組んでいます.この拡張機能は、他の人を助け、自分自身の静的なマークダウンページのメタデータを管理することが容易になります.前に、タグとカテゴリー経験を強化する質問を受けました.ときに多くのタグやカテゴリを持っているように、それは最適なセレクタを使用する/ピッカーVsCodeを提供していません.
のデフォルトの選択ピッカー
私は経験を改善するために思い付いたアイデアは、カスタムビューパネルを使用することです.どこからすぐにSEOの勧告を参照してくださいすることができますし、拡張機能を提供するすべてのアクションを実行します.このパネル機能をバージョン2.0でリリースしました1.10.0 .
VSCODEにおける新しいフロントエンドパネル

Info: You can find the extension on the VSCode marketplace: Front Matter.

それをリリースした後に、私は私がパネルを開くことができて、タグ/カテゴリー入力フィールドに集中することができたならば、正のフィードバックと質問を得ました.
解決策は2段階のプロセスです.

パネルを開きます

パネルにメッセージを投稿し、入力にフォーカスしなければならないことを指定します

1 .拡張モジュールからパネルを開く

最初のステップは「簡単」ですが、私は長い間VSCode APIを見ていましたが、それは間違った方向であるようでした.解決策はworkbench.view.extension.<your-panel-id> コマンド.
次のスニペットを使用して拡張モジュールに含めることができます.

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 .パネルにメッセージを投稿する

ステップ2は、メッセージを投稿し、拡張パネルを開いた後に実行する必要があります.私の拡張では、私はWebViewの反応を利用し、これは要件ではありません.
まず第一に、あなたのパネルには、入力にフォーカスを設定する知っているようにメッセージを送信する必要があります.

// Post message from your extension to the WebView
this.panel!.webview.postMessage({ command: "focus" });

WebViewでは、これらのすべての着信メッセージを聞くと、フォーカスリスナーを作成します.

window.addEventListener('message', event => {
  const message = event.data;

  switch (message.command) {
    case "focus":
      const elm = document.querySelector('input');
      elm!.focus();
      break;
  }
});

これらの2つのことがあると、次のようになります.
コマンドからのトリガタグの入力
ハッピーコーディング
最初に公開されます:https://www.eliostruyf.com/devhack-open-custom-vscode-webview-panel-focus-input/