diff --git a/.changeset/smart-bananas-lie.md b/.changeset/smart-bananas-lie.md new file mode 100644 index 0000000000..d699dd16a7 --- /dev/null +++ b/.changeset/smart-bananas-lie.md @@ -0,0 +1,5 @@ +--- +"@react-email/render": patch +--- + +Fix unstable rendering when prettifying with the Preview component diff --git a/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap b/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap index 88ffa4bfac..46d4e12fbe 100644 --- a/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap +++ b/packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap @@ -4,3 +4,158 @@ exports[`pretty > if mso syntax does not wrap 1`] = ` " " `; + +exports[`pretty > should prettify Preview component's complex characters correctly 1`] = ` +" + + + + + + +
+ You're now ready to make live transactions with Stripe! +
+  ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ +
+
+ + + + + + + +
+ + + + + + +
+ Stripe +
+

+ Thanks for submitting your account information. + You're now ready to make live transactions with + Stripe! +

+

+ You can view your payments and a variety of other + information about your account right from your dashboard. +

+ + >View your Stripe Dashboard + > +
+

+ If you haven't finished your integration, you might + find our + docs + handy. +

+

+ Once you're ready to start accepting payments, + you'll just need to use your live + API keys + instead of your test API keys. Your account can + simultaneously be used for both test and live requests, so + you can continue testing while accepting live payments. + Check out our + tutorial about account basics. +

+

+ Finally, we've put together a + quick checklist + to ensure your website conforms to card network + standards. +

+

+ We'll be here to help you with any step along the + way. You can find answers to most questions and get in + touch with us on our + support site. +

+

+ — The Stripe team +

+
+

+ Stripe, 354 Oyster Point Blvd, South San Francisco, CA + 94080 +

+
+
+ + + +" +`; diff --git a/packages/render/src/shared/utils/pretty.spec.ts b/packages/render/src/shared/utils/pretty.spec.ts index f188d62679..e0d5ea24e7 100644 --- a/packages/render/src/shared/utils/pretty.spec.ts +++ b/packages/render/src/shared/utils/pretty.spec.ts @@ -1,6 +1,17 @@ +import { promises as fs } from 'node:fs'; +import path from 'node:path'; import { pretty } from './pretty'; describe('pretty', () => { + it("should prettify Preview component's complex characters correctly", async () => { + const stripeHTML = await fs.readFile( + path.resolve(__dirname, './stripe-email.html'), + 'utf8', + ); + + expect(await pretty(stripeHTML)).toMatchSnapshot(); + }); + test('if mso syntax does not wrap', async () => { expect( await pretty( diff --git a/packages/render/src/shared/utils/pretty.ts b/packages/render/src/shared/utils/pretty.ts index 9078dd8693..d999a84aa9 100644 --- a/packages/render/src/shared/utils/pretty.ts +++ b/packages/render/src/shared/utils/pretty.ts @@ -35,7 +35,7 @@ const defaults: Options = { }; export const pretty = (str: string, options: Options = {}) => { - return format(str, { + return format(str.replaceAll('\0', ''), { ...defaults, ...options, }); diff --git a/packages/render/src/shared/utils/stripe-email.html b/packages/render/src/shared/utils/stripe-email.html new file mode 100644 index 0000000000..6345cd7593 Binary files /dev/null and b/packages/render/src/shared/utils/stripe-email.html differ