From c223c89045f1770acf44d1318a6e03628122b43c Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Wed, 30 Aug 2023 12:44:42 +0200
Subject: [PATCH] feat: highlight search results

---
 packages/app/src/Element/HighlightedText.tsx |  9 +++++
 packages/app/src/Element/Note.tsx            |  4 ++-
 packages/app/src/Element/Text.tsx            | 37 ++++++++++++++++++--
 packages/app/src/Element/Timeline.tsx        |  2 +-
 packages/app/src/Pages/DonatePage.tsx        |  1 +
 packages/system/src/text.ts                  |  2 +-
 6 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 packages/app/src/Element/HighlightedText.tsx

diff --git a/packages/app/src/Element/HighlightedText.tsx b/packages/app/src/Element/HighlightedText.tsx
new file mode 100644
index 00000000..fa305e00
--- /dev/null
+++ b/packages/app/src/Element/HighlightedText.tsx
@@ -0,0 +1,9 @@
+const HighlightedText = ({ content }: { content: string }) => {
+  return (
+    <strong className="highlighted-text">
+      {content}
+    </strong>
+  );
+};
+
+export default HighlightedText;
diff --git a/packages/app/src/Element/Note.tsx b/packages/app/src/Element/Note.tsx
index b2606bdc..02f58c3e 100644
--- a/packages/app/src/Element/Note.tsx
+++ b/packages/app/src/Element/Note.tsx
@@ -47,6 +47,7 @@ export interface NoteProps {
   ignoreModeration?: boolean;
   onClick?: (e: TaggedNostrEvent) => void;
   depth?: number;
+  searchedValue?: string;
   options?: {
     showHeader?: boolean;
     showContextMenu?: boolean;
@@ -209,12 +210,13 @@ export default function Note(props: NoteProps) {
               )}
             </>
           }>
-          <Text content={body} tags={ev.tags} creator={ev.pubkey} />
+          <Text highlighText={props.searchedValue} content={body} tags={ev.tags} creator={ev.pubkey} />
         </Reveal>
       );
     }
     return (
       <Text
+        highlighText={props.searchedValue}
         content={body}
         tags={ev.tags}
         creator={ev.pubkey}
diff --git a/packages/app/src/Element/Text.tsx b/packages/app/src/Element/Text.tsx
index 1ec1b6d4..c85effcb 100644
--- a/packages/app/src/Element/Text.tsx
+++ b/packages/app/src/Element/Text.tsx
@@ -9,6 +9,7 @@ import CashuNuts from "Element/CashuNuts";
 import RevealMedia from "./RevealMedia";
 import { ProxyImg } from "./ProxyImg";
 import { SpotlightMedia } from "./SpotlightMedia";
+import HighlightedText from "./HighlightedText";
 
 export interface TextProps {
   content: string;
@@ -17,9 +18,10 @@ export interface TextProps {
   disableMedia?: boolean;
   disableMediaSpotlight?: boolean;
   depth?: number;
+  highlighText?: string;
 }
 
-export default function Text({ content, tags, creator, disableMedia, depth, disableMediaSpotlight }: TextProps) {
+export default function Text({ content, tags, creator, disableMedia, depth, disableMediaSpotlight, highlighText }: TextProps) {
   const [showSpotlight, setShowSpotlight] = useState(false);
   const [imageIdx, setImageIdx] = useState(0);
 
@@ -29,6 +31,35 @@ export default function Text({ content, tags, creator, disableMedia, depth, disa
 
   const images = elements.filter(a => a.type === "media" && a.mimeType?.startsWith("image")).map(a => a.content);
 
+  function renderContentWithHighlightedText(content: string, textToHighlight: string) {
+    const textToHighlightArray = textToHighlight.trim().toLowerCase().split(' ');
+    const re = new RegExp(`(${textToHighlightArray.join('|')})`, 'gi');
+    const splittedContent = content.split(re);
+
+    const fragments = splittedContent.map(c => {
+      if (textToHighlightArray.includes(c.toLowerCase())) {
+        return {
+          type: 'highlighted_text',
+          content: c,
+        } as ParsedFragment;
+      }
+
+      return c;
+    })
+
+    return (
+      <>
+        {fragments.map(f => {
+          if (typeof f === "string") {
+            return f;
+          }
+
+          return <HighlightedText content={f.content} />;
+        })}
+      </>
+    );
+  }
+
   function renderChunk(a: ParsedFragment) {
     if (a.type === "media" && !a.mimeType?.startsWith("unknown")) {
       if (disableMedia ?? false) {
@@ -67,7 +98,9 @@ export default function Text({ content, tags, creator, disableMedia, depth, disa
         case "custom_emoji":
           return <ProxyImg src={a.content} size={15} className="custom-emoji" />;
         default:
-          return <div className="text-frag">{a.content}</div>;
+          return <div className="text-frag">
+            {highlighText ? renderContentWithHighlightedText(a.content, highlighText) : a.content}
+          </div>;
       }
     }
   }
diff --git a/packages/app/src/Element/Timeline.tsx b/packages/app/src/Element/Timeline.tsx
index 541a9d9e..4a48bf60 100644
--- a/packages/app/src/Element/Timeline.tsx
+++ b/packages/app/src/Element/Timeline.tsx
@@ -93,7 +93,7 @@ const Timeline = (props: TimelineProps) => {
           return <NoteReaction data={e} key={e.id} root={findRelated(eRef)} />;
         }
         return (
-          <Note key={e.id} data={e} related={relatedFeed(e.id)} ignoreModeration={props.ignoreModeration} depth={0} />
+          <Note key={e.id} searchedValue={props.subject.discriminator} data={e} related={relatedFeed(e.id)} ignoreModeration={props.ignoreModeration} depth={0} />
         );
       }
       case EventKind.ZapReceipt: {
diff --git a/packages/app/src/Pages/DonatePage.tsx b/packages/app/src/Pages/DonatePage.tsx
index 9c1cc9c8..dc5b16af 100644
--- a/packages/app/src/Pages/DonatePage.tsx
+++ b/packages/app/src/Pages/DonatePage.tsx
@@ -22,6 +22,7 @@ const Contributors = [
   bech32ToHex("npub179rec9sw2a5ngkr2wsjpjhwp2ksygjxn6uw5py9daj2ezhw3aw5swv3s6q"), // h3y6e - JA + other stuff
   bech32ToHex("npub17q5n2z8naw0xl6vu9lvt560lg33pdpe29k0k09umlfxm3vc4tqrq466f2y"), // w3irdrobot
   bech32ToHex("npub1ltx67888tz7lqnxlrg06x234vjnq349tcfyp52r0lstclp548mcqnuz40t"), // Vivek
+  bech32ToHex("npub1wh30wunfpkezx5s7edqu9g0s0raeetf5dgthzm0zw7sk8wqygmjqqfljgh"), // Fernando Porazzi
 ];
 
 const Translators = [
diff --git a/packages/system/src/text.ts b/packages/system/src/text.ts
index ea273285..edd4502d 100644
--- a/packages/system/src/text.ts
+++ b/packages/system/src/text.ts
@@ -5,7 +5,7 @@ import { validateNostrLink } from "./nostr-link";
 import { splitByUrl } from "./utils";
 
 export interface ParsedFragment {
-  type: "text" | "link" | "mention" | "invoice" | "media" | "cashu" | "hashtag" | "custom_emoji";
+  type: "text" | "link" | "mention" | "invoice" | "media" | "cashu" | "hashtag" | "custom_emoji" | "highlighted_text";
   content: string;
   mimeType?: string;
 }