Add useAnsiClasses prop to LogViewer component

Author: tim-stasse

packages/module/src/LogViewer/LogViewer.tsx

@@ -57,6 +57,8 @@ interface LogViewerProps {
   }) => void;
   /** Forwarded ref */
   innerRef?: React.RefObject<any>;
+  /** Flag to enable or disable the use of classes (instead of inline styles) for ANSI coloring/formatting. */
+  useAnsiClasses?: boolean;
 }
 
 let canvas: HTMLCanvasElement | undefined;
@@ -89,6 +91,7 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
     innerRef,
     isTextWrapped = true,
     initialIndexWidth,
+    useAnsiClasses,
     ...props
   }: LogViewerProps) => {
     const [searchedInput, setSearchedInput] = useState<string | null>('');
@@ -108,6 +111,8 @@ const LogViewerBase: React.FunctionComponent<LogViewerProps> = memo(
     const ansiUp = new AnsiUp();
     // eslint-disable-next-line camelcase
     ansiUp.escape_html = false;
+    // eslint-disable-next-line camelcase
+    ansiUp.use_classes = useAnsiClasses;
 
     const ref = React.useRef<any>();
     const logViewerRef = innerRef || ref;

packages/module/src/ansi_up/ansi_up.ts

@@ -87,6 +87,8 @@ export default class AnsiUp {
     // All construction occurs here
     this.setup_palettes();
     this.resetStyles();
+
+    this._use_classes = false;
   }
 
   set use_classes(arg: boolean) {
@@ -543,8 +545,6 @@ export default class AnsiUp {
   }
 
   resetStyles() {
-    this._use_classes = false;
-
     this.bold = false;
     this.faint = false;
     this.italic = false;