fix:修改meta

Author: SunLxy

core/src/utils/index.ts

@@ -16,13 +16,15 @@ const getProcessor = (scope: string) => {
 const getMeta = (meta: string | null): Record<string, string | boolean> => {
   let metaData: Record<string, string | boolean> = {};
   if (meta) {
-    meta.split(/\|/).forEach((item) => {
-      const value = item.trim();
-      if (value) {
-        const [field, val] = value.split(':');
-        metaData[field] = val || true;
-      }
-    });
+    const [field, val] = meta.split(':');
+    metaData[field] = val || true;
+    // meta.split(/\|/).forEach((item) => {
+    //   const value = item.trim();
+    //   if (value) {
+    //     const [field, val] = value.split(':');
+    //     metaData[field] = val || true;
+    //   }
+    // });
   }
   return metaData;
 };

website/package.json

@@ -14,7 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "~4.0.6",
+    "@uiw/react-markdown-preview": "~4.0.7",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "uiw": "^4.21.7",

website/src/App-zh.md

@@ -16,7 +16,7 @@ import Alert from "@uiw/react-alert";
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 
-```jsx | preview
+```jsx preview
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
@@ -78,7 +78,7 @@ export default Demo;
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 
-```jsx | preview
+```jsx preview
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, Button } from "uiw";
@@ -144,7 +144,7 @@ export default Demo;
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 
-```jsx | preview
+```jsx preview
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
@@ -258,7 +258,7 @@ import Alert from "@uiw/react-alert";
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 
-```jsx | preview
+```jsx preview
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
@@ -371,9 +371,7 @@ export default Demo;
 
 这个对话框有两个按钮，单击 **`确定按钮`** 或 **`取消按钮`** 后，此对话框将关闭，将不触发 ~~`onConfirm`~~ 或 ~~`onCancel`~~ 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 `className="w-alert-footer"` 将显示默认样式。
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&name=base23-->
-
-```jsx | preview:base23
+```jsx preview:base23
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";
@@ -429,7 +427,7 @@ export default Demo;
 
 <!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
 
-```jsx | preview
+```jsx preview
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";

website/src/App.md

@@ -1,9 +1,8 @@
 
 ## Basic 
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&name=base12-->
 
-```jsx | preview:base12
+```jsx preview:base12
 import React from "react";
 import ReactDOM from "react-dom";
 import { Alert, ButtonGroup, Button } from "uiw";

website/src/App.tsx

@@ -14,6 +14,17 @@ const language = {
   },
 };
 
+const getMetaData = (meta: string) => {
+  if (meta) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [field, name] = meta.split(':').map((item) => item.trim());
+    if (name) {
+      return name;
+    }
+  }
+  return '';
+};
+
 export type MdDataType = {
   source: string;
   BaseCodeData: Record<string | number, React.FC>;
@@ -62,27 +73,37 @@ export default function App() {
            * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
            */
           code: ({ inline, node, ...props }) => {
-            const { name, noPreview, noScroll, bgWhite, noCode, codePen, codeSandboxOption, codeSandbox, ...rest } =
-              props as any;
-
-            if (inline) {
-              return <code {...props} />;
-            }
-            const config = {
+            const {
+              'data-meta': meta,
               noPreview,
               noScroll,
               bgWhite,
               noCode,
               codePen,
               codeSandboxOption,
-            } as any;
-            if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
+              codeSandbox,
+              ...rest
+            } = props as any;
+
+            if (inline) {
               return <code {...props} />;
             }
+            // const config = {
+            //   noPreview,
+            //   noScroll,
+            //   bgWhite,
+            //   noCode,
+            //   codePen,
+            //   codeSandboxOption,
+            // } as any;
+            // if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
+            //   return <code {...props} />;
+            // }
             const line = node.position?.start.line;
-            const Child = mdData.BaseCodeData[name || line || ''];
-            if (typeof line === 'number' && typeof Child === 'function') {
-              const copyNodes = mdData.codeBlockValue[line] || '';
+            const funName = getMetaData(meta || '') || line;
+            const Child = mdData.BaseCodeData[funName || ''];
+            if (funName && typeof Child === 'function') {
+              const copyNodes = mdData.codeBlockValue[funName] || '';
               return (
                 <PreView code={<code {...rest} />} copyNodes={copyNodes}>
                   <Child />