✨(frontend) add pdf block to the editor #1293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Merged

AntoLC merged 2 commits into suitenumerique:main from dakshesh14:feat/pdf-upload

Sep 26, 2025

+247 −64

Contributor

dakshesh14 commented Aug 21, 2025

Purpose

Added an option for users to upload and preview PDF files in the editor. This PR addresses #348. It is a duplicate of PR-795 because I couldn't reopen the PR as I lost my fork.

pdf-embed.webm

mobile-view-demo

Proposal

Added the option for users to upload and preview PDF files within the editor.

Description:

When a user types '/' on their keyboard, they can find an option called "PDF," which allows them to upload or embed PDF files.

Contributor Author

dakshesh14 commented Aug 21, 2025

Hey team,

This is a duplicate of PR-795, since I couldn’t reopen the original after losing the fork.

I’d appreciate the maintainers’ input on a few points where the implementation could be improved:

PDF preview: Should we use react-pdf or another library for better compatibility and user experience?
Nginx config change: The current approach requires modifying Nginx, which might not be acceptable. I’m open to alternatives.
Access to non-public PDFs: Currently, non-public PDFs can’t be previewed/downloaded. A solution here might also address point (2).

Looking forward to your feedback and happy to adjust the implementation accordingly.

dakshesh14 mentioned this pull request

✨(frontend) add pdf block to the editor #795

Closed

lunika requested a review from AntoLC

August 22, 2025 08:34

Collaborator

virgile-dev commented Aug 26, 2025

Hey @dakshesh14 !
great to see you were able to give it a second shot. @AntoLC is on vacation right now.
Once he is back he’ll able to review your PR.
sorry for the delay and thanks for your contribution

Contributor Author

dakshesh14 commented Aug 26, 2025

Hey @virgile-dev, happy to be back! No problem at all - I’ll wait for @AntoLC to return and review the PR. Thanks for keeping me posted.

AntoLC added frontend feature labels

AntoLC assigned dakshesh14

AntoLC approved these changes

View reviewed changes

Collaborator

AntoLC left a comment

Thank you for your contribution, it is a great feature ! 🎉

Feel free to ask me if you need more details about the comments.

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts Outdated Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Outdated Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Outdated Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Outdated

Comment on lines 47 to 62

    
                    const { wrapperRef, pdfWidth, handlePointerDown } = usePdfResizer(

                      block.props.previewWidth ?? 100,

                      handleResizeEnd,

                    );

                    return (

                      <div ref={contentRef} className="bn-file-block-content-wrapper">

                        {pdfUrl === '' ? (

                          <AddFileButton

                            block={block}

                            editor={editor as FileBlockEditor}

                            buttonText="Add PDF"

                            buttonIcon={<Icon iconName="upload" $size="18px" />}

                          />

                        ) : (

                          <FileBlockWrapper block={block} editor={editor as FileBlockEditor}>

Collaborator

AntoLC Aug 29, 2025

I think you should leverage ResizableFileBlockWrapper, it will simplify your component a lot.
ResizableFileBlockWrapper includes the resizing logic, plus it includes the part when the url is not defined yet.
You can see how to use it here: https://github.com/TypeCellOS/BlockNote/blob/7a66f11fd8a21ce3c1ffcb87590ae44b7f877ed6/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx

Collaborator

AntoLC Aug 29, 2025

Should be in another PR, but make ResizableFileBlockWrapper sizable on height as well will be great !

Contributor Author

dakshesh14 Sep 2, 2025

I used ResizableFileBlockWrapper, but it made the whole PDF block a bit laggy to resize. I think the issue is with the <embed> tag and not ResizableFileBlockWrapper, since replacing <embed> with a <div> (for testing) removed the lag. What do you suggest I do here?

Adding an option to resize height sounds good, but if that works for you, I’d prefer to handle it in a separate PR.

Contributor Author

dakshesh14 Sep 20, 2025

Decided to revert changes related to resizing to make the PR short. We can look into resizing in a separate PR along with the height resizing option.

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Outdated Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx

Collaborator

AntoLC Aug 29, 2025

Seems to have some drag and drop issue with the embed tag, not sure why.

-.Docs.1.webm

Contributor Author

dakshesh14 Sep 20, 2025

I am not sure either.

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/pdfPdf.tsx Outdated Show resolved Hide resolved

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx Outdated Show resolved Hide resolved

docker/files/etc/nginx/conf.d/default.conf Outdated Show resolved Hide resolved

Contributor Author

dakshesh14 commented Aug 29, 2025

Hi @AntoLC, thank you for your reviews! I will work on these.

AntoLC self-requested a review

September 1, 2025 09:00

dakshesh14 force-pushed the feat/pdf-upload branch 2 times, most recently from 49aa5ae to b28786a Compare

September 20, 2025 12:10

Contributor Author

dakshesh14 commented Sep 20, 2025

I’ve addressed all your review comments and also resolved the merge conflict. I decided to handle PDF resizing in a separate PR to keep this one focused and shorter.

Could you please take another look when you get a chance?

AntoLC force-pushed the feat/pdf-upload branch from b28786a to 123ca22 Compare

September 26, 2025 14:54

dakshesh14 and others added 2 commits

September 26, 2025 17:15


          ✨(frontend) add pdf blocks to the editor

d8f90c0

Added pdf block in the editor.

Signed-off-by: dakshesh14 <[email protected]>


          ♻️(frontend) add upload loader block

cc4bed6

The way we were handling the antivirus upload loader
was not optimal, it didn't work well with the pdf
embed block. We created a dedicated upload loader
block, it will replace the previous implementation,
it is more Blocknote idiomatic and will work
better with any type of upload files.

AntoLC force-pushed the feat/pdf-upload branch from 123ca22 to cc4bed6 Compare

September 26, 2025 15:16

AntoLC linked an issue

that may be closed by this pull request

✨ Add a PDF reader in docs #348

Closed

AntoLC merged commit cc4bed6 into suitenumerique:main

21 of 22 checks passed

Collaborator

AntoLC commented Sep 26, 2025

@dakshesh14 I took the freedom to finalize the PR to fit our needs (test e2e, manage loading upload with antivirus..).

Thank you very much for this contribution, it is a very nice feature 🎉 !!
If you feel motivated to try to implement a height resizing, feel free to propose a contribution.

Thanks 🙏

dakshesh14 deleted the feat/pdf-upload branch

September 26, 2025 15:40

Contributor Author

dakshesh14 commented Sep 26, 2025

I totally understand - explaining those changes can often be harder than just fixing them directly, especially since you already have the full context of the system.

I’m really glad you liked the feature! This PR ended up being bigger than I anticipated, so next time I’ll ensure that my changes are more focused and concise to make reviewing easier.

I truly appreciate your efforts and patience throughout the process.

Thanks again, @AntoLC and @virgile-dev 🙏

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

Labels

feature frontend