fix(Preview): 示例预览组件将节点挂在到div下

Author: nullptr-z

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} />;
           },
         }}
       />