Rich Text field tips and tricks from the Contentful DevRel team

The Contentful Rich Text field is powerful. But how can you make the most of it? Level up your Rich-Text game with a growing list of top tips from the Contentful DevRel team.

How to wield the power of the Rich Text field

The flexibility of the Rich Text field makes it my favorite feature in Contentful. Developers in our community are adopting the power of the Rich Text field, because it offers exciting versatility for displaying content in your front-end applications. As a result, the DevRel team often receives questions about how to get the most out of this field type.

This post provides advice on how to level up your Rich-Text field game and will be updated regularly with new tips and tricks tailored for the growing Contentful community. Join us in our Community Slack to stay up to date!

If youd like to learn more about how the Rich Text field is powered by a what you see is what you get (WYSIWYG) editor that is returned as pure JSON on the API response, check out this blog post.

We always recommend using a Rich Text renderer package provided by Contentful to speed up your process when working with the Rich Text response. Contentful Rich Text renderers allow you to customise how the JSON response is rendered to your needs. You can render custom HTML, CSS classes, React components, custom attributes and more! A full list of all Rich Text renderers is available on GitHub.

If youre looking for the Rich Text docs, click here.

Last updated at: May 27, 2021.

Rendering video assets (not iframe embeds) in Rich Text

If you need to display a video file linked in your Rich Text field (rather than an iframe that displays a YouTube or Vimeo embed), heres how its done.

Check out this blog post for more context on rendering linked entries and assets in the Rich Text field, with an example of how to render an iframe as a linked entry using both the GraphQL and REST APIs.

Using the GraphQL API

Heres an example of a GraphQL query that fetches a blog post with a Rich Text field, and its linked asset blocks (which could be images or video files). The key property on the linked assets we need to query to distinguish between images or video is contentType.

{    blogPostCollection(limit: 1) {      items {        sys {          id        }        richTextField {          json          links {            assets { // Fetch the linked block assets              block {                sys {                  id                }                url                title                width                height                description                contentType // Make sure to request the contentType              }            }          }        }      }    }  }

Heres an example of how to render a video asset from the GraphQL API response using a switch case alongside an image asset, inside the renderNode options of the @contentful/rich-text-react-renderer.

When youve fetched your data, look for the contentType property, and render the video with an HTML video tag to the DOM as you need.

import { BLOCKS } from "@contentful/rich-text-types";function renderOptions(links) {  // create an asset map  const assetMap = new Map();  // loop through the linked assets and add them to a map  for (const asset of links.assets.block) {    assetMap.set(asset.sys.id, asset);  }  return {    renderNode: {      [BLOCKS.EMBEDDED_ASSET]: (node, next) => {        // find the asset in the assetMap by ID        const asset = assetMap.get(node.data.target.sys.id);        switch (asset.contentType) {          case "video/mp4":            return (              <video width="100%" height="100%" controls>                <source src={asset.url} type="video/mp4" />              </video>            );          case "image/png":            return (              <img                src={asset.url}                height={asset.height}                width={asset.width}                alt={asset.description}              />            );          default:            return "Nothing to see here...";        }      },    },  };}

Heres an equivalent example using the data returned from the REST API using the Contentful JavaScript SDK. Notice how in this example, you dont need to create a map of the linked assets as with the GraphQL API. The SDK has resolved the links inside the Rich Text field for you.

import { BLOCKS } from "@contentful/rich-text-types";const renderOptions = {  renderNode: {    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {      const assetType = node.data.target.fields.file.contentType;      switch (assetType) {        case "video/mp4":          return (            <video width="100%" height="100%" controls>              <source src={node.data.target.fields.file.url} type="video/mp4" />            </video>          );        case "image/png":          return (            <img              src={`https://${node.data.target.fields.file.url}`}              height={node.data.target.fields.file.details.image.height}              width={node.data.target.fields.file.details.image.width}              alt={node.data.target.fields.description}            />          );        default:          return "Nothing to see here...";      }    },  },};

Rendering line breaks in Rich Text

New lines in the Rich Text response are returned as
. You might question why the Rich Text renderers do not replace
with <br /> tags as standard and this is to ensure that the Rich Text renderers remain unopinionated and can be used in applications where <br /> tags might not be valid syntax, such as React Native.

If youre developing a web application in React, our recommendation is to use the renderText option in the @contentful/rich-text-react-renderer to replace all instances of
with <br /> as follows. This code example is taken directly from the @contentful/rich-text-react-renderer README on GitHub.

const renderOptions = {  renderText: text => {    return text.split('
').reduce((children, textSegment, index) => {      return [...children, index > 0 && <br key={index} />, textSegment];    }, []);  },};

Copying and pasting into the Rich Text field preserves formatting

Drafted a document in Google Docs? Need to copy some text into the Rich Text field from a web page? No sweat! Copy and paste to your hearts content and watch as the Rich Text editor gracefully preserves formatting.

Harness the power of Grammarly in the Rich Text Field

The Rich Text Field in the Contentful web app allows for a Grammarly integration. Install the Grammarly browser extension and improve your writing skills as you work in Contentful.

More Rich Text top tips

Well update this blog post regularly with more community-tailored Rich Text tips. Is there something youd like to know how to do in Rich Text or have some tips yourself? Let us know in the Contentful Community Slack.