Merge branch 'dev'

Author: ChenlingasMx

website/src/component/Preview/index.js

@@ -34,6 +34,9 @@ const getBooleanValue = (param, field, defaultValue) => {
 };
 
 const Preview = ({ path, ...mdData }) => {
+  const Preview = CodeLayout.Preview;
+  const Code = CodeLayout.Code;
+  const Toolbar = CodeLayout.Toolbar;
   const $dom = useRef(null);
   return (
     <Wrapper ref={$dom}>
@@ -43,49 +46,43 @@ const Preview = ({ path, ...mdData }) => {
         // transformImageUri={transformImageUri}
         source={mdData.source}
         rehypeRewrite={(node, index, parent) => {
-          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';
+          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 = [];
             }
           }
         }}
         components={{
-          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}
-                  >
+          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>
                     <Child />
-                  </CodeLayout>
-                );
-              }
+                  </Preview>
+                  <Toolbar text={code} copied={getBooleanValue(param, 'copied', true)}>
+                    {param.title || '示例'}
+                  </Toolbar>
+                  <Code>
+                    <code {...rest} />
+                  </Code>
+                </CodeLayout>
+              );
             }
-            return <div {...props} />;
+            return <code {...rest} />;
           },
         }}
       />