refactor(EmbedCodeDialog): don't use markdown renderer

src/pages/Home/EmbedCodeDialog.tsx

@@ -6,19 +6,6 @@ import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
 import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
-// These imports need to be ts-ignored to prevent spurious errors that look
-// like this:
-//
-//   Module 'react-markdown' cannot be imported using this construct. The
-//   specifier only resolves to an ES module, which cannot be imported
-//   synchronously. Use dynamic import instead. (tsserver 1471)
-//
-// @ts-ignore
-import Markdown from 'react-markdown'
-// @ts-ignore
-import { CodeProps } from 'react-markdown/lib/ast-to-react'
-// @ts-ignore
-import remarkGfm from 'remark-gfm'
 
 interface EmbedCodeDialogProps {
   showEmbedCode: boolean
@@ -34,41 +21,20 @@ export const EmbedCodeDialog = ({
   <Dialog open={showEmbedCode} onClose={handleEmbedCodeWindowClose}>
     <DialogTitle>Room embed code</DialogTitle>
     <DialogContent>
-      <Markdown
+      <SyntaxHighlighter
-        remarkPlugins={[remarkGfm]}
+        language="html"
-        components={{
+        style={materialDark}
-          // https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
+        PreTag="div"
-          code({
+        lineProps={{
-            node,
+          style: {
-            inline,
+            wordBreak: 'break-all',
-            className,
+            whiteSpace: 'pre-wrap',
-            children,
-            style,
-            ...props
-          }: CodeProps) {
-            return (
-              <SyntaxHighlighter
-                children={String(children).replace(/\n$/, '')}
-                language="html"
-                style={materialDark}
-                PreTag="div"
-                lineProps={{
-                  style: {
-                    wordBreak: 'break-all',
-                    whiteSpace: 'pre-wrap',
-                  },
-                }}
-                wrapLines={true}
-                {...props}
-              />
-            )
           },
         }}
+        wrapLines={true}
       >
-        {`\`\`\`html
+        {`<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />`}
-<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />
+      </SyntaxHighlighter>
-\`\`\``}
-      </Markdown>
       <DialogContentText
         sx={{
           mb: 2,