fix(deps): update dependency react-code-preview-layout to v3 #1

Author: jaywcjlove

www/package.json

@@ -14,7 +14,7 @@
     "@uiw/react-markdown-preview": "^4.1.0",
     "@uiw/react-json-view": "^0.0.1",
     "styled-components": "^6.0.0-rc.3",
-    "react-code-preview-layout": "^2.0.4",
+    "react-code-preview-layout": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

www/src/Markdown.tsx

@@ -1,12 +1,15 @@
-import { useRef } from 'react';
 import CodeLayout from 'react-code-preview-layout';
-import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
+import { getMetaId, isMeta } from 'markdown-react-code-preview-loader';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import styled from 'styled-components';
 import rehypeIgnore from 'rehype-ignore';
 import data from '@uiw/react-json-view/README.md';
 import { CodeComponent, ReactMarkdownNames } from 'react-markdown/lib/ast-to-react';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
 const MarkdownStyle = styled(MarkdownPreview)`
   margin: 0 auto;
   box-shadow: rgb(8 15 41 / 8%) 0.5rem 0.5rem 2rem 0px, rgb(8 15 41 / 8%) 0px 0px 1px 0px;
@@ -19,9 +22,7 @@ const MarkdownStyle = styled(MarkdownPreview)`
 `;
 
 const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...props }) => {
-  const $dom = useRef<HTMLDivElement>(null);
   const { 'data-meta': meta, ...rest } = props as any;
-
   if (inline || !isMeta(meta)) {
     return <code {...props} />;
   }
@@ -30,16 +31,15 @@ const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...prop
   const Child = data.components[`${metaId}`];
   if (metaId && typeof Child === 'function') {
     const code = data.data[metaId].value || '';
-    const param = getURLParameters(meta);
     return (
-      <CodeLayout
-        ref={$dom}
-        style={{ marginBottom: 10 }}
-        toolbar={param.title || 'Example'}
-        code={<pre {...rest} />}
-        text={code}
-      >
-        <Child />
+      <CodeLayout>
+        <Preview>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>Code Example</Toolbar>
+        <Code>
+          <code {...rest} />
+        </Code>
       </CodeLayout>
     );
   }