From 0911c29729fa7beb388c05207761900409d9596b Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 8 Oct 2023 16:58:29 -0500
Subject: [PATCH] refactor(EmbedCodeDialog): don't use markdown renderer

---
 src/pages/Home/EmbedCodeDialog.tsx | 56 ++++++------------------------
 1 file changed, 11 insertions(+), 45 deletions(-)

diff --git a/src/pages/Home/EmbedCodeDialog.tsx b/src/pages/Home/EmbedCodeDialog.tsx
index f351fa5..cb2e68b 100644
--- a/src/pages/Home/EmbedCodeDialog.tsx
+++ b/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
-        remarkPlugins={[remarkGfm]}
-        components={{
-          // https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight
-          code({
-            node,
-            inline,
-            className,
-            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}
-              />
-            )
+      <SyntaxHighlighter
+        language="html"
+        style={materialDark}
+        PreTag="div"
+        lineProps={{
+          style: {
+            wordBreak: 'break-all',
+            whiteSpace: 'pre-wrap',
           },
         }}
+        wrapLines={true}
       >
-        {`\`\`\`html
-<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />
-\`\`\``}
-      </Markdown>
+        {`<iframe src="${embedUrl}" allow="camera;microphone;display-capture" width="800" height="800" />`}
+      </SyntaxHighlighter>
       <DialogContentText
         sx={{
           mb: 2,