I'm working on a NextJS V13 app where I need to display HTML content fetched from a CMS. Instead of using dangerouslySetHtml, I opted for the html-react-parser package to parse the HTML and replace certain embedded tags like <a>, <img>, and <video> with React components such as <Link>, Cloudinary's <CldImage>, and a custom React component called <VideoPlayer>.
While I've successfully replaced the <a> and <img> elements, I'm struggling to extract the "src" attribute of the <video> tag from the domNode in order to pass it to the <VideoPlayer> component.
Here is a snippet of my code:
import parse, { Element, HTMLReactParserOptions } from "html-react-parser"
import VideoPlayer from "@/components/video-player"
export default function ArticleContent({ content }: { content: string }) {
const parserOptions: HTMLReactParserOptions = {
replace: (domNode) => {
// Replace embedded <video> tags with <VideoPlayer>
if (domNode instanceof Element && domNode.name === "video") {
return <VideoPlayer src={domNode.<???? WHAT GOES HERE ???>} />
}
}
}
return (
<div>
{parse(content, parserOptions)}
</div>
)
}
I'm having trouble determining how to access the "src" attribute within the <video> tag in the domNode. Any suggestions would be greatly appreciated!