Skip to content

feat(document-viewer): add PDF text search with highlight overlay#2159

Open
mx-kshitij wants to merge 1 commit intomendix:mainfrom
mx-kshitij:main
Open

feat(document-viewer): add PDF text search with highlight overlay#2159
mx-kshitij wants to merge 1 commit intomendix:mainfrom
mx-kshitij:main

Conversation

@mx-kshitij
Copy link
Copy Markdown
Contributor

Pull request type


Description

Adds in-document text search to the PDF viewer in document-viewer-web.

What changed:

  • PDFViewer.tsx — A search toggle button (magnifier icon) is added to the control bar. When activated, a secondary search bar appears below the controls with:
    • A debounced text input (300 ms) to avoid searching on every keystroke.
    • A live "N of M" / "No results" / "Searching…" counter (aria-live).
    • Previous / Next match navigation buttons that also navigate across pages.
    • Escape key closes the search bar and clears the query.
    • Auto-focus on the input when the bar opens.
  • usePDFSearch.ts (new) — Custom hook that iterates all pages of the loaded PDFDocumentProxy, collects all case-insensitive substring matches as SearchMatch records (page, item index, char offsets), and exposes goToNextMatch / goToPrevMatch with automatic page navigation.
  • usePDFHighlightPositions.ts (new) — Custom hook that converts SearchMatch records on the current page into absolutely-positioned HighlightRect objects. Uses page.getViewport() + a canvas context for proportional glyph-width measurement scaled to the actual rendered item width. Async effects are guarded with an active flag to prevent state updates after unmount/query change.
  • BaseViewer.tsx — Added optional SecondaryControl prop slot rendered between the toolbar and the page content.
  • documentViewer.scss — Styles for .widget-document-viewer-search-bar, .widget-document-viewer-highlight-layer, and .widget-document-viewer-highlight (yellow for all matches, orange + outline for the current match). Uses Atlas UI tokens (--spacing-*, --border-color-default, etc.).
  • documentViewerIcons.scss — Added Search icon (\e905) to the DocViewer icon font map; broadened font-family scope so search-bar nav buttons also pick up the icon font.
  • DocViewer.woff2 — Updated to include the new search glyph.

Why:
Users viewing multi-page PDFs had no way to locate specific text without scrolling manually. This brings standard Ctrl+F-style search behaviour to the widget, matching expectations from native PDF viewers.

Note: A semver bump (1.2.01.3.0) and a CHANGELOG.md entry are needed before merging. No XML/property changes; no docs PR required.


What should be covered while testing?

  1. Open a multi-page PDF in the Document Viewer widget.
  2. Click the magnifier (Search) button in the toolbar — the search bar should appear below the controls with focus on the input.
  3. Type a term that appears in the document:
    • Highlights (yellow) should appear over all matches on the current page.
    • The counter shows "1 of N".
  4. Click Next / Previous to cycle through matches — the current match turns orange with an outline; the page changes automatically when crossing a page boundary.
  5. Type a term with no matches — counter shows "No results", no highlights.
  6. Press Escape — search bar closes and all highlights clear.
  7. Load a different document — search state resets completely.
  8. Verify the screen reader announces match count changes (the count span uses aria-live="polite").
  9. Verify the Search toggle button reflects aria-pressed="true" when open.

@mx-kshitij mx-kshitij requested a review from a team as a code owner April 1, 2026 10:28
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.

1 participant