fix(email): preserve word wrap and line breaks in email body (#2139) (#2159)

packages/email/template-components/template-custom-message-body.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export type TemplateCustomMessageBodyProps = {
+  text?: string;
+};
+
+export const TemplateCustomMessageBody = ({ text }: TemplateCustomMessageBodyProps) => {
+  if (!text) {
+    return null;
+  }
+
+  const normalized = text
+    .trim()
+    .replace(/\r\n?/g, '\n')
+    .replace(/\n\s*\n+/g, '\n\n')
+    .replace(/\n{2,}/g, '\n\n');
+
+  const paragraphs = normalized.split('\n\n');
+
+  return paragraphs.map((paragraph, i) => (
+    <p
+      key={`p-${i}`}
+      className="whitespace-pre-line break-words font-sans text-base text-slate-400"
+    >
+      {paragraph.split('\n').map((line, j) => (
+        <React.Fragment key={`line-${i}-${j}`}>
+          {j > 0 && <br />}
+          {line}
+        </React.Fragment>
+      ))}
+    </p>
+  ));
+};
+
+export default TemplateCustomMessageBody;

packages/email/templates/document-invite.tsx

@@ -8,6 +8,7 @@ import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-
 
 import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from '../components';
 import { useBranding } from '../providers/branding';
+import { TemplateCustomMessageBody } from '../template-components/template-custom-message-body';
 import type { TemplateDocumentInviteProps } from '../template-components/template-document-invite';
 import { TemplateDocumentInvite } from '../template-components/template-document-invite';
 import { TemplateFooter } from '../template-components/template-footer';
@@ -105,7 +106,7 @@ export const DocumentInviteEmailTemplate = ({
 
               <Text className="mt-2 text-base text-slate-400">
                 {customBody ? (
-                  <pre className="font-sans text-base text-slate-400">{customBody}</pre>
+                  <TemplateCustomMessageBody text={customBody} />
                 ) : (
                   <Trans>
                     {inviterName} has invited you to {action} the document "{documentName}".