Rich text content to React component

SDKs JavaScript SDK
1

Hi :wave:,

I was using the rich text component , it’s awesome but I was wondering if I could render anything else than plain html with it. I would like to render directly a React Component and not only its html output.

We could probably fork your @contentful/rich-text-html-renderer to render custom react component instead of html. Do you have any recommandation ?

My use case is that if I want to render a complex React component with a state, some logic inside it, it will not work properly with your default render method since you are expecting a pure HTML string as a return. I would like to use contentful to have a set of component available and to build my custom template/landing page with it.

So just to summarize, I would like to render my own React Component instead of static html, do you have a library for that or should we build our own tree parser ? :slight_smile:

Plus, is it possible to make @contentful/rich-text-html-renderer public on github ?

Thanks,
Arnaud

2

Hi there,

We don’t yet have a full implementation for React, but here’s a demo of how you can use the SDK to render it as react components:

3

Thanks @gabriel!

Here is a fork of your lib @contentful/rich-text-html-renderer to make a one which renders React Component instead.

The code is ugly AF, I was working from your minified version but it’s working. I will wait for an official version.

I hope it could help someone else.

4

Hey @arnaud, I’m glad it helped ! I also directed your feedback to understand whether that repository can be made public. Thanks for the contribution!

5

Hello, I’d just like to +1 this thread. We are currently investigating how to use a richtext embedded entry to display a node queried from the graphql API.

6

Thanks @gabriel !

Now I am encountering a migration issue with @contentful/rich-text-from-markdown.

This is not parsing list.

7

Hey @arnaud,

Could you provide some more details about it? What errors are shown to you?

8

Hey @hlehman,
Are you experiencing any issues at the moment? Also, are there any pointers you’d like to get before moving forward in your integration?

9

Input:

const { richTextFromMarkdown } = require("@contentful/rich-text-from-markdown");

const markdownStr = `![Capture d’écran 2018-08-22 à 14.36.00](//images.ctfassets.net/j31e5eavu48k/502xFJRJ8sgCy6C6MmGKia/baac482b6ca1d65203f15b6e627e62f9/Capture_d_____cran_2018-08-22____14.36.00.png)

1. Rends-toi sur le <a href="https://www.infogreffe.fr" rel="nofollow noopener" title="Infogreffe">site Infogreffe </a>, le site officiel qui référence toutes les entreprises françaises.
2. Une fois sur le site, clique sur "recherche avancée", à droite de la barre de recherche.`;
console.log(JSON.stringify(richTextFromMarkdown(markdownStr)));

Output is empty :frowning: :

{
  nodeType: "document",
  data: {},
  content: [{ nodeType: "paragraph", content: [], data: {} }]
}

Apparently the image element is not supported by the lib but the list element should be correctly parsed.

10

Hi @arnaud,

I’ve just checked with my colleague that wrote this demo and unfortunately, at this moment, it doesn’t yet have an implementation for lists. It indeed was just a bit of code to demonstrate our concepts, but it’s surely not fully ready for being used in a production environment. If you were able to implement this in your side, the key here would be to adjust the render-item.js file.

11

Hi @gabriel, if you are talking of the Rich Text content to React component question. I actually did it, see #3.
Thanks for your demo.

The issue now is with the migration tool rich-text-from-markdown, on the readme, there is a mention indicating you are supporting the list el but in fact nop :/.

Could you add me as a contributor of this repo :slight_smile: ? The rich text feature is really powerful but if we are not able to convert our existing content to this content type, it’s kind of a pain in the ass.

Thanks, Arnaud.

13

It has been fixed in the last commit. Thanks!

14

Hi,

The sandbox demo seems to be broken. Is there somewhere else I can find examples? I’m trying to render a custom React component inside the documentToHtmlString's options, but it seems to convert it into a string =.=

Thanks

15

Hi Gabriel.
Link does not work right now