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

dakshesh14 · 2025-08-21T18:42:58Z

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

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.

Changed content disposition as inline so that pdf is not downloaded automatically. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

Added pdf block in the editor. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

Moved drag handler logic to a hook to make component dumb. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

Made docx and pdf export mapper for the newly added pdf block Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

dakshesh14 · 2025-08-21T18:44:15Z

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.

Added pr number in changelog Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

virgile-dev · 2025-08-26T06:22:50Z

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

dakshesh14 · 2025-08-26T06:59:10Z

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

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

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

AntoLC · 2025-08-28T14:55:13Z

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts

@@ -6,6 +6,8 @@ export * from './headingPDF';
 export * from './imageDocx';
 export * from './imagePDF';
 export * from './paragraphPDF';
+export * from './pdfDocx';
+export * from './pdfPdf';


Suggested change

export * from './pdfPdf';

export * from './pdfPDF';

AntoLC · 2025-08-29T08:49:36Z

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

+            <AddFileButton
+              block={block}
+              editor={editor as FileBlockEditor}
+              buttonText="Add PDF"


It should be translatable.

AntoLC · 2025-08-29T09:09:09Z

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

+      showPreview: { default: true },
+      previewWidth: { default: undefined, type: 'number' },
+    },
+    isFileBlock: true,


To target only pdf files:

Suggested change

isFileBlock: true,

isFileBlock: true,

fileBlockAccept: ['application/pdf'],

AntoLC · 2025-08-29T09:17:16Z

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

+              block={block}
+              editor={editor as FileBlockEditor}
+              buttonText="Add PDF"
+              buttonIcon={<Icon iconName="upload" $size="18px" />}


By default the size seems to be "24px", it is the size on the others blocks, if you put lower directly on the icon, the icon will look not centered anymore.
If you want to put it at "18px", you should modify ".bn-add-file-button-icon".

Suggested change

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

buttonIcon={<Icon iconName="upload" />}

AntoLC · 2025-08-29T11:41:31Z

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

+      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}>


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

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

AntoLC · 2025-08-29T11:51:15Z

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

+                <Box
+                  $display="flex"
+                  $align="center"
+                  $justify="center"


To keep some consistency with the existing (try to include a file "Embedded File"):

Suggested change

$justify="center"

className="bn-file-name-with-icon"

AntoLC · 2025-08-29T12:02:02Z

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

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

-.Docs.1.webm

AntoLC · 2025-08-29T12:12:13Z

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/pdfPdf.tsx

+      <View
+        style={{
+          marginVertical: 10,
+          padding: 10,
+          border: '1px solid #ccc',
+          borderRadius: 4,
+          backgroundColor: '#f9f9f9',
+        }}
+      >
+        <Text style={{ fontSize: 12, fontWeight: 'bold', marginBottom: 5 }}>
+          📄 {pdfName}
+        </Text>
+        {pdfUrl && (
+          <Text style={{ fontSize: 10, color: '#666' }}>Source: {pdfUrl}</Text>
+        )}
+        <Text style={{ fontSize: 10, color: '#999', marginTop: 5 }}>
+          [PDF content cannot be embedded in exported PDF]
+        </Text>
+      </View>
+    );


If it is not supported we should just fallback on what is made already, same for "Docx":
https://github.com/TypeCellOS/BlockNote/blob/7a66f11fd8a21ce3c1ffcb87590ae44b7f877ed6/packages/xl-pdf-exporter/src/pdf/defaultSchema/blocks.tsx#L205-L218

It is on the roadmap to improve the design export.

AntoLC · 2025-08-29T12:18:42Z

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

+    },
+    aliases: ['pdf', 'document', 'embed', 'file'],
+    group,
+    icon: <Icon iconName="upload" $size="18px" />,


What about picture_as_pdf icon instead ?

AntoLC · 2025-08-29T12:43:50Z

docker/files/etc/nginx/conf.d/default.conf

+        proxy_hide_header Content-Disposition;
+        add_header Content-Disposition "inline";
+


I am not sure to understand why it is necessary, seems to work fine with the embed tag without changing to "inline" ?
Is there a browser where you get a problem maybe ?

dakshesh14 · 2025-08-29T15:36:04Z

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

dakshesh14 added 4 commits August 21, 2025 23:46

🔧(nginx) add nginx config to serve PDF inline

2d10452

Changed content disposition as inline so that pdf is not downloaded automatically. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

✨(frontend) add pdf blocks to the editor

558fbd8

Added pdf block in the editor. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

♻️(frontend) moved drag handle logic to a hook

3883912

Moved drag handler logic to a hook to make component dumb. Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

✨(frontend) add pdf block export mapping

77fadc1

Made docx and pdf export mapper for the newly added pdf block Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

✨(frontend) add pdf block to the editor

9bd2175

Added pr number in changelog Signed-off-by: dakshesh14 <65905942+dakshesh14@users.noreply.github.com>

dakshesh14 mentioned this pull request Aug 21, 2025

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

Closed

lunika requested a review from AntoLC August 22, 2025 08:34

AntoLC added frontend feature add a new feature labels Aug 28, 2025

AntoLC assigned dakshesh14 Aug 28, 2025

AntoLC approved these changes Aug 29, 2025

View reviewed changes

	isFileBlock: true,
	isFileBlock: true,
	fileBlockAccept: ['application/pdf'],

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

		proxy_hide_header Content-Disposition;
		add_header Content-Disposition "inline";

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

dakshesh14 commented Aug 21, 2025

Purpose

Proposal

Uh oh!

dakshesh14 commented Aug 21, 2025

Uh oh!

virgile-dev commented Aug 26, 2025

Uh oh!

dakshesh14 commented Aug 26, 2025

Uh oh!

AntoLC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dakshesh14 commented Aug 29, 2025

Uh oh!

Uh oh!