From d74670db07afc10877940add1fc807aabcffaeb1 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 25 Jun 2024 02:12:45 +0800
Subject: [PATCH] chore: codesandbox preview

---
 site/plugin-tdoc/demo.js                  | 4 ++--
 site/src/components/codesandbox/index.jsx | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js
index 5de07db9c..c2a8e3c4e 100644
--- a/site/plugin-tdoc/demo.js
+++ b/site/plugin-tdoc/demo.js
@@ -32,8 +32,8 @@ export default function renderDemo(md, container) {
         const tpl = `
             <td-doc-demo component-name="${componentName.trim()}" demo-name="${demoName}" languages="TypeScript,JavaScript" data-JavaScript={${demoJsxCodeDefName}} data-TypeScript={${demoCodeDefName}}>
               <div slot="action">
-                <Stackblitz code={${demoCodeDefName}} />
-                <Codesandbox code={${demoCodeDefName}} />
+                <Stackblitz code={${demoCodeDefName}} demoName="${demoName}"/>
+                <Codesandbox code={${demoCodeDefName}} demoName="${demoName}"/>
               </div>
               <div className="tdesign-demo-item__body">
                 <div style={{width: '100%'}}><${demoDefName} /></div>
diff --git a/site/src/components/codesandbox/index.jsx b/site/src/components/codesandbox/index.jsx
index 1a172a76a..44dd8610b 100644
--- a/site/src/components/codesandbox/index.jsx
+++ b/site/src/components/codesandbox/index.jsx
@@ -6,10 +6,11 @@ import { mainJsContent, htmlContent, pkgContent, styleContent } from './content'
 import '../../styles/Codesandbox.less';
 
 export default function Codesandbox(props) {
-  const { code } = props;
   const [loading, setLoading] = useState(false);
 
   function onRunOnline() {
+    const code = document.querySelector(`td-doc-demo[demo-name='${props.demoName}']`)?.currentRenderCode;
+
     setLoading(true);
     fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
       method: 'POST',
@@ -25,13 +26,13 @@ export default function Codesandbox(props) {
           'public/index.html': {
             content: htmlContent,
           },
-          'src/main.jsx': {
+          'src/main.tsx': {
             content: mainJsContent,
           },
           'src/index.css': {
             content: styleContent,
           },
-          'src/demo.jsx': {
+          'src/demo.tsx': {
             content: code,
           },
         },
@@ -39,7 +40,7 @@ export default function Codesandbox(props) {
     })
       .then((x) => x.json())
       .then(({ sandbox_id: sandboxId }) => {
-        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.jsx`);
+        window.open(`https://codesandbox.io/s/${sandboxId}?file=/src/demo.tsx`);
       })
       .finally(() => {
         setLoading(false);