fix: copyright symbol rendering (#2496)

* fix: copyright symbol rendering

* chore: add changeset

* chore: examples minor bump

Author: edwardwolfdev

.changeset/rare-dolphins-hunt.md

@@ -0,0 +1,6 @@
+---
+'@react-pdf/examples': minor
+'@react-pdf/layout': patch
+---
+
+fix: copyright and registered symbol rendering

packages/examples/src/emoji/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Document, Page, View, Text, Font, StyleSheet } from '@react-pdf/renderer';
+
+const styles = StyleSheet.create({
+  container: {
+    height: 700,
+    marginVertical: 70,
+    marginHorizontal: '10%',
+  },
+  text: {
+    fontSize: 100,
+    textAlign: 'center',
+  },
+});
+
+Font.registerEmojiSource({
+  format: 'png',
+  url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/',
+  // url: 'https://cdn.jsdelivr.net/npm/[email protected]/img/apple/64/',
+  // withVariationSelectors: true,
+});
+
+const Emoji = () => (
+  <Document>
+    <Page>
+      <View style={styles.container}>
+        <Text style={styles.text}>😀💩👻🙈</Text>
+      </View>
+    </Page>
+  </Document>
+);
+
+export default Emoji;

packages/layout/package.json

@@ -27,7 +27,7 @@
     "@react-pdf/textkit": "^4.2.1",
     "@react-pdf/types": "^2.3.5",
     "cross-fetch": "^3.1.5",
-    "emoji-regex": "^10.2.1",
+    "emoji-regex": "^10.3.0",
     "queue": "^6.0.1",
     "yoga-layout": "^2.0.1"
   },

packages/layout/src/text/emoji.js

@@ -67,6 +67,8 @@ export const fetchEmojis = (string, source) => {
   return promises;
 };
 
+const specialCases = ['©️', '®']; // Do not treat these as emojis if emoji not present
+
 export const embedEmojis = fragments => {
   const result = [];
 
@@ -78,6 +80,8 @@ export const embedEmojis = fragments => {
     Array.from(fragment.string.matchAll(regex)).forEach(match => {
       const { index } = match;
       const emoji = match[0];
+      const isSpecialCase = specialCases.includes(emoji);
+
       const emojiSize = fragment.attributes.fontSize;
       const chunk = fragment.string.slice(lastIndex, index + match[0].length);
 
@@ -96,6 +100,8 @@ export const embedEmojis = fragments => {
             },
           },
         });
+      } else if (isSpecialCase) {
+        result.push({ string: emoji, attributes: fragment.attributes });
       } else {
         // If no emoji data, we just replace the emoji with a nodef char
         result.push({

yarn.lock

@@ -4404,10 +4404,10 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
-emoji-regex@^10.2.1:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.2.1.tgz#a41c330d957191efd3d9dfe6e1e8e1e9ab048b3f"
-  integrity sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==
+emoji-regex@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
+  integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
 
 emoji-regex@^7.0.1:
   version "7.0.3"
@@ -9278,7 +9278,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.4, semver@^7.3.5, semver@^7.0.0, semver@^7.1.1, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3:
+semver@^7.0.0, semver@^7.1.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==