Technique for rendering rich-text from API with react & JSX

Question

I'am using a rich-text editor lately which sends a JSON-object to my API which includes all text and formatting.

The editor has the following options:

• Basic text formatting (e.g. bold, italic)
• Tag users with @username

The API then generates a HTML-string from this object and store it in the database for better performance, because the most entries are comments which are loaded in batches of 15 items.

The tagged users are striped out of this and are replaced with a placeholder {{userX}}. The striped out data is stored separately in a values JSON-schema.

After saving to HTML it looks like this:

<p>
    Hello {{user1}},
    <strong>how are you doing?</strong>
</p>

And the values like this:

{
    "user1": {
        "text": "@anna",
        "username": "anna"
    }
}

The main reason for this is that I have to generate the links on the client-side to make it usable with the react-router.

So my thought was to render it to something like this in the client:

<p>
    Hello <Link to="/users/anna">@anna</Link>,
    <strong>how are you doing?</strong>
</p>

But afaik I'am not able to render this dynamic JSX-code in react's render function or with dangerouslysetinnerhtml.

So I think my api-design could be wrong but I'am lacking for better ideas how to solve this problem.

Answer 1

It's been a while but in the meantime the htm package was released which should have solved the problem.

With htm it is actually possible to parse a JSX-string at runtime (on server or in browser) and connect it to an React-api (Like React itself, or Preact, etc.)