Merge pull request #15353 from overleaf/ae-upgrade-react-i18next

Upgrade react-i18next to 13.3.1

GitOrigin-RevId: fb2233742a187f1bf39e83f4e9f7ec3fb2a55b8f

services/web/package.json

@@ -317,7 +317,7 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^2.3.1",
     "react-google-recaptcha": "^3.1.0",
-    "react-i18next": "^13.3.0",
+    "react-i18next": "^13.3.1",
     "react-linkify": "^1.0.0-alpha",
     "react-refresh": "^0.14.0",
     "react-resizable-panels": "^0.0.55",

services/web/test/frontend/infrastructure/i18n.spec.tsx

@@ -116,5 +116,32 @@ describe('i18n', function () {
         .should('have.length', 1)
         .should('have.text', "T&e's<code>t</code>ing")
     })
+
+    it('does not convert markup in values to components', function () {
+      const Test = () => {
+        return (
+          <div data-testid="container">
+            <Trans
+              i18nKey="are_you_still_at"
+              components={[<b />]} // eslint-disable-line react/jsx-key
+              values={{
+                institutionName: "<i>T</i>&<b>e</b>'s<code>t</code>ing",
+              }}
+              shouldUnescape
+              tOptions={{ interpolation: { escapeValue: true } }}
+            />
+          </div>
+        )
+      }
+      cy.mount(<Test />)
+      cy.findByTestId('container')
+        .should(
+          'have.text',
+          "Are you still at <i>T</i>&<b>e</b>'s<code>t</code>ing?"
+        )
+        .find('b')
+        .should('have.length', 1)
+        .should('have.text', "<i>T</i>&<b>e</b>'s<code>t</code>ing")
+    })
   })
 })