forked from TypeScriptToLua/TypeScriptToLua.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
141 lines (120 loc) · 5.44 KB
/
index.js
File metadata and controls
141 lines (120 loc) · 5.44 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useThemeContext from "@theme/hooks/useThemeContext";
import classnames from "classnames";
import Clipboard from "clipboard";
import rangeParser from "parse-numeric-range";
import Highlight, { defaultProps } from "prism-react-renderer";
import defaultTheme from "prism-react-renderer/themes/palenight";
import React, { useEffect, useRef, useState } from "react";
import { getPlaygroundUrlForCode } from "../../pages/play/code";
import styles from "./styles.module.scss";
function useClipboard() {
const target = useRef(null);
const button = useRef(null);
const [showCopied, setShowCopied] = useState(false);
useEffect(() => {
let clipboard;
if (button.current) {
clipboard = new Clipboard(button.current, {
target: () => target.current,
});
}
return () => {
if (clipboard) {
clipboard.destroy();
}
};
}, [button.current, target.current]);
const handleCopyCode = () => {
window.getSelection().empty();
setShowCopied(true);
setTimeout(() => setShowCopied(false), 2000);
};
return { showCopied, handleCopyCode, target, button };
}
function usePrismTheme(prism) {
const [mounted, setMounted] = useState(false);
// The Prism theme on SSR is always the default theme but the site theme
// can be in a different mode. React hydration doesn't update DOM styles
// that come from SSR. Hence force a re-render after mounting to apply the
// current relevant styles. There will be a flash seen of the original
// styles seen using this current approach but that's probably ok. Fixing
// the flash will require changing the theming approach and is not worth it
// at this point.
useEffect(() => {
setMounted(true);
}, []);
const { isDarkTheme } = useThemeContext();
const lightModeTheme = prism.theme || defaultTheme;
const darkModeTheme = prism.darkTheme || lightModeTheme;
const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
return { prismTheme, mounted };
}
export default ({ children, className: languageClassName, metastring = "" }) => {
const {
siteConfig: {
themeConfig: { prism = {} },
},
} = useDocusaurusContext();
const { prismTheme, mounted } = usePrismTheme(prism);
const { showCopied, handleCopyCode, target, button } = useClipboard();
const code = children.trim();
const [, title] = metastring.match(/title=(.+)( |$)/) ?? [];
const [, highlightLinesRange] = metastring.match(/{([\d,-]+)}/) ?? [];
const highlightLines =
highlightLinesRange != null ? rangeParser.parse(highlightLinesRange).filter((n) => n > 0) : [];
let language = languageClassName && languageClassName.replace(/language-/, "");
if (!language && prism.defaultLanguage) {
language = prism.defaultLanguage;
}
const hasPlayground = language === "ts" || language === "typescript";
return (
<Highlight {...defaultProps} key={mounted} theme={prismTheme} code={code} language={language}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<>
{title && <div className={styles.title}>{title}</div>}
<pre className={classnames(className, styles.codeBlock, title && styles.hasTitle)}>
<button
ref={button}
type="button"
aria-label="Copy code to clipboard"
className={styles.copyButton}
onClick={handleCopyCode}
>
{showCopied ? "Copied" : "Copy"}
</button>
{hasPlayground && (
<Link
aria-label="Open code on playground"
className={styles.playgroundButton}
to={getPlaygroundUrlForCode(code)}
target="_blank"
>
Playground
</Link>
)}
<code ref={target} className={styles.codeBlockLines} style={style}>
{tokens.map((line, i) => {
if (line.length === 1 && line[0].content === "") {
line[0].content = "\n";
}
const lineProps = getLineProps({ line, key: i });
if (highlightLines.includes(i + 1)) {
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
}
return (
<div key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token, key })} />
))}
</div>
);
})}
</code>
</pre>
</>
)}
</Highlight>
);
};