Implementing more PDF Editor Features

Today, I implemented many more features for the PDF editor. For example, rotating, re-ordering and duplicating pages are now supported (thanks to pdf-lib!).

I also fixed many bugs and built a more robust solution to different devicePixelRatios. I experimented with a few different sample PDF files.

Furthermore, I isolated the PDF editor as a standalone React component and included it in the normal element view of my notes-app.
From my previous PDF annotator version (which just included the pages one after another as images in Excalidraw), I already had a data format and existing data from a few PDF files with annotations I made.

To integrate the PDF Editor nicely in my note app and migrate the old annotations into the new format, I implemented a function transforming annotations from the old system into the new.
The new format is basically just an SVG with embedded Excalidraw data.


After some testing and back and forth, this worked really well. I was happy that I opted for a conversion of the old format instead of and (intermediate aka forever) hybrid format, where some files had legacy annotations and other PDF files used the new editor.

I also worked on improving the overall style of the PDF Editor, including full support for dark mode (which inverts the PDF to produce a really dark and nice-looking experience).
I want to enable that to be configurable later on, as inverting the PDF is not always an adequate solution.

Below, I included a video showcasing some newly implemented features.

I still have plenty of to-dos on my plate: I need to implement saving of the modified PDF and the corresponding annotations. Then I should be able to use this editor for all my current PDF files in my notes.
Additionally, I want to implement an export functionality. It should be possible to download the PDF and annotations together (in a .zip?). But more importantly, it should be possible to create a combined PDF of both (in which the annotations are drawn directly (flattened) on the PDF).
I already have a function which does that for the previous PDF annotator data, but it was a bit buggy for weird PDF page sizes.


Posted

in