connor-baer/rich-text-to-jsx

Make the lib compatible with Google Translate

Closed this issue · 4 comments

zallek commented

Purpose

Make the lib compatible with Google Translate

When Google Translate a web page, it replaces text nodes with <font> tags containing translations while React keeps references to the text nodes that are no longer in the DOM tree. Leading to React error and a blank page.

More info here

Approach & Changes

When facing the following paragraph

{
  "nodeType": "paragraph",
  "content": [
    {
      "nodeType": "text",
      "value": "Welcome",
      "marks": [],
      "data": {}
    },
    {
      "nodeType": "hyperlink",
      "content": [
        {
          "nodeType": "text",
          "value": "Something",
          "marks": [],
          "data": {}
        }
      ],
      "data": {
        "uri": "foo"
      }
    }
  ],
  "data": {}
}

The lib currently renders the following. Therefore Google Translate will replace Welcome by <font>Bienvenue</font> leading to a React error on the next update.

<p>
  Welcome
  <a>Something</a>
</p>

As shown in this article, to solve the issue, we should render the following so that Google Transform will replace <span>Welcome</span> by <span>Bienvenue</span> preventing bugs as the DOM tree isn't changed.

<p>
  <span>Welcome</span>
  <a>Something</a>
</p>

The current behavior is due to this line.
It would be great if we could override the text render when no marks.

Thanks.

connor-baer commented

Hi @zallek! Thanks for the detailed report, that's a fascinating issue.

I no longer use this library myself and have no time for maintenance. Would you be willing to make this contribution yourself?

zallek commented

Thanks for the quick reply.

Sure. I'll push a PR.

connor-baer commented

Thank you! 🙌

connor-baer commented

Closed by #42 and released in v2.2.0: