Trans: do not replace html tags in translation strings that are not i…

…n the transKeepBasicHtmlNodesFor array
i18next · Aug 13, 2019 · 342027d · 342027d
1 parent aefb698
commit 342027d
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 10.12.2
+
+- Trans: do not replace html tags in translation strings that are not in the transKeepBasicHtmlNodesFor array [919](https://github.com/i18next/react-i18next/issues/919)
+
 ### 10.12.1
 
 - Set ready flag to false when i18n instance has not been initialised [918](https://github.com/i18next/react-i18next/pull/918)

diff --git a/react-i18next.js b/react-i18next.js
@@ -523,7 +523,9 @@
       } else if (typeof child === 'object') {
         var clone = _objectSpread2({}, child);
 
-        var format = clone.format;
+        var {
+          format
+        } = clone;
         delete clone.format;
         var keys = Object.keys(clone);
 
@@ -598,19 +600,29 @@
             mem.push(React__default.cloneElement(child, _objectSpread2({}, child.props, {
               key: i
             }), _inner));
-          } else if (isNaN(node.name) && i18nOptions.transSupportBasicHtmlNodes) {
-            if (node.voidElement) {
-              mem.push(React__default.createElement(node.name, {
-                key: "".concat(node.name, "-").concat(i)
-              }));
+          } else if (isNaN(node.name)) {
+            if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+              if (node.voidElement) {
+                mem.push(React__default.createElement(node.name, {
+                  key: "".concat(node.name, "-").concat(i)
+                }));
+              } else {
+                var _inner2 = mapAST(reactNodes
+                /* wrong but we need something */
+                , node.children);
+
+                mem.push(React__default.createElement(node.name, {
+                  key: "".concat(node.name, "-").concat(i)
+                }, _inner2));
+              }
+            } else if (node.voidElement) {
+              mem.push("<".concat(node.name, " />"));
             } else {
-              var _inner2 = mapAST(reactNodes
+              var _inner3 = mapAST(reactNodes
               /* wrong but we need something */
               , node.children);
 
-              mem.push(React__default.createElement(node.name, {
-                key: "".concat(node.name, "-").concat(i)
-              }, _inner2));
+              mem.push("<".concat(node.name, ">").concat(_inner3, "</").concat(node.name, ">"));
             }
           } else if (typeof child === 'object' && !isElement) {
             var content = node.children[0] ? translationContent : null; // v1

diff --git a/react-i18next.min.js b/react-i18next.min.js
diff --git a/src/Trans.js b/src/Trans.js
@@ -58,7 +58,7 @@ export function nodesToString(mem, children, index, i18nOptions) {
       }
     } else if (typeof child === 'object') {
       const clone = { ...child };
-      const format = clone.format;
+      const { format } = clone;
       delete clone.format;
 
       const keys = Object.keys(clone);
@@ -148,13 +148,21 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts) {
           // so we just need to map the inner stuff
           const inner = mapAST(reactNodes /* wrong but we need something */, node.children);
           mem.push(React.cloneElement(child, { ...child.props, key: i }, inner));
-        } else if (isNaN(node.name) && i18nOptions.transSupportBasicHtmlNodes) {
-          if (node.voidElement) {
-            mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }));
+        } else if (isNaN(node.name)) {
+          if (i18nOptions.transSupportBasicHtmlNodes && keepArray.indexOf(node.name) > -1) {
+            if (node.voidElement) {
+              mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }));
+            } else {
+              const inner = mapAST(reactNodes /* wrong but we need something */, node.children);
+
+              mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }, inner));
+            }
+          } else if (node.voidElement) {
+            mem.push(`<${node.name} />`);
           } else {
             const inner = mapAST(reactNodes /* wrong but we need something */, node.children);
 
-            mem.push(React.createElement(node.name, { key: `${node.name}-${i}` }, inner));
+            mem.push(`<${node.name}>${inner}</${node.name}>`);
           }
         } else if (typeof child === 'object' && !isElement) {
           const content = node.children[0] ? translationContent : null;

diff --git a/test/i18n.js b/test/i18n.js
@@ -19,6 +19,8 @@ i18n.init({
         transTest1_noParent: '<0>Go <1>there</1>.</0>',
         transTest1_customHtml: '<strong>Go</strong> <br/><1>there</1>.',
         transTest1_customHtml2: '<strong>Go</strong> <br/> there.',
+        transTest1_customHtml3:
+          '<strong>Go</strong><video /><script>console.warn("test")</script> there.',
         transTest2:
           'Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> message. Open <5>hear</5>.',
         transTest2_plural:

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -106,6 +106,10 @@ describe('trans simple with custom html tag', () => {
     <Trans i18nKey="transTest1_customHtml2" parent={parent} />
   );
 
+  const TestElement3 = ({ t, parent }) => (
+    <Trans i18nKey="transTest1_customHtml3" parent={parent} />
+  );
+
   it('should not skip custom html tags', () => {
     const wrapper = mount(<TestElement />);
     // console.log(wrapper.debug());
@@ -130,6 +134,19 @@ describe('trans simple with custom html tag', () => {
       ),
     ).toBe(true);
   });
+
+  it('should skip custom html tags not listed in transKeepBasicHtmlNodesFor', () => {
+    const wrapper = mount(<TestElement3 />);
+    // console.log(wrapper.debug());
+    expect(
+      wrapper.contains(
+        <div>
+          <strong>Go</strong>&lt;video
+          /&gt;&lt;script&gt;console.warn(&quot;test&quot;)&lt;/script&gt; there.
+        </div>,
+      ),
+    ).toBe(true);
+  });
 });
 
 describe('trans testTransKey1 singular', () => {