Fix text inside links (#2146)

* fix text inside links

* add changeset

.changeset/curvy-doors-burn.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/renderer': patch
+---
+
+render text inside links

packages/renderer/src/renderer.js

@@ -12,9 +12,11 @@ import propsEqual from './utils/propsEqual';
 const emptyObject = {};
 
 const appendChild = (parentInstance, child) => {
+  const isParentLink = parentInstance.type === 'LINK';
   const isParentText = parentInstance.type === 'TEXT';
   const isChildTextInstance = child.type === 'TEXT_INSTANCE';
-  const isOrphanTextInstance = isChildTextInstance && !isParentText;
+  const isOrphanTextInstance =
+    isChildTextInstance && !isParentText && !isParentLink;
 
   // Ignore orphan text instances.
   // Caused by cases such as <>{name && <Text>{name}</Text>}</>

packages/renderer/tests/link.test.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Document, Page, Link, Font, Text } from '..';
+import renderToImage from './renderComponent';
+
+// pdf.js does not render default fonts in node and I use Open Sans (:
+Font.register({
+  family: 'Open Sans',
+  src: 'https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf',
+});
+
+const mount = async children => {
+  const image = await renderToImage(
+    <Document>
+      <Page size={[50, 25]}>{children}</Page>
+    </Document>,
+  );
+
+  return image;
+};
+
+describe('Link', () => {
+  test('should render text', async () => {
+    const image = await mount(
+      <Link
+        href="https://github.com/wojtekmaj/react-pdf"
+        style={{ fontFamily: 'Open Sans' }}
+      >
+        hello
+      </Link>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('should render TEXT component', async () => {
+    const image = await mount(
+      <Link
+        href="https://github.com/wojtekmaj/react-pdf"
+        style={{ fontFamily: 'Open Sans', textDecoration: 'none' }}
+      >
+        he
+        <Text style={{ textDecoration: 'underline' }}>llo</Text>
+      </Link>,
+    );
+
+    expect(image).toMatchImageSnapshot();
+  });
+});