Customized plain text render to hide select elements

[djfarrelly]

Goals

1. When rendering the email as plain text, I want to hide certain elements in addition to images, for example links that wrap images (like a company logo).

Background

The company logo in our email template is hyperlinked to our website and rendering our emails to plaintext gives us:

https://www.inngest.com?ref=email-invite

Hi there,

You've been invited to join your team...

Email code:

<a
  href="https://www.inngest.com?ref=email-invite"
  target="_blank"
>
  <Img
    className="mx-auto"
    src={`${imageUrl}logo-on-white.png`}
    alt="Inngest"
    width={200}
    height={(200 / 220) * 90}
  />
</a>

What I want is to hide that link that wraps our logo:

Hi there,

You've been invited to join your team...

Proposal

This could be solved w/ a special classname or data attribute that can be passed which filter uses in it's rules to remove:

https://github.com/resendlabs/react-email/blob/d158ad77e3798808b4efbd322b618922da12529e/packages/render/src/render.ts#L31-L34

Suggested options

1. Use a dataPlainText={false} (or similar) attribute in renderAsPlainText
2. Use a special class __react-email-plaintext-skip to hide elements in renderAsPlainText
3. Create a new <PlainText hide={true}>{children}</PlainText> or similar component that can wrap elements to hide on plaintext renders
4. Create a new <Visible plaintext>{children}</Visible> / <Visible html>{children}</Visible> / <Visible html plaintext>{children}</Visible> that can wrap elements and the user can explicitly set if they want something to render on one or the other.

Current workaround

My current hack is to use __react-email-preview, although it's not good HTML to have multiples of the same id attr.

<a
  href="https://www.inngest.com?ref=email-invite"
  target="_blank"
  id={hiddenOnPlainTextId}
>
  <Img
    className="mx-auto"
    src={`${imageUrl}logo-on-white.png`}
    alt="Inngest"
    width={200}
    height={(200 / 220) * 90}
  />
</a>

[bliepp]

So, I'm currently looking for the exact same feature. With the code snippet you have linked it seems to be a one line addition (now in here). Just adding a class that hides the element in plainText mode. I've searched for it, but didn't find a PR. Did you open one yet?

[thena-seer]

Here is a PR: #1922

[gabrielmfern]

Here's a better idea: we can simply store the rendering options in some global variable, and return it in a hook-like function useRenderingOptions, that you can use like

import { useRenderingOptions } from '@react-email/render';

function MyEmail() {
  const renderingOptions = useRenderingOptions();
  
  if (renderingOptions.plainText) {
    return 'This is the text according to what I would prefer';
  }

  return <a href="https://react.email">This is the text according to what I would prefer</a>;
}

@thena-seer I see you made a PR with the other proposal, if you'd like to contribute an implementation of this, feel free to use this instead. I had this planned a while back from a discussion I had on Discord.

[thena-seer]

Closed the other PR and created a new PR #1926