fix: replace react-highlight-words with simple custom code

RedTurtle · Jan 8, 2024 · 9acd678 · 9acd678
1 parent 697f54c
commit 9acd678
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -132,7 +132,6 @@
     "marked": "9.0.0",
     "react-dropzone": "11.0.1",
     "react-google-recaptcha-v3": "1.7.0",
-    "react-highlight-words": "0.18.0",
     "react-select": "^4.3.1",
     "react-slick": "^0.29.0",
     "slick-carousel": "1.8.1",

diff --git a/src/components/ItaliaTheme/Search/ResultItem.jsx b/src/components/ItaliaTheme/Search/ResultItem.jsx
@@ -1,32 +1,46 @@
 import React from 'react';
 import { Card, CardBody } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
-import Highlighter from 'react-highlight-words';
 
-const ResultItem = ({ item, index, section, searchableText }) => {
-  const filteredWords = searchableText.split(' ');
+const Marker = ({ text = '', highlight = '' }) => {
+  if (!highlight.trim()) {
+    return text;
+  }
+  const regex = new RegExp(
+    `(${highlight
+      .split(' ')
+      .map((s) => s.replace(/[^a-zA-Z0-9À-ÖØ-öø-ÿ]/g, ''))
+      .filter((s) => s != '')
+      .join('|')})`,
+    'gi',
+  );
+  // Split on highlight term and include term into parts, ignore case
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.match(regex) ? (
+          <mark className="highlighted-text">{part}</mark>
+        ) : (
+          part
+        ),
+      )}
+    </>
+  );
+};
 
+const ResultItem = ({ item, index, section, searchableText }) => {
   return (
     <Card noWrapper={true} className="mt-3 mb-3">
       <CardBody className="shadow-sm px-4 pt-4 pb-4 rounded">
         {section}
         <h4 className="card-title">
           <UniversalLink item={item}>
-            <Highlighter
-              highlightClassName="highlighted-text"
-              searchWords={filteredWords}
-              autoEscape={true}
-              textToHighlight={item.title}
-            />
+            <Marker highlight={searchableText} text={item.title} />
           </UniversalLink>
         </h4>
         <p className="text-paragraph">
-          <Highlighter
-            highlightClassName="highlighted-text"
-            searchWords={filteredWords}
-            autoEscape={true}
-            textToHighlight={item.description}
-          />
+          <Marker highlight={searchableText} text={item.description} />
         </p>
       </CardBody>
     </Card>

diff --git a/yarn.lock b/yarn.lock
@@ -6558,7 +6558,6 @@ __metadata:
     prettier: 3.1.0
     react-dropzone: 11.0.1
     react-google-recaptcha-v3: 1.7.0
-    react-highlight-words: 0.18.0
     react-select: ^4.3.1
     react-slick: ^0.29.0
     release-it: 16.1.3
@@ -8450,13 +8449,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"highlight-words-core@npm:^1.2.0":
-  version: 1.2.2
-  resolution: "highlight-words-core@npm:1.2.2"
-  checksum: 737758a8a572c82919552b031df300016164b7d0db6a819d24bc6c7ca2279d3cd6d03497728930d6402423c7a3fc2f42c628a9b01b025c704a0b56a635377511
-  languageName: node
-  linkType: hard
-
 "hoist-non-react-statics@npm:3.3.2, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
@@ -10110,13 +10102,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memoize-one@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "memoize-one@npm:4.0.3"
-  checksum: addd18c046542f57440ba70bf8ebd48663d17626cade681f777522ef70900a87ec72c5041bed8ece4f6d40a2cb58803bae388b50a4b740d64f36bcda20c147b7
-  languageName: node
-  linkType: hard
-
 "memoize-one@npm:^5.0.0, memoize-one@npm:^5.1.1":
   version: 5.2.1
   resolution: "memoize-one@npm:5.2.1"
@@ -11856,19 +11841,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-highlight-words@npm:0.18.0":
-  version: 0.18.0
-  resolution: "react-highlight-words@npm:0.18.0"
-  dependencies:
-    highlight-words-core: ^1.2.0
-    memoize-one: ^4.0.0
-    prop-types: ^15.5.8
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0
-  checksum: ff9759e7ebeb140067854d8cad3021123ba0e3b78bda14d35d9b21dd7890986c858955885ddbcb537e9f88472aebe4a23a1841b7af190989efb0a8ecf7dc2a57
-  languageName: node
-  linkType: hard
-
 "react-input-autosize@npm:^3.0.0":
   version: 3.0.0
   resolution: "react-input-autosize@npm:3.0.0"