Let's fix up our Markdown content.

1. Update the awesome-content.tsx and add the following:

import { TinaMarkdown } from "tinacms/dist/rich-text";

...

<h1>{amazingTitle}</h1>
<TinaMarkdown content={incredibleBody} />

Test it. It works! Now try and edit your content again. Look, a rich-text editor!

2. Go ahead and add some styling to your body.

Why did we need to do this? When we ask TinaCMS for our Markdown content it gives us a parsed abstract syntax tree (AST). This looks like a big JavaScript object that contains our text / formatting / structure each in it's own node.

Tina can handle this for us using TinaMarkdown as above, or we can step through it ourselves for even more control. 🔧

TinaMarkdown needs to be called in a client component since it needs access to React hooks.