Merge pull request #25 from strapi/fix/empty-paragraphs

Fix: render empty paragraph as br elements

Author: simotae14

src/Block.tsx

@@ -65,6 +65,16 @@ const Block = ({ content }: BlockProps) => {
     return <BlockComponent {...props} />;
   }
 
+  // Handle empty paragraphs separately as they should render a <br> tag
+  if (
+    type === 'paragraph' &&
+    childrenNodes.length === 1 &&
+    childrenNodes[0].type === 'text' &&
+    childrenNodes[0].text === ''
+  ) {
+    return <br />;
+  }
+
   const augmentedProps = augmentProps(content);
 
   return (

tests/BlocksRenderer.test.tsx

@@ -88,6 +88,33 @@ describe('BlocksRenderer', () => {
       expect(paragraph).toHaveTextContent('A paragraph with bold');
     });
 
+    it('renders a br when there is an empty paragraph', () => {
+      render(
+        <BlocksRenderer
+          content={[
+            {
+              type: 'paragraph',
+              children: [{ type: 'text', text: 'First paragraph' }],
+            },
+            // empty paragraph
+            {
+              type: 'paragraph',
+              children: [{ type: 'text', text: '' }],
+            },
+            {
+              type: 'paragraph',
+              children: [{ type: 'text', text: 'Second paragraph' }],
+            },
+          ]}
+        />
+      );
+
+      // eslint-disable-next-line testing-library/no-node-access
+      const brElement = screen.getByText('First paragraph').nextElementSibling;
+      expect(brElement).toBeInTheDocument();
+      expect(brElement?.tagName).toBe('BR');
+    });
+
     it('renders quotes', () => {
       render(
         <BlocksRenderer