website(deps): update dependency @uiw/react-markdown-preview to v5 #975

uiwjs · Nov 29, 2023 · c07c534 · c07c534
1 parent 5feaaae
commit c07c534
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -62,17 +62,17 @@
     "node": ">=16.0.0"
   },
   "devDependencies": {
-    "@kkt/less-modules": "^7.5.2",
-    "@kkt/ncc": "~1.0.15",
+    "@kkt/less-modules": "^7.5.4",
+    "@kkt/ncc": "^1.1.1",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-test-renderer": "~18.0.0",
     "@types/react-transition-group": "~4.4.4",
-    "compile-less-cli": "~1.8.11",
+    "compile-less-cli": "^1.9.1",
     "husky": "~8.0.0",
-    "kkt": "^7.5.2",
-    "lerna": "^7.3.0",
-    "lint-staged": "^14.0.1",
+    "kkt": "^7.5.4",
+    "lerna": "^8.0.0",
+    "lint-staged": "^15.1.0",
     "prettier": "^3.0.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",

diff --git a/website/.kktrc.ts b/website/.kktrc.ts
@@ -12,6 +12,8 @@ export default (conf: Configuration, env: 'development' | 'production', options:
   /** https://github.com/uiwjs/react-code-preview/issues/94 */
   conf.module!.exprContextCritical = false;
   conf.module!.exprContextRecursive = false;
+  conf.ignoreWarnings = [{ module: /node_modules[\\/]parse5[\\/]/ }];
+
   if (env === 'production') {
     conf.optimization = {
       ...conf.optimization,

diff --git a/website/package.json b/website/package.json
@@ -35,11 +35,11 @@
   "dependencies": {
     "@uiw/formatter": "~2.0.0",
     "@uiw/react-back-to-top": "^1.2.0",
-    "@uiw/react-markdown-preview": "~4.2.0",
+    "@uiw/react-markdown-preview": "^5.0.3",
     "@uiw/reset.css": "~1.0.5",
     "markdown-react-code-preview-loader": "^2.1.2",
     "react": ">=16.9.0",
-    "react-code-preview-layout": "^2.0.6",
+    "react-code-preview-layout": "^3.1.4",
     "react-dom": ">=16.9.0",
     "react-router-dom": "^6.16.0",
     "uiw": "^4.22.2"

diff --git a/website/src/components/Markdown/Markdown.tsx b/website/src/components/Markdown/Markdown.tsx
@@ -1,20 +1,29 @@
 import { Fragment, useEffect, useRef } from 'react';
 import CodeLayout from 'react-code-preview-layout';
-import { getMetaId, isMeta, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
+import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import Footer from './Footer';
+import { type Node } from 'unist';
 import styles from './index.module.less';
 
+const Preview = CodeLayout.Preview;
+const Code = CodeLayout.Code;
+const Toolbar = CodeLayout.Toolbar;
+
+interface CodePreviewProps extends CodeBlockData {
+  'data-meta'?: string;
+  node?: Node;
+}
+
 /**
  *
  * ```js
  *    ```jsx mdx:preview&bg=#fff
  * ```
  */
-const CodePreview = ({ inline, node, components, data, ...props }: CodeProps & CodeBlockData) => {
+const CodePreview = ({ node, components, data, ...props }: CodePreviewProps) => {
   const $dom = useRef<HTMLDivElement>(null);
-  const { 'data-meta': meta, ...rest } = props as any;
+  const { headings, headingsList, ...rest } = props as any;
 
   useEffect(() => {
     if ($dom.current) {
@@ -25,27 +34,22 @@ const CodePreview = ({ inline, node, components, data, ...props }: CodeProps & C
     }
   }, [$dom]);
 
-  if (inline || !isMeta(meta)) {
-    return <code {...props} />;
-  }
-  const line = node.position?.start.line;
+  const line = node?.position?.start.line;
+  const meta = (node?.data as any)?.meta as string;
   const metaId = getMetaId(meta) || String(line);
   const Child = components[`${metaId}`];
   if (metaId && typeof Child === 'function') {
     const code = data[metaId].value || '';
-    const param = getURLParameters(meta);
+    const param = getURLParameters(meta || '');
     return (
-      <CodeLayout
-        ref={$dom}
-        background={param.bg || param.background}
-        disableCode={param.nocode === 'true'}
-        disableToolbar={param.toolbar === 'true'}
-        style={{ marginBottom: 10 }}
-        toolbar={param.title || 'Example'}
-        code={<pre {...rest} />}
-        text={code}
-      >
-        <Child />
+      <CodeLayout ref={$dom}>
+        <Preview style={{ background: param.bg || 'transparent' }}>
+          <Child />
+        </Preview>
+        <Toolbar text={code}>{param.title || 'Example'}</Toolbar>
+        <Code>
+          <pre {...rest} />
+        </Code>
       </CodeLayout>
     );
   }
@@ -63,12 +67,12 @@ export default function Markdown(props: MarkdownProps) {
         className={styles.markdownWrap}
         source={props.source || ''}
         disableCopy
-        warpperElement={{
+        wrapperElement={{
           'data-color-mode': 'light',
         }}
         components={{
           code: (codeProps) => {
-            return <CodePreview {...codeProps} {...props} />;
+            return <CodePreview {...props} {...codeProps} />;
           },
         }}
       />

diff --git a/website/src/routes/components/alert/index.tsx b/website/src/routes/components/alert/index.tsx
@@ -2,5 +2,6 @@ import data from '@uiw/react-alert/README.md';
 import Markdown from '../../../components/Markdown/Markdown';
 
 export default function Page() {
+  console.log('data', data);
   return <Markdown {...data} path="https://github.com/uiwjs/uiw/tree/master/packages/react-alert/README.md" />;
 }