Hi there,
I'm asrient and this summer I will be working on Joplin's PDF previewer under GSoC.
Introduction
Joplin's desktop app has the ability to show a preview of pdfs attached to a note, currently it uses the built-in pdf renderer of Chrome for this purpose which lacks many useful features, if you need to do something meaningful with your pdfs like annotations or read in full screen, you need to open them in an external viewer application.
Project Goals
My goal of this project would be to replace the default pdf renderer with a custom built pdf viewer. It will have multiple new pdf related features that the current one lacks.
There will be 2 versions of the viewer, one that is embedded in the note, appears just below the link, it will have some basic features and an option to expand, the expanded view will be feature rich, supporting annotations etc.
Replacing the default renderer with a custom embedded viewer using pdf.js.
Add support to link specific pages or sections of the pdf.
Preserve the last scroll position while re-rendering.
A bigger full-screen view for pdfs within the app with a thumbnail sidebar.
Support annotations editing and viewing within the app.
Add other pdf editing features to the full-screen viewer. (Optional)
A. Rotate a pdf page.
B. Rearrange pages of pdf.
C. Add/remove pdf pages.
Timeline
Phase 1
Week 1-2 (June 13 - June 27)
Implement the embedded renderer using pdf.js with some basic features. Make sure annotations are rendered properly.
Week 3-4 (June 28 - July 12)
Implement major improvement features:
• Preserve the last scroll position while re-rendering.
• Add links to a specific page or section of the pdf.
• Dynamic scrolling for lazy rendering pages.
Week 5 (July 13 - July 20)
• Build a basic full-screen viewer with some basic features. Annotation editing is not included here.
Week 6 (July 21 - July 28)
• Buffer week
• Documentation
Phase 2
Week 7-8 (July 29 - August 12)
• Add annotation editing support to full-screen viewer using pdfAnnotate library.
Week 9-10 (August 13-August 27)
• Add new settings to the preference panel related to pdf previews to add ability to customize the newly created features.
• Add other minor editing features to the full-screen viewer like rotate page, add/remove pages from pdf.
Week 11-12 (August 28 - Sept 12)
• Buffer week
• Documentation
I will be posting my progress on this thread as it happens and also discuss issues related to my project. Feel free to provide any suggestion you have.
Sorry for posting it late. This week I was bit busy with my ongoing semester exams so I was not able to be very active here.
Even so I was able to do some ground work which would be useful for the project.
Firstly I plan to create a separate package under Joplin for the custom built viewer. I plan to make it as independent as possible so that if possible it can be utilized as a standalone library.
I have looked up some existing 3rd party libraries with sufficient features, I tried to explore the codebases to get a better idea of how others are implementing them. They would act as a reference for me when I start implementing them.
1st one requires purchasing license to use as well.
There are 2 options right now:
Either fork a particular library and tweak it according to our use-cases or build a new one from scratch taking help from other libraries as a reference. I’m planning to go with the second option since it will help us build the most optimized version for our usecase. Let me know what you think should be right.
I also looked at the underlying library pdf.js (which I would be using and is also being used by all the above mentioned libraries) tested its apis to have a better understanding.
For next week
I plan to study the libraries more in detail and try to implement a small prototype for the same.
Thank you for developing this, I am looking forward to it. I really like what the Zotero team did with their new pdf reader (pdf.js). As the use case there is highly specific, it is perfect that they chose a minimalistic approach for only highlighting and comments. Something you probably shouldn't consider doing here is to store the annotations in the database like they do. On the other hand it is easier for collaboration as it is easier to keep that in sync. They use uri's to link to each annotation. I can copy these uri's anywhere (like into a joplin note), click the link and Zotero opens the according pdf page.
If I have to add/remove or rearrange sth. in a pdf what I used so far was most often the thumbnail view in preview. An option in the settings to still use the os native reader for full screen might also be a good option. Not everybody will be into a change of habits, the zotero forum is full of comments and they did provide this setting. To me for pdf's in joplin speed and function are more valuable than a ton of features. If I'd have to extensively edit/do sth. with a pdf document I'd always go back to a software that was specifically designed for that. I am also looking forward to what others think.
Good luck.
Hi, thanks for your comments, will keep them in mind. Annotations will be saved in the pdf file itself because they’re a part of the pdf specification and format. So annotations will be synced automatically.
We’re not planning to add the feature of linking a particular annotation via uri but we will have something similar, we will have a feature of linking a specific page, hope that will fulfill the usecase.
If you mean the WYSIWYG editor, it currently does not show embedded pdf previews, I think it’s more of a design choice (the maintainers can comment better on it). So I haven’t planned to add a embedded preview there yet, but even so, clicking on the url link will open the bigger pdf viewer that will be part of the project. Hopefully that will be useful.
There will still be an option to disable it and use an external viewer app if you want.
I also studied the libraries to be used in detail and was experimenting by creating a prototype of a basic viewer to learn more about the APIs.
I also looked at the implementation architecture that I would be using, I have decided to place the whole embedded viewer inside an iframe that will replace the current <object> that is being used currently. The iframe will then load the actual viewer that I will be creating. The actual viewer will be in a separate joplin package (under same repo), just like app-desktop, app-cli. It will expose a react component that the iframe's script will import.
Goals for this week
Now that the coding period has begin, I will be following my schedule for this week:
Implement the embedded renderer using pdf.js with some basic features. Make sure annotations are rendered properly.
Hi there,
This is an update about my coding period week 2 report. I have been bit busy with some college exams for past few days, I will be posting my report bit late in a few days.
Hi there, I would like to say the pdf viewer is still a bit blurry, especially when it is small. Also I think it is better if we can zoom more than 200%. Another thing is that zoom by mouse isn't supported (ctrl + wheel)
Sorry Asrient, I just realised I was on the wrong branch this whole time!
I'll check out the dev branch now and will report if I find any bugs/issues.
Thanks for all the work!
Update: Scroll position persistence does not appear to be working.
This works. Wondering if clicking on the page number to pin it would be possible.
Text select is not possible, but as I can see, that feature is under open PR status.
Dynamic resizing resizes only the width of the iframe, but not the hight, this is on 1080p screen.
Some text gets fragmented as well, reloading does not help. Example below...
Also, there are no zoom-in/out buttons or page selection.
