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":[]
  }
]

Once you have the JSON for the rich text element(s), you can add it to Google Docs or Notion. The process differs for each and is discussed in separate sections below.

​

Export your custom rich text from Google Docs

​

Add JSON for raw content to Google Doc

To export the rich text element(s) from a Google Doc, add a single-cell table to your document - in other words, a table with one row and one column.

Give the table a dotted border by placing your cursor inside the table and selecting the dotted border from the Border dash toolbar item.

Paste the JSON code of the rich text block(s) inside the table.

Next, you must configure Cloudpress to interpret the content of the table as raw content. The procedure differs depending on whether you use the Cloudpress Google Docs Add-on or the Export Content page.

​

Enable raw content during export

You must enable raw content during export. The procedure for this is slightly different, depending on whether you use the Google Docs Add-on or the Export Content page.

​

Tutorial video

The tutorial video below walks you through exporting custom rich text blocks from Google Docs to Contentful.

​

Export your custom rich text from Notion

Cloudpress uses Code blocks to denote raw content in Notion. However, code blocks are also used when you want to include code snippets in your content. For example, you may have a blog geared towards software developers and often include code snippets in your content. In this case, you can instruct Cloudpress to treat only code blocks in a specific language as raw content and all others as code blocks.

​

Enable raw content for your Notion connection

Go to the Connections page in Cloudpress and click on your Notion connection. Go to the Content Conversion tab.

1. In the Raw content blocks section, enable the option to convert code blocks to raw content. With this enabled, Cloudpress will treat all code blocks as raw content.
2. Next, limit raw content only to a specific language. As mentioned before, this is useful when using code blocks for code snippets. In the screenshot below, you can see that Cloudpress will only treat code blocks for JSON as raw content. All other code blocks will be exported as code blocks.

Click Save Changes to save your changes. Cloudpress will now treat code blocks for the specified language in all pages exported from this connection as raw content.

​

Add the rich text to your Notion page

Add a code block to your page.

Paste the JSON code of the rich text block(s) inside the code block and set the language to the same language you configured in your connection settings.

The screenshot below demonstrates a code block containing the JSON code with the language set to JSON.

You can now export the content to Contentful. If the code block’s language matches your Notion connection configuration, Cloudpress will export the JSON code as raw content.

​

Tutorial video

The tutorial video below walks you through exporting custom rich text from Notion to Contentful.