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?