diff --git a/packages/app/src/Element/Event/Note.tsx b/packages/app/src/Element/Event/Note.tsx index a5897d41..8cf17aa0 100644 --- a/packages/app/src/Element/Event/Note.tsx +++ b/packages/app/src/Element/Event/Note.tsx @@ -49,6 +49,7 @@ export interface NoteProps { ignoreModeration?: boolean; onClick?: (e: TaggedNostrEvent) => void; depth?: number; + searchedValue?: string; options?: { showHeader?: boolean; showContextMenu?: boolean; @@ -206,6 +207,7 @@ export function NoteInner(props: NoteProps) { { )} {mainFeed.map(e => ( - + ))} {(props.loadMore === undefined || props.loadMore === true) && (
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 ( + + {content} + + ); +}; + +export default HighlightedText; diff --git a/packages/app/src/Element/Text.tsx b/packages/app/src/Element/Text.tsx index aa2d6522..02a5d990 100644 --- a/packages/app/src/Element/Text.tsx +++ b/packages/app/src/Element/Text.tsx @@ -9,6 +9,7 @@ import CashuNuts from "Element/Embed/CashuNuts"; import RevealMedia from "./Event/RevealMedia"; import { ProxyImg } from "./ProxyImg"; import { SpotlightMediaModal } from "./Deck/SpotlightMedia"; +import HighlightedText from "./HighlightedText"; import { useTextTransformer } from "Hooks/useTextTransformCache"; export interface TextProps { @@ -22,6 +23,7 @@ export interface TextProps { depth?: number; truncate?: number; className?: string; + highlighText?: string; onClick?: (e: React.MouseEvent) => void; } @@ -36,6 +38,7 @@ export default function Text({ disableLinkPreview, truncate, className, + highlighText, onClick, }: TextProps) { const [showSpotlight, setShowSpotlight] = useState(false); @@ -45,6 +48,35 @@ export default function Text({ 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 ; + })} + + ); + } + const renderContent = () => { let lenCtr = 0; function renderChunk(a: ParsedFragment) { @@ -96,7 +128,9 @@ export default function Text({ case "custom_emoji": return ; default: - return
{a.content}
; + return
+ {highlighText ? renderContentWithHighlightedText(a.content, highlighText) : a.content} +
; } } } diff --git a/packages/app/src/Pages/DonatePage.tsx b/packages/app/src/Pages/DonatePage.tsx index f4d16aa2..200f303c 100644 --- a/packages/app/src/Pages/DonatePage.tsx +++ b/packages/app/src/Pages/DonatePage.tsx @@ -27,6 +27,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; }