render plainText with <Heading> transform in uppercase

[maximekl]

Hello,

I have a problem with with the rendering in plainText.
I use keycloakify-emails from @timofei-iatsenko , and we need to have variable that will be evaluated at runtine.

My problem is when i create my template i use variable ${code} that will be evaluated later.

My code :

<Text>Votre code d'authentification est le suivant :</Text>
  {exp("code")}
  <Heading as="h2" style={{color: "#010c0f"}}><strong>{exp("code")}</strong></Heading>
<Text>Entrez ce code d'authentification pour valider votre demande.</Text>

And what is returned :

Votre code d'authentification est le suivant :

${code}

${CODE}

Entrez ce code d'authentification pour valider votre demande.

What can i do for the {exp("code")} to stay in lowercase since html-to-text uppercaseHeadings is removed ?

[timofei-iatsenko]

Try to use <Raw /> component from jsx-emails:

<Heading as="h2" style={{color: "#010c0f"}}><strong><Raw>{exp("code")}</Raw></strong></Heading>

[maximekl]

Hey, thx for the fast reply,

<Text>Votre code d'authentification est le suivant :</Text>
  {exp("code")}
  <Heading as="h2" style={{color: "#010c0f"}}><strong><Raw content={exp("code")}/></strong></Heading>
<Text>Entrez ce code d'authentification pour valider votre demande.</Text>

still give me :

Votre code d'authentification est le suivant :

${code}

${CODE}

Entrez ce code d'authentification pour valider votre demande.

But i can use directly some html-to-text options selectors :

const selectorsOptions = [
    { selector: 'h2', options: { uppercase: false } },
    { selector: 'h3', options: { uppercase: false } }
  ]
  if (props.plainText) {
    return await render(<Template {...previewProps} />, { plainText: { selectors: selectorsOptions }});
  }

give me :

Votre code d'authentification est le suivant :

${code}

${code}

Entrez ce code d'authentification pour valider votre demande.

Thx for the helping hands, with a good night of sleep, everything is more clear