Skip to content

Instantly share code, notes, and snippets.

@asrient
Last active December 12, 2023 04:23
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save asrient/2fc74ef5279251fafe6568fd9c8b9b8a to your computer and use it in GitHub Desktop.
Save asrient/2fc74ef5279251fafe6568fd9c8b9b8a to your computer and use it in GitHub Desktop.

Improve PDF previewer of Joplin

The aim of this project is to replace the built-in PDF renderer with a new 3rd party library and add multiple new pdf related features and improvements to the app.

Embedded viewer

mini-viewer

Full screen viewer

full-screen-viewer

What was done

We replaced the built-in pdf viewer of chrome with a custom built one. We used pdf.js as our main rendering library and built around it 2 versions of the pdf-viewer one meant to be embedded within the note view (replacement of the existing one) and another full-screen viewer (new) for better readibility and more features. Both of them are complete react apps that are embedded in the main app using iframes.

New features

  • Annotation editing
  • Scroll progress persistence
  • Link a particular page number
  • Theming support
  • Open in external app from viewer
  • Open same page in full-screen
  • Scroll locking to avoid unintentional scrolling
  • Copy/select text

Regression features

  • Zoom in/out
  • Thumbnail view
  • Go to a page input box
  • current page / total pages indicator
  • download
  • print
  • show annotations

Features not existing

  • 2 Page view
  • Rotate page

A detailed and updated comparison between all the viewers can be found in this post.

What is left to do

Almost all the vital and proposed features have been worked on. But there are a few minor improvements and features that I would like to work on after gsoc ends.

  • Search in pdf.
  • Create 2 seperate build targets for the two viewers and look into webpack code-splitting for better performance.
  • Support for password encrypted pdfs (shouldn't be very hard to integrate since pdf.js already has support for it).

Challenges and learning

  • Time management proved to be a big challenge for me, tossing between college exams, deadlines and GSoC.
  • New to hooks api of react, I initially found it bit challenging to get it right, but gradually I have gotten a better grip on it.
  • Communication skills - being bit of an introvert I often tend to interact less.
  • Since most of my PRs focused on same set of files on average, opening multiple PRs at the same time proved to be difficult.

Weekly progress links

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment