-
Notifications
You must be signed in to change notification settings - Fork 65
Expand file tree
/
Copy pathCodeBlockPreviewModal.tsx
More file actions
93 lines (87 loc) · 2.41 KB
/
Copy pathCodeBlockPreviewModal.tsx
File metadata and controls
93 lines (87 loc) · 2.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { useMemo } from 'react';
import { Modal, theme } from 'antd';
import { useTranslation } from 'react-i18next';
import type { CodeBlockPreviewPayload } from 'markstream-react';
interface Props {
payload: CodeBlockPreviewPayload | null;
open: boolean;
onClose: () => void;
}
export const CodeBlockPreviewModal: React.FC<Props> = ({ payload, open, onClose }) => {
const { t } = useTranslation();
const { token } = theme.useToken();
const srcdoc = useMemo(() => {
if (!payload) return '';
const base = payload.node.code ?? '';
const lowered = base.trim().toLowerCase();
if (lowered.startsWith('<!doctype') || lowered.startsWith('<html') || lowered.startsWith('<body'))
return base;
const bg = token.colorBgElevated;
const fg = token.colorText;
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: ${bg};
color: ${fg};
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', ui-sans-serif, sans-serif;
}
</style>
</head>
<body>
${base}
</body>
</html>`;
}, [payload, token.colorBgElevated, token.colorText]);
const title = (() => {
const raw = payload?.artifactTitle;
if (!raw) return t('common.preview');
const type = payload?.artifactType;
if (type === 'text/html') return `HTML ${t('common.preview')}`;
if (type === 'image/svg+xml') return `SVG ${t('common.preview')}`;
return raw;
})();
return (
<Modal
title={title}
open={open}
onCancel={onClose}
footer={null}
width="80vw"
style={{ top: 40 }}
styles={{
body: {
padding: 0,
overflow: 'hidden',
borderRadius: token.borderRadiusLG,
},
}}
destroyOnClose
>
{payload && (
<iframe
sandbox="allow-scripts allow-same-origin"
src="about:blank"
srcDoc={srcdoc}
title={title}
style={{
width: '100%',
height: 'calc(80vh - 80px)',
border: 'none',
display: 'block',
borderRadius: token.borderRadiusLG,
backgroundColor: token.colorBgElevated,
}}
/>
)}
</Modal>
);
};