Merge pull request #3152 from ingef/fix/highlighting-in-tooltip

Fix Highlighting in Tooltip
ingef · Aug 28, 2023 · a4b71b2 · a4b71b2
2 parents 1784b69 + 4c07409
commit a4b71b2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -76,6 +76,7 @@
     "react-window": "^1.8.6",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
+    "remark-flexible-markers": "^1.0.3",
     "remark-gfm": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "typesafe-actions": "^5.1.0",

diff --git a/frontend/src/js/tooltip/Tooltip.tsx b/frontend/src/js/tooltip/Tooltip.tsx
@@ -1,10 +1,11 @@
 import styled from "@emotion/styled";
 import { faThumbtack, IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import Highlighter from "react-highlight-words";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
 import { useDispatch, useSelector } from "react-redux";
+import remarkFlexibleMarkers from "remark-flexible-markers";
 import remarkGfm from "remark-gfm";
 
 import type { StateT } from "../app/reducers";
@@ -158,6 +159,11 @@ const ConceptLabel = ({
   );
 };
 
+const mark = (text: string, regex: RegExp | null): string => {
+  if (!regex) return text;
+  return text.replace(regex, "==$&==");
+};
+
 const Tooltip = () => {
   const words = useSelector<StateT, string[]>(
     (state) => state.conceptTrees.search.words || [],
@@ -182,6 +188,11 @@ const Tooltip = () => {
     (state) => state.tooltip.toggleAdditionalInfos,
   );
 
+  const highlightRegex = useMemo(
+    () => (words.length > 0 ? new RegExp(words.join("|"), "gi") : null),
+    [words],
+  );
+
   const dispatch = useDispatch();
   const onToggleAdditionalInfos = () => dispatch(toggleInfos());
 
@@ -234,19 +245,8 @@ const Tooltip = () => {
                 <InfoHeadline>
                   <HighlightedText words={words} text={info.key} />
                 </InfoHeadline>
-                <Markdown
-                  remarkPlugins={[remarkGfm]}
-                  components={
-                    {
-                      // TODO: Won't work anymore with the latest react-markdown, because
-                      // node is now a ReactElement, not a string.
-                      // Try to use another package for highlighting that doesn't depend on a string
-                      // or just highlight ourselves
-                      // p: ({ node }) => searchHighlight(node)
-                    }
-                  }
-                >
-                  {info.value}
+                <Markdown remarkPlugins={[remarkGfm, remarkFlexibleMarkers]}>
+                  {mark(info.value, highlightRegex)}
                 </Markdown>
               </PieceOfInfo>
             ))}

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3113,6 +3113,13 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/mdast@^3.0.10":
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
+  integrity sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==
+  dependencies:
+    "@types/unist" "^2"
+
 "@types/mdx@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.3.tgz#43fd32414f17fcbeced3578109a6edd877a2d96e"
@@ -3317,6 +3324,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/unist@^2":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
+  integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
+
 "@types/use-sync-external-store@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
@@ -8849,6 +8861,15 @@ remark-external-links@^8.0.0:
     space-separated-tokens "^1.0.0"
     unist-util-visit "^2.0.0"
 
+remark-flexible-markers@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/remark-flexible-markers/-/remark-flexible-markers-1.0.3.tgz#50914f5cac13da45b7d0ccb9a517b6c3cc8c85dc"
+  integrity sha512-O3aXLFXbPZRS9lZfTxqzgG0sknqgMdz0pfqp4vx5cofjlPfSJVyGMfTB5jxIdum4XzhN0FVtRBB+ksZocX168w==
+  dependencies:
+    "@types/mdast" "^3.0.10"
+    unist-builder "^3.0.1"
+    unist-util-visit "^4.0.0"
+
 remark-gfm@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"
@@ -9822,6 +9843,13 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
+unist-builder@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-3.0.1.tgz#258b89dcadd3c973656b2327b347863556907f58"
+  integrity sha512-gnpOw7DIpCA0vpr6NqdPvTWnlPTApCTRzr+38E6hCWx3rz/cjo83SsKIlS1Z+L5ttScQ2AwutNnb8+tAvpb6qQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
 unist-util-generated@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"