Export custom Rich Text from Google Docs and Notion to Contentful

Learn how you can export custom Rich Text from Google Docs and Notion to Contentful

Introduction

Contentful Rich Text fields use a JSON format called Rich Text, a proprietary format developed by Contentful. When you export content to a Contentful Rich Text field, Cloudpress will automatically convert the content to the correct rich text format. It will convert your text with the formatting, headings, tables, code blocks, etc.

However, you may want to export custom content not supported by Cloudpress. For example, Contentful rich text fields allow you to embed other Contentful entries and assets via the Embed menu in the rich text editor.

Since neither Google Docs nor Notion has any concept of embedded entries and assets, there is no way for you to include these in your source Google Docs and Notion pages.

You can edit the Contentful entry after you exported it with Cloudpress to add these elements, but that requires an extra step. Also, if you re-export the source content with Cloudpress, all your changes will be lost.

To work around this problem, Cloudpress introduced a feature called Raw Content Blocks that allows you to add custom rich text items like these. When Cloudpress exports your content and encounters a Raw Content Block, it will send the content of that block to Contentful as-is.

The rest of this document will walk you through this feature by demonstrating how to add an embedded entry and asset to your content.

Get the JSON representation of your Rich Text element(s)

First, you must get the JSON representation of the Rich Text elements(s) you want to export. You must install the JSON viewer application from the Contentful Marketplace to assist you. After installing and configuring this application, a JSON Viewer tab will be available when editing an entry in Contentful.

Let’s create a sample entry in Contentful containing the rich text elements we want to export. We created a document containing an embedded entry and an embedded asset for demonstration purposes.

You can view the JSON for these elements by switching to the JSON Viewer tab.

Let’s look at the structure of the JSON document and how we can locate the JSON representation of these rich text elements.

1. The fields property contains all the fields for the entry.
2. The body property contains the value of the body field we are interested in.
3. The en-US property contains the value of the body field for the en-US language. You may see a different value (or multiple values) depending on your locale(s).
4. Finally, the content property is an array that contains all the rich text elements. Each element will have an index, e.g. 0, 1, etc.

To copy the JSON for an element, hover over the index for the element. You will notice a Copy to clipboard icon. Copy on this icon to copy the JSON for that rich text element to the clipboard so you can paste it inside Google Docs or Notion.

For example, here is the JSON of the embedded entry block:

{
  "nodeType": "embedded-entry-block",
  "data": {
    "target": {
      "sys": {
        "id": "4iS76T8auAE513QzmxSFKo",
        "type": "Link",
        "linkType": "Entry"
      }
    }
  },
  "content": []
}

If you want to export multiple rich text elements, you will need to place them inside an array. We suggest you copy each element individually to a text editor and then edit them to wrap them inside an array before you copy and paste the JSON for that array to Google Docs or Notion. Below is an example of an array containing the JSON for the embedded entry and embedded asset.

[
  {
    "nodeType": "embedded-entry-block",
    "data": {
      "target": {
        "sys": {
          "id": "4iS76T8auAE513QzmxSFKo",
          "type": "Link",
          "linkType": "Entry"
        }
      }
    },
    "content": []
  },
  {
    "nodeType": "embedded-asset-block",
    "data": {
      "target": {
        "sys": {
          "id": "2tpbU0f0yCqyR6fXiPVCX6",
          "type": "Link",
          "linkType": "Asset"
        }
      }
    },
    "content": []
  }
]

Export your custom Rich Text

To export the Rich Text elements, you must define a raw content block using the @@begin_raw_content and @@end_raw_content processing directives.

1. Denote the start of a raw content block by by adding the @@begin_raw_content directive to your document.
2. After that, add the JSON for the Rich Text element(s)
3. Finally, close off a raw content block, use the @@end_raw_content directive.

The raw content block should appear in your editor as per the screenshots below.

Using Google Docs

Only plain text is allowed between the two directives. Any other content, such as tables, lists, images, etc., will be dropped during the export. In the case of Notion, as per the screenshot above, you may also use the Code block between the two directives.

When you export your document, Cloudpress will interpret the content between the @@begin_raw_content and @@end_raw_content directives as raw content and will export it to Contentful as-is. It is therefore important that the content you specify is valid JSON. If not, Contentful will prevent Cloudpress from exporting the content.

When the document in the screenshots above is exported to Contentful, it will result in the correct Rich Text content being created.

Sample documents

You can find the sample documents used in this documentation below:

1. Export custom Rich Text content to Contentful (Google Docs)
2. Export custom Rich Text content to Contentful (Notion)