From bd1cf627618abd6ead81ff3644eef64752495482 Mon Sep 17 00:00:00 2001
From: Mark Zhao <57408875+MarkRushB@users.noreply.github.com>
Date: Fri, 19 Jan 2024 22:36:45 -0500
Subject: [PATCH] feat: enable iframe rendering in markdown code block (#2799)

* enable iframe rendering in code block

* fix eslint issue
---
 web/src/components/MemoContent/CodeBlock.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 16f8fd93..4254b8ab 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -15,6 +15,16 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   const formatedLanguage = language.toLowerCase() || "plaintext";
   let highlightedCode = hljs.highlightAuto(content).value;
 
+  // Users can set Markdown code blocks as 'iframe'
+  // to embed videos or external audio links from services like Apple Music or Spotify.
+  if (formatedLanguage === "iframe") {
+    const renderHTML = () => {
+      return { __html: content };
+    };
+
+    return <div className="mx-auto w-11/12 !my-4" dangerouslySetInnerHTML={renderHTML()} />;
+  }
+
   try {
     const temp = hljs.highlight(content, {
       language: formatedLanguage,