prevent double-escaping of interpolated values #16.4.1

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 16.4.1
+
+- fix(Trans): prevent double-escaping of interpolated values in component props (e.g. title). Unescape HTML entities before passing prop values to React to avoid rendered output like `"` / `'`. [#1893](https://github.com/i18next/react-i18next/issues/1893)
+
 ### 16.4.0
 
 - `<Trans count>` prop: optional - infer count from children [1891](https://github.com/i18next/react-i18next/issues/1891)

react-i18next.js

@@ -2616,8 +2616,19 @@
           if (!tmp && knownComponentsMap) tmp = knownComponentsMap[node.name];
           if (rootReactNode.length === 1 && !tmp) tmp = rootReactNode[0][node.name];
           if (!tmp) tmp = {};
-          const child = Object.keys(node.attrs).length !== 0 ? mergeProps({
-            props: node.attrs
+          const props = {
+            ...node.attrs
+          };
+          if (shouldUnescape) {
+            Object.keys(props).forEach(p => {
+              const val = props[p];
+              if (isString(val)) {
+                props[p] = unescape(val);
+              }
+            });
+          }
+          const child = Object.keys(props).length !== 0 ? mergeProps({
+            props
           }, tmp) : tmp;
           const isElement = React.isValidElement(child);
           const isValidTranslationWithChildren = isElement && hasChildren(node, true) && !node.voidElement;
@@ -2661,7 +2672,8 @@
           }
         } else if (node.type === 'text') {
           const wrapTextNodes = i18nOptions.transWrapTextNodes;
-          const content = shouldUnescape ? i18nOptions.unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
+          const unescapeFn = typeof i18nOptions.unescape === 'function' ? i18nOptions.unescape : getDefaults().unescape;
+          const content = shouldUnescape ? unescapeFn(i18n.services.interpolator.interpolate(node.content, opts, i18n.language)) : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
           if (wrapTextNodes) {
             mem.push(React.createElement(wrapTextNodes, {
               key: `${node.name}-${i}`

react-i18next.min.js

@@ -4,6 +4,7 @@ import HTML from 'html-parse-stringify';
 import { isObject, isString, warn, warnOnce } from './utils.js';
 import { getDefaults } from './defaults.js';
 import { getI18n } from './i18nInstance.js';
+import { unescape } from './unescape.js';
 
 const hasChildren = (node, checkLength) => {
   if (!node) return false;
@@ -316,8 +317,18 @@ const renderNodes = (
         // neither
         if (!tmp) tmp = {};
 
-        const child =
-          Object.keys(node.attrs).length !== 0 ? mergeProps({ props: node.attrs }, tmp) : tmp;
+        // should fix #1893
+        const props = { ...node.attrs };
+        if (shouldUnescape) {
+          Object.keys(props).forEach((p) => {
+            const val = props[p];
+            if (isString(val)) {
+              props[p] = unescape(val);
+            }
+          });
+        }
+
+        const child = Object.keys(props).length !== 0 ? mergeProps({ props }, tmp) : tmp;
 
         const isElement = isValidElement(child);
 

src/TransWithoutContext.js

@@ -60,6 +60,7 @@ i18n.init({
         transTestWithSelfClosing: 'interpolated component: <component/>',
         bracketNotation: '{{count}}',
         otherNotation: '#$?count?$#',
+        issue1893: 'Hello <Item title="{{ name }}" />!',
       },
       other: {
         transTest1: 'Another go <1>there</1>.',

test/i18n.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeAll, afterAll, beforeEach, afterEach, vi } from 'vitest';
 import React, { useRef, useEffect } from 'react';
-import { render, cleanup, waitFor } from '@testing-library/react';
+import { render, cleanup, waitFor, screen } from '@testing-library/react';
 import i18n from './i18n';
 import { withTranslation } from '../src/withTranslation';
 import { Trans } from '../src/Trans';
@@ -1267,3 +1267,54 @@ describe('Trans edge cases', () => {
     });
   });
 });
+
+describe('trans issue 1893 - double escaping in props', () => {
+  function Item({ title }) {
+    return <span title={title}>{title}</span>;
+  }
+
+  function TestComponent({ name, escapeValue }) {
+    return (
+      <Trans
+        i18nKey="issue1893"
+        values={{ name }}
+        components={{ Item: <Item /> }}
+        tOptions={escapeValue ? { interpolation: { escapeValue: true } } : undefined}
+        shouldUnescape
+      />
+    );
+  }
+
+  it('should render correctly with quotes in interpolation (case 1: escapeValue false)', () => {
+    const value = 'World " \' Test';
+    const { container } = render(<TestComponent name={value} />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Hello &lt;Item title="World " ' Test" /&gt;!
+      </div>
+    `);
+  });
+
+  it('should render correctly with quotes in interpolation (case 2: escapeValue true)', () => {
+    const value = 'World " \' Test';
+    const { container } = render(<TestComponent name={value} escapeValue />);
+
+    // Expected behavior: Component parsed and rendered correctly without double escaping
+    const span = screen.getByText(value);
+    expect(span).toBeInTheDocument();
+    expect(span).toHaveTextContent(value);
+    expect(span).toHaveAttribute('title', value);
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Hello 
+        <span
+          title="World " ' Test"
+        >
+          World " ' Test
+        </span>
+        !
+      </div>
+    `);
+  });
+});