[WIP] SCHOL-857: New pdf.js reader

[jackiequach]

TODO/in progress:

• Investigate double scaling when using fit to width/height.
• Add error state ui.
• Add tests.
• Remove PdfReader and react-pdf and rename the new reader.

Adds NewReader and useNewReader built directly with pdf.js, replacing the react-pdf usePdfReader in the main useWebReader. Both are exported and can be used independently.

Initial load

Every page is always in the DOM as a fixed-size div placeholder whose dimensions are set from the page's intrinsic size (fetched via pdfDoc.getPage(i) at load time, before any canvas is painted). This gives the scroll container a correct, stable total height and a working scrollbar immediately, before any rendering has happened. The canvas, text layer, and annotation layer inside each page are only painted once the page scrolls into an IntersectionObserver window (300px above/below the viewport) and are torn down again when the page scrolls out.

State management

Reader state (current page, total pages, scale, fit mode, rotation, navigation request counter) is managed by a pdfReaderReducer with a useReducer in useNewReader. Actions mirror the pattern in usePdfReader's reducer but are simpler because NewReader is a single-file viewer.

Note: there is no multi-resource state machine (INACTIVE → FETCHING_RESOURCE → RENDERING_IFRAME → READY) implemented in the new reader to simplify the implementation.

Actions that require DOM measurements before the state change can commit (ZOOM_IN, ZOOM_OUT, ROTATE_CCW) are queued as a pendingAction state rather than dispatched directly. PdfReader processes them in a useEffect, calling captureViewportAnchor() synchronously against the current DOM before passing the action to the reducer. This preserves the pre-change scroll position across layout recalculations.

Scroll position preservation (viewport anchor)

On every zoom or rotation, before the state change is committed, captureViewportAnchor() records:

• Which page sits at 30% down the viewport (SCROLLSPY_ANCHOR_RATIO)
• What fraction of that page's height the anchor point falls at (intraPageRatio)
• The pixel distance from the top of the viewport to the anchor (viewportOffset)

After the state change renders, a useLayoutEffect runs synchronously before the browser paints, recomputes the anchor page's new top and height from the updated scale/rotation, and sets scrollTop to restore the exact same content to the same screen position. The anchor is idempotent, a second capture within the same user action (e.g. rotate + refit scale) is a no-op, so both state writes resolve against the same pre-action snapshot.

CSS over Chakra

Plain CSS is the better fit for the PDF reader since it is better for performance. Chakra's runtime style injection and prop-driven re-renders add overhead that compounds across all of the page components, whereas CSS rules are static and resolved entirely by the browser. The viewer also needs control over text/annotation layer positioning (position: absolute, transform-origin, z-index stacking) that maps naturally to CSS but would be awkward to express through Chakra's prop system.

Testing

Locally replace the urls in single-resource-short.json with a larger pdf and go to /pdf/new-reader or /pdf/single-resource-short

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web-reader	Ready	Preview	Aug 11, 2026 7:46pm