Skip to content

Commit 24285de

Browse files
jaywcjlovejaywcjlove
committed
website: udpate example.
1 parent b1e7f31 commit 24285de

File tree

8 files changed

+43
-36
lines changed

8 files changed

+43
-36
lines changed

‎www/src/pages/extensions/basic-setup/example.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { FC, PropsWithChildren, useState } from 'react';
1+
import { FC, PropsWithChildren, useContext, useState } from 'react';
22
import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
33
import { langs } from '@uiw/codemirror-extensions-langs';
44
import styled from 'styled-components';
55
import { useTheme } from '../../../utils/useTheme';
66
import { PageWarpper } from '..';
7+
import { MdContext } from '../../theme/Preview';
78

89
const Label = styled.label`
910
user-select: none;
@@ -25,17 +26,14 @@ const Warpper = styled.div`
2526
padding-bottom: 32px;
2627
`;
2728

28-
interface BasicSetupExampleProps {
29-
source?: string;
30-
}
31-
32-
export const BasicSetupExample = (props: BasicSetupExampleProps) => {
29+
export const BasicSetupExample = () => {
3330
const { theme } = useTheme();
3431
const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({});
32+
const mdData = useContext(MdContext);
3533
return (
3634
<PageWarpper>
3735
<CodeMirror
38-
value={props.source}
36+
value={mdData.mdstr}
3937
theme={theme}
4038
basicSetup={basicSetup}
4139
height="300px !important"

‎www/src/pages/extensions/classname/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
import { FC, PropsWithChildren } from 'react';
1+
import { FC, PropsWithChildren, useContext } from 'react';
22
import { classname } from '@uiw/codemirror-extensions-classname';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
55
import { EditorView } from '@codemirror/view';
6-
import { Preview } from '../../theme/Preview';
6+
import { Preview, MdContext } from '../../theme/Preview';
77
import { useTheme } from '../../../utils/useTheme';
88
import { PageWarpper } from '..';
99

10-
export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
10+
export const ClassNameExample: FC<PropsWithChildren> = () => {
1111
const { theme } = useTheme();
12+
const mdData = useContext(MdContext);
1213

1314
const themeDemo = EditorView.baseTheme({
1415
'&dark .first-line': { backgroundColor: 'red' },
@@ -20,7 +21,7 @@ export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
2021
return (
2122
<PageWarpper>
2223
<CodeMirror
23-
value={source}
24+
value={mdData.mdstr}
2425
theme={theme}
2526
height="300px !important"
2627
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/extensions/events/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import { Preview } from '../../theme/Preview';
2-
import type { FC, PropsWithChildren } from 'react';
31
import * as events from '@uiw/codemirror-extensions-events';
42
import CodeMirror from '@uiw/react-codemirror';
53
import styled from 'styled-components';
6-
import { useState } from 'react';
4+
import { useContext, useState } from 'react';
75
import { langs } from '@uiw/codemirror-extensions-langs';
6+
import { Preview, MdContext } from '../../theme/Preview';
87
import { useTheme } from '../../../utils/useTheme';
98
import { PageWarpper } from '..';
109

1110
const Info = styled.div`
1211
padding-bottom: 30px;
1312
`;
1413

15-
export const EventsExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
14+
export const EventsExample = () => {
1615
const [scrollTop, setScrollTop] = useState(0);
1716
const [eventType, setEventType] = useState('');
1817
const { theme } = useTheme();
19-
18+
const mdData = useContext(MdContext);
2019
return (
2120
<PageWarpper>
2221
<CodeMirror
23-
value={source}
22+
value={mdData.mdstr}
2423
theme={theme}
2524
height="200px !important"
2625
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/extensions/line-numbers-relative/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import type { FC, PropsWithChildren } from 'react';
1+
import { useContext, type FC, type PropsWithChildren } from 'react';
22
import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
5-
import { Preview } from '../../theme/Preview';
5+
import { Preview, MdContext } from '../../theme/Preview';
66
import { useTheme } from '../../../utils/useTheme';
77
import { PageWarpper } from '..';
88

9-
export const LineNumbersRelativeExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
9+
export const LineNumbersRelativeExample: FC<PropsWithChildren> = () => {
1010
const { theme } = useTheme();
11+
const mdData = useContext(MdContext);
1112
return (
1213
<PageWarpper>
1314
<CodeMirror
14-
value={source}
15+
value={mdData.mdstr}
1516
theme={theme}
1617
height="300px !important"
1718
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/extensions/mentions/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { FC, PropsWithChildren } from 'react';
1+
import { useContext, type FC, type PropsWithChildren } from 'react';
22
import { mentions } from '@uiw/codemirror-extensions-mentions';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
55
import { useTheme } from '../../../utils/useTheme';
6-
import { Preview } from '../../theme/Preview';
6+
import { Preview, MdContext } from '../../theme/Preview';
77
import { PageWarpper } from '..';
88

99
const users = [
@@ -51,13 +51,14 @@ const users = [
5151
},
5252
];
5353

54-
export const MentionsExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
54+
export const MentionsExample: FC<PropsWithChildren> = () => {
5555
const { theme } = useTheme();
56+
const mdData = useContext(MdContext);
5657

5758
return (
5859
<PageWarpper>
5960
<CodeMirror
60-
value={source}
61+
value={mdData.mdstr}
6162
theme={theme}
6263
height="300px !important"
6364
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/extensions/themes/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { FC, PropsWithChildren, useState } from 'react';
1+
import { FC, PropsWithChildren, useContext, useState } from 'react';
22
import { Link } from 'react-router-dom';
33
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
44
import * as themes from '@uiw/codemirror-themes-all';
55
import { langs } from '@uiw/codemirror-extensions-langs';
66
import styled from 'styled-components';
7-
import { Preview } from '../../theme/Preview';
7+
import { Preview, MdContext } from '../../theme/Preview';
88
import { useTheme } from '../../../utils/useTheme';
99
import { PageWarpper } from '..';
1010

1111
const ToolsWapper = styled.div`
1212
padding: 0 0 23px 0;
1313
`;
1414

15-
export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
15+
export const ThemesAllExample: FC<PropsWithChildren> = () => {
1616
const themesData: Record<string, Omit<ReactCodeMirrorProps['theme'], 'dark' | 'light'>> = {};
1717
Object.keys(themes)
1818
.filter((item) => typeof themes[item as keyof typeof themes] !== 'function')
@@ -26,10 +26,11 @@ export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
2626
const changeHandle = (ev: React.ChangeEvent<HTMLSelectElement>) => {
2727
setSelectTheme(ev.target.value as keyof typeof themesData);
2828
};
29+
const mdData = useContext(MdContext);
2930
return (
3031
<PageWarpper>
3132
<CodeMirror
32-
value={source}
33+
value={mdData.mdstr}
3334
theme={themeCurrent as ReactCodeMirrorProps['theme']}
3435
height="300px !important"
3536
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/extensions/zebra-stripes/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { FC, PropsWithChildren } from 'react';
2-
import { Preview } from '../../theme/Preview';
1+
import { FC, PropsWithChildren, useContext } from 'react';
2+
import { Preview, MdContext } from '../../theme/Preview';
33
import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
44
import CodeMirror from '@uiw/react-codemirror';
55
import { useState } from 'react';
@@ -14,14 +14,15 @@ const OptionsView = styled.div`
1414
gap: 18px;
1515
`;
1616

17-
export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
17+
export const ZebraStripesExample: FC<PropsWithChildren> = () => {
1818
const { theme } = useTheme();
1919
const [step, setStep] = useState(2);
2020
const zebra = zebraStripes({ step: step });
21+
const mdData = useContext(MdContext);
2122
return (
2223
<PageWarpper>
2324
<CodeMirror
24-
value={source}
25+
value={mdData.mdstr}
2526
theme={theme}
2627
height="300px !important"
2728
style={{ margin: '0 0 23px 0' }}
@@ -38,7 +39,7 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
3839
</select>
3940
</OptionsView>
4041
<CodeMirror
41-
value={source}
42+
value={mdData.mdstr}
4243
theme={theme}
4344
height="300px !important"
4445
style={{ margin: '0 0 23px 0' }}

‎www/src/pages/theme/Preview.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC, PropsWithChildren, useState } from 'react';
1+
import { FC, PropsWithChildren, createContext, useState } from 'react';
22
import styled from 'styled-components';
33
import Npm from '@uiw/react-shields/npm';
44
import { useMdData } from '../../components/useMdData';
@@ -57,6 +57,10 @@ const ButtonGroup = styled.div`
5757
gap: 10px;
5858
`;
5959

60+
export const MdContext = createContext({
61+
mdstr: '',
62+
});
63+
6064
export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
6165
const { themePkg, mode, children } = props;
6266
const { mdData } = useMdData(props.path);
@@ -66,6 +70,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
6670
const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
6771
const extension = themeData[toCamelCase(themeExtensionName) as keyof typeof themeData];
6872
const repoName = themePkgNmae?.replace(/@uiw\//, '');
73+
console.log('mdData:', mdData);
6974
return (
7075
<Warpper>
7176
<Content>
@@ -90,7 +95,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
9095
<PreCode value={`npm install ${themePkg} --save`} />
9196
</Header>
9297
)}
93-
{children}
98+
<MdContext.Provider value={{ mdstr: mdData.source }}>{children}</MdContext.Provider>
9499
{mdData && (previewDoc === 'document' || !themePkg) && <Markdown source={mdData.source} mdData={mdData} />}
95100
{previewDoc === 'example' && themePkg && themeExtensionName && <Sample theme={extension} />}
96101
</Content>

0 commit comments

Comments
 (0)