Tags
On this page
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.
Subscribe to our newsletters
and stay updated
While you subscribe you agree to our Privacy Policy and Terms of Service apply.
Tags
On this page