diff --git a/src/components/posts/PostBody.svelte b/src/components/posts/PostBody.svelte index 8a344bc..055e125 100644 --- a/src/components/posts/PostBody.svelte +++ b/src/components/posts/PostBody.svelte @@ -9,11 +9,12 @@ let { post } = getPostContext(); let { highlightedMatches = undefined }: { highlightedMatches?: string[] | undefined } = $props(); - let bodyElement: HTMLElement | undefined = $state(); + let mainElement: HTMLElement | undefined = $state(); + let highlightedRanges: Range[] = $state([]); function highlightSearchResults(terms: string[]) { let regexp = new RegExp(`\\b(${terms.join('|')})\\b`, 'gi'); - let walker = document.createTreeWalker(bodyElement!, NodeFilter.SHOW_TEXT); + let walker = document.createTreeWalker(mainElement!, NodeFilter.SHOW_TEXT); let ranges: Range[] = []; while (walker.nextNode()) { @@ -36,6 +37,16 @@ let highlight = CSS.highlights.get(highlightID) || new Highlight(); ranges.forEach(r => highlight.add(r)); CSS.highlights.set(highlightID, highlight); + + highlightedRanges = ranges; + } + + function removeHighlights() { + let highlight = CSS.highlights.get(highlightID) || new Highlight(); + highlightedRanges.forEach(r => highlight.delete(r)); + CSS.highlights.set(highlightID, highlight); + + highlightedRanges = []; } $effect(() => { @@ -43,7 +54,7 @@ highlightSearchResults(highlightedMatches); return () => { - CSS.highlights.delete(highlightID); + removeHighlights(); }; } else { return; @@ -52,11 +63,11 @@ {#if post.originalFediContent} -
+
{@html sanitizeHTML(post.originalFediContent)}
{:else} -

+

{/if} diff --git a/src/pages/LycanSearchPage.svelte b/src/pages/LycanSearchPage.svelte index 9ddc597..2df967a 100644 --- a/src/pages/LycanSearchPage.svelte +++ b/src/pages/LycanSearchPage.svelte @@ -29,7 +29,7 @@ let loadingPosts = $state(false); let finishedPosts = $state(false); let results: Post[] = $state([]); - let highlightedMatches: string[] = $state([]); + let highlightedMatches: string[] | undefined = $state(); checkImportStatus(); @@ -77,12 +77,13 @@ wasImporting = false; loadingPosts = true; finishedPosts = false; + highlightedMatches = undefined; lycanService.searchPosts(selectedCollection, q, { onPostsLoaded: ({ posts, terms }) => { loadingPosts = false; results.push(...posts); - highlightedMatches = terms; + highlightedMatches ??= terms; }, onFinish: () => { finishedPosts = true;