Link component to render href only if href == text

[StephaneTurquay]

Goals

The goal of this feature request is to enhance the plain text output of emails. Specifically, when the href value of a component is identical to its visible text, only the href should be rendered in the plain text version. Currently, both the href and the text are included, which results in redundancy.

Background

This feature request originates from the need to include a plain text version of a reset password link within an email template. This is a common fallback practice to ensure users can still access the link in case the primary button is not rendered or clickable in certain email clients.

For example, the following JSX:

<Link href="https://example.com/reset-password?token=mysupersecuretoken">
  https://example.com/reset-password?token=mysupersecuretoken
</Link>

Currently renders in plain text as:

https://example.com/reset-password?token=mysupersecuretoken https://example.com/reset-password?token=mysupersecuretoken

This creates unnecessary duplication. In such cases, when the href and the link text are identical, the plain text output should include only the URL once.

Proposal

I propose that when the href and text of a component are identical, the plain text output should render the URL only once to avoid redundancy.

[StephaneTurquay]

@njakob actually found a solution using htmlToTextOptions as mentioned in the doc:

const plainText = await render(email.component(), {
      plainText: true,
      htmlToTextOptions: {
        selectors: [
          { selector: 'img', format: 'skip' },
          { selector: 'a', options: { hideLinkHrefIfSameAsText: true } },
        ],
      },
    });