Adding Asset Component for Rich Text Renderer (#32503)

This PR accomplishes 2 things:

1. You can now add images to the rich text post of the example and see those images show up in the app. This is a good jumping off point for people who are learning how to customize the rich text renderers by adding custom components to the mapper.
2. Updating the README pictures to have a more up-to-date UI in the screenshots.

## Feature
- [x] Documentation added

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

examples/cms-contentful/README.md

@@ -139,7 +139,7 @@ After setting up the content model (either manually or by running `npm run setup
 
 **Content model overview**
 
-![Content model overview](./docs/content-model-overview.jpg)
+![Content model overview](./docs/content-model-overview.png)
 
 ### Step 4. Populate Content
 
@@ -158,7 +158,7 @@ Next, create another entry with the content type **Post**:
 
 **Important:** For each entry and asset, you need to click on **Publish**. If not, the entry will be in draft state.
 
-![Published content entry](./docs/content-entry-publish.jpg)
+![Published content entry](./docs/content-entry-publish.png)
 
 ### Step 5. Set up environment variables
 
@@ -212,15 +212,15 @@ http://localhost:3000/api/preview?secret=<CONTENTFUL_PREVIEW_SECRET>&slug={entry
 
 Replace `<CONTENTFUL_PREVIEW_SECRET>` with its respective value in `.env.local`.
 
-![Content preview setup](./docs/content-preview-setup.jpg)
+![Content preview setup](./docs/content-preview-setup.png)
 
 Once saved, go to one of the posts you've created and:
 
 - **Update the title**. For example, you can add `[Draft]` in front of the title.
 - The state of the post will switch to **CHANGED** automatically. **Do not** publish it. By doing this, the post will be in draft state.
 - In the sidebar, you will see the **Open preview** button. Click on it!
 
-![Content entry overview](./docs/content-entry-preview.jpg)
+![Content entry overview](./docs/content-entry-preview.png)
 
 You will now be able to see the updated title. To exit preview mode, you can click on **Click here to exit preview mode** at the top of the page.
 

examples/cms-contentful/components/post-body.js

@@ -1,11 +1,27 @@
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
+import { BLOCKS } from '@contentful/rich-text-types'
 import markdownStyles from './markdown-styles.module.css'
+import RichTextAsset from './rich-text-asset'
+
+const customMarkdownOptions = (content) => ({
+  renderNode: {
+    [BLOCKS.EMBEDDED_ASSET]: (node) => (
+      <RichTextAsset
+        id={node.data.target.sys.id}
+        assets={content.links.assets.block}
+      />
+    ),
+  },
+})
 
 export default function PostBody({ content }) {
   return (
     <div className="max-w-2xl mx-auto">
       <div className={markdownStyles['markdown']}>
-        {documentToReactComponents(content.json)}
+        {documentToReactComponents(
+          content.json,
+          customMarkdownOptions(content)
+        )}
       </div>
     </div>
   )

examples/cms-contentful/components/rich-text-asset.js

@@ -0,0 +1,11 @@
+import Image from 'next/image'
+
+export default function RichTextAsset({ id, assets }) {
+  const asset = assets?.find((asset) => asset.sys.id === id)
+
+  if (asset?.url) {
+    return <Image src={asset.url} layout="fill" alt={asset.description} />
+  }
+
+  return null
+}

examples/cms-contentful/lib/api.js

@@ -14,6 +14,17 @@ author {
 excerpt
 content {
   json
+  links {
+    assets {
+      block {
+        sys {
+          id
+        }
+        url
+        description
+      }
+    }
+  }
 }
 `
 

examples/cms-contentful/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^15.4.0",
     "classnames": "2.3.1",
-    "date-fns": "2.22.1",
+    "date-fns": "2.28.0",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"