blob: 44d1cb99cbf6f34580968c79e93674a94de8705f (
plain) (
blame)
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import * as React from 'react';
import styled from 'styled-components';
import { colors } from '../variables';
import BaseButton from './Button';
interface CodeProps {
children: React.ReactNode;
language?: string;
}
interface CodeState {
hlCode?: string;
copied?: boolean;
}
const Button = styled(BaseButton)`
opacity: 0;
position: absolute;
top: 1rem;
right: 1rem;
transition: opacity 0.2s;
`;
const Base =
styled.div <
CodeProps >
`
color: ${props => (props.language === undefined ? colors.white : 'inherit')};
background-color: ${props => (props.language === undefined ? colors.black : colors.lightGray)};
white-space: ${props => (props.language === undefined ? 'nowrap' : '')};
position: relative;
&:hover ${Button} {
opacity: 1;
}
`;
const StyledCode = styled.code`
padding: 1.5rem;
display: block;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
`;
const StyledPre = styled.pre`
margin: 0;
`;
const StyledCopyInput = styled.textarea`
height: 0;
position: absolute;
top: 0;
right: 0;
z-index: -1;
`;
const CopyInput = StyledCopyInput as any;
class Code extends React.Component<CodeProps, CodeState> {
code = React.createRef<HTMLTextAreaElement>();
state: CodeState = {};
constructor(props: CodeProps) {
super(props);
}
async componentDidMount() {
const { language, children } = this.props;
if (language !== undefined) {
const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
const { value: hlCode } = highlight(language, children as string);
this.setState({ hlCode });
}
}
handleCopy = async () => {
try {
if ('clipboard' in navigator) {
await (navigator as any).clipboard.writeText(this.props.children);
this.setState({ copied: true });
} else {
this.code.current.focus();
this.code.current.select();
document.execCommand('copy');
this.setState({ copied: true });
}
} catch (error) {
this.setState({ copied: false });
}
};
render() {
const { language, children } = this.props;
return (
<Base language={language}>
<StyledPre>
{this.state.hlCode !== undefined ? (
<StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} />
) : (
<StyledCode>{this.props.children}</StyledCode>
)}
</StyledPre>
<Button onClick={this.handleCopy}>Copy</Button>
{!('clipboard' in navigator) ? (
<CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
) : null}
</Base>
);
}
}
export default Code;
|
