Rendering HTML Converted From Blocks

import "@blocknote/core/fonts/inter.css";import "@blocknote/mantine/style.css";import { useCreateBlockNote, usePrefersColorScheme } from "@blocknote/react";import { useRef, useEffect } from "react";export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Blocks:",            styles: { bold: true },          },        ],      },      {        type: "paragraph",        content: "Paragraph",      },      {        type: "heading",        content: "Heading",      },      {        id: "toggle-heading",        type: "heading",        props: { isToggleable: true },        content: "Toggle Heading",      },      {        type: "quote",        content: "Quote",      },      {        type: "bulletListItem",        content: "Bullet List Item",      },      {        type: "numberedListItem",        content: "Numbered List Item",      },      {        type: "checkListItem",        content: "Check List Item",      },      {        id: "toggle-list-item",        type: "toggleListItem",        content: "Toggle List Item",      },      {        type: "codeBlock",        props: { language: "javascript" },        content: "console.log('Hello, world!');",      },      {        type: "table",        content: {          type: "tableContent",          rows: [            {              cells: ["Table Cell", "Table Cell", "Table Cell"],            },            {              cells: ["Table Cell", "Table Cell", "Table Cell"],            },            {              cells: ["Table Cell", "Table Cell", "Table Cell"],            },          ],        },      },      {        type: "file",      },      {        type: "image",        props: {          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",          caption:            "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",        },      },      {        type: "video",        props: {          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",          caption:            "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",        },      },      {        type: "audio",        props: {          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",          caption:            "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",        },      },      {        type: "paragraph",      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Inline Content:",            styles: { bold: true },          },        ],      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Styled Text",            styles: {              bold: true,              italic: true,              textColor: "red",              backgroundColor: "blue",            },          },          {            type: "text",            text: " ",            styles: {},          },          {            type: "link",            content: "Link",            href: "https://www.blocknotejs.org",          },        ],      },      {        type: "paragraph",      },    ],  });  const systemColorScheme = usePrefersColorScheme();  const theme =    systemColorScheme === "no-preference" ? "light" : systemColorScheme;  // Renders the exported static HTML from the editor.  return (    <div      className="bn-container bn-mantine"      data-color-scheme={theme}      data-mantine-color-scheme={theme}    >      <div        className="ProseMirror bn-editor bn-default-styles"        dangerouslySetInnerHTML={{          __html: editor.blocksToFullHTML(editor.document),        }}      />    </div>  );}