Add PDF search feature to pdf-server

[ochafik]

Summary

Adds full-text search functionality to the PDF viewer example app.

Features

• Search button in toolbar with magnifying glass icon
• Ctrl/Cmd+F keyboard shortcut to open search
• Search bar popover with:
  • Text input with 300ms debounce
  • Match counter showing "X of Y"
  • Previous/Next navigation buttons
  • Close button
• Text extraction and caching across all PDF pages
• Highlight overlays using DOM Range API for accurate positioning
• Case-insensitive search across entire document
• Auto-navigation to match pages
• Keyboard shortcuts: Enter (next match), Shift+Enter (previous), Escape (close)

Technical Changes

`mcp-app.html`

• Added search button to toolbar-right
• Added search bar popover with input and navigation buttons
• Added highlight-layer div in page-wrapper for overlay highlights

`src/mcp-app.css`

• Added search button, bar, input, match count, nav button styles
• Added highlight-layer and search-highlight styles with blend modes
• Updated text layer CSS rules for PDF.js compatibility (`--scale-factor`, `--font-height`)

`src/mcp-app.ts`

• Added search state: `searchOpen`, `searchQuery`, `allMatches`, `currentMatchIndex`
• Added page text caching: `pageTextCache`, `pageTextItemsCache`
• Added search functions:
  • `extractAllPageText()` - Extracts text from all pages
  • `performSearch()` - Case-insensitive search across cached text
  • `renderHighlights()` - Renders highlight divs using Range API
  • `openSearch()`, `closeSearch()`, `toggleSearch()`
  • `goToNextMatch()`, `goToPrevMatch()`
• Updated `requestFitToContent()` to account for search bar height
• Updated `renderPage()` to cache page text and re-render highlights
• Added search event listeners with debounced input
• Added Ctrl+F keyboard shortcut

Preview

Search highlights are rendered as semi-transparent yellow overlays that blend with the PDF:

• Light mode: multiply blend mode for yellow highlights
• Dark mode: screen blend mode for better visibility
• Current match shown in orange for clear distinction

Test Plan

• Search button opens/closes search bar
• Ctrl/Cmd+F opens search
• Typing searches across all pages
• Match count displays correctly
• Prev/Next buttons navigate between matches
• Highlights render at correct positions
• Current match highlighted differently
• Auto-navigates to different pages
• Escape closes search
• Search bar height accounted for in auto-resize

🤖 Generated with Claude Code

[pkg-pr-new]

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/ext-apps@445

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-react@445

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-basic-vanillajs@445

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-budget-allocator@445

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-cohort-heatmap@445

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-customer-segmentation@445

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-map@445

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-pdf@445

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-scenario-modeler@445

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-shadertoy@445

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-sheet-music@445

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-system-monitor@445

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-threejs@445

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-transcript@445

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-video-resource@445

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/modelcontextprotocol/ext-apps/@modelcontextprotocol/server-wiki-explorer@445

commit: 5c7b693