feat(search): scroll to and highlight first match when navigating from search results#1101
Open
perber wants to merge 2 commits into
Open
feat(search): scroll to and highlight first match when navigating from search results#1101perber wants to merge 2 commits into
perber wants to merge 2 commits into
Conversation
…m search results Clicking a search result now scrolls the page viewer to the first occurrence of the search term and highlights it with a <mark> element. The term is passed via navigation state so the scroll only fires on explicit result clicks, not whenever ?q= happens to be in the URL.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds “scroll to first match + highlight” behavior when navigating from search results into the page viewer, using navigation state to avoid triggering solely from ?q= being present.
Changes:
- Adds a
.search-highlightstyle for<mark>elements. - Introduces
useScrollToSearchTermto find the first text match in the rendered page, wrap it in<mark>, and scroll it into view. - Passes the search query through router navigation state from
SearchResultCard, and wires the hook intoPageViewer.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| ui/leafwiki-ui/src/index.css | Adds styling for highlighted search matches. |
| ui/leafwiki-ui/src/features/viewer/useScrollToSearchTerm.ts | New hook to highlight the first match and scroll to it on navigation. |
| ui/leafwiki-ui/src/features/viewer/PageViewer.tsx | Calls the new scroll/highlight hook during viewer rendering. |
| ui/leafwiki-ui/src/features/search/SearchResultCard.tsx | Passes the current q into navigation state on result click. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+1392
to
+1394
| .search-highlight { | ||
| @apply rounded-xs bg-yellow-300/70 dark:bg-yellow-400/30; | ||
| } |
Comment on lines
+15
to
+17
| function cleanupHighlights(root: Element) { | ||
| root.querySelectorAll('mark.search-highlight').forEach((el) => { | ||
| const parent = el.parentNode |
Comment on lines
+42
to
+45
| const mark = document.createElement('mark') | ||
| mark.className = 'search-highlight' | ||
| mark.textContent = text.slice(idx, idx + searchTerm.length) | ||
|
|
Comment on lines
+74
to
+76
| const timeout = setTimeout(() => { | ||
| highlightAndScroll(searchQuery) | ||
| }, 500) |
- Extract SEARCH_QUERY_STATE_KEY and getNavigationSearchQuery to lib/searchNavigationState.ts so writer (SearchResultCard) and reader (useScrollToSearchTerm) share the same constant - Extract waitUntilHeightStabilizes from scrollToHeadlineHash to module scope with proper cancellation support; use it in useScrollToSearchTerm instead of a flat 500ms timeout to avoid racing slow-rendering content - Replace dead scrollContainer guard with actual usage: pass it to waitUntilHeightStabilizes for height-stability polling - Track highlighted visit keys in a ref (visitKey + searchQuery) to prevent the highlight re-firing when the user navigates Back
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Clicking a search result now scrolls the page viewer to the first occurrence of the search term and highlights it with a
<mark>element. The term is passed via navigation state so the scroll only fires on explicit result clicks, not whenever?q=happens to be in the URL.