Adding Asset Component for Rich Text Renderer

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"