Skip to content

Less than sign < breaks tag parsing with Trans component #1734

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
stami opened this issue Mar 8, 2024 · 5 comments · May be fixed by HenrikJoreteg/html-parse-stringify#64
Open

Less than sign < breaks tag parsing with Trans component #1734

stami opened this issue Mar 8, 2024 · 5 comments · May be fixed by HenrikJoreteg/html-parse-stringify#64

Comments

@stami
Copy link

stami commented Mar 8, 2024 •
edited
Loading

🐛 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
Copy link
Member

adrai commented Mar 8, 2024

feel free to try to provide a PR to address this

@rothsandro
Copy link
Contributor

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 adrai linked a pull request Feb 7, 2025 that will close this issue
Open
@adrai
Copy link
Member

adrai commented Feb 25, 2025

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 Stale
Copy link

stale bot commented Apr 26, 2025

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 stale bot added the stale label Apr 26, 2025
@adrai adrai removed the stale label Apr 26, 2025
@stale Stale
Copy link

stale bot commented May 6, 2025

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 stale bot added the stale label May 6, 2025
@adrai adrai removed the stale label May 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix bug, when text content contains < adrai/html-parse-stringify
3 participants
@adrai @stami @rothsandro