fix overlapping highlights

BloopAI · Aug 2, 2023 · 9022665 · 9022665
1 parent c16b10d
commit 9022665
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/client/src/components/CodeBlock/CodeFull/CodeContainerFull.tsx b/client/src/components/CodeBlock/CodeFull/CodeContainerFull.tsx
@@ -124,9 +124,15 @@ const CodeContainerFull = ({
   return (
     <div ref={ref} className="relative pb-44">
       {tokens.map((line, index) => {
-        let highlightForLine = highlights?.findIndex(
-          (h) => h && index >= h.lines[0] && index <= h.lines[1],
-        );
+        let highlightForLine = highlights
+          ?.sort((a, b) =>
+            a &&
+            b &&
+            a?.lines?.[1] - a?.lines?.[0] < b?.lines?.[1] - b?.lines?.[0]
+              ? -1
+              : 1,
+          )
+          .findIndex((h) => h && index >= h.lines[0] && index <= h.lines[1]);
         if (highlightForLine && highlightForLine < 0) {
           highlightForLine = undefined;
         }