feat: add withVariationSelectors option to registerEmojiSource (#2467)

* feat: add withVariationSelectors option to registerEmojiSource

fixed: #2466

* feat: update EmojiSource

* chore: create changeset

.changeset/pretty-flies-clean.md

@@ -0,0 +1,7 @@
+---
+'@react-pdf/layout': patch
+'@react-pdf/types': patch
+'@react-pdf/font': patch
+---
+
+feat: add withVariationSelectors option to registerEmojiSource [#2466](https://github.com/diegomura/react-pdf/issues/2466)

packages/font/src/index.js

@@ -25,8 +25,13 @@ function FontStore() {
  }
  };
 
- this.registerEmojiSource = ({ url, format = 'png', builder }) => {
- emojiSource = { url, format, builder };
+ this.registerEmojiSource = ({
+ url,
+ format = 'png',
+ builder,
+ withVariationSelectors = false,
+ }) => {
+ emojiSource = { url, format, builder, withVariationSelectors };
  };
 
  this.registerHyphenationCallback = callback => {

packages/layout/src/text/emoji.js

@@ -16,7 +16,7 @@ const reflect = promise => (...args) =>
 const makeFetchEmojiImage = () => reflect(resolveImage);
 
 /**
- * When an emoji as no color, it might still have 2 parts,
+ * When an emoji as no variations, it might still have 2 parts,
  * the canonical emoji and an empty string.
  * ex.
  * (no color) Array.from('❤️') => ["❤", "️"]
@@ -25,21 +25,21 @@ const makeFetchEmojiImage = () => reflect(resolveImage);
  * The empty string needs to be removed otherwise the generated
  * url will be incorect.
  */
-const _removeNoColor = x => x !== '️';
+const _removeVariationSelectors = x => x !== '️';
 
-const getCodePoints = string =>
+const getCodePoints = (string, withVariationSelectors) =>
  Array.from(string)
- .filter(_removeNoColor)
+ .filter(withVariationSelectors ? () => true : _removeVariationSelectors)
  .map(char => char.codePointAt(0).toString(16))
  .join('-');
 
 const buildEmojiUrl = (emoji, source) => {
- const { url, format, builder } = source;
+ const { url, format, builder, withVariationSelectors } = source;
  if (typeof builder === 'function') {
- return builder(getCodePoints(emoji));
+ return builder(getCodePoints(emoji, withVariationSelectors));
  }
 
- return `${url}${getCodePoints(emoji)}.${format}`;
+ return `${url}${getCodePoints(emoji, withVariationSelectors)}.${format}`;
 };
 
 export const fetchEmojis = (string, source) => {

packages/types/font.d.ts

@@ -49,10 +49,12 @@ interface RegisteredFont {
 interface EmojiSourceUrl {
  url: string;
  format?: string;
+ withVariationSelectors?: boolean;
 }
 
 interface EmojiSourceBuilder {
  builder: (code: string) => string;
+ withVariationSelectors?: boolean;
 }
 
 type EmojiSource = EmojiSourceUrl | EmojiSourceBuilder;