connor-baer / rich-text-to-jsx Goto Github PK

Summarize the question

Will it work for a rtf string for example like this? {\\rtf1\\ansi\\b hi there\\b0}

Because I tried to do it like this:

const convertToPlain = rtf => { let plain = richTextToJsx(rtf); return plain; };

The output is null.

Context

Im trying to parse the rtf string into a jsx/html format. I expect the output to be like this
<p><strong>hi there</strong></p>

Specifications

• Version:
• Browser:
• OS:

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.

Purpose

I'm using this library to render the rich text from some content from Contentful and saw that the table related node types are not yet supported. Any plans to support them in the near future?

Thank you!

Additional Context

[Blocks.EMBEDDED_ASSET] not working for images.

I think it has to do with

My node structure does not match this pattern, but looks like the following. It is an image asset uploaded to a rich text field:

My goal is to pull the id (contentful_id) out of data.target.sys and then use to query for that image and produce a fluid image for gatsby-image.