Emoji not rendering correctly depending on emoji-source

[JaeSeoKim]

Describe the bug

Variation Selectors (U+FE00..U+FE0F) were required depending on the emoji-source, causing emoji to not render correctly.

To Reproduce

example with twemoji

example with npm:emoji-datasource

Expected behavior

// https://github.com/diegomura/react-pdf/blob/9f7a2dffc66294f64ab39b3de68564e0a2e77ed8/packages/layout/src/text/emoji.js#L18-L35

/**
 * When an emoji as no color, it might still have 2 parts,
 * the canonical emoji and an empty string.
 * ex.
 *   (no color) Array.from('❤️') => ["❤", "️"]
 *   (w/ color) Array.from('👍🏿') => ["👍", "🏿"]
 *
 * The empty string needs to be removed otherwise the generated
 * url will be incorect.
 */
const _removeNoColor = x => x !== '️';

const getCodePoints = string =>
  Array.from(string)
    .filter(_removeNoColor)
    .map(char => char.codePointAt(0).toString(16))
    .join('-');

Since the Variation Selectors are being removed via the _removeNoColor function, we need to get additional options for the conditions under which the filter works.

for example

Font.registerEmojiSource({
  format: "png",
  url: "https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/",
  withVariationSelectors: true,
});

Screenshots

Error screenshot

fixed with a simple patch Screenshot

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome 120.0.6099.71
• React-pdf version:
  • "@react-pdf/renderer": "^3.1.14"