From 83b79610afd9624a03139d88950bcdf56d0e4590 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Thu, 11 May 2023 10:50:57 +0100
Subject: [PATCH] Line highlighting now takes ranges

---
 apps/webapp/app/components/code/CodeBlock.tsx            | 8 ++++++--
 apps/webapp/app/components/stories/CodeBlock.stories.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index fb2007aa8..a74c16081 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -30,7 +30,7 @@ type CodeBlockProps = {
   showLineNumbers?: boolean;
 
   /** Highlight line at given line number with color from theme.colors */
-  highlightLines?: number[];
+  highlightedRanges?: [number, number][];
 
   /** Add/override classes on the overall element */
   className?: string;
@@ -154,7 +154,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     {
       showCopyButton = true,
       showLineNumbers = true,
-      highlightLines,
+      highlightedRanges,
       code,
       className,
       language = "typescript",
@@ -189,6 +189,10 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
       }rem + 1.5rem )`;
     }
 
+    const highlightLines = highlightedRanges?.flatMap(([start, end]) =>
+      Array.from({ length: end - start + 1 }, (_, i) => start + i)
+    );
+
     return (
       <div
         className={cn(
diff --git a/apps/webapp/app/components/stories/CodeBlock.stories.tsx b/apps/webapp/app/components/stories/CodeBlock.stories.tsx
index 997ff7d8c..963efe22f 100644
--- a/apps/webapp/app/components/stories/CodeBlock.stories.tsx
+++ b/apps/webapp/app/components/stories/CodeBlock.stories.tsx
@@ -32,7 +32,10 @@ export const Block: Story = {
     console.info(log);
   },
 });`,
-    highlightLines: [2],
+    highlightedRanges: [
+      [6, 8],
+      [12, 14],
+    ],
   },
 
   render: (args) => <CodeBlock {...args} />,