Skip to content

Comments

Add q param to algolia search, fix search term highlighting across html nodes#14080

Open
vezwork wants to merge 2 commits intomainfrom
feature/robust-search-highlighting
Open

Add q param to algolia search, fix search term highlighting across html nodes#14080
vezwork wants to merge 2 commits intomainfrom
feature/robust-search-highlighting

Conversation

@vezwork
Copy link
Contributor

@vezwork vezwork commented Feb 20, 2026

Examples

I highlighted and copied some text on various pages that spans decorated and undecorated text, then pasted it into algolia search, and these are the successful matches:

image --- image --- image ---

Description

This PR

  1. replaces text fragments (from PR Add text fragments to quarto-search.js items #14003) in algolia search urls with a q={search term} param, enabling multiple match highlighting
  2. replaces the previous method of highlighting search terms in the page which only worked when the search term was fully contained within a single node. The previous method worked great for matches in paragraphs that did not have any decoration, but did not work for matches that contained both decorated and undecorated text, and did not work well for code cells with syntax highlighting.

I referenced @cderv's PR #14053 while finishing this PR. Building off of that, I found a method for opening containing tabsets that requires significantly less code. See openAllTabsetsContainingEl

@vezwork vezwork requested review from cderv and cscheid February 20, 2026 19:44
@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Feb 20, 2026

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@vezwork vezwork removed the request for review from cscheid February 20, 2026 19:44
activateTabsWithMatches(mainEl);
// Let the browser settle layout after Bootstrap tab transitions
// before calculating scroll position.
requestAnimationFrame(() => scrollToFirstMatch(mainEl));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was moved inside of highlight

Comment on lines -365 to -369
const fullMatches = item.text.matchAll(/<mark class='search-match'>(.*?)<\/mark>/g)
// extract capture group with the search match
// result e.g. ["def fiz"]
const searchMatches = [...fullMatches].map(match => match[1])
if (searchMatches[0]) {
Copy link
Contributor Author

@vezwork vezwork Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We no longer use the matching text in the search, like we did for text fragments. Instead, for the q param, we use the user's full query, exactly as they typed it, whether algolia found a match or not. Algolia doesn't always find matches that the highlighting can, so this should help the user find anything that matches what they typed.

// After search highlighting, activate any tabs whose panes contain <mark> matches.
// This ensures that search results inside inactive Bootstrap tabs become visible.
// Handles nested tabsets by walking up ancestor panes and activating outermost first.
function activateTabsWithMatches(mainEl) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced with openAllTabsetsContainingEl

@vezwork vezwork changed the title Add q param to algolia search, fix highlighting for terms across multiple html nodes Add q param to algolia search, fix search term highlighting across html nodes Feb 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants