chore: update preview

antdpro · Mar 7, 2023 · 925131f · 925131f
1 parent f364c23
commit 925131f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 32 deletions.
diff --git a/examples/website/package.json b/examples/website/package.json
@@ -31,11 +31,11 @@
     "@antdp/user-login": "2.0.0-bate-4.1",
     "@uiw/react-back-to-top": "^1.2.1",
     "@uiw/react-github-corners": "^1.5.15",
-    "@uiw/react-markdown-preview": "^4.1.6",
+    "@uiw/react-markdown-preview": "~4.1.10",
     "@wcj/dark-mode": "^1.0.15",
     "antdp": "2.0.0-bate-4.1",
     "react": "^18.2.0",
-    "react-code-preview-layout": "~2.0.7",
+    "react-code-preview-layout": "~2.1.1",
     "react-dom": "^18.2.0",
     "react-router": "~6.4.3",
     "react-router-dom": "~6.4.3",
@@ -49,7 +49,7 @@
     "@types/react-dom": "~18.0.10",
     "@types/styled-components": "^5.1.26",
     "kkt": "~7.4.0",
-    "markdown-react-code-preview-loader": "~2.1.2"
+    "markdown-react-code-preview-loader": "^2.1.5"
   },
   "eslintConfig": {
     "extends": [
@@ -69,4 +69,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/examples/website/src/components/Preview/index.tsx b/examples/website/src/components/Preview/index.tsx
@@ -60,37 +60,47 @@ const Preview = (props: MarkdownProps) => {
               child.children = [];
             }
           }
+          if (node.type === 'element' && node.tagName === 'pre' && node.children[0].data?.meta) {
+            const meta = node.children[0].data?.meta as string;
+            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 as any;
-            if (inline || !isMeta(meta)) {
-              return <code {...props} />;
-            }
-            const line = node.position?.start.line;
-            const metaId = getMetaId(meta) || String(line);
-            const Child = MDcomponents[`${metaId}`];
-            if (metaId && typeof Child === 'function') {
-              const code = MDdata[metaId].value || '';
-              const param = getURLParameters(meta);
-              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 || '示例'}
-                  code={<code {...rest} />}
-                  text={code}
-                >
-                  <Child />
-                </CodeLayout>
-              );
+          div: ({ node, ...props }) => {
+            const { 'data-meta': meta, 'data-md': metaData, ...rest } = props as any;
+            if (meta === 'preview') {
+              const line = node.position?.start.line;
+              const metaId = getMetaId(meta) || String(line);
+              const Child = MDcomponents[metaId];
+              if (metaId && typeof Child === 'function') {
+                const code = MDdata[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 || '示例'}
+                    code={<code {...rest} />}
+                    text={code}
+                  >
+                    <Child />
+                  </CodeLayout>
+                );
+              }
             }
-            return <code {...rest} />;
+            return <div {...props} />;
           },
         }}
       />