diff --git a/packages/react/src/format.test.tsx b/packages/react/src/format.test.tsx
index 1b4374b5d..6a9ff7e6f 100644
--- a/packages/react/src/format.test.tsx
+++ b/packages/react/src/format.test.tsx
@@ -32,6 +32,20 @@ describe("formatElements", function () {
).toEqual('About')
})
+ it("should preserve newlines", function () {
+ expect(html(formatElements("<0>Inn\ner0>", { 0: }))).toEqual(
+ "Inn\ner"
+ )
+
+ expect(
+ html(formatElements("Before <0>Inn\r\ner0> After", { 0: }))
+ ).toEqual("Before Inn\r\ner After")
+
+ expect(
+ html(formatElements("<0>Ab\rout0>", { 0: }))
+ ).toEqual('Ab\rout')
+ })
+
it("should preserve named element props", function () {
expect(
html(
@@ -69,7 +83,7 @@ describe("formatElements", function () {
)
)
).toEqual(
- 'Before Inside Nested Between
After'
+ 'Before \nInside \nNested\n Between
After'
)
})
diff --git a/packages/react/src/format.ts b/packages/react/src/format.ts
index a341faa83..d4f2eeac5 100644
--- a/packages/react/src/format.ts
+++ b/packages/react/src/format.ts
@@ -1,8 +1,7 @@
import React from "react"
// match paired and unpaired tags
-const tagRe = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/
-const nlRe = /(?:\r\n|\r|\n)/g
+const tagRe = /<([a-zA-Z0-9]+)>([\s\S]*?)<\/\1>|<([a-zA-Z0-9]+)\/>/
// For HTML, certain tags should omit their close tag. We keep a whitelist for
// those special-case tags.
@@ -37,7 +36,7 @@ function formatElements(
elements: { [key: string]: React.ReactElement } = {}
): string | React.ReactElement | Array {
const uniqueId = makeCounter(0, "$lingui$")
- const parts = value.replace(nlRe, "").split(tagRe)
+ const parts = value.split(tagRe)
// no inline elements, return
if (parts.length === 1) return value