# `RichText` rendering

This component is used to render children produced using the Gutenberg
`<RichText>` editor component (converted using `childrenFromHtml`).
This might look like this:

```json
[
  "Here's some ",
  {
    "type": "strong",
    "props": {
      "children": ["words that are bold"]
    }
  },
  ", and some ",
  {
    "type": "em",
    "props": {
      "children": ["words that are italic"]
    }
  },
  ".",
  {
    "type": "br",
    "props": {
      "children": []
    }
  },
  "Here's some words that are on a new line.",
  {
    "type": "br",
    "props": {
      "children": []
    }
  },
  "Finally here's a word that has all the possible formats: ",
  {
    "type": "strong",
    "props": {
      "children": [
        {
          "type": "em",
          "props": {
            "children": [
              {
                "type": "s",
                "props": {
                  "children": ["WORD"]
                }
              }
            ]
          }
        }
      ]
    }
  },
  "!"
]
```

Our `<RichText>` component takes these `children` and loops, outputting
string data and rendering objects using an appropriate _format_.
Formats recursively render more `<RichText>` components in order to handle
complex formatting.

The above example will serialise to the following:

```jsx
<RichText>
  Here&amp;s some
  <Bold>
    <strong>
      <RichText>
        words that are bold
      </RichText>
    </strong>
  </Bold>
  , and some
  <Italic>
    <em>
      <RichText>
        words that are italic
      </RichText>
    </em>
  </Italic>
  .
  <Newline>
    <br />
  </Newline>
  Here&amp;s some words that are on a new line.
  <Newline>
    <br />
  </Newline>
  Finally here&amp;s a word that has all the possible formats:
  <Bold>
    <strong>
      <RichText>
        <Italic>
          <em>
            <RichText>
              <Strikethrough>
                <s>
                  WORD
                </s>
              </Strikethrough>
            </RichText>
          </em>
        </Italic>
      </RichText>
    </strong>
  </Bold>
  !
</RichText>
```

... and the result:

> Here's some **words that are bold**, and some _words that are italic_.
>
> Here's some words that are on a new line.
>
> Finally here's a word that has all the possible formats: **_~~WORD~~_**!
