Skip to content

feat:修改文档预览 #133

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 9, 2022
Merged

feat:修改文档预览 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .kktrc.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import lessModules from '@kkt/less-modules';
import rawModules from '@kkt/raw-modules';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SunLxy @kkt/raw-modules 可以移除这个包，markdown-react-code-preview-loader 加载 Markdown 代码

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

嗯

import scopePluginOptions from '@kkt/scope-plugin-options';
import pkg from './package.json';
import { mdCodeModulesLoader } from "markdown-react-code-preview-loader";

export default (conf: WebpackConfiguration, env: 'production' | 'development', options: LoaderConfOptions) => {
conf = lessModules(conf, env, options);
Expand All @@ -30,7 +31,8 @@ export default (conf: WebpackConfiguration, env: 'production' | 'development', o
conf.plugins!.push(new webpack.DefinePlugin({
VERSION: JSON.stringify(pkg.version),
}));

conf = mdCodeModulesLoader(conf);

if (env === 'production') {
conf.module!.exprContextCritical = false;
conf.output = { ...conf.output, publicPath: './' };
Expand Down
77 changes: 37 additions & 40 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@ import Split from '@uiw/react-split';
- 拖拽至最小宽度，可通过设置子节点样式 `minWidth: 30`，来达到效果
- 默认情况下，不设置样式 `width`，需要将某个子节点样式设为 `flex: 1`，来自适应

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand Down Expand Up @@ -60,16 +59,15 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

### 可用于布局

设置 `visiable={false}` 禁用拖拽栏，可用于布局。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand Down Expand Up @@ -109,14 +107,14 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 多栏分割

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand All @@ -135,14 +133,14 @@ const Demo = () => (
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 线条拖拽

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand Down Expand Up @@ -174,14 +172,14 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo
;
```

### 垂直分割

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand All @@ -194,14 +192,14 @@ const Demo = () => (
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 嵌套使用

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand All @@ -224,16 +222,16 @@ const Demo = () => (
</div>
</Split>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 拖拽工具不显示

下面实例通过设置 `visiable` 的值来设置拖拽工具是否可见

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand Down Expand Up @@ -265,16 +263,16 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 禁用拖拽

通过设置 `disable` 的值，禁用拖拽工具拖拽。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand Down Expand Up @@ -314,17 +312,16 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 抽屉

可拖拽左边栏宽度。

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import ReactDOM from 'react-dom';
import Split from '@uiw/react-split';
import { Menu, Button } from 'uiw';

Expand Down Expand Up @@ -371,14 +368,14 @@ class Demo extends React.Component {
)
}
}
ReactDOM.render(<Demo />, _mount_);
export default Demo

```

### 支持自定义拖拽工具栏

<!--rehype:bgWhite=true&codeSandbox=true&codePen=true-->
```jsx
import ReactDOM from 'react-dom';
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
import React from 'react';
import Split from '@uiw/react-split';

const Demo = () => (
Expand All @@ -402,7 +399,7 @@ const Demo = () => (
</Split>
</div>
);
ReactDOM.render(<Demo />, _mount_);
export default Demo
```

## Props
Expand Down
9 changes: 6 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,18 @@
"react-dom": ">=16.8.0"
},
"devDependencies": {
"@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.4",
"@kkt/less-modules": "~7.1.1",
"@kkt/ncc": "~1.0.8",
"@kkt/raw-modules": "~7.1.1",
"@kkt/scope-plugin-options": "~7.1.1",
"@types/react": "~17.0.39",
"@types/react-dom": "~17.0.13",
"@uiw/react-code-preview": "~4.0.6",
"@uiw/react-github-corners": "~1.5.3",
"@uiw/react-markdown-preview": "~3.5.1",
"@uiw/react-markdown-preview": "~4.0.22",
"@uiw/reset.css": "~1.0.6",
"compile-less-cli": "~1.8.11",
"kkt": "~7.1.5",
Expand All @@ -74,4 +77,4 @@
"last 1 safari version"
]
}
}
}
6 changes: 3 additions & 3 deletions website/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react';
import GitHubCorners from '@uiw/react-github-corners';
import '@uiw/reset.css';
import './App.css';
import Page from './Page';
import Page from './components/Markdown';

const App: React.FC = () => {
return (
<div className="App">
<GitHubCorners zIndex={9999} fixed href="https://github.com/uiwjs/react-split"/>
<GitHubCorners zIndex={9999} fixed href="https://github.com/uiwjs/react-split" />
<header className="App-header">
<h1 className="title">React Split</h1>
<a className="App-link" href="https://github.com/uiwjs/react-split" target="_blank" rel="noopener noreferrer">
Expand All @@ -17,7 +17,7 @@ const App: React.FC = () => {
A piece of view can be divided into areas where the width or height can be adjusted by dragging.
</p>
</header>
<div style={{ maxWidth: 980, margin: '0 auto'}}>
<div style={{ maxWidth: 980, margin: '0 auto' }}>
<Page />
</div>
</div>
Expand Down
76 changes: 55 additions & 21 deletions website/components/Markdown/Code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(<APP_Default />)`,
html: '<div id="container" style="padding: 24px"></div>',
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(
<Codepen key="Codepen" {...codePenOption}>
<svg style={{ fill: 'currentcolor' }} viewBox="0 0 1024 1024" width="18" height="18">
<path
d="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"
p-id="2071"
></path>
</svg>
</Codepen>,
);
}
if (codeSandbox) {
props.codeSandboxOption = {
const codeSandboxOption = {
files: {
'sandbox.config.json': {
content: `{
Expand All @@ -35,8 +56,11 @@ export default function Code({ version, dependencies, codePen, codeSandbox, ...o
'public/index.html': {
content: `<div id="container"></div>`,
},
'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(<App />);`,
},
'.kktrc.js': {
content: `import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\n conf = lessModules(conf, env, options);\n return conf;\n};`,
Expand All @@ -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: {
Expand All @@ -63,7 +87,17 @@ export default function Code({ version, dependencies, codePen, codeSandbox, ...o
},
},
},
};
}
toolbarExtra.push(
<Codesandbox key="Codesandbox" {...codeSandboxOption}>
<svg style={{ fill: 'currentcolor' }} viewBox="0 0 1024 1024" width="18" height="18">
<path
d="M85.333333 256l446.08-256L977.493333 256 981.333333 765.866667 531.413333 1024 85.333333 768V256z m89.088 105.856v202.965333l142.72 79.36v150.016l169.472 97.962667v-352.938667L174.421333 361.856z m714.197334 0l-312.192 177.365333v352.938667l169.472-97.962667V644.266667l142.72-79.402667V361.813333zM219.050667 281.642667l311.594666 176.810666 312.32-178.346666-165.162666-93.738667-145.493334 82.986667-146.346666-83.968L219.008 281.6z"
p-id="4089"
></path>
</svg>
</Codesandbox>,
);
}
return <CodePreview {...props} dependencies={dependencies} style={{ marginBottom: 0 }} />;
}
return toolbarExtra
}
Loading