fix(actions): don't swallow HTML entities into linkified URLs (#38239)

In the Actions log viewer, a double-quoted URL renders with a stray
extra `;` after it.

Reported in `gitea/runner#1046`

Remove the buggy AI slop `linkifyURLs` and use new approach to process
URLs in text

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/render/ansi.test.ts

@@ -1,6 +1,12 @@
-import {renderAnsi} from './ansi.ts';
+import {renderAnsiInto} from './ansi.ts';
 
 test('renderAnsi', () => {
+  const renderAnsi = (line: string) => {
+    const el = document.createElement('div');
+    renderAnsiInto(el, line);
+    return el.innerHTML;
+  };
+
   expect(renderAnsi('abc')).toEqual('abc');
   expect(renderAnsi('abc\n')).toEqual('abc');
   expect(renderAnsi('abc\r\n')).toEqual('abc');
@@ -20,6 +26,9 @@ test('renderAnsi', () => {
 
   // URLs in ANSI output become clickable links
   const link = (url: string) => `<a href="${url}" target="_blank">${url}</a>`;
-  expect(renderAnsi('Downloading https://github.com/actions/upload-artifact/releases')).toEqual(`Downloading ${link('https://github.com/actions/upload-artifact/releases')}`);
-  expect(renderAnsi('\x1b[32mhttps://proxy.golang.org/cached-only\x1b[0m')).toEqual(`<span class="ansi-green-fg">${link('https://proxy.golang.org/cached-only')}</span>`);
+  expect(renderAnsi('foo https://example.com bar')).toEqual(`foo ${link('https://example.com')} bar`);
+  expect(renderAnsi('<https://example.com?a=b&c=d#h>')).toEqual(`&lt;${link('https://example.com?a=b&amp;c=d#h')}&gt;`);
+  expect(renderAnsi('open https://example.com.')).toEqual(`open ${link('https://example.com')}.`);
+  expect(renderAnsi('"https://example.com"')).toEqual(`"${link('https://example.com')}"`);
+  expect(renderAnsi('\x1b[32mhttps://example.com\x1b[0m')).toEqual(`<span class="ansi-green-fg">${link('https://example.com')}</span>`);
 });

web_src/js/render/ansi.ts

@@ -1,5 +1,5 @@
 import {AnsiUp} from 'ansi_up';
-import {linkifyURLs} from '../utils/url.ts';
+import {trimUrlPunctuation, urlRawRegex} from '../utils/url.ts';
 
 const replacements: Array<[RegExp, string]> = [
   [/\x1b\[\d+[A-H]/g, ''], // Move cursor, treat them as no-op
@@ -7,7 +7,7 @@ const replacements: Array<[RegExp, string]> = [
 ];
 
 // render ANSI to HTML
-export function renderAnsi(line: string): string {
+export function renderAnsiInto(el: HTMLElement, line: string) {
   // create a fresh ansi_up instance because otherwise previous renders can influence
   // the output of future renders, because ansi_up is stateful and remembers things like
   // unclosed opening tags for colors.
@@ -44,5 +44,42 @@ export function renderAnsi(line: string): string {
     result = lines.join('\n');
   }
 
-  return linkifyURLs(result);
+  el.innerHTML = result;
+  // at the moment, only need to do post-process when there are potential URL links
+  if (result.includes('://')) renderAnsiPostProcessNode(el);
+}
+
+function renderAnsiProcessText(node: ChildNode): ChildNode {
+  const text = node.textContent!;
+  const match = urlRawRegex().exec(text);
+  if (!match || match.index === undefined) return node;
+
+  const before = text.slice(0, match.index);
+  const urlMatched = match[0];
+  const urlTrimmed = trimUrlPunctuation(urlMatched);
+  const after = text.slice(match.index + urlMatched.length - (urlMatched.length - urlTrimmed.length));
+
+  const link = document.createElement('a');
+  link.setAttribute('href', urlTrimmed);
+  link.setAttribute('target', '_blank');
+  link.textContent = urlTrimmed;
+
+  const newNodes: Array<Node | string> = [];
+  if (before) newNodes.push(before);
+  newNodes.push(link);
+  if (after) newNodes.push(after);
+
+  node.replaceWith(...newNodes);
+  return link;
+}
+
+function renderAnsiPostProcessNode(el: ChildNode) {
+  for (let node = el.firstChild; node; node = node.nextSibling) {
+    if (node.nodeName === 'A') continue;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      renderAnsiPostProcessNode(node);
+      continue;
+    }
+    node = renderAnsiProcessText(node);
+  }
 }