fix(gpt-runner-vscode): fix insert codes and diff codes sometime not working when focus on webview

Author: 2214962083

packages/gpt-runner-vscode/src/index.ts

@@ -7,7 +7,7 @@ import { getExtConfiguration } from './utils'
 import { Commands, EXT_DISPLAY_NAME } from './constant'
 import { registerWebview } from './register/webview'
 import { registerServer } from './register/server'
-import { registerInsertCodes } from './register/inser-codes'
+import { registerInsertCodes } from './register/insert-codes'
 import { registerDiffCodes } from './register/diff-codes'
 import { registerOpenInBrowser } from './register/open-in-browser'
 import { registerStatusBar } from './register/status-bar'

packages/gpt-runner-vscode/src/register/diff-codes.ts

@@ -86,7 +86,15 @@ export async function registerDiffCodes(
 
     diffCodesProviderDisposable = DiffCodesProvider.getInstance().registerTextDocumentContentProvider()
 
-    commandDisposable = vscode.commands.registerTextEditorCommand(Commands.DiffCodes, async (editor) => {
+    commandDisposable = vscode.commands.registerCommand(Commands.DiffCodes, async () => {
+      if (vscode.window.activeTextEditor)
+        state.activeEditor = vscode.window.activeTextEditor
+
+      const editor = state.activeEditor
+
+      if (!editor)
+        return
+
       const title = 'Your codes ↔ GPT Runner codes'
       const selectionText = editor.document.getText(editor.selection)
 

packages/gpt-runner-vscode/src/register/inser-codes.ts renamed to packages/gpt-runner-vscode/src/register/insert-codes.ts

@@ -18,11 +18,20 @@ export async function registerInsertCodes(
   const registerProvider = () => {
     dispose()
 
-    disposable = vscode.commands.registerTextEditorCommand(Commands.InsertCodes, (editor, edit) => {
-      editor.selections.forEach((selection) => {
-        const text = state.insertCodes
-        edit.replace(selection, text) // insert at current cursor
-      })
+    disposable = vscode.commands.registerCommand(Commands.InsertCodes, () => {
+      if (vscode.window.activeTextEditor)
+        state.activeEditor = vscode.window.activeTextEditor
+
+      const editor = state.activeEditor
+
+      if (editor) {
+        editor.selections.forEach((selection) => {
+          const text = state.insertCodes
+          editor.edit((edit) => {
+            edit.replace(selection, text) // insert at current cursor
+          })
+        })
+      }
     })
 
     return disposable

packages/gpt-runner-vscode/src/register/webview.ts

@@ -42,6 +42,7 @@ class ChatViewProvider implements vscode.WebviewViewProvider {
       EXT_DISPLAY_NAME,
       {
         viewColumn: vscode.ViewColumn.Two,
+        preserveFocus: true,
       },
       { retainContextWhenHidden: true },
     )
@@ -142,6 +143,9 @@ export async function registerWebview(
 
     sidebarWebviewDisposer = vscode.window.registerWebviewViewProvider(ChatViewProvider.viewType, provider)
     webviewPanelDisposer = vscode.commands.registerCommand(Commands.OpenChat, () => {
+      if (vscode.window.activeTextEditor)
+        state.activeEditor = vscode.window.activeTextEditor
+
       ChatViewProvider.createWebviewPanel(ext, cwd)
     })
 

packages/gpt-runner-vscode/src/state.ts

@@ -5,6 +5,7 @@ export interface State {
   statusBarItem: vscode.StatusBarItem | null
   sidebarWebviewView: vscode.WebviewView | null
   webviewPanel: vscode.WebviewPanel | null
+  activeEditor: vscode.TextEditor | null
   insertCodes: string
   diffCodes: string
 }
@@ -14,6 +15,7 @@ export const state: State = {
   statusBarItem: null,
   sidebarWebviewView: null,
   webviewPanel: null,
+  activeEditor: null,
   insertCodes: '',
   diffCodes: 'aaa',
 }

packages/gpt-runner-web/client/src/hooks/use-size.hook.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 
 interface Size {
   width: number
@@ -17,13 +17,12 @@ export function useSize(props?: UseSizeProps): [ref: React.RefObject<HTMLElement
   const ref = props?.ref ?? useRef<HTMLElement>(null)
   const [size, setSize] = useState<Size>({ width, height })
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!ref.current)
       return
 
     const updateSize = () => {
       if (ref.current) {
-        console.log('updateSize', ref.current.offsetWidth, ref.current.offsetHeight)
         setSize({
           width: ref.current.offsetWidth,
           height: ref.current.offsetHeight,
@@ -35,8 +34,13 @@ export function useSize(props?: UseSizeProps): [ref: React.RefObject<HTMLElement
 
     ref.current.addEventListener('resize', updateSize)
 
+    // ResizeObserver
+    const resizeObserver = new ResizeObserver(updateSize)
+    resizeObserver.observe(ref.current)
+
     return () => {
       ref.current?.removeEventListener('resize', updateSize)
+      resizeObserver.disconnect()
     }
   }, [ref.current])