Use webgl when available, add search and better weblinks

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/features/terminal/__snapshots__/opening-terminal-tab.test.tsx.snap

@@ -645,6 +645,14 @@ exports[`test for opening terminal tab within cluster frame when new terminal ta
                   <div
                     class="xterm-decoration-container"
                   />
+                  <canvas
+                    class="xterm-link-layer"
+                    style="z-index: 2;"
+                  />
+                  <canvas
+                    class="xterm-cursor-layer"
+                    style="z-index: 3;"
+                  />
                 </div>
               </div>
             </div>

src/renderer/components/dock/terminal/terminal.ts

@@ -17,9 +17,11 @@ import type { Logger } from "../../../../common/logger";
 import type { TerminalConfig } from "../../../../common/user-store/preferences-helpers";
 import assert from "assert";
 import { TerminalChannels } from "../../../../common/terminal/channels";
-import { LinkProvider } from "xterm-link-provider";
 import type { OpenLinkInBrowser } from "../../../../common/utils/open-link-in-browser.injectable";
 import type { CreateTerminalRenderer } from "./create-renderer.injectable";
+import { WebLinksAddon } from "xterm-addon-web-links";
+import { SearchAddon } from "xterm-addon-search";
+import { WebglAddon } from "xterm-addon-webgl";
 
 export interface TerminalDependencies {
   readonly spawningPool: HTMLElement;
@@ -98,10 +100,25 @@ export class Terminal {
       fontFamily: this.fontFamily,
       theme: this.dependencies.xtermColorTheme.get(),
     });
+
     // enable terminal addons
     this.xterm.loadAddon(this.fitAddon);
+    this.xterm.loadAddon(new WebLinksAddon());
+    this.xterm.loadAddon(new SearchAddon());
 
     this.xterm.open(this.dependencies.spawningPool);
+
+    try {
+      const webgl = new WebglAddon();
+
+      this.xterm.loadAddon(webgl);
+      webgl.onContextLoss(() => {
+        webgl.dispose();
+      });
+    } catch (error) {
+      this.dependencies.logger.warn("[TERMINAL]: failed to load webgl as renderer, falling back to DOM", error);
+    }
+
     this.xterm.attachCustomKeyEventHandler(this.keyHandler);
     this.xterm.onSelectionChange(this.onSelectionChange);
 
@@ -116,16 +133,7 @@ export class Terminal {
     this.api.on("error", this.onApiError);
     window.addEventListener("resize", this.onResize);
 
-    const linkProvider = new LinkProvider(
-      this.xterm,
-      /https?:\/\/[^\s]+/i,
-      (event, link) => this.dependencies.openLinkInBrowser(link),
-      undefined,
-      0,
-    );
-
     this.disposer.push(
-      this.xterm.registerLinkProvider(linkProvider),
       reaction(
         () => this.dependencies.xtermColorTheme.get(),
         colors => this.xterm.options.theme = colors,
@@ -133,7 +141,6 @@ export class Terminal {
       reaction(() => this.fontSize, this.setFontSize),
       reaction(() => this.fontFamily, this.setFontFamily),
       this.xterm.onData(this.onData),
-      () => this.fitAddon.dispose(),
       () => this.api.removeAllListeners(),
       () => window.removeEventListener("resize", this.onResize),
       () => this.elem.removeEventListener("contextmenu", this.onContextMenu),