fix: remove dangerouslySetInnerHTML (#4181)

Unleash · Jul 7, 2023 · 5388eaf · 5388eaf
1 parent f995a0e
commit 5388eaf
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/frontend/src/component/common/Highlighter/Highlighter.tsx b/frontend/src/component/common/Highlighter/Highlighter.tsx
@@ -1,4 +1,4 @@
-import { VFC } from 'react';
+import { Fragment, VFC } from 'react';
 import { safeRegExp } from '@server/util/escape-regex';
 import { styled } from '@mui/material';
 
@@ -29,11 +29,18 @@ export const Highlighter: VFC<IHighlighterProps> = ({
 
     const regex = safeRegExp(search, caseSensitive ? 'g' : 'gi');
 
-    return (
-        <StyledSpan
-            dangerouslySetInnerHTML={{
-                __html: children?.replaceAll(regex, '<mark>$&</mark>') || '',
-            }}
-        />
+    const parts = children.split(regex);
+
+    const highlightedText = parts.map((part, index) =>
+        index < parts.length - 1 ? (
+            <Fragment key={index}>
+                {part}
+                <mark>{search}</mark>
+            </Fragment>
+        ) : (
+            part
+        )
     );
+
+    return <StyledSpan>{highlightedText}</StyledSpan>;
 };