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

@@ -0,0 +1,7 @@
+---
+'@graphcms/rich-text-react-renderer': patch
+---
+
+🐛 Bug fixes
+
+- fix(react): empty space not being rendered

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 =

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();
+ });
 });

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>
+`;