diff --git a/src/PrismicRichText.tsx b/src/PrismicRichText.tsx index 78ada7a..29dee98 100644 --- a/src/PrismicRichText.tsx +++ b/src/PrismicRichText.tsx @@ -152,7 +152,22 @@ const createDefaultSerializer = ( label: ({ node, children }) => ( {children} ), - span: ({ text }) => <>{text}, + span: ({ text, key }) => { + const result: React.ReactNode[] = []; + + let i = 0; + for (const line of text.split("\n")) { + if (i > 0) { + result.push(
); + } + + result.push({line}); + + i++; + } + + return {result}; + }, }); /** diff --git a/test/PrismicRichText.test.tsx b/test/PrismicRichText.test.tsx index f389760..f3757b6 100644 --- a/test/PrismicRichText.test.tsx +++ b/test/PrismicRichText.test.tsx @@ -472,3 +472,23 @@ test("returns with label className if type is label", (t) => { t.deepEqual(actual, expected); }); + +test("renders line breaks as
", (t) => { + const field: prismicT.RichTextField = [ + { + type: prismicT.RichTextNodeType.paragraph, + text: "line 1\nline 2", + spans: [], + }, + ]; + + const actual = renderJSON(); + const expected = renderJSON( +

+ line 1
+ line 2 +

, + ); + + t.deepEqual(actual, expected); +});