From cc21417b7ceeeb1e8598d806c50a67a4b0c22437 Mon Sep 17 00:00:00 2001
From: Zayooo <mrcold135@gmail.com>
Date: Wed, 24 Jun 2026 09:10:01 +0200
Subject: [PATCH] feat(HighlightedText): support multiple highlight words

Accept `string | string[]` for the `highlight` prop so multiple words can
be highlighted at once (e.g. ["APE", "GME"]). Single-string usage is
unchanged. Register description documents the array-via-dynamic-value path.
---
 .../HighlightedText/HighLightedText.register.ts              | 3 ++-
 src/code-components/HighlightedText/HighlightedText.tsx      | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/code-components/HighlightedText/HighLightedText.register.ts b/src/code-components/HighlightedText/HighLightedText.register.ts
index ce7af721..b42426ac 100644
--- a/src/code-components/HighlightedText/HighLightedText.register.ts
+++ b/src/code-components/HighlightedText/HighLightedText.register.ts
@@ -16,7 +16,8 @@ export function registerHighlightedText(
       },
       highlight: {
         type: "string",
-        description: "The substring to highlight (case insensitive)",
+        description:
+          'Substring to highlight (case insensitive). For multiple words, use a dynamic value with a string array, e.g. ["APE", "GME"].',
       },
       textClassName: {
         type: "class",
diff --git a/src/code-components/HighlightedText/HighlightedText.tsx b/src/code-components/HighlightedText/HighlightedText.tsx
index cb5f68e2..c24842ac 100644
--- a/src/code-components/HighlightedText/HighlightedText.tsx
+++ b/src/code-components/HighlightedText/HighlightedText.tsx
@@ -3,7 +3,7 @@ import Highlighter from "react-highlight-words";
 
 interface HighlightedTextProps {
   text: string;
-  highlight: string;
+  highlight: string | string[];
   textClassName?: string;
   highlightClassName?: string;
 }
@@ -14,10 +14,11 @@ export function HighlightedText({
   textClassName,
   highlightClassName,
 }: HighlightedTextProps) {
+  const searchWords = Array.isArray(highlight) ? highlight : [highlight];
   return (
     <span className={textClassName}>
       <Highlighter
-        searchWords={[highlight]}
+        searchWords={searchWords}
         textToHighlight={text}
         highlightClassName={highlightClassName}
         caseSensitive={false}