Parse terminal hyperlinks in command output (#7318)

Some compilers (such as `gcc` and `rustc`) support emitting hyperlinks
to the documentation for error messages and/or warnings. This PR adds a
parser for the respective `OSC 8` ANSI escape sequence (see
https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda) and
makes them clickable in the output window.

For example: https://godbolt.org/z/o1v7WzPc6

For GCC, this would make `-Wreturn-type` a clickable link to
https://gcc.gnu.org/onlinedocs/gcc-14.2.0/gcc/Warning-Options.html#index-Wno-return-type.

For Rust, this would make `E0425` a clickable link to
https://doc.rust-lang.org/error_codes/E0425.html.

Note that this also applies to execution output. A malicious program
could (when executed) produce output that contains clickable links to
anything.

Related feature requests:
* #5284 for `rustc` (`-Z terminal-urls=yes`)
* #7310 for `gcc` (`-fdiagnostics-urls=always`)

static/ansi-to-html.ts

@@ -30,7 +30,7 @@
 import _ from 'underscore';
 import {AnsiToHtmlOptions, ColorCodes} from './ansi-to-html.interfaces.js';
 import {assert, unwrap} from './assert.js';
-import {isString} from '../shared/common-utils.js';
+import {isString, escapeHTML} from '../shared/common-utils.js';
 
 const defaults: AnsiToHtmlOptions = {
     fg: '#FFF',
@@ -132,7 +132,11 @@ function generateOutput(stack: string[], token: string, data: string | number, o
     } else if (token === 'rgb') {
         assert(isString(data), "Param 'data' must be a string at this point");
         return handleRgb(stack, data, options);
+    } else if (token === 'url') {
+        assert(isString(data), "Param 'data' must be a string at this point");
+        return handleUrl(stack, data, options);
     }
+
     return '';
 }
 
@@ -197,6 +201,11 @@ function handleDisplay(stack: string[], code: string | number, options: AnsiToHt
     return 'Unknown code';
 }
 
+function handleUrl(stack: string[], data: string, options: AnsiToHtmlOptions): string {
+    const [url, text] = data.split(/\x1b\\|\x07/);
+    return `<a class="diagnostic-url" target="_blank" rel="noreferrer" href=${encodeURI(url)}>${escapeHTML(text)}</a>`;
+}
+
 /**
  * Clear all the styles
  */
@@ -317,7 +326,7 @@ interface Token {
 
 function tokenize(text: string, options: AnsiToHtmlOptions, callback: TokenizeCallback) {
     let ansiMatch = false;
-    const ansiHandler = 3;
+    const ansiHandler = 4;
 
     function remove(): string {
         return '';
@@ -364,8 +373,17 @@ function tokenize(text: string, options: AnsiToHtmlOptions, callback: TokenizeCa
         return '';
     }
 
+    function hyperlink(_m: string, captureGroup: string): string {
+        callback('url', captureGroup);
+        return '';
+    }
+
     /* eslint no-control-regex:0 */
     const tokens: Token[] = [
+        {
+            pattern: /^\x1b]8;;(.*?(\x1b\\|\x07).*?)\x1b]8;;\2/,
+            sub: hyperlink,
+        },
         {
             pattern: /^\x08+/,
             sub: remove,
@@ -456,7 +474,7 @@ function updateStickyStack(
     token: string,
     data: string | number,
 ): StickyStackElement[] {
-    if (token !== 'text') {
+    if (token !== 'text' && token !== 'url') {
         stickyStack = stickyStack.filter(notCategory(categoryForCode(data)));
         stickyStack.push({
             token: token,

static/panes/output.ts

@@ -285,6 +285,9 @@ export class Output extends Pane<OutputState> {
                     e.preventDefault();
                     return false;
                 })
+                .on('click', '.diagnostic-url', e => {
+                    e.stopPropagation();
+                })
                 .on('mouseover', () => {
                     this.emitEditorLinkLine(lineNum, column, filename, false);
                 })

test/ansi-to-html-tests.ts

@@ -90,4 +90,32 @@ describe('ansi-to-html', () => {
             '<span style="color:#39aaf3">foo<span style="background-color:#646464">bar</span></span>',
         );
     });
+
+    // hyperlinks
+    it('should parse terminal hyperlinks', () => {
+        const filter = new Filter(filterOpts);
+        expect(
+            filter.toHtml(
+                'error[\x1B]8;;https://doc.rust-lang.org/error_codes/E0425.html\x07E0425\x1B]8;;\x07]: cannot find value `x` in this scope',
+            ),
+        ).toEqual(
+            'error[<a class="diagnostic-url" target="_blank" rel="noreferrer" href=https://doc.rust-lang.org/error_codes/E0425.html>E0425</a>]: cannot find value `x` in this scope',
+        );
+        expect(
+            filter.toHtml(
+                't.c:3:1: warning: control reaches end of non-void function [\x1B]8;;https://gcc.gnu.org/onlinedocs/gcc-14.2.0/gcc/Warning-Options.html#index-Wno-return-type\x1B\\-Wreturn-type\x1B]8;;\x1B\\]',
+            ),
+        ).toEqual(
+            't.c:3:1: warning: control reaches end of non-void function [<a class="diagnostic-url" target="_blank" rel="noreferrer" href=https://gcc.gnu.org/onlinedocs/gcc-14.2.0/gcc/Warning-Options.html#index-Wno-return-type>-Wreturn-type</a>]',
+        );
+    });
+
+    it('should properly escape hyperlinks', () => {
+        const filter = new Filter(filterOpts);
+        expect(
+            filter.toHtml('\x1B]8;;https://example.org/</a><b>bold</b><a>link\x07<i>italic</i>\x1B]8;;\x07'),
+        ).toEqual(
+            '<a class="diagnostic-url" target="_blank" rel="noreferrer" href=https://example.org/%3C/a%3E%3Cb%3Ebold%3C/b%3E%3Ca%3Elink>&lt;i&gt;italic&lt;/i&gt;</a>',
+        );
+    });
 });