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\ner", { 0: }))).toEqual( + "Inn\ner" + ) + + expect( + html(formatElements("Before <0>Inn\r\ner After", { 0: })) + ).toEqual("Before Inn\r\ner After") + + expect( + html(formatElements("<0>Ab\rout", { 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