resend · gabrielmfern · Jan 27, 2025 · Jan 15, 2025 · Jan 16, 2025 · Dec 9, 2024
diff --git a/.changeset/smart-bananas-lie.md 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
@@ -4,3 +4,158 @@ exports[`pretty > if mso syntax does not wrap 1`] = `
 "<!--[if mso]><i style="mso-font-width:100%;mso-text-raise:12" hidden>&#8202;&#8202;</i><![endif]-->
 "
 `;
+
+exports[`pretty > should prettify Preview component's complex characters correctly 1`] = `
+"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!--$-->
+<html dir="ltr" lang="en">
+  <head>
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+    <meta name="x-apple-disable-message-reformatting" />
+  </head>
+  <div
+    style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">
+    You&#x27;re now ready to make live transactions with Stripe!
+    <div>
+       ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏ ‌‍‎‏
+    </div>
+  </div>
+  <body
+    style='background-color:#f6f9fc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif'>
+    <table
+      align="center"
+      width="100%"
+      border="0"
+      cellpadding="0"
+      cellspacing="0"
+      role="presentation"
+      style="max-width:37.5em;background-color:#ffffff;margin:0 auto;padding:20px 0 48px;margin-bottom:64px">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <table
+              align="center"
+              width="100%"
+              border="0"
+              cellpadding="0"
+              cellspacing="0"
+              role="presentation"
+              style="padding:0 48px">
+              <tbody>
+                <tr>
+                  <td>
+                    <img
+                      alt="Stripe"
+                      height="21"
+                      src="/static/stripe-logo.png"
+                      style="display:block;outline:none;border:none;text-decoration:none"
+                      width="49" />
+                    <hr
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      Thanks for submitting your account information.
+                      You&#x27;re now ready to make live transactions with
+                      Stripe!
+                    </p>
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      You can view your payments and a variety of other
+                      information about your account right from your dashboard.
+                    </p>
+                    <a
+                      href="https://dashboard.stripe.com/login"
+                      style="line-height:100%;text-decoration:none;display:block;max-width:100%;mso-padding-alt:0px;background-color:#656ee8;border-radius:5px;color:#fff;font-size:16px;font-weight:bold;text-align:center;width:100%;padding:10px 10px 10px 10px"
+                      target="_blank"
+                      ><span
+                        <!--[if mso]><i style="mso-font-width:500%;mso-text-raise:15" hidden>&#8202;</i><![endif]-->
+                      ><span
+                        style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:7.5px"
+                        >View your Stripe Dashboard</span
+                      ><span
+                        <!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8203;</i><![endif]-->
+                      ></a
+                    >
+                    <hr
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      If you haven&#x27;t finished your integration, you might
+                      find our<!-- -->
+                      <a
+                        href="https://stripe.com/docs"
+                        style="color:#556cd6;text-decoration-line:none"
+                        target="_blank"
+                        >docs</a
+                      >
+                      <!-- -->handy.
+                    </p>
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      Once you&#x27;re ready to start accepting payments,
+                      you&#x27;ll just need to use your live<!-- -->
+                      <a
+                        href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
+                        style="color:#556cd6;text-decoration-line:none"
+                        target="_blank"
+                        >API keys</a
+                      >
+                      <!-- -->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<!-- -->
+                      <a
+                        href="https://stripe.com/docs/dashboard"
+                        style="color:#556cd6;text-decoration-line:none"
+                        target="_blank"
+                        >tutorial about account basics</a
+                      >.
+                    </p>
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      Finally, we&#x27;ve put together a<!-- -->
+                      <a
+                        href="https://stripe.com/docs/checklist/website"
+                        style="color:#556cd6;text-decoration-line:none"
+                        target="_blank"
+                        >quick checklist</a
+                      >
+                      <!-- -->to ensure your website conforms to card network
+                      standards.
+                    </p>
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      We&#x27;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<!-- -->
+                      <a
+                        href="https://support.stripe.com/"
+                        style="color:#556cd6;text-decoration-line:none"
+                        target="_blank"
+                        >support site</a
+                      >.
+                    </p>
+                    <p
+                      style="font-size:16px;line-height:24px;margin:16px 0;color:#525f7f;text-align:left">
+                      — The Stripe team
+                    </p>
+                    <hr
+                      style="width:100%;border:none;border-top:1px solid #eaeaea;border-color:#e6ebf1;margin:20px 0" />
+                    <p
+                      style="font-size:12px;line-height:16px;margin:16px 0;color:#8898aa">
+                      Stripe, 354 Oyster Point Blvd, South San Francisco, CA
+                      94080
+                    </p>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+<!--/$-->
+"
+`;
diff --git 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
@@ -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