From 92b3a202c41ec491106ecd1030d136a3e7ba7a10 Mon Sep 17 00:00:00 2001
From: zheng <zhouzheng0646@qq.com>
Date: Wed, 8 Mar 2023 14:12:43 +0800
Subject: [PATCH] =?UTF-8?q?fix(Preview):=20=E7=A4=BA=E4=BE=8B=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=BB=84=E4=BB=B6=E5=B0=86=E8=8A=82=E7=82=B9=E6=8C=82?=
 =?UTF-8?q?=E5=9C=A8=E5=88=B0div=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/component/Preview/index.js | 66 +++++++++++++++-----------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/website/src/component/Preview/index.js b/website/src/component/Preview/index.js
index 30cd1a5c8..b6e19e7f9 100644
--- a/website/src/component/Preview/index.js
+++ b/website/src/component/Preview/index.js
@@ -46,41 +46,49 @@ const Preview = ({ path, ...mdData }) => {
         // transformImageUri={transformImageUri}
         source={mdData.source}
         rehypeRewrite={(node, index, parent) => {
-          if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
-            const child = node.children && node.children[0];
-            if (child && child.properties && child.properties.ariaHidden === 'true') {
-              child.children = [];
+          if (node.type === 'element' && node.tagName === 'pre' && node.children[0].data?.meta) {
+            const meta = node.children[0].data?.meta;
+            if (isMeta(meta)) {
+              node.tagName = 'div';
+              if (!node.properties) {
+                node.properties = {};
+              }
+              node.properties['data-md'] = meta;
+              node.properties['data-meta'] = 'preview';
             }
           }
         }}
         components={{
-          code: ({ inline, node, ...props }) => {
-            const { 'data-meta': meta, ...rest } = props;
-            if (inline || !isMeta(meta)) {
-              return <code {...props} />;
-            }
-            const line = node.position?.start.line;
-            const metaId = getMetaId(meta) || String(line);
-            const Child = mdData.components[`${metaId}`];
-            if (metaId && typeof Child === 'function') {
-              const code = mdData.data[metaId].value || '';
-              const param = getURLParameters(meta);
-              return (
-                <CodeLayout
-                  disableCheckered={getBooleanValue(param, 'disableCheckered', true)}
-                  bordered={getBooleanValue(param, 'bordered', true)}
-                >
-                  <Preview>
+          div: ({ node, ...props }) => {
+            const { 'data-meta': meta, 'data-md': metaData } = props;
+            if (meta === 'preview') {
+              const line = node.position?.start.line;
+              const metaId = getMetaId(meta) || String(line);
+              const Child = mdData.components[`${metaId}`];
+              if (metaId && typeof Child === 'function') {
+                const code = mdData.data[metaId].value || '';
+                const param = getURLParameters(metaData);
+                return (
+                  <CodeLayout
+                    disableCheckered={getBooleanValue(param, 'disableCheckered', true)}
+                    disableToolbar={getBooleanValue(param, 'disableToolbar', false)}
+                    disableCode={getBooleanValue(param, 'disableCode', false)}
+                    disablePreview={getBooleanValue(param, 'disablePreview', false)}
+                    bordered={getBooleanValue(param, 'bordered', true)}
+                    copied={getBooleanValue(param, 'copied', true)}
+                    background={param.background}
+                    toolbar={param.title || '示例'}
+                    codeProps={{ style: { padding: 0 } }}
+                    style={{ padding: 0 }}
+                    code={<pre {...props} />}
+                    text={code}
+                  >
                     <Child />
-                  </Preview>
-                  <Toolbar text={code} copied={getBooleanValue(param, 'copied', true)}>
-                    {param.title || '示例'}
-                  </Toolbar>
-                  <Code>{code}</Code>
-                </CodeLayout>
-              );
+                  </CodeLayout>
+                );
+              }
             }
-            return <code {...rest} />;
+            return <div {...props} />;
           },
         }}
       />