fix(i18n): escape interpolated values inside of <Translate>

[rexxars]

Description

If using the <Translate> component (which utilizes the "simple parser"), and passing it values for interpolation that contained angle brackets (<) or full on XML tags (<svg>), the parser would treat this as "nested tags" and error out.

Since these interpolated values can contain user input (eg document titles), this can happen without us having control of it (The document "<3 is in the air" was published).

Wasn't quite sure about the right approach here, but the implementation I've gone for is one where the parser also tokenizes interpolations, and has the <Translate> function replace the values as it goes. One drawback with this approach is that you cannot use formatters from i18next when using the <Translate> function, but I felt this was an acceptable shortcoming for now that we can address later.

What to review

• Translate function correctly allows <> characters inside of values passed to it, both outside of HTML tags and within them
• Parsing approach makes sense

Testing

Added tests for interpolation to parser, and for rendering the interpolated values (with and without angle brackets) in Translate

Notes for release

• Fixes an issue where using "angle brackets" (<, >) in document titles could lead to an error being shown on publish and other operations

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview	Feb 20, 2024 7:21pm
test-studio	✅ Ready (Inspect)	Visit Preview	Feb 20, 2024 7:21pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)		Feb 20, 2024 7:21pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Feb 20, 2024 7:29 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	38s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	13s	3	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	12s	4	2	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	12s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	32s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	18s	9	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 1s	18	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	13s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	20s	9	0	0

[bjoerge]

Oh, wow, great find and great fix!