feat: add support for ANSI bold, dim, italic, underline and strike-through (#1001)

Author: pamburus

src/main/frontend/pipeline-console-view/pipeline-console/main/Ansi.tsx

@@ -5,6 +5,11 @@ export interface Result {
   setBG?: number | false; // 0-7 if a background color is specified
   resetFG?: boolean; // true if contains a reset back to default foreground
   resetBG?: boolean; // true if contains a reset back to default background
+  setBold?: boolean; // true if contains a bold font style
+  setFaint?: boolean; // true if contains a faint font style
+  setItalic?: boolean; // true if contains an italic font style
+  setUnderline?: boolean; // true if contains an underline font style
+  setStrikeThrough?: boolean; // true if contains a strike-through font style
 }
 
 /**
@@ -20,6 +25,11 @@ export interface Result {
  *     setBG: integer | false, // 0-7 if a background color is specified
  *     resetFG: bool, // true if contains a reset back to default foreground
  *     resetBG: bool // true if contains a reset back to default background
+ *     setBold: boolean, // true if contains a bold font style
+ *     setFaint: boolean; // true if contains a faint font style
+ *     setItalic: boolean; // true if contains an italic font style
+ *     setUnderline: boolean, // true if contains an underline font style
+ *     setStrikeThrough: boolean, // true if contains a strike-through font style
  * }
  *
  * // Unsupported or malformed code:
@@ -62,6 +72,25 @@ export function parseEscapeCode(escapeCode: string): Result {
         result.setFG = num - 90 + 8; // Bright FG set
       } else if (num >= 100 && num <= 107) {
         result.setBG = num - 100 + 8; // Bright BG set
+      } else if (num === 1) {
+        result.setBold = true;
+      } else if (num === 2) {
+        result.setFaint = true;
+      } else if (num === 22) {
+        result.setBold = false;
+        result.setFaint = false;
+      } else if (num === 3) {
+        result.setItalic = true;
+      } else if (num === 23) {
+        result.setItalic = false;
+      } else if (num === 4) {
+        result.setUnderline = true;
+      } else if (num === 24) {
+        result.setUnderline = false;
+      } else if (num === 9) {
+        result.setStrikeThrough = true;
+      } else if (num === 29) {
+        result.setStrikeThrough = false;
       } else {
         if (num === 39 || num === 0) {
           result.resetFG = true;
@@ -190,13 +219,26 @@ export function makeReactChildren(
   let currentState: Result = {
     setFG: false,
     setBG: false,
+    setBold: false,
+    setFaint: false,
+    setItalic: false,
+    setUnderline: false,
+    setStrikeThrough: false,
   };
 
   for (let i = 0; i < tokenizedInput.length; i++) {
     const codeOrString = tokenizedInput[i];
     if (typeof codeOrString === "string") {
       // Need to output a <span> or plain text if there's no interesting current state
-      if (!currentState.setFG && !currentState.setBG) {
+      if (
+        !currentState.setFG &&
+        !currentState.setBG &&
+        !currentState.setBold &&
+        !currentState.setFaint &&
+        !currentState.setItalic &&
+        !currentState.setUnderline &&
+        !currentState.setStrikeThrough
+      ) {
         result.push(
           <div
             dangerouslySetInnerHTML={{ __html: codeOrString }}
@@ -212,6 +254,21 @@ export function makeReactChildren(
         if (typeof currentState.setBG === "number") {
           classNames.push(`ansi-bg-${currentState.setBG}`);
         }
+        if (currentState.setBold) {
+          classNames.push("ansi-bold");
+        }
+        if (currentState.setFaint) {
+          classNames.push("ansi-faint");
+        }
+        if (currentState.setItalic) {
+          classNames.push("ansi-italic");
+        }
+        if (currentState.setUnderline) {
+          classNames.push("ansi-underline");
+        }
+        if (currentState.setStrikeThrough) {
+          classNames.push("ansi-strikethrough");
+        }
 
         result.push(
           <span className={classNames.join(" ")}>{codeOrString}</span>,
@@ -235,6 +292,26 @@ export function makeReactChildren(
         nextState.setBG = codeOrString.setBG;
       }
 
+      if (codeOrString.setBold !== undefined) {
+        nextState.setBold = codeOrString.setBold;
+      }
+
+      if (codeOrString.setFaint !== undefined) {
+        nextState.setFaint = codeOrString.setFaint;
+      }
+
+      if (codeOrString.setItalic !== undefined) {
+        nextState.setItalic = codeOrString.setItalic;
+      }
+
+      if (codeOrString.setUnderline !== undefined) {
+        nextState.setUnderline = codeOrString.setUnderline;
+      }
+
+      if (codeOrString.setStrikeThrough !== undefined) {
+        nextState.setStrikeThrough = codeOrString.setStrikeThrough;
+      }
+
       currentState = nextState;
     }
   }

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -148,6 +148,30 @@
   background: var(--ansi-15);
 }
 
+.ansi-bold {
+  font-weight: bold;
+}
+
+.ansi-faint {
+  opacity: 0.5;
+}
+
+.ansi-italic {
+  font-style: italic;
+}
+
+.ansi-underline {
+  text-decoration-line: underline;
+}
+
+.ansi-strikethrough {
+  text-decoration-line: line-through;
+}
+
+.ansi-underline.ansi-strikethrough {
+  text-decoration-line: underline line-through;
+}
+
 .pgv-sticky-sidebar {
   position: sticky;
   top: calc(var(--pgv-header-height) + var(--section-padding));