Less than sign `<` breaks tag parsing with Trans component

[stami]

🐛 Bug Report

A translation string with less than sign < breaks the tag parsing with <Trans> component

To Reproduce

Add this test case to test/trans.render.object.spec.jsx: (modifying the test case on line 65 there)

describe('trans using no children but components (object) - using names', () => {
  function TestComponent() {
    return (
      <Trans
        defaults="hello <italic>under ten</italic><10 this text after the sign should be rendered <bold>{{what}}</bold>"
        values={{ what: 'world' }}
        components={{ italic: <i>just dummy</i>, bold: <strong>univers</strong> }}
      />
    );
  }
  it('should render translated string', () => {
    const { container } = render(<TestComponent />);
    expect(container.firstChild).toMatchInlineSnapshot(`
      <div>
        hello 
        <i>
          under ten
        </i>
        <10 this text after the sign should be redered         
        <strong>
          world
        </strong>
      </div>
    `);
  });
});

Run npm test, it fails with output

 FAIL  |runtime| test/trans.render.object.spec.jsx > trans using no children but components (object) - using names > should render translated string
Error: Snapshot `trans using no children but components (object) - using names > should render translated string 2` mismatched

- Expected
+ Received

  <div>
    hello 
    <i>
      under ten
    </i>
-   <10 this text after the sign should be rendered         
-   <strong>
-     world
-   </strong>
+   world
  </div>

 ❯ test/trans.render.object.spec.jsx:104:34
    102|   it('should render translated string', () => {
    103|     const { container } = render(<TestComponent />);
    104|     expect(container.firstChild).toMatchInlineSnapshot(`
       |                                  ^
    105|       <div>
    106|         hello 

Expected behavior

The test should pass.

The problem is that having a less than sign (<) within the translated text breaks the system extracting the tags.

The text between the < sign and the next tag opening won't be rendered at all. The next tag won't be rendered correctly.

I assume that in the test case snippet, it reads the following as the tag: <10 this text after the sign should be rendered <bold>

Your Environment

• runtime version: node v18.18.0, latest Chrome and Safari
• i18next version: master, 14.1.0
• os: macOS

[adrai]

feel free to try to provide a PR to address this

[rothsandro]

This also happens for interpolated values with a "<". These values are often provided by the user, so we can't control them. Is there any workaround for that?

[adrai]

fyi: waiting for this PR to be approved by @HenrikJoreteg ... I'm also ok with taking over the html-parse-stringify repository if Henrik has no interest in maintaining it anymore... (I already have the npm publish permissions, but not yet the github repo write permission)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.