Presently, we can only add plain text in localization strings. If we want to bold/emphasise some text or mark some text as <code>, we've few options: either use HTML or use a markdown processor, or manually split strings into HTML and plain text bits. Markdown appears best to go ahead with, but we need to convert markdown to React JSX, not HTML strings (so we can add onClick behavior to links/buttons, or other custom behavior, and also avoids HTML injection risks).
Plan:
In locales:
- "message": "Uses PostHog to collect usage and analytics data."
+ "message": "Uses [PostHog](https://posthog.com/) to collect usage and analytics data."
In components that use t = useTranslation():
- <p>{t('key')}</p>
+ <p>{md(t('key'), {
+ link: (text, url) => (<a href={url} className="...">{text}</a>) // when we want custom behavior
+ })}</p>Such utility may also be helpful with our docs websites (that use JSX/Astro).
Further context: #1263 (comment), #1251 (review)
Presently, we can only add plain text in localization strings. If we want to bold/emphasise some text or mark some text as
<code>, we've few options: either use HTML or use a markdown processor, or manually split strings into HTML and plain text bits. Markdown appears best to go ahead with, but we need to convert markdown to React JSX, not HTML strings (so we can add onClick behavior to links/buttons, or other custom behavior, and also avoids HTML injection risks).Plan:
In locales:
In components that use
t = useTranslation():Such utility may also be helpful with our docs websites (that use JSX/Astro).
Further context: #1263 (comment), #1251 (review)