website: udpate example.

Author: jaywcjlove

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

@@ -1,9 +1,10 @@
-import { FC, PropsWithChildren, useState } from 'react';
+import { FC, PropsWithChildren, useContext, useState } from 'react';
 import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import styled from 'styled-components';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
+import { MdContext } from '../../theme/Preview';
 
 const Label = styled.label`
   user-select: none;
@@ -25,17 +26,14 @@ const Warpper = styled.div`
   padding-bottom: 32px;
 `;
 
-interface BasicSetupExampleProps {
-  source?: string;
-}
-
-export const BasicSetupExample = (props: BasicSetupExampleProps) => {
+export const BasicSetupExample = () => {
   const { theme } = useTheme();
   const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({});
+  const mdData = useContext(MdContext);
   return (
     <PageWarpper>
       <CodeMirror
-        value={props.source}
+        value={mdData.mdstr}
         theme={theme}
         basicSetup={basicSetup}
         height="300px !important"

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

@@ -1,14 +1,15 @@
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, useContext } from 'react';
 import { classname } from '@uiw/codemirror-extensions-classname';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { EditorView } from '@codemirror/view';
-import { Preview } from '../../theme/Preview';
+import { Preview, MdContext } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
-export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const ClassNameExample: FC<PropsWithChildren> = () => {
   const { theme } = useTheme();
+  const mdData = useContext(MdContext);
 
   const themeDemo = EditorView.baseTheme({
     '&dark .first-line': { backgroundColor: 'red' },
@@ -20,7 +21,7 @@ export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}

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

@@ -1,26 +1,25 @@
-import { Preview } from '../../theme/Preview';
-import type { FC, PropsWithChildren } from 'react';
 import * as events from '@uiw/codemirror-extensions-events';
 import CodeMirror from '@uiw/react-codemirror';
 import styled from 'styled-components';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { Preview, MdContext } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
 const Info = styled.div`
   padding-bottom: 30px;
 `;
 
-export const EventsExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const EventsExample = () => {
   const [scrollTop, setScrollTop] = useState(0);
   const [eventType, setEventType] = useState('');
   const { theme } = useTheme();
-
+  const mdData = useContext(MdContext);
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="200px !important"
         style={{ margin: '0 0 23px 0' }}

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

@@ -1,17 +1,18 @@
-import type { FC, PropsWithChildren } from 'react';
+import { useContext, type FC, type PropsWithChildren } from 'react';
 import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
-import { Preview } from '../../theme/Preview';
+import { Preview, MdContext } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
-export const LineNumbersRelativeExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const LineNumbersRelativeExample: FC<PropsWithChildren> = () => {
   const { theme } = useTheme();
+  const mdData = useContext(MdContext);
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}

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

@@ -1,9 +1,9 @@
-import type { FC, PropsWithChildren } from 'react';
+import { useContext, type FC, type PropsWithChildren } from 'react';
 import { mentions } from '@uiw/codemirror-extensions-mentions';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { useTheme } from '../../../utils/useTheme';
-import { Preview } from '../../theme/Preview';
+import { Preview, MdContext } from '../../theme/Preview';
 import { PageWarpper } from '..';
 
 const users = [
@@ -51,13 +51,14 @@ const users = [
   },
 ];
 
-export const MentionsExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const MentionsExample: FC<PropsWithChildren> = () => {
   const { theme } = useTheme();
+  const mdData = useContext(MdContext);
 
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}

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

@@ -1,18 +1,18 @@
-import { FC, PropsWithChildren, useState } from 'react';
+import { FC, PropsWithChildren, useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import * as themes from '@uiw/codemirror-themes-all';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import styled from 'styled-components';
-import { Preview } from '../../theme/Preview';
+import { Preview, MdContext } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
 const ToolsWapper = styled.div`
   padding: 0 0 23px 0;
 `;
 
-export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const ThemesAllExample: FC<PropsWithChildren> = () => {
   const themesData: Record<string, Omit<ReactCodeMirrorProps['theme'], 'dark' | 'light'>> = {};
   Object.keys(themes)
     .filter((item) => typeof themes[item as keyof typeof themes] !== 'function')
@@ -26,10 +26,11 @@ export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
   const changeHandle = (ev: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectTheme(ev.target.value as keyof typeof themesData);
   };
+  const mdData = useContext(MdContext);
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={themeCurrent as ReactCodeMirrorProps['theme']}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}

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

@@ -1,5 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
-import { Preview } from '../../theme/Preview';
+import { FC, PropsWithChildren, useContext } from 'react';
+import { Preview, MdContext } from '../../theme/Preview';
 import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
 import CodeMirror from '@uiw/react-codemirror';
 import { useState } from 'react';
@@ -14,14 +14,15 @@ const OptionsView = styled.div`
   gap: 18px;
 `;
 
-export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = ({ source }) => {
+export const ZebraStripesExample: FC<PropsWithChildren> = () => {
   const { theme } = useTheme();
   const [step, setStep] = useState(2);
   const zebra = zebraStripes({ step: step });
+  const mdData = useContext(MdContext);
   return (
     <PageWarpper>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}
@@ -38,7 +39,7 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
         </select>
       </OptionsView>
       <CodeMirror
-        value={source}
+        value={mdData.mdstr}
         theme={theme}
         height="300px !important"
         style={{ margin: '0 0 23px 0' }}

www/src/pages/theme/Preview.tsx

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useState } from 'react';
+import { FC, PropsWithChildren, createContext, useState } from 'react';
 import styled from 'styled-components';
 import Npm from '@uiw/react-shields/npm';
 import { useMdData } from '../../components/useMdData';
@@ -57,6 +57,10 @@ const ButtonGroup = styled.div`
   gap: 10px;
 `;
 
+export const MdContext = createContext({
+  mdstr: '',
+});
+
 export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const { themePkg, mode, children } = props;
   const { mdData } = useMdData(props.path);
@@ -66,6 +70,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
   const themeExtensionName = themePkgNmae?.replace('@uiw/codemirror-theme-', '') + (!!mode ? `-${mode}` : '');
   const extension = themeData[toCamelCase(themeExtensionName) as keyof typeof themeData];
   const repoName = themePkgNmae?.replace(/@uiw\//, '');
+  console.log('mdData:', mdData);
   return (
     <Warpper>
       <Content>
@@ -90,7 +95,7 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
             <PreCode value={`npm install ${themePkg} --save`} />
           </Header>
         )}
-        {children}
+        <MdContext.Provider value={{ mdstr: mdData.source }}>{children}</MdContext.Provider>
         {mdData && (previewDoc === 'document' || !themePkg) && <Markdown source={mdData.source} mdData={mdData} />}
         {previewDoc === 'example' && themePkg && themeExtensionName && <Sample theme={extension} />}
       </Content>