feat: add default renderers for audio and video

Author: piotrzaborow

src/blocksToReactComponents.tsx

@@ -25,6 +25,12 @@ const defaultRenderers: RenderNode = {
 	),
 	[BLOCKS.CODE]: (block: IBlock) => <code>{blockToText(block)}</code>,
 	[BLOCKS.IMAGE]: (block: IBlock) => <img src={block.image.file.url} />,
+	[BLOCKS.AUDIO]: (block) => (
+		<audio controls preload='none' src={block.audio.file.url} />
+	),
+	[BLOCKS.VIDEO]: (block) => (
+		<video controls preload='none' src={block.video.file.url} />
+	),
 }
 
 const blocksToReactComponents = (

src/utils/UtilsInterfaces.tsx

@@ -15,12 +15,14 @@ export interface IBlock {
 	numbered_list_item?: IBlockContent
 	quote?: IBlockContent
 	code?: IBlockContent
-	image?: IImage
+	image?: IAsset
+	audio?: IAsset
+	video?: IAsset
 	list?: Array<IBlock>
 	children?: Array<IBlock>
 }
 
-interface IImage {
+interface IAsset {
 	file: {
 		url: string
 	}

src/utils/blockRenderer.ts

@@ -1,38 +1,9 @@
 import { appendKeyToElement } from "./appendKeyToElement"
-import BLOCKS from "./blocks"
 import { IBlock, RenderNode } from "./UtilsInterfaces"
 
 const blockRenderer = (block: IBlock, renderers?: RenderNode) => {
-	switch (block.type) {
-		case BLOCKS.PARAGRAPH:
-			return appendKeyToElement(renderers[BLOCKS.PARAGRAPH](block), block.id)
-		case BLOCKS.HEADING1:
-			return appendKeyToElement(renderers[BLOCKS.HEADING1](block), block.id)
-		case BLOCKS.HEADING2:
-			return appendKeyToElement(renderers[BLOCKS.HEADING2](block), block.id)
-		case BLOCKS.HEADING3:
-			return appendKeyToElement(renderers[BLOCKS.HEADING3](block), block.id)
-		case BLOCKS.BULLETEDLISTITEM:
-			return appendKeyToElement(
-				renderers[BLOCKS.BULLETEDLISTITEM](block),
-				block.id
-			)
-		case BLOCKS.NUMBEREDLISTITEM:
-			return appendKeyToElement(
-				renderers[BLOCKS.NUMBEREDLISTITEM](block),
-				block.id
-			)
-		case BLOCKS.BULLETEDLIST:
-			return appendKeyToElement(renderers[BLOCKS.BULLETEDLIST](block), block.id)
-		case BLOCKS.NUMBEREDLIST:
-			return appendKeyToElement(renderers[BLOCKS.NUMBEREDLIST](block), block.id)
-		case BLOCKS.QUOTE:
-			return appendKeyToElement(renderers[BLOCKS.QUOTE](block), block.id)
-		case BLOCKS.CODE:
-			return appendKeyToElement(renderers[BLOCKS.CODE](block), block.id)
-		case BLOCKS.IMAGE:
-			return appendKeyToElement(renderers[BLOCKS.IMAGE](block), block.id)
-	}
+	// console.log(block.type)
+	return appendKeyToElement(renderers[block.type](block), block.id)
 }
 
 export default blockRenderer

src/utils/blocks.ts

@@ -10,6 +10,8 @@ const BLOCKS = {
 	QUOTE: "quote",
 	IMAGE: "image",
 	CODE: "code",
+	AUDIO: "audio",
+	VIDEO: "video",
 }
 
 export default BLOCKS

src/utils/remapContent.ts

@@ -4,6 +4,7 @@ const remapContent = (content: Array<IBlock>) => {
 	let result: Array<IBlock> = []
 	const isNumberedListItem = (block: IBlock) =>
 		block.type === "numbered_list_item"
+
 	const isBulletedListItem = (block: IBlock) =>
 		block.type === "bulleted_list_item"
 
@@ -29,8 +30,9 @@ const remapContent = (content: Array<IBlock>) => {
 		return bulleted.flat()
 	}
 
-	for (let index = 0; index < content.length - 1; index++) {
+	for (let index = 0; index < content.length; index++) {
 		const block = content[index]
+
 		if (!isBulletedListItem(block) && !isNumberedListItem(block)) {
 			result.push(block)
 		}