Qwik rich text renderer

For Qwik, 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-qwik-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 can also be found here in the Starter Template:
https://github.com/caisy-io/starter-template-qwik-simple-blog/blob/dev/src/components/fulltext/FullText.tsx

This is a complex example showing how to change the documentLink to display linked images within the text.

<RichTextRenderer
  node={text?.json}
  overwrites={{
    documentLink: $((props) =>
      props?.node && text?.connections ? (
        <DocumentLink node={props.node} connections={text.connections} />
      ) : null,
    ),
  }}
/>

You can change any node based on your needs. For instance, by altering text, you can switch variables with adaptable text or develop your own way of managing links.