chore(deps): update dependency react-code-preview-layout to v3 #141

Author: jaywcjlove

package.json

@@ -44,7 +44,7 @@
     "@uiw/react-codesandbox": "^1.1.5",
     "@uiw/react-codepen": "^1.0.2",
     "markdown-react-code-preview-loader": "^2.1.2",
-    "react-code-preview-layout": "^2.0.6",
+    "react-code-preview-layout": "^3.0.0",
     "@kkt/less-modules": "^7.4.9",
     "@kkt/ncc": "~1.0.8",
     "@kkt/raw-modules": "^7.4.9",
@@ -59,6 +59,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsbb": "^4.1.5",
+    "jest": "^29.5.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "jest-environment-jsdom": "~29.5.0",
+    "jest-environment-node": "^29.5.0",
     "uiw": "^4.21.14"
   },
   "eslintConfig": {

website/App.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
 import '@uiw/reset.css';
+import "@wcj/dark-mode"
 import './App.css';
 import Page from './components/Markdown';
-import "@wcj/dark-mode"
 
 const App: React.FC = () => {
   return (

website/components/Markdown/index.tsx

@@ -1,54 +1,90 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import styles from './index.module.less';
-import data from "../../../README.md"
-import { useEffect, useRef } from "react"
+import { Root, Element, RootContent } from 'hast';
 import CodeLayout from 'react-code-preview-layout';
 import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
-import { CodeComponent, ReactMarkdownNames } from 'react-markdown/lib/ast-to-react';
+import styles from './index.module.less';
+import data from "../../../README.md"
 import { getToolbarExtra } from "./Code"
-const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...props }) => {
-  const $dom = useRef<HTMLDivElement>(null);
-  const { 'data-meta': meta, ...rest } = props as any;
 
-  useEffect(() => {
-    if ($dom.current) {
-      const parentElement = $dom.current.parentElement;
-      if (parentElement && parentElement.parentElement) {
-        parentElement.parentElement.replaceChild($dom.current, parentElement);
-      }
-    }
-  }, [$dom]);
-
-  if (inline || !isMeta(meta)) {
-    return <code {...props} />;
-  }
-
-  const line = node.position?.start.line;
-  const metaId = getMetaId(meta) || String(line);
-  const Child = data.components[`${metaId}`];
-  if (metaId && typeof Child === 'function') {
-    const code = data.data[metaId].value || '';
-    const param = getURLParameters(meta);
-    return (
-      <CodeLayout
-        ref={$dom}
-        toolbarExtra={getToolbarExtra(code, param.codePen === "true", param.codeSandbox === "true")}
-        toolbar={param.title || 'Example'} background={"transparent"} code={<pre {...rest} />} text={code}>
-        <Child />
-      </CodeLayout>
-    );
-  }
-  return <code {...rest} />;
-};
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
 
 export default function Markdown() {
   return (
     <MarkdownPreview
       style={{ padding: '20px 26px' }}
       source={data.source}
       className={styles.markdown}
+      rehypeRewrite={(
+        node: Root | RootContent,
+        index: number,
+        parent: Root | Element,
+      ) => {
+        if (node.type === 'element' && parent && parent.type === 'root') {
+          const menu = parent.children[1] as Element | undefined;
+          let childLength = [...parent.children].filter(
+            (item) => item.type !== 'raw',
+          ).length;
+          const lastChild = parent.children[parent.children.length - 1];
+          if (lastChild?.type === 'raw') {
+            childLength = parent.children.length - 2;
+          }
+          if (
+            (index + 1 === childLength ||
+              index - 1 === childLength ||
+              index === childLength) &&
+            menu?.properties?.class !== 'menu-toc'
+          ) {
+            const child = [...parent.children].map((item) => {
+              if (item.type === 'element' && item.tagName === 'pre') {
+                const meta = item.children[0]?.data?.meta as string;
+                if (isMeta(meta)) {
+                  item.tagName = 'div';
+                  item.properties = {
+                    ...item.properties,
+                    'data-md': meta,
+                    'data-meta': 'preview',
+                  };
+                  return { ...item };
+                }
+              }
+              return item;
+            });
+            parent.children = [
+              {
+                type: 'element',
+                tagName: 'div',
+                children: child as Element[],
+              },
+            ];
+          }
+        }
+
+      }}
       components={{
-        code: CodePreview
+        div: ({ node, ...props }) => {
+          const { 'data-meta': meta, 'data-md': metaData, ...rest } = props as any;
+          const line = node.position?.start.line;
+          const metaId = getMetaId(metaData) || String(line);
+          const Child = data.components[metaId];
+          if (meta !== 'preview' || !metaId || typeof Child !== 'function')
+            return <div {...props} />;
+          const code = data.data[metaId].value || '';
+          const param = getURLParameters(meta);
+          const extra = getToolbarExtra(code, param.codePen === "true", param.codeSandbox === "true");
+          return (
+            <CodeLayout disableCheckered style={{ marginBottom: 18 }}>
+              <Preview>
+                <Child />
+              </Preview>
+              <Toolbar extra={extra} text={code}>{param.title || 'Example'}</Toolbar>
+              <Code style={{ padding: 0 }}>
+                <pre {...rest} />
+              </Code>
+            </CodeLayout>
+          );
+        },
       }}
     />
   );

website/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import App from './App';
 import { createRoot } from 'react-dom/client';
 

website/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig",
-  "include": ["../src"],
+  "include": ["./"],
   "compilerOptions": {
     "baseUrl": ".",
     "emitDeclarationOnly": true,