contentful-html-to-richtext

Module that converts HTML to the Contentful rich-text model. It was developed to assist in the process of migrating rich text content into contentful, a popular content management system. The functionality has been thoroughly tested to ensure that it performs reliably. It is a useful tool for anyone who needs to convert HTML to contentful's rich-text format, whether for the purpose of migrating existing content or integrating with contentful's platform.

This module is under development

Current Status

Verified	Verified	Beta
<ul>	<embedded-asset>	<img>
<li>	<inline-entry>
<ol>	<embedded-entry>
<b>	<entry-hyperlink>
<u>	<td>
<i>	<th>
<p>	<tr>
<br />	<table>
<code>	<p>
<a>	<hr>
<blockquote>	<h{1-6}>

Installation

Using npm:

npm i html-to-richtext-contentful

Usage

import { htmlToRichText } from 'html-to-richtext-contentful';

const html = '<table><tr><th><p>Name</p></th></tr><tr><td><p>SodoTeo</p></td></tr></table>';
const result = htmlToRichText(html);

Output:

  {
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "table",
      "data": {},
      "content": [
        {
          "nodeType": "table-row",
          "data": {},
          "content": [
            {
              "nodeType": "table-header-cell",
              "data": {},
              "content": [
                {
                  "nodeType": "paragraph",
                  "data": {},
                  "content": [
                    {
                      "nodeType": "text",
                      "value": "Name",
                      "marks": [],
                      "data": {}
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "nodeType": "table-row",
          "data": {},
          "content": [
            {
              "nodeType": "table-cell",
              "data": {},
              "content": [
                {
                  "nodeType": "paragraph",
                  "data": {},
                  "content": [
                    {
                      "nodeType": "text",
                      "value": "SodoTeo",
                      "marks": [],
                      "data": {}
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

const { htmlToRichText } = require('html-to-richtext-contentfult');
// id="<contentful-entry-id>"
const html = '<p><entry-hyperlink id="main-nav-title-industry">title</entry-hyperlink></p>';
const result = htmlToRichText(html);

{
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "paragraph",
      "data": {},
      "content": [
        {
          "nodeType": "entry-hyperlink",
          "data": {
            "target": {
              "sys": {
                "id": "main-nav-title-industry",
                "type": "Link",
                "linkType": "Entry"
              }
            }
          },
          "content": [
            {
              "nodeType": "text",
              "value": "title",
              "marks": [],
              "data": {}
            }
          ]
        }
      ]
    }
  ]
}

Note

To use hyperlinks as entry blocks, as well as embedded and inline entries and assets, you will need to render your custom node constructor and (most likely) Contentful's rich-text-html-renderer, rich-text-types. Below is a snippet on how to do this:

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { BLOCKS, INLINES } from '@contentful/rich-text-types';

if (field.type === 'RichText') {
    const options = {
        renderNode: {
            [BLOCKS.EMBEDDED_ENTRY]: (node) =>
                `<embedded-entry id="${node.data.target.sys.id}"/>`,
            [BLOCKS.EMBEDDED_ASSET]: (node) =>
                `<embedded-asset id="${node.data.target.sys.id}"/>`,
            [INLINES.EMBEDDED_ENTRY]: (node) =>
                `<inline-entry id="${node.data.target.sys.id}"/>`,
            [INLINES.ENTRY_HYPERLINK]: (node) =>
                `<entry-hyperlink id="${node.data.target.sys.id}">${node.content[0].value}</entry-hyperlink>`
        }
    };

    if (field.values['en-US']) {
        field.values['en-US'] = formatHTML(
            documentToHtmlString(field.values['en-US'], options)
        );
    }

    return field;
}

Git Repository

https://github.com/SodoTeo/contentful-html-to-richtext