Skip to content

fix(xl-pdf-exporter): fix emoji rendering for ZWJ sequences in PDF export#2871

Open
nperez0111 wants to merge 1 commit into
mainfrom
issue-1978
Open

fix(xl-pdf-exporter): fix emoji rendering for ZWJ sequences in PDF export#2871
nperez0111 wants to merge 1 commit into
mainfrom
issue-1978

Conversation

@nperez0111

@nperez0111 nperez0111 commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Summary

Fix PDF export failures for emojis that use ZWJ (Zero Width Joiner) sequences, such as 🚶‍♀️ and 🏃‍♀️.

Fixes #1978

Rationale

The PDF exporter used @react-pdf/renderer's Font.registerEmojiSource() with a simple URL pointing to the archived Twemoji 14.0.2 CDN. React-pdf strips variation selectors (U+FE0F) from emoji codepoints by default, but Twemoji filenames for ZWJ sequences require fe0f — causing 404s when fetching emoji images during export.

Changes

  • Switched from a URL-based emoji source to a builder function with withVariationSelectors: true, which correctly preserves fe0f in ZWJ sequences while stripping it for standalone emojis (matching Twemoji's naming convention).
  • Updated CDN from the archived Twemoji 14.0.2 on cdnjs to jdecked/twemoji v17.0.3 on jsDelivr — the actively maintained fork with Unicode 16 support.

Impact

  • Users who override emojiSource with their own config are unaffected.
  • Default emoji rendering switches from Twemoji 14.0.2 to 17.0.3 (same art style, broader coverage).

Testing

  • All 7 existing xl-pdf-exporter tests pass.
  • Verified CDN availability for affected emojis (🚶‍♀️, 🏃‍♀️, ❤️, ❤️‍🔥, 👨‍👩‍👧) with both the old and new URL construction logic.

Checklist

  • Code follows the project's coding standards.
  • Unit tests covering the new feature have been added.
  • All existing tests pass.
  • The documentation has been updated to reflect the new feature

Summary by CodeRabbit

  • Bug Fixes
    • Updated the default emoji image source used in PDF exports to a newer Twemoji CDN-backed setup.
    • Improved emoji URL handling so exported PDFs render emoji more consistently, including support for variation selectors.

…port

Switch from archived Twemoji 14.0.2 CDN to jdecked/twemoji v17.0.3 and
use a builder function that correctly handles variation selectors (fe0f)
in ZWJ emoji sequences like 🚶‍♀️ and 🏃‍♀️.

Fixes #1978
@vercel

vercel Bot commented Jun 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
blocknote Ready Ready Preview Jun 29, 2026 7:54am
blocknote-website Ready Ready Preview Jun 29, 2026 7:54am

Request Review

@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

The default emojiSource in pdfExporter.tsx is changed from a static Cloudflare-based Twemoji URL to a builder function that generates per-emoji 72×72 PNG URLs from the jsDelivr CDN (twemoji@v17.0.3), stripping the -fe0f suffix only when the code does not contain 200d, and enabling withVariationSelectors.

PDF Exporter Emoji Source

Layer / File(s) Summary
emojiSource default: jsDelivr builder with fe0f handling
packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx
JSDoc @default updated to reference jsDelivr CDN; constructor default replaced with a builder(code) function generating twemoji@v17.0.3 72×72 PNG URLs, stripping -fe0f when 200d is absent, and setting withVariationSelectors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Poem

🐇 A twemoji quest on jsDelivr's lane,
No more broken emojis causing pain!
Strip the -fe0f, but mind the 200d,
Each little face now loads as it should.
Hop hop, the PDF exporter's okay! 🎉

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main fix: emoji rendering for ZWJ sequences in PDF export.
Description check ✅ Passed The PR description is mostly complete and covers the required template sections.
Linked Issues check ✅ Passed The change addresses #1978 by fixing Twemoji URL generation for ZWJ emojis and updating the default emoji source.
Out of Scope Changes check ✅ Passed No unrelated changes are indicated; the edits stay focused on emoji source handling and its documentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch issue-1978

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@pkg-pr-new

pkg-pr-new Bot commented Jun 29, 2026

Copy link
Copy Markdown

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2871

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2871

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2871

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2871

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2871

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2871

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2871

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2871

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2871

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2871

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2871

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2871

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2871

commit: 6462cba

@github-actions

github-actions Bot commented Jun 29, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://TypeCellOS.github.io/BlockNote/pr-preview/pr-2871/

Built to branch gh-pages at 2026-06-29 07:56 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@coderabbitai coderabbitai Bot left a comment

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.

🧹 Nitpick comments (1)
packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx (1)

100-108: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Please add regression coverage for this normalization branch.

The 200d/fe0f rewrite is easy to regress. Add explicit cases in packages/xl-pdf-exporter/src/pdf/pdfExporter.test.tsx for at least one ZWJ sequence and one standalone variation-selector emoji so future CDN/version bumps do not silently reintroduce 404s.

🤖 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 100 - 108, Add
regression tests for the Twemoji normalization logic in pdfExporter.tsx. Update
pdfExporter.test.tsx to cover both branches of the builder function: one ZWJ
sequence containing 200d should keep fe0f intact, and one standalone emoji with
fe0f should strip it before building the CDN URL. Use the existing pdfExporter
builder behavior as the target so future CDN or version changes do not break
this normalization silently.
🤖 Prompt for all review comments with 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.

Nitpick comments:
In `@packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx`:
- Around line 100-108: Add regression tests for the Twemoji normalization logic
in pdfExporter.tsx. Update pdfExporter.test.tsx to cover both branches of the
builder function: one ZWJ sequence containing 200d should keep fe0f intact, and
one standalone emoji with fe0f should strip it before building the CDN URL. Use
the existing pdfExporter builder behavior as the target so future CDN or version
changes do not break this normalization silently.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a247c4e4-f9d1-4101-8147-5d0b0ba9a7a3

📥 Commits

Reviewing files that changed from the base of the PR and between 47f5a3b and 6462cba.

📒 Files selected for processing (1)
  • packages/xl-pdf-exporter/src/pdf/pdfExporter.tsx

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Some Emojis not supported by Twemoji

1 participant