feat: add getMetaId method.

Author: jaywcjlove

core/README-zh.md

@@ -137,6 +137,15 @@ export type CodeBlockData = {
 };
 ```
 
+## getMetaId
+
+```js
+import { getMetaId } from 'markdown-react-code-preview-loader';
+
+getMetaId('mdx:preview')        // => ''
+getMetaId('mdx:preview:demo12') // => 'demo12'
+```
+
 ## getCodeBlockString 
 
 传递 `markdown` 文件内容字符串，返回转换好的需要预览的代码块解析数据。

core/README.md

@@ -136,6 +136,15 @@ export type CodeBlockData = {
 };
 ```
 
+## getMetaId
+
+```js
+import { getMetaId } from 'markdown-react-code-preview-loader';
+
+getMetaId('mdx:preview')        // => ''
+getMetaId('mdx:preview:demo12') // => 'demo12'
+```
+
 ## getCodeBlockString 
 
 Pass the `markdown` file content string, and return the converted code block parsing data that needs to be previewed.

core/src/utils/index.ts

@@ -18,18 +18,17 @@ const getProcessor = (scope: string) => {
   }
 };
 
-const getMeta = (meta: string | null): Record<string, string | boolean> => {
-  let metaData: Record<string, string | boolean> = {};
-  try {
-    if (meta) {
-      const [metaItem] = /mdx:(.[\w|:]+)/i.exec(meta) || [];
-      const [_, field, val] = (metaItem || '').split(':').map((item) => item.trim());
-      metaData[field] = val || true;
-    }
-  } catch (err) {
-    console.warn(err);
-  }
-  return metaData;
+/**
+ * ```js
+ * 'mdx:preview' => ''  // Empty
+ * 'mdx:preview:demo12' => 'demo12' // return meta id => 'demo12'
+ * ```
+ * @param meta string
+ * @returns string?
+ */
+export const getMetaId = (meta: string = '') => {
+  const [metaRaw = ''] = /mdx:(.[\w|:]+)/i.exec(meta) || [];
+  return metaRaw.replace(/^mdx:preview:?/, '');
 };
 
 /** 获取需要渲染的代码块 **/
@@ -41,9 +40,9 @@ const getCodeBlock = (child: MarkDownTreeType['children'], opts: Options = {}) =
     child.forEach((item) => {
       if (item && item.type === 'code' && lang.includes(item.lang)) {
         const line = item.position.start.line;
-        const metaData = getMeta(item.meta);
-        if (metaData.preview) {
-          let name = typeof metaData.preview === 'string' ? metaData.preview : line;
+        const metaId = getMetaId(item.meta);
+        if (metaId) {
+          let name = typeof metaId === 'string' ? metaId : line;
           const funName = `BaseCode${line}`;
           const returnCode = getTransformValue(item.value, `${funName}.${lang}`, funName, opts);
           codeBlock[line] = {

website/src/pages/example/index.tsx

@@ -1,19 +1,9 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
+import { getMetaId } from 'markdown-react-code-preview-loader';
 import PreView from '../../components/CodeLayout';
 import useMdData from './../../components/useMdData';
 import { Loader } from 'uiw';
 import styles from './../index.module.less';
-const getMetaData = (meta: string) => {
-  if (meta) {
-    const [metaItem] = /mdx:(.[\w|:]+)/i.exec(meta) || [];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [_, field, val] = (metaItem || '').split(':').map((item) => item.trim());
-    if (val) {
-      return val;
-    }
-  }
-  return '';
-};
 
 export function ExamplePage() {
   const { mdData, loading } = useMdData((path) => import(`./App${path}.md`));
@@ -25,25 +15,15 @@ export function ExamplePage() {
           className={styles.markdown}
           components={{
             code: ({ inline, node, ...props }) => {
-              const {
-                'data-meta': meta,
-                noPreview,
-                noScroll,
-                bgWhite,
-                noCode,
-                codePen,
-                codeSandboxOption,
-                codeSandbox,
-                ...rest
-              } = props as any;
+              const { 'data-meta': meta, ...rest } = props as any;
               if (inline) {
                 return <code {...props} />;
               }
               const line = node.position?.start.line;
-              const funName = getMetaData(meta || '') || line;
-              const Child = mdData.components[funName || ''];
-              if (funName && typeof Child === 'function') {
-                const copyNodes = mdData.codeBlock[funName] || '';
+              const metaId = getMetaId(meta) || line;
+              const Child = mdData.components[metaId || ''];
+              if (metaId && typeof Child === 'function') {
+                const copyNodes = mdData.codeBlock[metaId] || '';
                 return (
                   <PreView code={<code {...rest} />} copyNodes={copyNodes}>
                     <Child />