PDF reader/viewer extension

[ianhewubs]

User Story
As a translator, I want to be able to view a PDF of reference material in Paratext so that I don't need to alt-tab to another application.

Description
A lightweight PDF viewer which allows the user to open a PDF from their file system and display in its own tab.
Minimum requirements:

• Navigation according to table of contents.
• Zoom.
• Find.
• Text selection for copy operation.
• Remember location in document for next session.

Weigh up value of this vs. just using a PDF viewer application such as SumatraPDF (preferred viewer for PTXprint) in another window.
This could be a low cost useful extension to build for richer early demos.

[tjcouch-sil]

This may be reasonably easy to do if the following npm package satisfies needs for the PDF viewer:

• Package: react-pdf - npm
• Demo: React-PDF

Accessing the file system to get the right PDF:
File System API - Web APIs | MDN
- HTML: HyperText Markup Language | MDN
Using files from web applications - Web APIs | MDN

[ianhewubs]

@tjcouch-sil On the linked demo page, the navigation only seems to provide for -/+1 page on hover at the bottom of the page. Many PDFs have an embedded navigation structure. Would the package you linked provide meaningful navigation UI?

A Google on the topic took me here:
https://developer.adobe.com/document-services/apis/pdf-embed/

https://acrobatservices.adobe.com/view-sdk-demo/index.html#/view/FULL_WINDOW/Bodea%20Brochure.pdf
The demo above provides more detailed navigation (on the right side, icon showing four squares), but it is via thumbnail views of each page. It's not clear whether a document which contains chapters and headings would offer that, but it doesn't seem likely. Still it's better than -/+1 page.

[tjcouch-sil]

Recently saw this recommended as well https://www.npmjs.com/package/@pdfslick/core

[ianhewubs]

Recently saw this recommended as well https://www.npmjs.com/package/@pdfslick/core

Nice find, TJ, this looks promising. It shows "document outline" (navigation) in the "Full viewer app" example.