From c06450766c911bd680e71130d71eff34865ec4de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Schmitz?= <jpedroschmitz@hotmail.com>
Date: Thu, 13 May 2021 11:20:32 -0300
Subject: [PATCH] fix(react): empty space not being rendered (#3)

* fix(react): empty space not being rendered

* chore: add changeset

* test: adjust test for render empty spaces
---
 .changeset/chilled-bears-drum.md              |  7 +++
 packages/react/src/RenderText.tsx             |  4 +-
 packages/react/test/RichText.test.tsx         | 48 +++++++++----------
 .../test/__snapshots__/RichText.test.tsx.snap | 24 ++++++++++
 4 files changed, 55 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/chilled-bears-drum.md

diff --git a/.changeset/chilled-bears-drum.md b/.changeset/chilled-bears-drum.md
new file mode 100644
index 0000000..e288af2
--- /dev/null
+++ b/.changeset/chilled-bears-drum.md
@@ -0,0 +1,7 @@
+---
+'@graphcms/rich-text-react-renderer': patch
+---
+
+🐛 Bug fixes
+
+- fix(react): empty space not being rendered
diff --git a/packages/react/src/RenderText.tsx b/packages/react/src/RenderText.tsx
index d14172b..cf85ab9 100644
--- a/packages/react/src/RenderText.tsx
+++ b/packages/react/src/RenderText.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NodeRendererType, Text } from '@graphcms/rich-text-types';
 
 import { elementKeys } from './defaultElements';
@@ -12,8 +12,6 @@ export function RenderText({
 }) {
   const { text, bold, italic, underline, code } = textNode;
 
-  if (!text.trim()) return <Fragment />;
-
   const Bold = renderers?.[elementKeys['bold'] as keyof NodeRendererType];
   const Italic = renderers?.[elementKeys['italic'] as keyof NodeRendererType];
   const Underline =
diff --git a/packages/react/test/RichText.test.tsx b/packages/react/test/RichText.test.tsx
index 877b8c8..7110389 100644
--- a/packages/react/test/RichText.test.tsx
+++ b/packages/react/test/RichText.test.tsx
@@ -55,31 +55,6 @@ describe('@graphcms/rich-text-react-renderer', () => {
     `);
   });
 
-  /**
-   * For now this is acceptable, but we should add a filter to remove all empty
-   * elements from the content, in the future.
-   */
-  it('should not render empty text', () => {
-    const content: RichTextContent = [
-      {
-        type: 'paragraph',
-        children: [
-          {
-            text: ' ',
-          },
-        ],
-      },
-    ];
-
-    const { container } = render(<RichText content={content} />);
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        <p />
-      </div>
-    `);
-  });
-
   it('renders content with custom elements', () => {
     const { container } = render(
       <RichText
@@ -306,4 +281,27 @@ describe('@graphcms/rich-text-react-renderer', () => {
 
     expect(container).toHaveTextContent('<Test />');
   });
+
+  it('should render empty text spaces', () => {
+    const content: RichTextContent = [
+      {
+        type: 'paragraph',
+        children: [
+          { text: 'Sweet black ' },
+          { bold: true, text: 'cap' },
+          { text: ' ' },
+          { text: 'with', underline: true },
+          { text: ' ' },
+          { text: 'embroidered', italic: true },
+          { text: ' ' },
+          { bold: true, text: 'GraphCMS' },
+          { text: ' logo.' },
+        ],
+      },
+    ];
+
+    const { container } = render(<RichText content={content} />);
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react/test/__snapshots__/RichText.test.tsx.snap b/packages/react/test/__snapshots__/RichText.test.tsx.snap
index 111e85d..b9b6744 100644
--- a/packages/react/test/__snapshots__/RichText.test.tsx.snap
+++ b/packages/react/test/__snapshots__/RichText.test.tsx.snap
@@ -85,3 +85,27 @@ exports[`@graphcms/rich-text-react-renderer renders video 1`] = `
   </video>
 </div>
 `;
+
+exports[`@graphcms/rich-text-react-renderer should render empty text spaces 1`] = `
+<div>
+  <p>
+    Sweet black 
+    <b>
+      cap
+    </b>
+     
+    <u>
+      with
+    </u>
+     
+    <i>
+      embroidered
+    </i>
+     
+    <b>
+      GraphCMS
+    </b>
+     logo.
+  </p>
+</div>
+`;