3 files changed, 84 insertions, 0 deletions
diff --git a/web_src/js/render/ansi.js b/web_src/js/render/ansi.js
new file mode 100644
index 00000000..bb622dd1
--- /dev/null
+++ b/web_src/js/render/ansi.js
@@ -0,0 +1,45 @@
+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();
+  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);
+    }
+  }
+
+  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');
+}
diff --git a/web_src/js/render/ansi.test.js b/web_src/js/render/ansi.test.js
new file mode 100644
index 00000000..5afff71c
--- /dev/null
+++ b/web_src/js/render/ansi.test.js
@@ -0,0 +1,20 @@
+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 class="ansi-black-fg">black</span><span class="ansi-white-fg">white</span>'); // unclosed
+  expect(renderAnsi('<script>')).toEqual('&lt;script&gt;');
+  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>`);
+});
diff --git a/web_src/js/render/pdf.js b/web_src/js/render/pdf.js
new file mode 100644
index 00000000..f31f161e
--- /dev/null
+++ b/web_src/js/render/pdf.js
@@ -0,0 +1,19 @@
+import {htmlEscape} from 'escape-goat';
+
+export async function initPdfViewer() {
+  const els = document.querySelectorAll('.pdf-content');
+  if (!els.length) return;
+
+  const pdfobject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
+
+  for (const el of els) {
+    const src = el.getAttribute('data-src');
+    const fallbackText = el.getAttribute('data-fallback-button-text');
+    pdfobject.embed(src, el, {
+      fallbackLink: htmlEscape`
+        <a role="button" class="ui basic button pdf-fallback-button" href="[url]">${fallbackText}</a>
+      `,
+    });
+    el.classList.remove('is-loading');
+  }
+}