|
1 | | -import tw, {css} from "twin.macro"; |
2 | | -import Highlight, {defaultProps} from "prism-react-renderer"; |
3 | | -import Prism from 'prismjs'; |
4 | | -import {Dispatch, SetStateAction} from "react"; |
5 | | -import Editor from 'react-simple-code-editor' |
6 | | -import {faCopy} from '@fortawesome/free-solid-svg-icons' |
7 | | -import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; |
8 | | -import "prismjs/components/prism-yaml" |
9 | | -import "prismjs/components/prism-properties" |
| 1 | +import tw, { css } from "twin.macro"; |
| 2 | +import Highlight, { defaultProps, Language } from "prism-react-renderer"; |
| 3 | +import Prism from "prismjs"; |
| 4 | +import { Dispatch, SetStateAction } from "react"; |
| 5 | +import Editor from "react-simple-code-editor"; |
| 6 | +import { faCopy } from "@fortawesome/free-solid-svg-icons"; |
| 7 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
| 8 | +import "prismjs/components/prism-yaml"; |
| 9 | +import "prismjs/components/prism-toml"; |
| 10 | +import "prismjs/components/prism-properties"; |
10 | 11 |
|
11 | 12 | const textBoxStyle = tw`flex-grow flex-shrink border-none outline-none focus:outline-none max-h-full`; |
12 | 13 |
|
13 | | -export const TextBox = ( |
14 | | - { |
15 | | - title, |
16 | | - code, |
17 | | - editor, |
18 | | - language |
19 | | - }: |
20 | | - { |
21 | | - title: string, |
22 | | - code: string, |
23 | | - editor?: Dispatch<SetStateAction<string>>, |
24 | | - language: string |
25 | | - } |
26 | | -) => { |
27 | | - |
28 | | - if (!editor) { |
29 | | - return ( |
30 | | - <div css={tw`flex flex-col h-full w-full pt-1`}> |
31 | | - <div css={tw`flex flex-row pl-2`}> |
32 | | - <p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p> |
33 | | - <div css={tw`flex flex-row h-8`}> |
34 | | - <div css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`} onClick={() => { |
35 | | - navigator.clipboard.writeText(code); |
36 | | - }}> |
37 | | - <FontAwesomeIcon icon={faCopy} size="1x"/> |
38 | | - </div> |
39 | | - </div> |
40 | | - </div> |
41 | | - <div css={css`${tw`rounded-md overflow-auto h-full`} background-color: #2a2734`}> |
42 | | - <div css={tw` py-2 px-4`}> |
43 | | - {highlight(code, language)} |
44 | | - </div> |
45 | | - </div> |
| 14 | +export const TextBox = ({ |
| 15 | + title, |
| 16 | + code, |
| 17 | + editor, |
| 18 | + language, |
| 19 | +}: { |
| 20 | + title: string; |
| 21 | + code: string; |
| 22 | + editor?: Dispatch<SetStateAction<string>>; |
| 23 | + language: string; |
| 24 | +}) => { |
| 25 | + if (!editor) { |
| 26 | + return ( |
| 27 | + <div css={tw`flex flex-col h-full w-full pt-1`}> |
| 28 | + <div css={tw`flex flex-row pl-2`}> |
| 29 | + <p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p> |
| 30 | + <div css={tw`flex flex-row h-8`}> |
| 31 | + <div |
| 32 | + css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`} |
| 33 | + onClick={() => { |
| 34 | + navigator.clipboard.writeText(code); |
| 35 | + }} |
| 36 | + > |
| 37 | + <FontAwesomeIcon icon={faCopy} size="1x" /> |
46 | 38 | </div> |
47 | | - ); |
48 | | - } else { |
49 | | - return ( |
50 | | - <div css={tw`flex flex-col h-full w-full pt-1`}> |
51 | | - <p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p> |
52 | | - <div css={css`${tw`rounded-md overflow-auto h-full flex flex-col`} background-color: #2a2734`}> |
53 | | - <div css={tw`py-2 px-4 flex-grow flex-shrink`}> |
54 | | - <Editor |
55 | | - value={code} |
56 | | - onValueChange={editor} |
57 | | - highlight={(v) => highlight(v, language)} |
58 | | - css={css` |
59 | | - ${textBoxStyle} |
60 | | - ${tw`h-full`} |
| 39 | + </div> |
| 40 | + </div> |
| 41 | + <div |
| 42 | + css={css` |
| 43 | + ${tw`rounded-md overflow-auto h-full`} background-color: #2a2734 |
| 44 | + `} |
| 45 | + > |
| 46 | + <div css={tw` py-2 px-4`}>{highlight(code, language)}</div> |
| 47 | + </div> |
| 48 | + </div> |
| 49 | + ); |
| 50 | + } else { |
| 51 | + return ( |
| 52 | + <div css={tw`flex flex-col h-full w-full pt-1`}> |
| 53 | + <p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p> |
| 54 | + <div |
| 55 | + css={css` |
| 56 | + ${tw`rounded-md overflow-auto h-full flex flex-col`} background-color: #2a2734 |
| 57 | + `} |
| 58 | + > |
| 59 | + <div css={tw`py-2 px-4 flex-grow flex-shrink`}> |
| 60 | + <Editor |
| 61 | + value={code} |
| 62 | + onValueChange={editor} |
| 63 | + highlight={(v) => highlight(v, language)} |
| 64 | + css={css` |
| 65 | + ${textBoxStyle} |
| 66 | + ${tw`h-full`} |
61 | 67 | min-width: fit-content; |
62 | | - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| 68 | + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, |
| 69 | + Consolas, "Liberation Mono", "Courier New", monospace; |
63 | 70 |
|
64 | | - > pre { |
65 | | - ${tw`h-full w-full`} |
66 | | - } |
| 71 | + > pre { |
| 72 | + ${tw`h-full w-full`} |
| 73 | + } |
67 | 74 |
|
68 | | - > pre > pre { |
69 | | - ${tw`h-full w-full`} |
70 | | - } |
| 75 | + > pre > pre { |
| 76 | + ${tw`h-full w-full`} |
| 77 | + } |
71 | 78 |
|
72 | | - > textarea { |
73 | | - z-index: 1; |
74 | | - caret-color: whitesmoke; |
75 | | - ${tw`hover:outline-none focus:outline-none h-full`} |
76 | | - } |
77 | | - `} |
78 | | - /> |
79 | | - </div> |
80 | | - </div> |
81 | | - </div> |
82 | | - ); |
83 | | - } |
84 | | -} |
| 79 | + > textarea { |
| 80 | + z-index: 1; |
| 81 | + caret-color: whitesmoke; |
| 82 | + ${tw`hover:outline-none focus:outline-none h-full`} |
| 83 | + } |
| 84 | + `} |
| 85 | + /> |
| 86 | + </div> |
| 87 | + </div> |
| 88 | + </div> |
| 89 | + ); |
| 90 | + } |
| 91 | +}; |
85 | 92 |
|
86 | 93 | function highlight(code: string, language: string) { |
87 | | - // @ts-ignore (Prism is odd) |
88 | | - return (<Highlight {...defaultProps} Prism={Prism} code={code} language={language}> |
89 | | - {({className, style, tokens, getLineProps, getTokenProps}) => ( |
90 | | - <pre className={className} style={style} css={textBoxStyle}> |
91 | | - {tokens.map((line, i) => ( |
92 | | - <div key={i} {...getLineProps({line, key: i})}> |
93 | | - {line.map((token, key) => ( |
94 | | - <span key={key} {...getTokenProps({token, key})} /> |
95 | | - ))} |
96 | | - </div> |
97 | | - ))} |
98 | | - </pre> |
99 | | - )} |
100 | | - </Highlight>) |
| 94 | + return ( |
| 95 | + <Highlight |
| 96 | + {...defaultProps} |
| 97 | + Prism={Prism as any} |
| 98 | + code={code} |
| 99 | + language={language as Language} |
| 100 | + > |
| 101 | + {({ className, style, tokens, getLineProps, getTokenProps }) => ( |
| 102 | + <pre className={className} style={style} css={textBoxStyle}> |
| 103 | + {tokens.map((line, i) => ( |
| 104 | + <div key={i} {...getLineProps({ line, key: i })}> |
| 105 | + {line.map((token, key) => ( |
| 106 | + <span key={key} {...getTokenProps({ token, key })} /> |
| 107 | + ))} |
| 108 | + </div> |
| 109 | + ))} |
| 110 | + </pre> |
| 111 | + )} |
| 112 | + </Highlight> |
| 113 | + ); |
101 | 114 | } |
0 commit comments