Joshenlim/fe 4445 explorer export as pdf option 2 (#50786)

## Context

Another take on [this
PR](https://github.com/supabase/supabase/pull/50733), decided that it's
better UX + DX to use a PDF library (`@react-pdf/renderer`) instead for
handling exporting Notebooks to PDF. The previous method using `print`
involved a lot of sparse patching in various places + had a lot of
limitations, not to mention its awkward UX to "Print".

There's a lot of code changes in this PR but it's because we're
constructing the PDF document based on the notebook's contents using
primitives from `@react-pdf/renderer` which gives us a lot more control
over the PDF's output.

PDF output will differ slightly from the Notebook UI in the browser
- Added a custom header in the report which covers the notebook name +
project name, and when its exported
- Empty markdown cells are skipped
- Query cells will show both SQL content + results (either table or
chart)
- Opting to skip syntax highlighting for SQL content (Can consider
separately)
- Results will only be included in the PDF if the notebook's been run
(Aligns with Copy as Markdown CTA)
- For table results, _all_ rows will be rendered (Aligns with Copy as
Markdown CTA)

Feel free to give it a spin! 🙂 🙏 

<img width="248" height="207" alt="image"
src="https://github.com/user-attachments/assets/e38c14ba-7ee8-40ce-99b1-fa126453bf0f"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
  - Added an “Export as PDF” option for notebooks.
- PDFs include notebook details, Markdown content, SQL queries, query
results, tables, and charts.
- Query exports show errors, empty results, row counts, and applicable
row limits.
- Export progress is displayed while the PDF is generated, and failures
are reported via notifications.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Joshen Lim authored and GitHub committed 2026-09-24 13:23:38 +08:00
1 parent f815e190be
commit 38fa40e851
10 files changed
+1289 -24

No files matched your search

+4
View File
@@ -66,6 +66,7 @@
"@next/bundle-analyzer": "16.2.3",
"@number-flow/react": "^0.3.2",
"@radix-ui/react-use-escape-keydown": "^1.1.1",
"@react-pdf/renderer": "^4.9.0",
"@sentry/nextjs": "catalog:",
"@sentry/react": "^10.27.0",
"@sentry/tanstackstart-react": "catalog:",
@@ -154,6 +155,7 @@
"react-use": "^17.5.0",
"recharts": "catalog:",
"remark-gfm": "^4.0.0",
"remark-parse": "^11.0.0",
"shared-data": "workspace:*",
"sonner": "^1.5.0",
"sql-formatter": "^15.0.0",
@@ -162,6 +164,7 @@
"tus-js-client": "^4.1.0",
"ui": "workspace:*",
"ui-patterns": "workspace:*",
"unified": "^11.0.5",
"use-debounce": "^7.0.1",
"use-stick-to-bottom": "^1.1.1",
"uuid": "^14.0.0",
@@ -188,6 +191,7 @@
"@types/file-saver": "^2.0.2",
"@types/json-logic-js": "^1.2.1",
"@types/lodash": "^4.14.172",
"@types/mdast": "^4.0.4",
"@types/mime-db": "^1.43.5",
"@types/node": "catalog:",
"@types/papaparse": "^5.3.1",