x/onedrive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use react syntax highlighter instead of prism

Browse source
This commit is contained in:
spencerwooo 2022-02-10 22:32:34 +08:00
parent f4a6eb53bc
commit 7494894a86
No known key found for this signature in database
GPG key ID: 24CD550268849CA0
3 changed files with 144 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
components/previews/CodePreview.tsx
View file

@ -1,9 +1,12 @@
import { useEffect, FC } from 'react'
import Prism from 'prismjs'
import { FC } from 'react'
import { useTranslation } from 'next-i18next'
import useSystemTheme from 'react-use-system-theme'
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter'
import { tomorrowNightEighties, tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
import { getExtension } from '../../utils/getFileIcon'
import useAxiosGet from '../../utils/fetchOnMount'
import { getLanguageByFileName } from '../../utils/getPreviewType'
import FourOhFour from '../FourOhFour'
import Loading from '../Loading'
import DownloadButtonGroup from '../DownloadBtnGtoup'
@ -12,14 +15,9 @@ import { DownloadBtnContainer, PreviewContainer } from './Containers'
const CodePreview: FC<{ file: any }> = ({ file }) => {
const { response: content, error, validating } = useAxiosGet(file['@microsoft.graph.downloadUrl'])
const theme = useSystemTheme('dark')
const { t } = useTranslation()
useEffect(() => {
if (typeof window !== 'undefined') {
Prism.highlightAll()
}
}, [validating])
if (error) {
return (
<PreviewContainer>
@ -38,9 +36,12 @@ const CodePreview: FC<{ file: any }> = ({ file }) => {
return (
<div>
<PreviewContainer>
<pre className={`language-${getExtension(file.name)}`}>
<code className="font-mono">{content}</code>
</pre>
<SyntaxHighlighter
language={getLanguageByFileName(file.name)}
style={theme === 'dark' ? tomorrowNightEighties : tomorrow}
>
{content}
</SyntaxHighlighter>
</PreviewContainer>
<DownloadBtnContainer>
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />

3
package.json
View file

@ -31,7 +31,6 @@
"next-i18next": "^10.2.0",
"nextjs-progressbar": "^0.0.13",
"preview-office-docs": "^1.0.2",
"prismjs": "^1.23.0",
"react": "^17.0.2",
"react-async-hook": "^4.0.0",
"react-audio-player": "^0.17.0",
@ -42,6 +41,8 @@
"react-hotkeys-hook": "^3.4.4",
"react-markdown": "^8.0.0",
"react-reader": "^0.20.4",
"react-syntax-highlighter": "^15.4.5",
"react-use-system-theme": "^1.1.1",
"rehype-katex": "^6.0.2",
"rehype-raw": "^6.0.0",
"remark-gfm": "^3.0.1",

132
pnpm-lock.yaml
View file

@ -38,7 +38,6 @@ specifiers:
prettier: ^2.5.1
prettier-plugin-tailwindcss: ^0.1.4
preview-office-docs: ^1.0.2
prismjs: ^1.23.0
react: ^17.0.2
react-async-hook: ^4.0.0
react-audio-player: ^0.17.0
@ -49,6 +48,8 @@ specifiers:
react-hotkeys-hook: ^3.4.4
react-markdown: ^8.0.0
react-reader: ^0.20.4
react-syntax-highlighter: ^15.4.5
react-use-system-theme: ^1.1.1
rehype-katex: ^6.0.2
rehype-raw: ^6.0.0
remark-gfm: ^3.0.1
@ -80,7 +81,6 @@ dependencies:
next-i18next: 10.2.0_61390be992b634a688f7c2555547b55b
nextjs-progressbar: 0.0.13_next@12.0.10+react@17.0.2
preview-office-docs: 1.0.2_react@17.0.2
prismjs: 1.26.0
react: 17.0.2
react-async-hook: 4.0.0_react@17.0.2
react-audio-player: 0.17.0_react-dom@17.0.2+react@17.0.2
@ -91,6 +91,8 @@ dependencies:
react-hotkeys-hook: 3.4.4_react-dom@17.0.2+react@17.0.2
react-markdown: 8.0.0_b08e3c15324cbe90a6ff8fcd416c932c
react-reader: 0.20.5_react@17.0.2
react-syntax-highlighter: 15.4.5_react@17.0.2
react-use-system-theme: 1.1.1_react@17.0.2
rehype-katex: 6.0.2
rehype-raw: 6.1.1
remark-gfm: 3.0.1
@ -916,10 +918,22 @@ packages:
supports-color: 7.2.0
dev: true
/character-entities-legacy/1.1.4:
resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
dev: false
/character-entities/1.2.4:
resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
dev: false
/character-entities/2.0.1:
resolution: {integrity: sha512-OzmutCf2Kmc+6DrFrrPS8/tDh2+DpnrfzdICHWhcVC9eOd0N1PXmQEE1a8iM4IziIAG+8tmTq3K+oo0ubH6RRQ==}
dev: false
/character-reference-invalid/1.1.4:
resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
dev: false
/cheerio-select/1.5.0:
resolution: {integrity: sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==}
dependencies:
@ -1020,6 +1034,10 @@ packages:
engines: {node: '>=0.1.90'}
dev: true
/comma-separated-tokens/1.0.8:
resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
dev: false
/comma-separated-tokens/2.0.2:
resolution: {integrity: sha512-G5yTt3KQN4Yn7Yk4ed73hlZ1evrFKXeUW3086p3PRFNp7m2vIjI6Pg+Kgb+oyzhd9F2qdcoj67+y3SdxL5XWsg==}
dev: false
@ -1719,6 +1737,12 @@ packages:
reusify: 1.0.4
dev: true
/fault/1.0.4:
resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
dependencies:
format: 0.2.2
dev: false
/file-entry-cache/6.0.1:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
engines: {node: ^10.12.0 || >=12.0.0}
@ -1783,6 +1807,11 @@ packages:
debug: 3.1.0
dev: false
/format/0.2.2:
resolution: {integrity: sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=}
engines: {node: '>=0.4.x'}
dev: false
/fraction.js/4.1.2:
resolution: {integrity: sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==}
dev: true
@ -2029,6 +2058,10 @@ packages:
'@types/unist': 2.0.6
dev: false
/hast-util-parse-selector/2.2.5:
resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
dev: false
/hast-util-parse-selector/3.1.0:
resolution: {integrity: sha512-AyjlI2pTAZEOeu7GeBPZhROx0RHBnydkQIXlhnFzDi0qfXTmGUWoCYZtomHbrdrheV4VFUlPcfJ6LMF5T6sQzg==}
dependencies:
@ -2074,6 +2107,16 @@ packages:
resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==}
dev: false
/hastscript/6.0.0:
resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
dependencies:
'@types/hast': 2.3.4
comma-separated-tokens: 1.0.8
hast-util-parse-selector: 2.2.5
property-information: 5.6.0
space-separated-tokens: 1.1.5
dev: false
/hastscript/7.0.2:
resolution: {integrity: sha512-uA8ooUY4ipaBvKcMuPehTAB/YfFLSSzCwFSwT6ltJbocFUKH/GDHLN+tflq7lSRf9H86uOuxOFkh1KgIy3Gg2g==}
dependencies:
@ -2102,6 +2145,10 @@ packages:
rsvp: 3.2.1
dev: true
/highlight.js/10.7.3:
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
dev: false
/hoist-non-react-statics/3.3.2:
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
dependencies:
@ -2246,6 +2293,17 @@ packages:
is-windows: 1.0.2
dev: true
/is-alphabetical/1.0.4:
resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
dev: false
/is-alphanumerical/1.0.4:
resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
dependencies:
is-alphabetical: 1.0.4
is-decimal: 1.0.4
dev: false
/is-arrayish/0.2.1:
resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
dev: true
@ -2298,6 +2356,10 @@ packages:
has-tostringtag: 1.0.0
dev: true
/is-decimal/1.0.4:
resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
dev: false
/is-extglob/2.1.1:
resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=}
engines: {node: '>=0.10.0'}
@ -2317,6 +2379,10 @@ packages:
is-extglob: 2.1.1
dev: true
/is-hexadecimal/1.0.4:
resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
dev: false
/is-negated-glob/1.0.0:
resolution: {integrity: sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=}
engines: {node: '>=0.10.0'}
@ -2592,6 +2658,13 @@ packages:
dependencies:
js-tokens: 4.0.0
/lowlight/1.20.0:
resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
dependencies:
fault: 1.0.4
highlight.js: 10.7.3
dev: false
/lru-cache/6.0.0:
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
engines: {node: '>=10'}
@ -3295,6 +3368,17 @@ packages:
callsites: 3.1.0
dev: true
/parse-entities/2.0.0:
resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
dependencies:
character-entities: 1.2.4
character-entities-legacy: 1.1.4
character-reference-invalid: 1.1.4
is-alphanumerical: 1.0.4
is-decimal: 1.0.4
is-hexadecimal: 1.0.4
dev: false
/parse-json/5.2.0:
resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
engines: {node: '>=8'}
@ -3458,6 +3542,10 @@ packages:
react: 17.0.2
dev: false
/prismjs/1.25.0:
resolution: {integrity: sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==}
dev: false
/prismjs/1.26.0:
resolution: {integrity: sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==}
engines: {node: '>=6'}
@ -3482,6 +3570,12 @@ packages:
object-assign: 4.1.1
react-is: 16.13.1
/property-information/5.6.0:
resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
dependencies:
xtend: 4.0.2
dev: false
/property-information/6.1.1:
resolution: {integrity: sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==}
dev: false
@ -3674,6 +3768,27 @@ packages:
react: 17.0.2
dev: false
/react-syntax-highlighter/15.4.5_react@17.0.2:
resolution: {integrity: sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==}
peerDependencies:
react: '>= 0.14.0'
dependencies:
'@babel/runtime': 7.16.7
highlight.js: 10.7.3
lowlight: 1.20.0
prismjs: 1.26.0
react: 17.0.2
refractor: 3.5.0
dev: false
/react-use-system-theme/1.1.1_react@17.0.2:
resolution: {integrity: sha512-Mlohol/QkEIbIKt8lXJP0iVvRAgOMml2iZ+bwvE1KpQFAG5DKJGFjZmEqebdj7WCu24u+34kpMtFDGMb4+5uSA==}
peerDependencies:
react: ^16.12.0
dependencies:
react: 17.0.2
dev: false
/react/17.0.2:
resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
engines: {node: '>=0.10.0'}
@ -3725,6 +3840,14 @@ packages:
redis-errors: 1.2.0
dev: false
/refractor/3.5.0:
resolution: {integrity: sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==}
dependencies:
hastscript: 6.0.0
parse-entities: 2.0.0
prismjs: 1.25.0
dev: false
/regenerator-runtime/0.13.9:
resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
@ -3967,6 +4090,10 @@ packages:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
/space-separated-tokens/1.1.5:
resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
dev: false
/space-separated-tokens/2.0.1:
resolution: {integrity: sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==}
dev: false
@ -4539,7 +4666,6 @@ packages:
/xtend/4.0.2:
resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
engines: {node: '>=0.4'}
dev: true
/yallist/4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}