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
This commit is contained in:
Samy Pessé
2024-03-21 12:10:58 +00:00
committed by GitHub
parent fff6dce8fc
commit be45f23cc8
+6 -4
View File
@@ -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;
}