Rich text renderer draftail

[talebbits]

Wagtail use draftail to render richtext what gives use option to get a json serialized object. We need to figure out how to render this data in react component.

Sample input

"headerbodyBlock": {
  "blockName": "headerbody_block",
  "body": {
    "blocks": [
      {
        "depth": 0,
        "entityRanges": [
          {
            "key": 0,
            "length": 6,
            "offset": 63
          }
        ],
        "inlineStyleRanges": [],
        "key": "6ebmj",
        "text": "So what does it all mean? What can 2U-powered universities and WeWork members and employees expect? Global access.",
        "type": "unstyled"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [
          {
            "length": 9,
            "offset": 98,
            "style": "ITALIC"
          },
          {
            "length": 6,
            "offset": 197,
            "style": "BOLD"
          }
        ],
        "key": "j9pny",
        "text": "Students and faculty involved in 2U-powered programs now have Global Access Memberships to WeWork coworking spaces across the world, where they can learn, teach, connect, and collaborate in person\nWeWork members and employees can apply from $5M worth of scholarships from 2U to advance their education through 2U-powered grad programs and GetSmarter short courses\n2U will integrate with WeWork’s Learn.co technology, enhancing the experience of students and faculty across the globe",
        "type": "unstyled"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [
          {
            "length": 10,
            "offset": 0,
            "style": "BOLD"
          }
        ],
        "key": "qeq3c",
        "text": "Order list",
        "type": "unstyled"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "snn1s",
        "text": "one item",
        "type": "ordered-list-item"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "1enqb",
        "text": "tow item",
        "type": "ordered-list-item"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "djuda",
        "text": "three item",
        "type": "ordered-list-item"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [
          {
            "length": 13,
            "offset": 0,
            "style": "BOLD"
          }
        ],
        "key": "96tf5",
        "text": "Un-Order list",
        "type": "unstyled"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "mfe2b",
        "text": "some item",
        "type": "unordered-list-item"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "1zep6",
        "text": "more item",
        "type": "unordered-list-item"
      },
      {
        "depth": 0,
        "entityRanges": [],
        "inlineStyleRanges": [],
        "key": "f6bxk",
        "text": "soem more item",
        "type": "unordered-list-item"
      }
    ],
    "entityMap": {
      "0": {
        "data": {
          "url": "https://google.com"
        },
        "mutability": "MUTABLE",
        "type": "LINK"
      }
    }
  },
  "headline": "Our partnership."
}

Here is some info to start with

https://demo.draftail.org/storybook/?path=/story/draftail--home https://github.com/nikgraf/awesome-draft-js https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html https://www.draftail.org/docs/importing-and-exporting-html