highlight search

Author: mluena

client/package.json

@@ -80,6 +80,7 @@
     "react-player": "^2.16.0",
     "react-toastify": "^10.0.5",
     "react-world-flags": "^1.6.0",
+    "rehype-sanitize": "^6.0.0",
     "rooks": "7.14.1",
     "screenfull": "^6.0.2",
     "tailwind-merge": "1.14.0",

client/src/components/ui/highlighted-markdown.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+
+import { highlightMd } from "@/lib/utils/highlighted-text";
+
+export function HighlightedMarkdown({ text, query }: { text: string; query: string }) {
+  const processed = highlightMd(text, query);
+  const schema = {
+    ...defaultSchema,
+    tagNames: [...(defaultSchema.tagNames || []), "mark"],
+  };
+  console.log(processed, typeof processed);
+  return (
+    <Markdown
+      rehypePlugins={[rehypeRaw, [rehypeSanitize, schema]]}
+      className="prose"
+      components={{
+        mark({ children }) {
+          return <span className="rounded bg-brand1/50">{children}</span>;
+        },
+      }}
+    >
+      {processed}
+    </Markdown>
+  );
+}

client/src/containers/projects/popup.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/classnames";
 
 import { useGetProjectsId } from "@/types/generated/project";
 
-import { useSyncProject } from "@/app/store";
+import { projectSearchAtom, useSyncProject } from "@/app/store";
 
 import { PROJECT_PILLARS } from "@/constants/projects";
 
@@ -19,6 +19,9 @@ import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from "@/compone
 import { LuInfo } from "react-icons/lu";
 
 import { TooltipPortal } from "@radix-ui/react-tooltip";
+import { useAtomValue } from "jotai";
+
+import { HighlightedMarkdown } from "@/components/ui/highlighted-markdown";
 
 const ProjectFieldHeader = ({ title, data }: { title: string; data: string | undefined }) => (
   <div className="flex items-center">
@@ -40,6 +43,7 @@ const ProjectFieldHeader = ({ title, data }: { title: string; data: string | und
 
 const ProjectPopup = () => {
   const [project] = useSyncProject();
+  const projectSearch = useAtomValue(projectSearchAtom);
 
   const { data } = useGetProjectsId(
     project as number,
@@ -112,7 +116,13 @@ const ProjectPopup = () => {
         {!!data?.data?.attributes?.highlight && (
           <section className="space-y-2.5 py-5">
             <ProjectFieldHeader title="Description" data={dataInfo?.data?.attributes?.highlight} />
-            <Markdown className="prose">{data?.data?.attributes?.highlight}</Markdown>
+
+            {projectSearch && (
+              <HighlightedMarkdown text={data?.data?.attributes?.highlight} query={projectSearch} />
+            )}
+            {!projectSearch && (
+              <Markdown className="text-sm">{data?.data?.attributes?.highlight}</Markdown>
+            )}
           </section>
         )}
 

client/src/lib/utils/highlighted-text.ts

@@ -0,0 +1,14 @@
+function escapeRegExp(s: string) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function highlightMd(md: string, query?: string) {
+  const stripped = md.replaceAll("@@HIGHLIGHT@@", "").replaceAll("@@END@@", "");
+
+  if (!query?.trim()) return stripped;
+
+  const terms = query.trim().split(/\s+/).map(escapeRegExp);
+  const re = new RegExp(`(${terms.join("|")})`, "gi");
+
+  return stripped.replace(re, "<mark>$1</mark>");
+}

client/yarn.lock

@@ -6445,6 +6445,7 @@ __metadata:
     react-player: ^2.16.0
     react-toastify: ^10.0.5
     react-world-flags: ^1.6.0
+    rehype-sanitize: ^6.0.0
     rooks: 7.14.1
     screenfull: ^6.0.2
     tailwind-merge: 1.14.0
@@ -9429,6 +9430,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-sanitize@npm:^5.0.0":
+  version: 5.0.2
+  resolution: "hast-util-sanitize@npm:5.0.2"
+  dependencies:
+    "@types/hast": ^3.0.0
+    "@ungap/structured-clone": ^1.0.0
+    unist-util-position: ^5.0.0
+  checksum: 2ab506b847e0ef799dafabae764893bd6ee43dfdf10e65154436c3ded5210abcc637d8e630354f2efd0aa771cd9de78624e2ed9a82c7054029f2b9e18ca7bb70
+  languageName: node
+  linkType: hard
+
 "hast-util-select@npm:^6.0.0":
   version: 6.0.2
   resolution: "hast-util-select@npm:6.0.2"
@@ -13588,6 +13600,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-sanitize@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "rehype-sanitize@npm:6.0.0"
+  dependencies:
+    "@types/hast": ^3.0.0
+    hast-util-sanitize: ^5.0.0
+  checksum: 8f1b44323a6012fbfa83ee6bc48163b846398952c60e5ddbd3d2275cb46cec4fb8d98a919ffce1b3322af469c6dcef9a0127bcf0a1d96203a5c193d07cd26742
+  languageName: node
+  linkType: hard
+
 "rehype-slug@npm:~6.0.0":
   version: 6.0.0
   resolution: "rehype-slug@npm:6.0.0"