@portabletext/contentful-rich-text-to-portable-text

contentful-rich-text-to-portable-text

This package transforms data of the RichText type (used by Contentful) into a data structure representing the same content in Portable Text.

Installation

npm i @portabletext/contentful-rich-text-to-portable-text

Examples

Simple transformation

const { toPortableText } = require('@portabletext/contentful-rich-text-to-portable-text')

const richText = {
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "heading-1",
      "data": {},
      "content": [
        {
          "nodeType": "text",
          "value": "Hello, everyone!",
          "marks": [],
          "data": {}
        }
      ]
    }
  ]
})


const portableText = toPortableText(richText)

// portableText is
[
  {
    "_type": "block",
    "_key": "heading-1",
    "style": "h1",
    "markDefs": [],
    "children": [
      {
        "_type": "span",
        "_key": "text",
        "marks": [],
        "text": "Hello, everyone!"
      }
    ]
  }
]

Transformation with styling

const { toPortableText } = require('@portabletext/contentful-rich-text-to-portable-text')

const richText = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'heading-2',
      data: {},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{type: 'bold'}],
          data: {}
        },
        {
          nodeType: 'text',
          value: ', ',
          marks: [],
          data: {}
        },
        {
          nodeType: 'text',
          value: 'everyone!',
          marks: [{type: 'underline'}],
          data: {}
        }
      ]
    }
  ]
}

const portableText = toPortableText(richText)
// portableText is
[
  {
    "_type": "block",
    "_key": "heading-2",
    "style": "h2",
    "markDefs": [],
    "children": [
      {
        "_type": "span",
        "_key": "text",
        "marks": [
          "strong"
        ],
        "text": "Hello"
      },
      {
        "_type": "span",
        "_key": "text",
        "marks": [],
        "text": ", "
      },
      {
        "_type": "span",
        "_key": "text",
        "marks": [
          "underline"
        ],
        "text": "everyone!"
      }
    ]
  }
]

Custom key generation via options.generateKey

const uuid = require('uuid')
const { toPortableText } = require('@portabletext/contentful-rich-text-to-portable-text')

const richText = {
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "heading-1",
      "data": {},
      "content": [
        {
          "nodeType": "text",
          "value": "Hello, everyone!",
          "marks": [],
          "data": {}
        }
      ]
    }
  ]
}

const portableText = toPortableText(richText, {
  generateKey: (node) => [node.nodeType, uuid()].join('-')
})

// portableText is
[
  {
    "_type": "block",
    "_key": "heading-1-83474017-970f-4450-b983-dc052027ef9b",
    "style": "h1",
    "markDefs": [],
    "children": [
      {
        "_type": "span",
        "_key": "text-33e92fc6-cc93-4441-8537-0eba5db9ad6a",
        "marks": [],
        "text": "Hello, everyone!"
      }
    ]
  }
]

Custom transformation of HR node via options.transformers.hr

const { toPortableText } = require('@portabletext/contentful-rich-text-to-portable-text')

const richText = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: "heading-1",
      data: {},
      content: [
        {
          nodeType: "text",
          value: "Hello, everyone!",
          marks: [],
          data: {}
        }
      ]
    },
    {
      data: {},
      content: [],
      nodeType: 'hr'
    },
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: "This is a little introduction. It's just a paragraph without any fancy stuff.",
          marks: [],
          data: {}
        }
      ],
      data: {}
    }
  ]
}

const portableText = toPortableText(data, {
  transformers: {
    hr: (node) => {
      return [
        {
          _type: "break",
          style: "lineBreak",
        },
      ];
    },
  }
})

// portableText is
[
  {
    "_type": "block",
    "_key": "heading-1",
    "style": "h1",
    "markDefs": [],
    "children": [
      {
        "_type": "span",
        "_key": "text",
        "marks": [],
        "text": "Hello, everyone!"
      }
    ]
  },
  {
    "_type": "break",
    "style": "lineBreak"
  },
  {
    "_type": "block",
    "_key": "paragraph",
    "style": "normal",
    "markDefs": [],
    "children": [
      {
        "_type": "span",
        "_key": "text",
        "marks": [],
        "text": "This is a little introduction. It's just a paragraph without any fancy stuff."
      }
    ]
  }
]

Options

To control the transformation of specific nodes you may pass in a function to handle these with these properties of options.transformers

link?: Function
'entry-hyperlink'?: Function
'asset-hyperlink'?: Function
'embedded-asset-block'?: Function
'embedded-entry-block'?: Function
'embedded-entry-inline'?: Function
hr?: Function

Custom key generation is a function passed as options.generateKey which is expected to return a string.

Caveats

• You will need to specify your own serialization for HR tags. See examples.
• Blockquotes in RichText and PortableText do not currently map directly. You may lose newlines in this step and you should verify the output and make any needed adjustments.

License

MIT-licensed. See LICENSE.