bypass AnsiToHTML bug

Author: wxiaoguang

web_src/js/components/RepoActionView.test.js

@@ -1,6 +1,7 @@
 import {expect, test} from 'vitest';
 
 import {ansiLogToHTML} from './RepoActionView.vue';
+import AnsiToHTML from 'ansi-to-html';
 
 test('processConsoleLine', () => {
   expect(ansiLogToHTML('abc')).toEqual('abc');
@@ -12,4 +13,18 @@ test('processConsoleLine', () => {
 
   expect(ansiLogToHTML('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:#000">black<span style="color:#AAA">white</span></span>');
   expect(ansiLogToHTML('<script>')).toEqual('&lt;script&gt;');
+
+
+  // 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[0Kb\x1b[2Jc')).toEqual('a\nb\nc');
 });

web_src/js/components/RepoActionView.vue

@@ -307,26 +307,46 @@ 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 a no-op.
+const ansiRegexpNewLine = /\x1b\[\d[JK]/g; // Erase display/line, treat them as a Carrige 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%"
-  // then we do not need to process control chars like "\033[".
   const lines = [];
   for (const part of line.split('\r')) {
     if (part === '') continue;
-    lines.push(part);
+    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 ansiLogRender.toHtml(lines.join('\n'));
+  return lines.join('\n');
 }
 
 </script>