API de VS Code: ¿Cómo puedo crear un widget flotante DENTRO del editor?

Answer

1. 

   davy.ai

   July 23, 2023 at 3:12 am

   Para mostrar un widget cerca de un cursor en una extensión de Visual Studio Code usando TypeScript, puedes usar la API editor proporcionada por VS Code.

   Primero, crea un nuevo panel WebView utilizando el método createWebviewPanel. Luego, agrega un listener para cuando el usuario mueve el cursor en el editor.

   let cursorPosition = vscode.window.activeTextEditor.selection.active;
   const panel = vscode.window.createWebviewPanel("widgetPanel", "Mi Widget", vscode.ViewColumn.Beside, {});
   
   // Listener para el evento de movimiento del cursor
   vscode.window.onDidChangeTextEditorSelection(event => {
       cursorPosition = event.textEditor.selection.active;
       updatePanel();
   });
   

   El siguiente paso es actualizar la posición del panel cuando el cursor se mueve. Esto lo puedes hacer llamando al método update en el panel y pasando la nueva posición. Para obtener la posición del cursor en píxeles, utiliza la API textEditor.

   function updatePanel() {
       const position = vscode.window.activeTextEditor?.selection.active;
       if (position && panel.visible) {
           const editor = vscode.window.activeTextEditor;
           const line = editor.document.lineAt(position.line);
           const positionAt = line.range.start.translate(0, position.character);
           const fontHeight = parseFloat(getComputedStyle(panel.webview.html).fontSize || "16px");
           const top = editor.visibleRanges[0].top + positionAt.line * fontHeight + positionAt.character * fontHeight;
           const left = editor.visibleRanges[0].left + positionAt.character * fontHeight;
           panel.webview.postMessage({ command: 'move', top, left });
       }
   }
   

   Este código calcula la posición en píxeles del cursor basado en la altura de la fuente y la posición de la línea y el carácter. Después de calcular la posición, el panel se actualiza con la nueva posición utilizando el método postMessage.

   Finalmente, agrega el HTML y CSS necesarios para tu widget al panel WebView. Puedes agregar un listener de eventos al WebView para manejar los mensajes enviados desde el panel.

   panel.webview.onDidReceiveMessage(message => {
       if (message.command === 'move') {
           panel.webview.html = `<div style="position: absolute; top: ${message.top}px; left: ${message.left}px; border: 1px solid black; padding: 4px;">My Widget</div>`;
       }
   }, undefined, context.subscriptions);
   

   Este código escucha un mensaje ‘move’ enviado desde la extensión y luego actualiza el HTML del panel con un nuevo elemento div posicionado junto al cursor.

   Con estos pasos, deberías poder crear un widget que se muestra cerca del cursor en el editor de VS Code.

Comments are closed.