chore(preview-server): use unformatted markup for sending and preview (#2394)

Author: gabrielmfern

packages/preview-server/src/actions/render-email-by-path.tsx

@@ -17,6 +17,7 @@ import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopp
 import type { ErrorObject } from '../utils/types/error-object';
 
 export interface RenderedEmailMetadata {
+  prettyMarkup: string;
   markup: string;
   /**
    * HTML markup with `data-source-file` and `data-source-line` attributes pointing to the original
@@ -85,15 +86,21 @@ export const renderEmailByPath = async (
   const EmailComponent = Email as React.FC;
   try {
     const element = createElement(EmailComponent, previewProps);
-    const markupWithReferences = await renderWithReferences(element, {
-      pretty: true,
-    });
-    const markup = await render(element, {
-      pretty: true,
-    });
-    const plainText = await render(element, {
-      plainText: true,
-    });
+    const [markupWithReferences, prettyMarkup, markup, plainText] =
+      await Promise.all([
+        renderWithReferences(element, {
+          pretty: true,
+        }),
+        render(element, {
+          pretty: true,
+        }),
+        render(element, {
+          pretty: false,
+        }),
+        render(element, {
+          plainText: true,
+        }),
+      ]);
 
     const reactMarkup = await fs.promises.readFile(emailPath, 'utf-8');
 
@@ -112,6 +119,7 @@ export const renderEmailByPath = async (
     });
 
     const renderingResult: RenderedEmailMetadata = {
+      prettyMarkup,
       // This ensures that no null byte character ends up in the rendered
       // markup making users suspect of any issues. These null byte characters
       // only seem to happen with React 18, as it has no similar incident with React 19.

packages/preview-server/src/app/preview/[...slug]/page.tsx

@@ -71,7 +71,7 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       });
     }
     const lintingSources = getLintingSources(
-      serverEmailRenderingResult.markup,
+      serverEmailRenderingResult.prettyMarkup,
       '',
     );
     lintingRows = [];
@@ -103,7 +103,7 @@ This is most likely not an issue with the preview server. Maybe there was a typo
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        html: serverEmailRenderingResult.markup,
+        html: serverEmailRenderingResult.prettyMarkup,
         plainText: serverEmailRenderingResult.plainText,
       }),
     });

packages/preview-server/src/app/preview/[...slug]/preview.tsx

@@ -191,7 +191,7 @@ const Preview = ({ emailTitle, className, ...props }: PreviewProps) => {
                         },
                         {
                           language: 'markup',
-                          content: renderedEmailMetadata.markup,
+                          content: renderedEmailMetadata.prettyMarkup,
                         },
                         {
                           language: 'markdown',

packages/preview-server/src/components/toolbar.tsx

@@ -41,13 +41,13 @@ const ToolbarInner = ({
   serverSpamCheckingResult,
   serverCompatibilityResults,
 
-  markup,
+  prettyMarkup,
   reactMarkup,
   plainText,
   emailPath,
   emailSlug,
 }: ToolbarProps & {
-  markup: string;
+  prettyMarkup: string;
   reactMarkup: string;
   plainText: string;
   emailSlug: string;
@@ -75,7 +75,7 @@ const ToolbarInner = ({
     );
   const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
     useSpamAssassin({
-      markup,
+      markup: prettyMarkup,
       plainText,
 
       initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
@@ -85,7 +85,7 @@ const ToolbarInner = ({
     LintingRow[]
   >(`linter-${emailSlug.replaceAll('/', '-')}`);
   const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
-    markup,
+    markup: prettyMarkup,
 
     initialRows: serverLintingRows ?? cachedLintingRows,
   });
@@ -336,13 +336,13 @@ export const Toolbar = ({
     React.use(PreviewContext)!;
 
   if (renderedEmailMetadata === undefined) return null;
-  const { markup, plainText, reactMarkup } = renderedEmailMetadata;
+  const { prettyMarkup, plainText, reactMarkup } = renderedEmailMetadata;
 
   return (
     <ToolbarInner
       emailPath={emailPath}
       emailSlug={emailSlug}
-      markup={markup}
+      prettyMarkup={prettyMarkup}
       reactMarkup={reactMarkup}
       plainText={plainText}
       serverLintingRows={serverLintingRows}