|
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