Text Node Not Wrapped Inside a HTML Tag Does Not Get Translated

[suhailgupta03]

If a text is not wrapped around an HTML tag, it does not get translated. Consider the following HTML snippet

<span>brian silas</span>
brian silas
<p>hello</p>

Here the key brian silas inside span tag gets translated, key hello inside p tag gets translated. But the key brian silas which is not wrapped around any HTML tag does not get translated. Although brian silas is not wrapped around any HTML tag, it is still a text node and must be translated by the library.

Here is also the linked sandbox: https://codesandbox.io/s/billowing-frog-y6hvs?file=/index.html

Note the orphan brian silas marked in red. Although it is not wrapped inside a HTML tag, it is still a valid HTML Text Node.

[jamuhl]

The vdom renderers and mutation observers get appended to root elements -> "to make the magic happen"

As text nodes are limited in not providing those you will need to wrap your content in an outer element.

  <div>
    <p i18next-key="this is a test string">
      this is a test page.
    </p>

    <p>
      this is a test string
    </p>

    <h1>Yeh dhoop kinara</h1>
    <span>Brian Silas</span>
    <span>brian silas</span>
    <br />
    brian silas
    <br />
    <br />
    <button id="btn">Hindi</button>
    <button id="btn-2">Punjabi</button>
  </div>