feat: enable html preprocessing (#1529)

* feat: enable html preprocessing * allow custom unescape override
i18next · Jul 6, 2022 · c840421 · c840421
1 parent 3f26db0
commit c840421
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.5",
-    "html-escaper": "^2.0.2",
     "html-parse-stringify": "^3.0.1"
   },
   "devDependencies": {

diff --git a/src/Trans.js b/src/Trans.js
@@ -1,6 +1,5 @@
 import { useContext, isValidElement, cloneElement, createElement } from 'react';
 import HTML from 'html-parse-stringify';
-import { unescape } from 'html-escaper';
 import { getI18n, I18nContext, getDefaults } from './context';
 import { warn, warnOnce } from './utils';
 
@@ -124,8 +123,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
     childrenArray.forEach((child) => {
       if (typeof child === 'string') return;
       if (hasChildren(child)) getData(getChildren(child));
-      else if (typeof child === 'object' && !isValidElement(child))
-        Object.assign(data, child);
+      else if (typeof child === 'object' && !isValidElement(child)) Object.assign(data, child);
     });
   }
 
@@ -249,7 +247,9 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
       } else if (node.type === 'text') {
         const wrapTextNodes = i18nOptions.transWrapTextNodes;
         const content = shouldUnescape
-          ? unescape(i18n.services.interpolator.interpolate(node.content, opts, i18n.language))
+          ? i18nOptions.unescape(
+              i18n.services.interpolator.interpolate(node.content, opts, i18n.language),
+            )
           : i18n.services.interpolator.interpolate(node.content, opts, i18n.language);
         if (wrapTextNodes) {
           mem.push(createElement(wrapTextNodes, { key: `${node.name}-${i}` }, content));

diff --git a/src/context.js b/src/context.js
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import { unescape } from './unescape';
 
 let defaultOptions = {
   bindI18n: 'languageChanged',
@@ -10,6 +11,7 @@ let defaultOptions = {
   transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
   // hashTransKey: key => key // calculate a key for Trans component based on defaultValue
   useSuspense: true,
+  unescape,
 };
 
 let i18nInstance;

diff --git a/src/unescape.js b/src/unescape.js
@@ -0,0 +1,18 @@
+const matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+
+const htmlEntities = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+};
+
+const unescapeHtmlEntity = (m) => htmlEntities[m];
+
+export const unescape = (text) => text.replace(matchHtmlEntity, unescapeHtmlEntity);
diff --git a/test/i18n.js b/test/i18n.js
@@ -43,6 +43,7 @@ i18n.init({
         transTest3_overwrite:
           'Result should be a clickable link <0 href="https://www.google.com">Google</0>',
         transTestEscapedHtml: 'Escaped html should unescape correctly <0>&lt;&nbsp;&amp;&gt;</0>.',
+        transTestCustomUnescape: 'Text should be passed through custom unescape <0>&shy;</0>',
         testTransWithCtx: 'Go <1>there</1>.',
         testTransWithCtx_home: 'Go <1>home</1>.',
         deepPath: {

diff --git a/test/trans.render.spec.js b/test/trans.render.spec.js
@@ -644,6 +644,35 @@ describe('trans should allow escaped html', () => {
   });
 });
 
+describe('trans with custom unescape', () => {
+  let orgValue;
+  beforeAll(() => {
+    orgValue = i18n.options.react.unescape;
+    i18n.options.react.unescape = (text) => text.replace('&shy;', '\u00AD');
+  });
+
+  afterAll(() => {
+    i18n.options.react.unescape = orgValue;
+  });
+
+  it('should allow unescape override', () => {
+    const TestComponent = () => (
+      <Trans i18nKey="transTestCustomUnescape" components={[<Link to="/msgs" />]} shouldUnescape />
+    );
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        Text should be passed through custom unescape 
+        <a
+          href="/msgs"
+        >
+          \u00AD
+        </a>
+      </div>
+    `);
+  });
+});
+
 it('transSupportBasicHtmlNodes: false should not keep the name of simple nodes', () => {
   const cloneInst = i18n.cloneInstance({
     react: { transSupportBasicHtmlNodes: false, defaultTransParent: 'div' },