Our rich text format is defined by a JSON structure. This is handy for rendering on different platforms: Web, Android, iOS, etc.

For React, 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-react-renderer --save

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

import { RichTextRenderer } from "@caisy/rich-text-react-renderer";
...

  const node = BlogArticle.text.json;

  return (
    <>
      <RichTextRenderer node={node} />
    </>
  );
};

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

{ type: "doc", ... }

If you want to override some subcomponents as they are rendered, you can pass some overrides as follows:

<RichTextRenderer
  node={textContent}
  overwrites={
    {
      paragraph: ParagraphOverwrite,
      text: TextOverwrite,
      listItem: ListItemOverwrite,
    }
  }
/>

To overwrite subcomponents of the rich text like:

• lists

• paragraphs

• tables

• etc.

Inline Overwrite Example

For developers looking for a quick solution or a proof of concept, you might consider this method this. If you want to replace the standard <p> tags with <div> tags in your content, you can do it as follows:

<RichTextRenderer
  node={text?.json}
  overwrites={{
    paragraph: ({children}) => <div className="myCustomRichTextParagraph">{children}</div>,
  }}
/>

More advanced use case is for example to support linked assets or documents.
Therefor you need to fetch the connections and the json from the graphql API.
So the RichTextRenderer might look like this

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

Where your DocumentLink and Asset component would look like this, to render a linked Asset:

export const Asset: React.FC<IAsset> = ({ src, description }) => {
  return (
    <>
      {src && (
        <img
          loading="lazy"
          src={`${src}?w=1920&h=960`}
          srcSet={`${src}?w=3840&h=1920 1920w, ${src}?w=1920&h=960 1280w, ${src}?w=1280&h=640 640w`}
          alt={description ?? ""}
        />
      )}
    </>
  );
};

export const DocumentLink: React.FC<IDocumentLink> = ({ connections, node, children }) => {
  return (
    <>
      {connections?.map(
        (component: IGenAsset) =>
          component?.__typename == "Asset" &&
          node?.attrs?.documentId == component.id && <Asset key={component.id} {...component} />,
      )}
      {children}
    </>
  );
};

In case you linked an Asset you will always get __typename Asset - if the user can link other blueprints, you can expert there APIName here as __typename and check by for them. Remember you can pick the right connection, by matching the id from the connection to the documentId in the rich-text. The example above is using a graphql query partly like this:

text {
  json
  connections {
    __typename
    ... on Asset {
      title
      src
      keywords
      id
      description
      copyright
      author
    }
  }
}

This should just give an idea, how to use the rich-text library we provide. You could replace the img component with the image component from Next.js. If you want to learn more about how to render images in the web, here is good place to look: