Click on the terminal link to open it in your browser

package.json

@@ -170,6 +170,7 @@
         "uuid": "^9.0.0",
         "watcher": "^2.2.2",
         "webpack": "^5.75.0",
-        "xterm": "^4.19.0"
+        "xterm": "^4.19.0",
+        "xterm-addon-web-links": "^0.6.0"
     }
 }

src/components/terminal.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { Terminal } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
+import { WebLinksAddon } from 'xterm-addon-web-links';
 import 'xterm/css/xterm.css'
 import { useAppSelector, useAppDispatch } from '../app/hooks'
 import { FullState } from '../features/window/state'
@@ -13,6 +14,12 @@ export function XTermComponent({ height }: { height: number }) {
     const terminalRef = useRef<HTMLDivElement>(null)
     const terminal = useRef<Terminal | null>(null)
     const fitAddon = useRef<FitAddon>(new FitAddon())
+    const webLinksAddon = useRef<WebLinksAddon>(new WebLinksAddon(
+        (event: MouseEvent, url: string) => {
+            event.preventDefault()
+            connector.terminalClickLink(url)
+        },
+    ))
 
     const handleIncomingData = (e: any, data: any) => {
         terminal.current!.write(data)
@@ -30,6 +37,7 @@ export function XTermComponent({ height }: { height: number }) {
         })
 
         terminal.current.loadAddon(fitAddon.current)
+        terminal.current.loadAddon(webLinksAddon.current)
 
         if (terminalRef.current) {
             terminal.current.open(terminalRef.current)
@@ -41,6 +49,11 @@ export function XTermComponent({ height }: { height: number }) {
             connector.terminalInto(e)
         })
 
+        terminal.current.onData((e) => {
+            connector.terminalInto(e)
+        })
+
+
         connector.registerIncData(handleIncomingData)
 
         // Make the terminal's size and geometry fit the size of #terminal-container
@@ -55,6 +68,7 @@ export function XTermComponent({ height }: { height: number }) {
     useEffect(() => {
         if (terminal.current != null) {
             terminal.current.loadAddon(fitAddon.current)
+            terminal.current.loadAddon(webLinksAddon.current)
             fitAddon.current.fit()
         }
     }, [height, terminal, fitAddon])

src/main/main.ts

@@ -906,6 +906,12 @@ const createWindow = () => {
         }
         return null
     })
+
+    // click on the terminal link
+    ipcMain.handle('terminal-click-link', (event, data) => {
+        shell.openExternal(data);
+    })
+
     setupLSPs(store)
     const projectPathObj = store.get('projectPath')
     if (

src/preload.ts

@@ -189,6 +189,7 @@ const electronConnector = {
         ipcRenderer.removeListener('terminal-incData', callback)
     },
     terminalInto: (data: any) => ipcRenderer.invoke('terminal-into', data),
+    terminalClickLink: (data: any) => ipcRenderer.invoke('terminal-click-link', data),
     terminalResize: (data: any) => ipcRenderer.invoke('terminal-resize', data),
 
     registerFileWasAdded: (callback: Callback) =>