Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extra line-break displayed on the final HTML render #1847

Open
roderickhsiao opened this issue Dec 29, 2024 · 1 comment
Open

Extra line-break displayed on the final HTML render #1847

roderickhsiao opened this issue Dec 29, 2024 · 1 comment
Labels
Package: @react-email/render Type: Bug Confirmed bug

Comments

@roderickhsiao
Copy link
Contributor

Describe the Bug

When input a long string in the markup, there are extra line break being output.
We can reproduced in the official document

It works fine if there is no CSS white-space setting, but if we want to honor the original string /n line break,
the paragraph will looks mal-formated

Extra line break

Screenshot 2024-12-28 at 5 59 29 PM

Original string

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import * as React from "react";

interface LinearLoginCodeEmailProps {
  validationCode?: string;
}

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "";

export const LinearLoginCodeEmail = ({
  validationCode,
}: LinearLoginCodeEmailProps) => (
  <Html>
    <Head />
    <Preview>Your login code for Linear</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img
          src={`${baseUrl}/static/linear-logo.png`}
          width="42"
          height="42"
          alt="Linear"
          style={logo}
        />
        <Heading style={heading}>Your login code for Linear</Heading>
        <Section style={buttonContainer}>
          <Button style={button} href="https://linear.app">
            Login to Linear
          </Button>
        </Section>
        <Text style={paragraph}>
          This link and code will only be valid for the next 5 minutes. If the
          link does not work, you can use the login verification code directly:
        </Text>
        <code style={code}>{validationCode}</code>
        <Hr style={hr} />
        <Link href="https://linear.app" style={reportLink}>
          Linear
        </Link>
      </Container>
    </Body>
  </Html>
);
without CSS whitespace with CSS whitespace
Screenshot 2024-12-28 at 6 03 47 PM Screenshot 2024-12-28 at 6 03 37 PM

Version

We were recently upgrade to the latest version and started to notice the issue.

[email protected]
@react-email/[email protected]

The issue started to show up at @react-email/[email protected]

Fixed on 0.028 works,

wondering if this is the same root cause as
#1813

Thnaks

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://demo.react.email/preview/magic-links/linear-login-code?view=desktop&lang=jsx

To Reproduce

  1. input a long pargraph
  2. Add white-space: pre-line
  3. Extra line break cause the paragraph not fully expanded

Expected Behavior

Original strings should be honored and no extra line break.

What's your node version? (if relevant)

No response
@roderickhsiao roderickhsiao added the Type: Bug Confirmed bug label Dec 29, 2024
@kevinlandsberg
Copy link

Thanks @roderickhsiao, experienced similar issue today but with [email protected] and @react-components0.0.32

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: @react-email/render Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@roderickhsiao @kevinlandsberg @gabrielmfern