From 2d8900408d3fa3ff116088cb69c4dd1352711dac Mon Sep 17 00:00:00 2001
From: Snarling <84951833+Snarling@users.noreply.github.com>
Date: Tue, 23 Aug 2022 17:54:13 -0400
Subject: [PATCH 1/2] Fix Ansi bugs

---
 src/ui/React/ANSIITypography.tsx | 45 ++++++++++++--------------------
 1 file changed, 17 insertions(+), 28 deletions(-)

diff --git a/src/ui/React/ANSIITypography.tsx b/src/ui/React/ANSIITypography.tsx
index 7f9ce94de..859c1218a 100644
--- a/src/ui/React/ANSIITypography.tsx
+++ b/src/ui/React/ANSIITypography.tsx
@@ -93,20 +93,9 @@ export const ANSIITypography = React.memo((props: IProps): React.ReactElement =>
   }
   return (
     <Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}>
-      {parts.map((part, index) => {
-        const spanStyle = ansiCodeStyle(part.code);
-        if (!_.isEmpty(spanStyle)) {
-          // Only wrap parts with spans if the calculated spanStyle is non-empty...
-          return (
-            <Typography key={index} paragraph={false} component="span" sx={spanStyle}>
-              {part.text}
-            </Typography>
-          );
-        } else {
-          // ... otherwise yield the unmodified, unwrapped part.
-          return part.text;
-        }
-      })}
+      {parts.map((part) => (
+        <span style={ansiCodeStyle(part.code)}>{part.text}</span>
+      ))}
     </Typography>
   );
 });
@@ -129,14 +118,14 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
     7: "#ffffff",
   };
   const COLOR_MAP_DARK: Record<number, string> = {
-    0: "#000000",
-    1: "#800000",
-    2: "#008000",
-    3: "#808000",
-    4: "#000080",
-    5: "#800080",
-    6: "#008080",
-    7: "#c0c0c0",
+    8: "#000000",
+    9: "#800000",
+    10: "#008000",
+    11: "#808000",
+    12: "#000080",
+    13: "#800080",
+    14: "#008080",
+    15: "#c0c0c0",
   };
 
   const ansi2rgb = (code: number): string => {
@@ -170,13 +159,13 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
     return "initial";
   };
 
-  type styleKey = "fontWeight" | "textDecoration" | "color" | "backgroundColor" | "display";
+  type styleKey = "fontWeight" | "textDecoration" | "color" | "backgroundColor" | "padding";
   const style: {
     fontWeight?: string;
     textDecoration?: string;
     color?: string;
     backgroundColor?: string;
-    display?: string;
+    padding?: string;
   } = {};
 
   if (code === null || code === "0") {
@@ -227,10 +216,10 @@ function ansiCodeStyle(code: string | null): Record<string, any> {
       nextStyleKey = "backgroundColor";
     }
   });
-  // If a background color is set, render this as an inline block element (instead of inline)
-  //  so that the background between lines (at least those that don't wrap) is uninterrupted.
-  if (style.backgroundColor !== undefined) {
-    style.display = "inline-block";
+  // If a background color is set, add slight padding to increase the background fill area.
+  // This was previously display:inline-block, but that has display errors when line breaks are used.
+  if (style.backgroundColor) {
+    style.padding = "0px 1px";
   }
   return style;
 }

From d8c1ac917668f0ba2c5b25cf4145a814766f6a9d Mon Sep 17 00:00:00 2001
From: Snarling <84951833+Snarling@users.noreply.github.com>
Date: Tue, 23 Aug 2022 18:27:37 -0400
Subject: [PATCH 2/2] lint

---
 src/ui/React/ANSIITypography.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/React/ANSIITypography.tsx b/src/ui/React/ANSIITypography.tsx
index 859c1218a..c0d8ccf46 100644
--- a/src/ui/React/ANSIITypography.tsx
+++ b/src/ui/React/ANSIITypography.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
-import _ from "lodash";
 
 // This particular eslint-disable is correct.
 // In this super specific weird case we in fact do want a regex on an ANSII character.