From be45f23cc87ae264a5fe436171062d814293aaeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Thu, 21 Mar 2024 12:10:58 +0000
Subject: [PATCH] Use whitespace-pre to fix whitespace in highlighted text in
 search (#320)

* Use whitespace-pre to fix whitespace in highlighted text in search

* Correctly fix it
---
 src/components/Search/HighlightQuery.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/HighlightQuery.tsx b/src/components/Search/HighlightQuery.tsx
index a70edb806..86538b68d 100644
--- a/src/components/Search/HighlightQuery.tsx
+++ b/src/components/Search/HighlightQuery.tsx
@@ -11,17 +11,17 @@ export function HighlightQuery(props: {
     /** Style to apply on matching parts (default to primary) */
     highlight?: ClassValue;
 }): React.ReactElement {
-    const { query, text, highlight = ['text-bold', 'text-primary'], ...textProps } = props;
+    const { query, text, highlight = ['text-bold', 'text-primary'] } = props;
     const matches = matchString(text, query);
 
     return (
-        <>
+        <span className={tcls('whitespace-break-spaces')}>
             {matches.map((entry, index) => (
                 <span key={index} className={tcls(entry.match ? highlight : null)}>
                     {entry.text}
                 </span>
             ))}
-        </>
+        </span>
     );
 }
 
@@ -51,7 +51,9 @@ function matchWordInParts(parts: TextMatch[], word: string): TextMatch[] {
             const inner = text.slice(index, index + word.length);
             const after = text.slice(index + word.length);
 
-            result.push({ text: before }, { text: inner, match: word }, { text: after });
+            if (before.length > 0) result.push({ text: before });
+            if (inner.length > 0) result.push({ text: inner, match: word });
+            if (after.length > 0) result.push({ text: after });
 
             return result;
         }