import {AnsiUp} from 'ansi_up'; import {trimUrlPunctuation, urlRawRegex} from '../utils/url.ts'; const replacements: Array<[RegExp, string]> = [ [/\x1b\[\d+[A-H]/g, ''], // Move cursor, treat them as no-op [/\x1b\[\d?[JK]/g, '\r'], // Erase display/line, treat them as a Carriage Return ]; // render ANSI to HTML 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. const ansi_up = new AnsiUp(); ansi_up.use_classes = true; if (line.endsWith('\r\n')) { line = line.substring(0, line.length - 2); } else if (line.endsWith('\n')) { line = line.substring(0, line.length - 1); } if (line.includes('\x1b')) { for (const [regex, replacement] of replacements) { line = line.replace(regex, replacement); } } let result: string; if (!line.includes('\r')) { result = ansi_up.ansi_to_html(line); } else { // handle "\rReading...1%\rReading...5%\rReading...100%", // convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%" const lines: Array = []; for (const part of line.split('\r')) { if (part === '') continue; const partHtml = ansi_up.ansi_to_html(part); if (partHtml !== '') { lines.push(partHtml); } } // the log message element is with "white-space: break-spaces;", so use "\n" to break lines result = lines.join('\n'); } 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 = []; 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); } }