HTML emails: remaining to do

[cyyynthia]

• Find a way to process structs like <link>blog</link>
• Render newlines as <br/> when rendering the email (final render, Kotlin side)
• Address security concerns when rendering ICU strings
  • The ICU renderer MUST sanitize the strings, to prevent HTML injection attacks.
• Implement plain variables within For iterations (see the doc in emails)
• Implement global variables (they're documented)

First item seem to be a pain to tackle. Pseudo-XML appears to be a FormatJS specific feature that is not available elsewhere; yet they're very convenient, a lot more than using 2 strings for instance.

The best thing I have in mind to solve the problem looks something like this

<LocalizedText
  keyName="powered-by"
  defaultValue="Powered by <link>Tolgee</link> 🐁"
  tags={{
    link: (c) => (
      <Link
        href="https://tolgee.io"
        className="text-inherit underline"
      >
        {c}
      </Link>
    ),
  }}
/>

Generates the following code:

<span th:utext="#{powered-by(#{powered-by--generated--link1})}">[...]</span>

And the following messages

powered-by = Powered by {0}
powered-by--generated--link1 = <a href="https://tolgee.io" style="[...]">Tolgee</a>

Where it is trivial to see how <link> transformed and how the transformation could be applied. The <a> would be generated from the email during export I assume?

Email link confirm example (variable included inside html element)

<LocalizedText
  keyName="registration-confirm-link"
  defaultValue={
    'Or, copy and paste this URL into your browser:\n<link>{confirmUrl}</link>'
  }
  tags={{
    link: (c) => (
      <TolgeeLink href={c}>
        {c}
      </TolgeeLink>
    ),
  }}
  demoParams={{
    confirmUrl: 'https://app.tolgee.io/login/verify_email?owowhatsthis',
  }}
/>

<span th:utext="#{registration-confirm-link(#{registration-confirm-link--generated--link1})}">[...]</span>

registration-confirm-link = Or, copy and paste this URL into your browser:\n{0}
registration-confirm-link--generated--link1 = <a href="{confirmUrl}" style="[...]">{confirmUrl}</a>