Skip to content

feat(xl-pdf-exporter): add custom font and fontFamily options for CJK support #2945

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

Open
nperez0111 wants to merge 1 commit into
base: main
Choose a base branch
from
+32 −1
Open

feat(xl-pdf-exporter): add custom font and fontFamily options for CJK support #2945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/xl-pdf-exporter/src/pdf/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from "./defaultSchema/index.js";
export * from "./pdfExporter.jsx";
export { Font } from "@react-pdf/renderer";
32 changes: 31 additions & 1 deletion packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,26 @@ type Options = ExporterOptions & {
* @default uses Twemoji images from jdecked/twemoji on jsDelivr CDN
*/
emojiSource: false | ReturnType<typeof Font.getEmojiSource>;
/**
* Additional fonts to register for PDF rendering.
* Each entry is passed directly to react-pdf's `Font.register()`.
*
* Useful for adding support for non-Latin scripts (e.g., CJK characters).
*
* @example
* fonts: [
* {
* family: "NotoSansSC",
* src: "https://fonts.gstatic.com/s/notosanssc/...",
* },
* ],
*/
fonts?: Parameters<typeof Font.register>[0][];
/**
* Override the default font family for the PDF document.
* @default "Inter"
*/
fontFamily?: string;
};

/**
Expand Down Expand Up @@ -243,6 +263,12 @@ export class PDFExporter<
src: font,
});

if (this.options.fonts) {
for (const f of this.options.fonts) {
Font.register(f);
}
}

Comment on lines +266 to +271

@coderabbitai coderabbitai Bot Aug 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

pnpm list `@react-pdf/renderer` `@react-pdf/font` --depth 4

files="$(fd -t f 'index.js' . 2>/dev/null | rg 'node_modules/@react-pdf/(font|renderer)/' || true)"
if [ -z "$files" ]; then
  echo "Installed react-pdf sources were not found." >&2
  exit 1
fi

printf '%s\n' "$files" | xargs -r rg -n -C 4 \
  'FontStore|fontFamilies|sources\.push|exactFit|register ='

Repository: TypeCellOS/BlockNote

Length of output: 2121

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf 'Tracked pdfExporter file:\n'
git ls-files 'packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx' 'packages/xl-pdf-exporter/package.json' || true

printf '\nFont-related usages in tracked repository files:\n'
rg -n 'Font\.register|registerFont|fontsRegistered|fonts:' packages/xl-pdf-exporter -S || true

printf '\nPackage dependency versions:\n'
cat packages/xl-pdf-exporter/package.json | sed -n '1,220p'

Repository: TypeCellOS/BlockNote

Length of output: 3938

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf 'Inspect installed `@react-pdf/font` package manifests:\n'
find node_modules -path '*`@react-pdf/font`*' -maxdepth 8 -type f \( -name package.json \) -print | sort | sed -n '1,40p'

printf '\nInspect FontStore/register implementation candidates:\n'
find node_modules -path '*`@react-pdf/font`*' -maxdepth 9 -type f \( -name index.js -o -name *.js -o -name fontStore.js -o -name fontStore.d.ts -o -name FontStore.js \) -print | sort | sed -n '1,80p' | while read -r file; do
  echo "--- $file"
  rg -n -C 8 'FontStore|register|fontFamilies|sources\.push|sources =|fontSources|resolveFont' "$file" || true
done

Repository: TypeCellOS/BlockNote

Length of output: 16111

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf 'Search for FontStore default export and imports in `@react-pdf/font`:\n'
find node_modules .pnpm -path '*`@react-pdf`+font@*' -type f \( -name index.js -o -name index.browser.js -o -name index.native.js -o -name index.umd.js \) -print | sort | while read -r file; do
  echo "--- $file"
  rg -n -C 8 'default export FontStore|new FontStore|FontStore|export const Font|export default|Font\.register' "$file" || true
done

printf '\nSearch for PDFExporter usage across repo:\n'
rg -n 'new PDFExporter|PDFExporter\(|from .*xl-pdf-exporter|xl-pdf-exporter|fonts:\s*\[' packages examples docs -S || true

Repository: TypeCellOS/BlockNote

Length of output: 3671

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf 'FontStore exported bindings across `@react-pdf/font` packages:\n'
find node_modules -path '*`@react-pdf/font`*' -maxdepth 9 -type f \( -name index.js -o -name index.browser.js -o -name index.native.js -o -name index.umd.js -o -name index.esm.js \) -print | sort | while read -r file; do
  echo "--- $file"
  sed -n '1,40p' "$file"
  rg -n 'export( .*)?(default| {\s*\{| {\s*[A-Za-z])|new FontStore|Font.register' "$file" | sed -n '1,20p'
done

printf '\nRelevant PdfExporter registration section:\n'
sed -n '200,280p' packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx

Repository: TypeCellOS/BlockNote

Length of output: 1270

🏁 Script executed:

#!/usr/bin/env bash
set -euo pipefail

printf 'FontStore exported bindings across `@react-pdf/font` packages:\n'
find node_modules -path '*`@react-pdf/font`*' -maxdepth 9 -type f \( -name index.js -o -name index.browser.js -o -name index.native.js -o -name index.umd.js -o -name index.esm.js \) -print | sort | while read -r file; do
  echo "--- $file"
  sed -n '1,100p' "$file"
  rg -n "export .*Font|new FontStore|Font\.register|fontStore" "$file" | sed -n '1,40p'
done

printf '\nRelevant PdfExporter registration section:\n'
sed -n '200,280p' packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx

Repository: TypeCellOS/BlockNote

Length of output: 7804

Keep custom font registrations isolated from the shared Font registry.

Font.register() uses one FontStore, appends sources to the same family, and resolve() can return a source registered by another exporter. If users pass overlapping families, reject duplicates, deduplicate with a stable key, namespace the family, or document that custom fonts family names must be globally unique.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx` around lines 266 - 271,
Update the custom font registration logic in the PDF exporter constructor around
this.options.fonts and Font.register so registrations cannot resolve to fonts
from other exporters. Ensure overlapping family names are rejected, deduplicated
using a stable key, or isolated through namespacing, while preserving
deterministic registration behavior; alternatively enforce and document that
custom font family names must be globally unique.

this.fontsRegistered = true;
}

Expand All @@ -266,9 +292,13 @@ export class PDFExporter<
) {
await this.registerFonts();

const pageStyle = this.options.fontFamily
? { ...this.styles.page, fontFamily: this.options.fontFamily }
: this.styles.page;

return (
<Document>
<Page dpi={100} size="A4" style={this.styles.page}>
<Page dpi={100} size="A4" style={pageStyle}>
{options.header && (
<View fixed style={this.styles.header}>
{options.header}
Expand Down
Loading