Add ANSI-to-HTML converter module
This commit is contained in:
parent
7f3ce24099
commit
3f226996e7
GPG key ID:
22B5C6D66A38B06C
1 changed files with 302 additions and 0 deletions
302
src/ansi.ts
Normal file
302
src/ansi.ts
Normal file
|
|
@ -0,0 +1,302 @@
|
||||||
|
// ANSI to HTML converter - processes escape sequences and renders as inline styled spans
|
||||||
|
|
||||||
|
const colors: Record<number, string> = {
|
||||||
|
30: "#0d1117",
|
||||||
|
31: "#f85149",
|
||||||
|
32: "#3fb950",
|
||||||
|
33: "#d29922",
|
||||||
|
34: "#58a6ff",
|
||||||
|
35: "#bc8cff",
|
||||||
|
36: "#39c5cf",
|
||||||
|
37: "#c9d1d9",
|
||||||
|
90: "#6e7681",
|
||||||
|
91: "#ff7b72",
|
||||||
|
92: "#7ee787",
|
||||||
|
93: "#e3b341",
|
||||||
|
94: "#79c0ff",
|
||||||
|
95: "#d2a8ff",
|
||||||
|
96: "#56d4dd",
|
||||||
|
97: "#ffffff",
|
||||||
|
};
|
||||||
|
|
||||||
|
const bgColors: Record<number, string> = {
|
||||||
|
40: "#0d1117",
|
||||||
|
41: "#f85149",
|
||||||
|
42: "#3fb950",
|
||||||
|
43: "#d29922",
|
||||||
|
44: "#58a6ff",
|
||||||
|
45: "#bc8cff",
|
||||||
|
46: "#39c5cf",
|
||||||
|
47: "#c9d1d9",
|
||||||
|
100: "#6e7681",
|
||||||
|
101: "#ff7b72",
|
||||||
|
102: "#7ee787",
|
||||||
|
103: "#e3b341",
|
||||||
|
104: "#79c0ff",
|
||||||
|
105: "#d2a8ff",
|
||||||
|
106: "#56d4dd",
|
||||||
|
107: "#ffffff",
|
||||||
|
};
|
||||||
|
|
||||||
|
interface AnsiState {
|
||||||
|
fg: string | null;
|
||||||
|
bg: string | null;
|
||||||
|
bold: boolean;
|
||||||
|
dim: boolean;
|
||||||
|
italic: boolean;
|
||||||
|
underline: boolean;
|
||||||
|
inverse: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtendedColorResult {
|
||||||
|
color: string;
|
||||||
|
skip: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trim trailing whitespace from each line to prevent background color bleeding.
|
||||||
|
// Terminal buffers often pad lines with spaces. Preserve trailing ANSI resets.
|
||||||
|
// ESC character code
|
||||||
|
const ESC = "\x1b";
|
||||||
|
|
||||||
|
export function trimLineEndPreserveAnsi(line: string): string {
|
||||||
|
// Peel off any ANSI sequences at the end of the line
|
||||||
|
let end = line.length;
|
||||||
|
let ansiSuffix = "";
|
||||||
|
while (end > 0) {
|
||||||
|
// Check for ANSI escape sequence at end: ESC [ params letter
|
||||||
|
const suffix = line.slice(0, end);
|
||||||
|
if (!suffix.endsWith("]")) {
|
||||||
|
// Look for the closing letter (A-Z, a-z)
|
||||||
|
const lastChar = suffix[suffix.length - 1];
|
||||||
|
if (!lastChar || !/[A-Za-z]/.test(lastChar)) break;
|
||||||
|
|
||||||
|
// Walk back to find ESC [
|
||||||
|
let seqStart = suffix.length - 2;
|
||||||
|
while (seqStart >= 0 && /[0-9;?]/.test(suffix[seqStart] || "")) {
|
||||||
|
seqStart--;
|
||||||
|
}
|
||||||
|
if (seqStart < 0 || suffix[seqStart] !== "[") break;
|
||||||
|
seqStart--;
|
||||||
|
if (seqStart < 0 || suffix[seqStart] !== ESC) break;
|
||||||
|
|
||||||
|
// Found a valid ANSI sequence
|
||||||
|
const seq = suffix.slice(seqStart);
|
||||||
|
ansiSuffix = seq + ansiSuffix;
|
||||||
|
end = seqStart;
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const trimmed = line.slice(0, end).trimEnd();
|
||||||
|
return trimmed + ansiSuffix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Parse extended color: 38;2;R;G;B (24-bit) or 38;5;N (256-color)
|
||||||
|
// Returns { color, skip } where skip is additional codes to skip
|
||||||
|
function parseExtendedColor(
|
||||||
|
codes: number[],
|
||||||
|
idx: number,
|
||||||
|
): ExtendedColorResult | null {
|
||||||
|
const mode = codes[idx + 1];
|
||||||
|
|
||||||
|
// 24-bit RGB: 38;2;R;G;B
|
||||||
|
if (mode === 2 && codes[idx + 4] !== undefined) {
|
||||||
|
const r = codes[idx + 2];
|
||||||
|
const g = codes[idx + 3];
|
||||||
|
const b = codes[idx + 4];
|
||||||
|
return { color: `rgb(${r},${g},${b})`, skip: 4 };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 256-color palette: 38;5;N
|
||||||
|
if (mode === 5) {
|
||||||
|
const colorNum = codes[idx + 2];
|
||||||
|
if (colorNum === undefined) return null;
|
||||||
|
|
||||||
|
let color: string;
|
||||||
|
if (colorNum < 16) {
|
||||||
|
const basic = [
|
||||||
|
"#0d1117",
|
||||||
|
"#cd3131",
|
||||||
|
"#0dbc79",
|
||||||
|
"#e5e510",
|
||||||
|
"#2472c8",
|
||||||
|
"#bc3fbc",
|
||||||
|
"#11a8cd",
|
||||||
|
"#e5e5e5",
|
||||||
|
"#666666",
|
||||||
|
"#f14c4c",
|
||||||
|
"#23d18b",
|
||||||
|
"#f5f543",
|
||||||
|
"#3b8eea",
|
||||||
|
"#d670d6",
|
||||||
|
"#29b8db",
|
||||||
|
"#ffffff",
|
||||||
|
];
|
||||||
|
color = basic[colorNum] || "#ffffff";
|
||||||
|
} else if (colorNum < 232) {
|
||||||
|
const n = colorNum - 16;
|
||||||
|
const ri = Math.floor(n / 36);
|
||||||
|
const gi = Math.floor((n % 36) / 6);
|
||||||
|
const bi = n % 6;
|
||||||
|
const r = ri === 0 ? 0 : ri * 40 + 55;
|
||||||
|
const g = gi === 0 ? 0 : gi * 40 + 55;
|
||||||
|
const b = bi === 0 ? 0 : bi * 40 + 55;
|
||||||
|
color = `rgb(${r},${g},${b})`;
|
||||||
|
} else {
|
||||||
|
const gray = (colorNum - 232) * 10 + 8;
|
||||||
|
color = `rgb(${gray},${gray},${gray})`;
|
||||||
|
}
|
||||||
|
return { color, skip: 2 };
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetState(): AnsiState {
|
||||||
|
return {
|
||||||
|
fg: null,
|
||||||
|
bg: null,
|
||||||
|
bold: false,
|
||||||
|
dim: false,
|
||||||
|
italic: false,
|
||||||
|
underline: false,
|
||||||
|
inverse: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildStyle(state: AnsiState): string {
|
||||||
|
let fg = state.fg;
|
||||||
|
let bg = state.bg;
|
||||||
|
|
||||||
|
// For inverse, swap fg and bg
|
||||||
|
if (state.inverse) {
|
||||||
|
const tmp = fg;
|
||||||
|
fg = bg || "#ffffff";
|
||||||
|
bg = tmp || "#0d1117";
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles: string[] = [];
|
||||||
|
if (fg) styles.push(`color:${fg}`);
|
||||||
|
if (bg) styles.push(`background-color:${bg}`);
|
||||||
|
if (state.bold) styles.push("font-weight:bold");
|
||||||
|
if (state.dim) styles.push("opacity:0.5");
|
||||||
|
if (state.italic) styles.push("font-style:italic");
|
||||||
|
if (state.underline) styles.push("text-decoration:underline");
|
||||||
|
return styles.join(";");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ansiToHtml(text: string): string {
|
||||||
|
if (!text) return "";
|
||||||
|
|
||||||
|
// Trim trailing whitespace from each line to prevent background color bleeding
|
||||||
|
text = text.split("\n").map(trimLineEndPreserveAnsi).join("\n");
|
||||||
|
|
||||||
|
let result = "";
|
||||||
|
let inSpan = false;
|
||||||
|
let i = 0;
|
||||||
|
let currentStyle = "";
|
||||||
|
let state = resetState();
|
||||||
|
|
||||||
|
function applyStyle(): void {
|
||||||
|
const nextStyle = buildStyle(state);
|
||||||
|
if (nextStyle === currentStyle) return;
|
||||||
|
if (inSpan) {
|
||||||
|
result += "</span>";
|
||||||
|
inSpan = false;
|
||||||
|
}
|
||||||
|
if (nextStyle) {
|
||||||
|
result += `<span style="${nextStyle}">`;
|
||||||
|
inSpan = true;
|
||||||
|
}
|
||||||
|
currentStyle = nextStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
while (i < text.length) {
|
||||||
|
// Check for ESC character (char code 27)
|
||||||
|
if (text.charCodeAt(i) === 27 && text[i + 1] === "[") {
|
||||||
|
// Parse CSI sequence: ESC [ params command
|
||||||
|
let j = i + 2;
|
||||||
|
let params = "";
|
||||||
|
while (j < text.length && /[0-9;]/.test(text[j] || "")) {
|
||||||
|
params += text[j];
|
||||||
|
j++;
|
||||||
|
}
|
||||||
|
const command = text[j] || "";
|
||||||
|
j++;
|
||||||
|
|
||||||
|
if (command === "m") {
|
||||||
|
// SGR - Select Graphic Rendition
|
||||||
|
const codes = params ? params.split(";").map(Number) : [0];
|
||||||
|
for (let k = 0; k < codes.length; k++) {
|
||||||
|
const code = codes[k];
|
||||||
|
if (code === 0) {
|
||||||
|
state = resetState();
|
||||||
|
} else if (code === 1) state.bold = true;
|
||||||
|
else if (code === 2) state.dim = true;
|
||||||
|
else if (code === 3) state.italic = true;
|
||||||
|
else if (code === 4) state.underline = true;
|
||||||
|
else if (code === 7) state.inverse = true;
|
||||||
|
else if (code === 22) {
|
||||||
|
state.bold = false;
|
||||||
|
state.dim = false;
|
||||||
|
} else if (code === 23) state.italic = false;
|
||||||
|
else if (code === 24) state.underline = false;
|
||||||
|
else if (code === 27) state.inverse = false;
|
||||||
|
else if (code === 39) state.fg = null;
|
||||||
|
else if (code === 49) state.bg = null;
|
||||||
|
else if (code === 38) {
|
||||||
|
const extColor = parseExtendedColor(codes, k);
|
||||||
|
if (extColor) {
|
||||||
|
state.fg = extColor.color;
|
||||||
|
k += extColor.skip;
|
||||||
|
}
|
||||||
|
} else if (code === 48) {
|
||||||
|
const extColor = parseExtendedColor(codes, k);
|
||||||
|
if (extColor) {
|
||||||
|
state.bg = extColor.color;
|
||||||
|
k += extColor.skip;
|
||||||
|
}
|
||||||
|
} else if (code !== undefined && colors[code]) {
|
||||||
|
state.fg = colors[code];
|
||||||
|
} else if (code !== undefined && bgColors[code]) {
|
||||||
|
state.bg = bgColors[code];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
applyStyle();
|
||||||
|
}
|
||||||
|
// Skip other escape sequences (H, f, J, K, etc.) - they don't affect our line-based output
|
||||||
|
i = j;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Track newlines in the content
|
||||||
|
if (text[i] === "\n" || text[i] === "\r") {
|
||||||
|
if (text[i] === "\n") {
|
||||||
|
// Close span before newline to prevent background color bleeding
|
||||||
|
if (inSpan) {
|
||||||
|
result += "</span>";
|
||||||
|
}
|
||||||
|
result += "\n";
|
||||||
|
// Reopen span after newline if we had styling
|
||||||
|
if (inSpan) {
|
||||||
|
result += `<span style="${currentStyle}">`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Skip carriage return - we only care about line feeds
|
||||||
|
i++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Regular character - escape HTML
|
||||||
|
const ch = text[i];
|
||||||
|
if (ch === "<") result += "<";
|
||||||
|
else if (ch === ">") result += ">";
|
||||||
|
else if (ch === "&") result += "&";
|
||||||
|
else result += ch;
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inSpan) result += "</span>";
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue