Coding period - Week 1 report

Week 1 Report for PDF Previewer

Time period: 13th - 20th June

What's done

  • Studied how Joplin's Build system works and figured out how my project layout would be.
  • Setup pdf-viewer package and added a dummy react page for demo.
  • Updated app-desktop's build system to compile and copy generated assets to correct locations.
  • Replaced <object> element with iframe (pointing to the dummy page of pdf-viewer) to display pdfs.

For now I'm maintaining all my code updates in this branch: GitHub - asrient/joplin at pdf-viewer

Please let me know when would be a good time to open a PR or a draft PR.

Work details

This week I mostly focused on setting up the project environment and the architecture. Whats happening here is that I replaced the <object> tag with an iframe which loads the custom viewer's html file, passing the file path as a query parameter. But I noticed that joplin desktop does not use any sort of bundler like webpack, all modules are imported/exported as node modules, but this will not work inside an iframe. Thus I needed to setup a separate package that will house the codebase of both versions of the pdf viewer (embedded and fullscreen) and it also uses webpack to bundle the embedded viewer as a single js file that can be attached to the html file of the previewer.
In the build phase of the desktop app, the js bundle is generated and then the generated js, html files are copied to /vendor/lib/@joplin/ directory of the desktop codebase and the ifame reference to those files.
For the fullscreen version I would not be creating another js bundle, instead I will directly import a React component from the pdf-viewer package as there would be no need to use an iframe there.

Target for next week

  • Replace the dummy react page with a basic working pdf viewer with the help of pdf.js library.
  • I'm attaching the initial wireframe I created for my gsoc proposal, I will be posting updated wireframes/prototypes as I proceed to implement it. Feel free to provide feedback.
5 Likes