Update components/Markdown/CodeBlock.tsx

components/Markdown/CodeBlock.tsx

@@ -1,5 +1,5 @@
 import { IconCheck, IconClipboard, IconDownload, IconCaretRight } from '@tabler/icons-react';
-import { FC, memo, useState } from 'react';
+import { FC, memo, useRef, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
@@ -15,15 +15,35 @@ interface Props {
   value: string;
 }
 
+const IframeContent: FC = () => {
+  useEffect(() => {
+    window.addEventListener("message", ({ data: { code, language } }) => {
+      if (language === 'html') {
+        document.body.innerHTML = code;
+      } else if (language === 'javascript') {
+        eval(code);
+      }
+    });
+  }, []);
+  return null;
+};
+
 export const CodeBlock: FC<Props> = memo(({ language, value }) => {
   const { t } = useTranslation('markdown');
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [isRunning, setIsRunning] = useState<Boolean>(false);
+  const iframeRef = useRef<any>(null);
 
   const toggleRunCode = () => {
     setIsRunning(!isRunning);
   };
 
+  useEffect(() => {
+    if (isRunning && iframeRef.current) {
+      iframeRef.current.contentWindow?.postMessage({ code: value, language }, "*");
+    }
+  }, [isRunning, value, language]);
+
   const copyToClipboard = () => {
     if (!navigator.clipboard || !navigator.clipboard.writeText) {
       return;
@@ -77,13 +97,15 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? t('Copied!') : t('Copy code')}
           </button>
-          <button
-            className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
-            onClick={toggleRunCode}
-          >
-            <IconCaretRight size={18} />
-            {isRunning ? t('Stop') : t('Run code')}
-          </button>
+          {(language === 'html' || language === 'javascript') && (
+            <button
+              className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-white"
+              onClick={toggleRunCode}
+            >
+              <IconCaretRight size={18} />
+              {isRunning ? t('Stop') : t('Run code')}
+            </button>
+          )}
           <button
             className="flex items-center rounded bg-none p-1 text-xs text-white"
             onClick={downloadAsFile}
@@ -102,10 +124,12 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       </SyntaxHighlighter>
       {isRunning && (
         <iframe 
-          srcDoc={value} 
+          ref={iframeRef}
           title="live code preview" 
           className="w-full h-64 mt-4 border-2 border-gray-300"
-        />
+        >
+          <IframeContent />
+        </iframe>
       )}
     </div>
   );