From 6e805db8a3ebd7b50956815390eca8deb1c116e9 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 29 Aug 2021 13:01:04 -0400
Subject: [PATCH] Restore usage of @babel/code-frame

---
 .../containers/StackFrameCodeBlock.tsx        | 39 +++++++++----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx
index 553d2d02..753c2e06 100644
--- a/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx
+++ b/packages/redux-devtools-inspector-monitor-trace-tab/src/react-error-overlay/containers/StackFrameCodeBlock.tsx
@@ -12,7 +12,7 @@ import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
 import { ScriptLine } from '../utils/stack-frame';
 import generateAnsiHTML from '../utils/generateAnsiHTML';
 
-// import { codeFrameColumns } from '@babel/code-frame';
+import { codeFrameColumns } from '@babel/code-frame';
 import { nicinabox as theme } from 'redux-devtools-themes';
 
 interface StackFrameCodeBlockPropsType {
@@ -48,25 +48,24 @@ function StackFrameCodeBlock(props: StackFrameCodeBlockPropsType) {
     }
     sourceCode[line - 1] = text;
   });
-  // const ansiHighlight = codeFrameColumns(
-  //   sourceCode.join('\n'),
-  //   {
-  //     start: {
-  //       line: lineNum,
-  //       column:
-  //         columnNum == null
-  //           ? 0
-  //           : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
-  //     },
-  //   },
-  //   {
-  //     forceColor: true,
-  //     linesAbove: contextSize,
-  //     linesBelow: contextSize,
-  //   }
-  // );
-  // const htmlHighlight = generateAnsiHTML(ansiHighlight);
-  const htmlHighlight = generateAnsiHTML(sourceCode.join('\n'));
+  const ansiHighlight = codeFrameColumns(
+    sourceCode.join('\n'),
+    {
+      start: {
+        line: lineNum,
+        column:
+          columnNum == null
+            ? 0
+            : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
+      },
+    },
+    {
+      forceColor: true,
+      linesAbove: contextSize,
+      linesBelow: contextSize,
+    }
+  );
+  const htmlHighlight = generateAnsiHTML(ansiHighlight);
   const code = document.createElement('code');
   code.innerHTML = htmlHighlight;
   absolutifyCaret(code);