SolidJS rich text renderer

For SolidJS, there is a helper library that makes the integration process of rich texts very simple.

To install, use npm or another package manager:

npm install @caisy/rich-text-solid-renderer --save

For ease of use, just pass the JSON and the component will convert it to HTML:

 <RichTextRenderer node={text.json} />

to ensure that you pass the correct object to node, it should contain something like this:

{ type: "doc", ... }

An example using the rich text render with SolidStart can also be found here on Stackblitz:
https://stackblitz.com/github/caisy-io/rich-text-solid-demo

Here is also an advanced example overwriting the documentLink to render images that are linked inside the text:

<RichTextRenderer node={text.json} overwrites={
  {
    "documentLink": ({node}: {node: {attrs: {documentId: string}}}) => {
      const linkedAsset = text.connections.find((connection) => connection.id === node.attrs.documentId);

      if (linkedAsset && linkedAsset.src) {
        return <img src={linkedAsset.src}></img>
      }

      return null
    }
  }
}/>

Source Code:
https://github.com/caisy-io/rich-text-solid-demo

You can overwrite any node, depending on the use case. For example by overwriting text, you can replace variables with dynamic text or create you own link handling logic.