-
+
-
diff --git a/website/components/Markdown/Code.tsx b/website/components/Markdown/Code.tsx
index a95e0f1c..81260f64 100755
--- a/website/components/Markdown/Code.tsx
+++ b/website/components/Markdown/Code.tsx
@@ -1,27 +1,48 @@
-import CodePreview, { CodePreviewProps } from '@uiw/react-code-preview';
+import pkg from '../../../package.json';
+import Codepen from '@uiw/react-codepen';
+import Codesandbox from '@uiw/react-codesandbox';
+const version = pkg.version
-export interface CodeProps extends CodePreviewProps {
- code: string;
- version: string;
- codePen: boolean;
- codeSandbox?: boolean;
- dependencies: any;
+
+const getCodePenJs = (js: string, includeModule: string[]) => {
+ let include = (includeModule || []).join('|');
+ let resultJs = js.replace(/import([\s\S]*?)(?=['"])['"].*['"]( *;|;)?/gm, (str) => {
+ // eslint-disable-next-line no-useless-escape
+ if (include && new RegExp(`from\\s+['"](${include})['"](\s.+)?;?`).test(str)) {
+ return str;
+ }
+ return `/** ${str} **/`;
+ });
+ return resultJs
}
-export default function Code({ version, dependencies, codePen, codeSandbox, ...other }: CodeProps) {
- const props: CodePreviewProps = { ...other };
+export const getToolbarExtra = (code: string, codePen: boolean, codeSandbox: boolean): React.ReactNode[] => {
+ let toolbarExtra: React.ReactNode[] = [];
if (codePen) {
- props.codePenOption = {
+ const codePenOption = {
title: `@uiw/react-split${version} - demo`,
- includeModule: ['@uiw/react-split'],
- js: (props.code || '').replace('_mount_', 'document.getElementById("container")'),
+ // js: getCodePenJs(code || '', ['@uiw/react-split']).replace('_mount_', 'document.getElementById("container")'),
+ js: `${getCodePenJs(code || '', ["@uiw/react-split"]).replace(
+ 'export default',
+ 'const APP_Default = ',
+ )}\nReactDOM.createRoot(document.getElementById("container")).render(
)`,
html: '
',
css_external: `https://unpkg.com/@uiw/react-split@${version}/dist/split.min.css`,
- js_external: `https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/@uiw/react-split@${version}/dist/split.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,
- };
+ js_external: `https://unpkg.com/react@18.x/umd/react.development.js;https://unpkg.com/react-dom@18.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/@uiw/react-split@${version}/dist/split.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,
+ }
+ toolbarExtra.push(
+
+
+ ,
+ );
}
if (codeSandbox) {
- props.codeSandboxOption = {
+ const codeSandboxOption = {
files: {
'sandbox.config.json': {
content: `{
@@ -35,8 +56,11 @@ export default function Code({ version, dependencies, codePen, codeSandbox, ...o
'public/index.html': {
content: `
`,
},
+ 'src/app.js': {
+ content: code,
+ },
'src/index.js': {
- content: (props.code || '').replace('_mount_', 'document.getElementById("container")'),
+ content: `import React from "react";\nimport ReactClient from "react-dom/client";\nimport App from "./app";\nReactClient.createRoot(document.getElementById("container")).render(
);`,
},
'.kktrc.js': {
content: `import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\n conf = lessModules(conf, env, options);\n return conf;\n};`,
@@ -46,8 +70,8 @@ export default function Code({ version, dependencies, codePen, codeSandbox, ...o
name: 'uiw-demo',
description: `uiw v${version} - demo`,
dependencies: {
- react: '^17.0.2',
- 'react-dom': '^17.0.2',
+ react: '^18.x',
+ 'react-dom': '^18.x',
'@uiw/react-split': 'latest',
},
devDependencies: {
@@ -63,7 +87,17 @@ export default function Code({ version, dependencies, codePen, codeSandbox, ...o
},
},
},
- };
+ }
+ toolbarExtra.push(
+
+
+ ,
+ );
}
- return
;
-}
+ return toolbarExtra
+}
\ No newline at end of file
diff --git a/website/components/Markdown/index.tsx b/website/components/Markdown/index.tsx
index e6bc2c54..3f1cb8be 100644
--- a/website/components/Markdown/index.tsx
+++ b/website/components/Markdown/index.tsx
@@ -1,108 +1,54 @@
-import { Component } from 'react';
import MarkdownPreview from '@uiw/react-markdown-preview';
-import pkg from '../../../package.json';
-import Code from './Code';
import styles from './index.module.less';
+import data from "../../../README.md"
+import { useEffect, useRef } from "react"
+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 { getToolbarExtra } from "./Code"
+const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...props }) => {
+ const $dom = useRef
(null);
+ const { 'data-meta': meta, ...rest } = props as any;
-interface MarkdownProps { }
-interface MarkdownState {
- mdStr: string;
-}
-
-const getCodeStr = (data: any[] = [], code: string = '') => {
- data.forEach((node) => {
- if (node.type === 'text') {
- code += node.value;
- } else if (node.children && Array.isArray(node.children)) {
- code += getCodeStr(node.children);
+ useEffect(() => {
+ if ($dom.current) {
+ const parentElement = $dom.current.parentElement;
+ if (parentElement && parentElement.parentElement) {
+ parentElement.parentElement.replaceChild($dom.current, parentElement);
+ }
}
- });
- return code;
-};
+ }, [$dom]);
-/**
- * 代码注释参数
- *
- * ```md
- *
- * ```
- * 参数用英文逗号隔开
- *
- * - `bgWhite` 设置代码预览背景白色，否则为格子背景。
- * - `noCode` 不显示代码编辑器。
- * - `noPreview` 不显示代码预览效果。
- * - `noScroll` 预览区域不显示滚动条。
- * - `codePen` 显示 Codepen 按钮，要特别注意 `包导入的问题`，实例中的 `import` 主要用于 Codepen 使用。
- */
-export interface OptionsMarkdown {
- bgWhite?: boolean;
- noCode?: boolean;
- noPreview?: boolean;
- noScroll?: boolean;
- codePen?: boolean;
-};
-
-export default class Markdown extends Component {
- constructor(props:MarkdownProps) {
- super(props);
- this.state = {
- mdStr: '',
- };
+ if (inline || !isMeta(meta)) {
+ return