Tags

external
Rich text
Qwik

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.


Tags

external
Rich text
Qwik