VS Code扩展：Webview聚焦时如何撤销非活动文本编辑器更改

问题背景 #

我正在开发一款VS Code扩展，功能是在现有文本编辑器旁打开Webview，用于可视化和编辑SCXML状态图。Webview中的更改会触发文本文档的完整重写替换。当前遇到的问题是：用户操作失误时，希望无需切换到文本编辑器，在Webview保持聚焦的情况下就能撤销更改，但直接在Webview激活时执行vscode.commands.executeCommand('undo')无法作用于文本编辑器。

需要实现以下任一需求：

• 向指定文本编辑器发送Undo命令
• 发送命令将指定文本编辑器调至前台

实现方案 #

通过先聚焦文本编辑器、执行撤销命令再恢复Webview聚焦的方式实现需求，以下是TypeScript代码：

// 定位编辑器和Webview所在的标签栏，避免在其他栏打开副本
private findTabs() {
   let edTabCol: ViewColumn|null = null,
       webTabCol: ViewColumn|null = null;
   for (const tab of window.tabGroups.all.flatMap(group => group.tabs)) {
      if (tab.input instanceof vscode.TabInputText) {
         if (tab.input.uri.fsPath === this.editor.document.uri.fsPath) {
            edTabCol = tab.group.viewColumn;
         }
      } else if (tab.input instanceof vscode.TabInputWebview) {
         // TODO: input.viewType 和创建Webview时传入的viewType不完全匹配，原因未知？
         if (/scxml$/.test(tab.input.viewType)) {
            webTabCol = tab.group.viewColumn;
         }
      }
   }
   return {edTabCol, webTabCol};
}

// 聚焦文本编辑器执行撤销，再恢复Webview聚焦
private undo() {
   const {edTabCol, webTabCol} = this.findTabs();
   if (edTabCol) {
      const opts = {preserveFocus: false, preview: false, viewColumn: edTabCol};
      window.showTextDocument(this.editor.document, opts).then(() => {
         vscode.commands.executeCommand('undo').then(() => {
            if (webTabCol) this.panel.reveal(webTabCol, false);
         });
      });
   }
}

代码说明 #

1. findTabs方法：遍历所有标签组，定位目标文本编辑器和Webview所在的视图列，确保后续聚焦操作不会生成新的标签副本。
2. undo方法：
   • 调用showTextDocument聚焦目标文本编辑器
   • 执行undo命令完成撤销操作
   • 最后调用panel.reveal恢复Webview的聚焦状态，让用户无感知界面切换

内容的提问来源于stack exchange，提问作者Phrogz