From 55ce2e4e4ca6e5a8da76ae922b9bd95a378b6265 Mon Sep 17 00:00:00 2001 From: Axel Cocat Date: Fri, 5 Jul 2024 20:13:14 +0200 Subject: [PATCH 1/5] fix: transform cr/lf characters into
--- src/Text.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/Text.tsx b/src/Text.tsx index fec4c6a..621e8c0 100644 --- a/src/Text.tsx +++ b/src/Text.tsx @@ -16,6 +16,20 @@ type Modifier = Exclude; type TextInlineProps = Omit; +const replaceLineEndings = (text: string) => { + const split = text.split(/\r?\n|\r/g); + return ( + <> + {split.map((part, idx) => ( + + {!!idx &&
} + {part} + + ))} + + ); +}; + 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 {children}; }, // By default, return the text without any wrapper to avoid useless nesting - <>{text} + replaceLineEndings(text) ); }; From 2ac9e46292390c47896be83f2fb1f4b85be0e675 Mon Sep 17 00:00:00 2001 From: Axel Cocat Date: Fri, 5 Jul 2024 20:39:52 +0200 Subject: [PATCH 2/5] style: rename function --- src/Text.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Text.tsx b/src/Text.tsx index 621e8c0..de9117f 100644 --- a/src/Text.tsx +++ b/src/Text.tsx @@ -16,7 +16,7 @@ type Modifier = Exclude; type TextInlineProps = Omit; -const replaceLineEndings = (text: string) => { +const replaceLineBreaks = (text: string) => { const split = text.split(/\r?\n|\r/g); return ( <> @@ -62,7 +62,7 @@ const Text = ({ text, ...modifiers }: TextInlineProps) => { return {children}; }, // By default, return the text without any wrapper to avoid useless nesting - replaceLineEndings(text) + replaceLineBreaks(text) ); }; From 0449a59b3042720c0bf2a152d49eb22863203ed4 Mon Sep 17 00:00:00 2001 From: Axel Cocat Date: Thu, 28 Nov 2024 00:38:09 +0100 Subject: [PATCH 3/5] style: change index check to > 0 --- src/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Text.tsx b/src/Text.tsx index de9117f..95e653d 100644 --- a/src/Text.tsx +++ b/src/Text.tsx @@ -22,7 +22,7 @@ const replaceLineBreaks = (text: string) => { <> {split.map((part, idx) => ( - {!!idx &&
} + {idx > 0 &&
} {part} ))} From c4bbcd8e75c9fd17b33d0fd4a0115bacbc847c30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Thu, 30 Jan 2025 15:22:39 +0100 Subject: [PATCH 4/5] test: add line break unit test --- tests/BlocksRenderer.test.tsx | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/tests/BlocksRenderer.test.tsx b/tests/BlocksRenderer.test.tsx index 73b01e4..1c29f9f 100644 --- a/tests/BlocksRenderer.test.tsx +++ b/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( + + ); + + const paragraph = screen.getByText(/First line/).closest('p'); + const paragraphParts = paragraph?.innerHTML?.split('
'); + expect(paragraphParts).toEqual(['First line', 'Second line']); + }); + it('renders quotes', () => { render( { 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(); }); @@ -357,7 +370,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; From 580a3f5155793dcfe1ed425391dc538f52264da3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= Date: Thu, 30 Jan 2025 15:27:04 +0100 Subject: [PATCH 5/5] fix: disable no-node-access rule --- tests/BlocksRenderer.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/BlocksRenderer.test.tsx b/tests/BlocksRenderer.test.tsx index 1c29f9f..b90f7bf 100644 --- a/tests/BlocksRenderer.test.tsx +++ b/tests/BlocksRenderer.test.tsx @@ -335,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', () => {