fix: handle line breaks (#42)

* fix: transform cr/lf characters into <br />

* style: rename function

* style: change index check to > 0

* test: add line break unit test

* fix: disable no-node-access rule

---------

Co-authored-by: Rémi de Juvigny <remi.dejuvigny@strapi.io>

Author: r-o-b-o-t-o

src/Text.tsx

@@ -16,6 +16,20 @@ type Modifier = Exclude<keyof TextInlineNode, 'type' | 'text'>;
 
 type TextInlineProps = Omit<TextInlineNode, 'type'>;
 
+const replaceLineBreaks = (text: string) => {
+  const split = text.split(/\r?\n|\r/g);
+  return (
+    <>
+      {split.map((part, idx) => (
+        <React.Fragment key={idx}>
+          {idx > 0 && <br />}
+          {part}
+        </React.Fragment>
+      ))}
+    </>
+  );
+};
+
 const Text = ({ text, ...modifiers }: TextInlineProps) => {
   // Get matching React component from the context
   const { modifiers: modifierComponents, missingModifierTypes } = useComponentsContext();
@@ -48,7 +62,7 @@ const Text = ({ text, ...modifiers }: TextInlineProps) => {
       return <ModifierComponent>{children}</ModifierComponent>;
     },
     // By default, return the text without any wrapper to avoid useless nesting
-    <>{text}</>
+    replaceLineBreaks(text)
   );
 };
 

tests/BlocksRenderer.test.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/no-node-access */
+
 import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
@@ -61,7 +63,6 @@ describe('BlocksRenderer', () => {
       expect(boldTag[1]).toHaveTextContent(/and bold underlines/i);
 
       // Should still fallback to default components
-      // eslint-disable-next-line testing-library/no-node-access
       const underlineTag = document.querySelector('u');
       expect(underlineTag).toHaveTextContent(/and bold underlines/i);
     });
@@ -83,7 +84,6 @@ describe('BlocksRenderer', () => {
         />
       );
 
-      // eslint-disable-next-line testing-library/no-node-access
       const paragraph = screen.getByText('A paragraph').closest('p');
       expect(paragraph).toHaveTextContent('A paragraph with bold');
     });
@@ -109,12 +109,28 @@ describe('BlocksRenderer', () => {
         />
       );
 
-      // 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 paragraphs with line breaks', () => {
+      render(
+        <BlocksRenderer
+          content={[
+            {
+              type: 'paragraph',
+              children: [{ type: 'text', text: 'First line\nSecond line' }],
+            },
+          ]}
+        />
+      );
+
+      const paragraph = screen.getByText(/First line/).closest('p');
+      const paragraphParts = paragraph?.innerHTML?.split('<br>');
+      expect(paragraphParts).toEqual(['First line', 'Second line']);
+    });
+
     it('renders quotes', () => {
       render(
         <BlocksRenderer
@@ -129,7 +145,6 @@ describe('BlocksRenderer', () => {
 
       const quote = screen.getByText('A quote');
       expect(quote).toBeInTheDocument();
-      // eslint-disable-next-line testing-library/no-node-access
       expect(quote.closest('blockquote')).toBeInTheDocument();
     });
 
@@ -142,9 +157,7 @@ describe('BlocksRenderer', () => {
 
       const code = screen.getByText('my code');
       expect(code).toBeInTheDocument();
-      // eslint-disable-next-line testing-library/no-node-access
       expect(code.closest('code')).toBeInTheDocument();
-      // eslint-disable-next-line testing-library/no-node-access
       expect(code.closest('pre')).toBeInTheDocument();
     });
 
@@ -322,13 +335,11 @@ describe('BlocksRenderer', () => {
       const text = screen.getByText('My text');
       expect(text).toBeInTheDocument();
 
-      /* eslint-disable testing-library/no-node-access */
       expect(text.closest('strong')).toBeInTheDocument();
       expect(text.closest('em')).toBeInTheDocument();
       expect(text.closest('u')).toBeInTheDocument();
       expect(text.closest('del')).toBeInTheDocument();
       expect(text.closest('code')).toBeInTheDocument();
-      /* eslint-enable testing-library/no-node-access */
     });
 
     it('ignores disabled or unknown modifiers', () => {
@@ -357,7 +368,6 @@ describe('BlocksRenderer', () => {
       const text = screen.getByText('My text');
       expect(text).toBeInTheDocument();
 
-      // eslint-disable-next-line testing-library/no-node-access
       expect(text.closest('strong')).not.toBeInTheDocument();
 
       console.warn = originalWarn;