|
1 | 1 | import { FC, PropsWithChildren, useRef } from 'react'; |
2 | 2 | import CodeLayout from 'react-code-preview-layout'; |
3 | | -import { getMetaId, isMeta, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader'; |
| 3 | +import { getMetaId, getURLParameters, CodeBlockData } from 'markdown-react-code-preview-loader'; |
4 | 4 | import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview'; |
5 | 5 | import rehypeIgnore from 'rehype-ignore'; |
6 | | -import { CodeProps } from 'react-markdown/lib/ast-to-react'; |
| 6 | +import { type Node } from 'unist'; |
7 | 7 | import styled from 'styled-components'; |
8 | 8 |
|
9 | 9 | const Preview = CodeLayout.Preview; |
10 | 10 | const Code = CodeLayout.Code; |
11 | 11 | const Toolbar = CodeLayout.Toolbar; |
12 | 12 |
|
13 | | -interface CodePreviewProps extends CodeProps { |
14 | | - mdData?: CodeBlockData; |
15 | | -} |
16 | | - |
17 | 13 | const CodeLayoutView = styled(CodeLayout)` |
18 | 14 | & + div.copied { |
19 | 15 | display: none !important; |
20 | 16 | } |
21 | 17 | `; |
22 | 18 |
|
23 | | -const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = ({ inline, node, ...props }) => { |
| 19 | +interface CodePreviewProps { |
| 20 | + mdData?: CodeBlockData; |
| 21 | + 'data-meta'?: string; |
| 22 | + node?: Node; |
| 23 | +} |
| 24 | + |
| 25 | +const CodePreview: FC<PropsWithChildren<CodePreviewProps>> = (props) => { |
24 | 26 | const $dom = useRef<HTMLDivElement>(null); |
25 | | - const { mdData, ...rest } = props; |
26 | | - // useEffect(() => { |
27 | | - // if ($dom.current) { |
28 | | - // const parentElement = $dom.current.parentElement; |
29 | | - // if (parentElement && parentElement.parentElement) { |
30 | | - // parentElement.parentElement.replaceChild($dom.current, parentElement); |
31 | | - // } |
32 | | - // } |
33 | | - // }, [$dom]); |
34 | | - const { 'data-meta': meta } = props as any; |
35 | | - if (inline || !isMeta(meta)) { |
36 | | - return <code {...rest} />; |
37 | | - } |
38 | | - const line = node.position?.start.line; |
| 27 | + const { mdData, node, 'data-meta': meta, ...rest } = props; |
| 28 | + const line = node?.position?.start.line; |
39 | 29 | const metaId = getMetaId(meta) || String(line); |
40 | 30 | const Child = mdData?.components[`${metaId}`]; |
41 | 31 | if (metaId && typeof Child === 'function') { |
42 | 32 | const code = mdData?.data[metaId].value || ''; |
43 | | - const param = getURLParameters(meta); |
| 33 | + const param = getURLParameters(meta || ''); |
44 | 34 | return ( |
45 | 35 | <CodeLayoutView ref={$dom}> |
46 | 36 | <Preview> |
|
0 commit comments