Fixes: https://github.com/go-gitea/gitea/issues/24777tags/v1.21.0-rc0
@@ -17,7 +17,7 @@ | |||
"@primer/octicons": "19.3.0", | |||
"@webcomponents/custom-elements": "1.6.0", | |||
"add-asset-webpack-plugin": "2.0.1", | |||
"ansi-to-html": "0.7.2", | |||
"ansi_up": "5.2.1", | |||
"asciinema-player": "3.4.0", | |||
"clippie": "4.0.1", | |||
"css-loader": "6.8.1", | |||
@@ -2465,6 +2465,14 @@ | |||
"ajv": "^8.8.2" | |||
} | |||
}, | |||
"node_modules/ansi_up": { | |||
"version": "5.2.1", | |||
"resolved": "https://registry.npmjs.org/ansi_up/-/ansi_up-5.2.1.tgz", | |||
"integrity": "sha512-5bz5T/7FRmlxA37zDXhG6cAwlcZtfnmNLDJra66EEIT3kYlw5aPJdbkJEhm59D6kA4Wi5ict6u6IDYHJaQlH+g==", | |||
"engines": { | |||
"node": "*" | |||
} | |||
}, | |||
"node_modules/ansi-regex": { | |||
"version": "5.0.1", | |||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", | |||
@@ -2487,20 +2495,6 @@ | |||
"url": "https://github.com/chalk/ansi-styles?sponsor=1" | |||
} | |||
}, | |||
"node_modules/ansi-to-html": { | |||
"version": "0.7.2", | |||
"resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.7.2.tgz", | |||
"integrity": "sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==", | |||
"dependencies": { | |||
"entities": "^2.2.0" | |||
}, | |||
"bin": { | |||
"ansi-to-html": "bin/ansi-to-html" | |||
}, | |||
"engines": { | |||
"node": ">=8.0.0" | |||
} | |||
}, | |||
"node_modules/argparse": { | |||
"version": "2.0.1", | |||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", | |||
@@ -4210,14 +4204,6 @@ | |||
"node": ">=10.13.0" | |||
} | |||
}, | |||
"node_modules/entities": { | |||
"version": "2.2.0", | |||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", | |||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", | |||
"funding": { | |||
"url": "https://github.com/fb55/entities?sponsor=1" | |||
} | |||
}, | |||
"node_modules/envinfo": { | |||
"version": "7.8.1", | |||
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz", |
@@ -16,7 +16,7 @@ | |||
"@primer/octicons": "19.3.0", | |||
"@webcomponents/custom-elements": "1.6.0", | |||
"add-asset-webpack-plugin": "2.0.1", | |||
"ansi-to-html": "0.7.2", | |||
"ansi_up": "5.2.1", | |||
"asciinema-player": "3.4.0", | |||
"clippie": "4.0.1", | |||
"css-loader": "6.8.1", |
@@ -1,30 +0,0 @@ | |||
import {expect, test} from 'vitest'; | |||
import {ansiLogToHTML} from './RepoActionView.vue'; | |||
import AnsiToHTML from 'ansi-to-html'; | |||
test('processConsoleLine', () => { | |||
expect(ansiLogToHTML('abc')).toEqual('abc'); | |||
expect(ansiLogToHTML('abc\n')).toEqual('abc'); | |||
expect(ansiLogToHTML('abc\r\n')).toEqual('abc'); | |||
expect(ansiLogToHTML('\r')).toEqual(''); | |||
expect(ansiLogToHTML('\rx\rabc')).toEqual('x\nabc'); | |||
expect(ansiLogToHTML('\rabc\rx\r')).toEqual('abc\nx'); | |||
expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>'); | |||
expect(ansiLogToHTML('<script>')).toEqual('<script>'); | |||
// upstream AnsiToHTML has bugs when processing "\033[1A" and "\033[1B", we fixed these control sequences in our code | |||
// if upstream could fix these bugs, we can remove these tests and remove our patch code | |||
const ath = new AnsiToHTML({escapeXML: true}); | |||
expect(ath.toHtml('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('AtestBA'); // AnsiToHTML bug | |||
expect(ath.toHtml('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('A\rtest\rBA'); // AnsiToHTML bug | |||
// test our patched behavior | |||
expect(ansiLogToHTML('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
expect(ansiLogToHTML('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
// treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally. | |||
expect(ansiLogToHTML('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc'); | |||
}); |
@@ -119,14 +119,12 @@ | |||
import {SvgIcon} from '../svg.js'; | |||
import ActionRunStatus from './ActionRunStatus.vue'; | |||
import {createApp} from 'vue'; | |||
import AnsiToHTML from 'ansi-to-html'; | |||
import {toggleElem} from '../utils/dom.js'; | |||
import {getCurrentLocale} from '../utils.js'; | |||
import {renderAnsi} from '../render/ansi.js'; | |||
const {csrfToken} = window.config; | |||
const ansiLogRender = new AnsiToHTML({escapeXML: true}); | |||
const sfc = { | |||
name: 'RepoActionView', | |||
components: { | |||
@@ -304,7 +302,7 @@ const sfc = { | |||
const logMessage = document.createElement('span'); | |||
logMessage.className = 'log-msg'; | |||
logMessage.innerHTML = ansiLogToHTML(line.message); | |||
logMessage.innerHTML = renderAnsi(line.message); | |||
div.append(logTimeStamp); | |||
div.append(logMessage); | |||
div.append(logTimeSeconds); | |||
@@ -470,48 +468,6 @@ export function initRepositoryActionView() { | |||
view.mount(el); | |||
} | |||
// some unhandled control sequences by AnsiToHTML | |||
// https://man7.org/linux/man-pages/man4/console_codes.4.html | |||
const ansiRegexpRemove = /\x1b\[\d+[A-H]/g; // Move cursor, treat them as no-op. | |||
const ansiRegexpNewLine = /\x1b\[\d?[JK]/g; // Erase display/line, treat them as a Carriage Return | |||
function ansiCleanControlSequences(line) { | |||
if (line.includes('\x1b')) { | |||
line = line.replace(ansiRegexpRemove, ''); | |||
line = line.replace(ansiRegexpNewLine, '\r'); | |||
} | |||
return line; | |||
} | |||
export function ansiLogToHTML(line) { | |||
if (line.endsWith('\r\n')) { | |||
line = line.substring(0, line.length - 2); | |||
} else if (line.endsWith('\n')) { | |||
line = line.substring(0, line.length - 1); | |||
} | |||
// usually we do not need to process control chars like "\033[", let AnsiToHTML do it | |||
// but AnsiToHTML has bugs, so we need to clean some control sequences first | |||
line = ansiCleanControlSequences(line); | |||
if (!line.includes('\r')) { | |||
return ansiLogRender.toHtml(line); | |||
} | |||
// handle "\rReading...1%\rReading...5%\rReading...100%", | |||
// convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%" | |||
const lines = []; | |||
for (const part of line.split('\r')) { | |||
if (part === '') continue; | |||
const partHtml = ansiLogRender.toHtml(part); | |||
if (partHtml !== '') { | |||
lines.push(partHtml); | |||
} | |||
} | |||
// the log message element is with "white-space: break-spaces;", so use "\n" to break lines | |||
return lines.join('\n'); | |||
} | |||
</script> | |||
<style scoped> |
@@ -0,0 +1,44 @@ | |||
import AnsiUp from 'ansi_up'; | |||
const replacements = [ | |||
[/\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 renderAnsi(line) { | |||
// 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.default || AnsiUp)(); | |||
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); | |||
} | |||
} | |||
if (!line.includes('\r')) { | |||
return ansi_up.ansi_to_html(line); | |||
} | |||
// handle "\rReading...1%\rReading...5%\rReading...100%", | |||
// convert it into a multiple-line string: "Reading...1%\nReading...5%\nReading...100%" | |||
const lines = []; | |||
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 | |||
return lines.join('\n'); | |||
} |
@@ -0,0 +1,21 @@ | |||
import {expect, test} from 'vitest'; | |||
import {renderAnsi} from './ansi.js'; | |||
test('renderAnsi', () => { | |||
expect(renderAnsi('abc')).toEqual('abc'); | |||
expect(renderAnsi('abc\n')).toEqual('abc'); | |||
expect(renderAnsi('abc\r\n')).toEqual('abc'); | |||
expect(renderAnsi('\r')).toEqual(''); | |||
expect(renderAnsi('\rx\rabc')).toEqual('x\nabc'); | |||
expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx'); | |||
expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'); // unclosed | |||
expect(renderAnsi('<script>')).toEqual('<script>'); | |||
expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test'); | |||
// treat "\033[0K" and "\033[0J" (Erase display/line) as "\r", then it will be covered to "\n" finally. | |||
expect(renderAnsi('a\x1b[Kb\x1b[2Jc')).toEqual('a\nb\nc'); | |||
expect(renderAnsi('\x1b[48;5;88ma\x1b[38;208;48;5;159mb\x1b[m')).toEqual(`<span style="background-color:rgb(135,0,0)">a</span><span style="background-color:rgb(175,255,255)">b</span>`); | |||
}); |