fix: render Rich Text line breaks as <br />

src/PrismicRichText.tsx

@@ -152,7 +152,22 @@ const createDefaultSerializer = (
 		label: ({ node, children }) => (
 			<span className={node.data.label}>{children}</span>
 		),
-		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(<br key={`${i}__break`} />);
+				}
+
+				result.push(<React.Fragment key={`${i}__line`}>{line}</React.Fragment>);
+
+				i++;
+			}
+
+			return <React.Fragment key={key}>{result}</React.Fragment>;
+		},
 	});
 
 /**

test/PrismicRichText.test.tsx

@@ -472,3 +472,23 @@ test("returns <span /> with label className if type is label", (t) => {
 
 	t.deepEqual(actual, expected);
 });
+
+test("renders line breaks as <br />", (t) => {
+	const field: prismicT.RichTextField = [
+		{
+			type: prismicT.RichTextNodeType.paragraph,
+			text: "line 1\nline 2",
+			spans: [],
+		},
+	];
+
+	const actual = renderJSON(<PrismicRichText field={field} />);
+	const expected = renderJSON(
+		<p>
+			line 1<br />
+			line 2
+		</p>,
+	);
+
+	t.deepEqual(actual, expected);
+});