onedrive/components/previews/MarkdownPreview.tsx

108 lines
3 KiB
TypeScript
Raw Normal View History

2022-01-06 11:25:10 +00:00
import { useEffect, FC, CSSProperties } from 'react'
2021-06-25 15:08:04 +00:00
import Prism from 'prismjs'
import ReactMarkdown from 'react-markdown'
import gfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
2021-08-15 19:48:29 +00:00
import rehypeRaw from 'rehype-raw'
2021-06-25 15:08:04 +00:00
import 'katex/dist/katex.min.css'
import FourOhFour from '../FourOhFour'
import Loading from '../Loading'
import DownloadButtonGroup from '../DownloadBtnGtoup'
import useFileContent from '../../utils/fetchOnMount'
import { DownloadBtnContainer, PreviewContainer } from './Containers'
2021-06-25 15:08:04 +00:00
2022-01-06 11:25:10 +00:00
const MarkdownPreview: FC<{ file: any; path: string; standalone?: boolean }> = ({
file,
path,
standalone = true,
}) => {
const { content, error, validating } = useFileContent(file['@microsoft.graph.downloadUrl'])
2021-08-23 15:14:08 +00:00
// The parent folder of the markdown file, which is also the relative image folder
const parentPath = path.substring(0, path.lastIndexOf('/'))
// Check if the image is relative path instead of a absolute url
2021-09-04 14:15:09 +00:00
const isUrlAbsolute = (url: string | string[]) => url.indexOf('://') > 0 || url.indexOf('//') === 0
// Custom renderer to render images with relative path
const relativeImagePathRenderer = {
img: ({
alt,
src,
title,
width,
height,
style,
}: {
alt?: string
src?: string
title?: string
width?: string | number
height?: string | number
style?: CSSProperties
}) => {
if (isUrlAbsolute(src as string)) {
return (
// eslint-disable-next-line @next/next/no-img-element
<img alt={alt} src={src} title={title} width={width} height={height} style={style} />
)
}
return (
// eslint-disable-next-line @next/next/no-img-element
<img
alt={alt}
src={`/api?path=${parentPath}/${src}&raw=true`}
title={title}
width={width}
height={height}
style={style}
/>
)
},
}
2021-06-25 15:08:04 +00:00
useEffect(() => {
Prism.highlightAll()
}, [content])
2021-06-25 15:08:04 +00:00
if (error) {
return (
<PreviewContainer>
<FourOhFour errorMsg={error} />
</PreviewContainer>
2021-06-25 15:08:04 +00:00
)
}
if (validating) {
2021-06-25 15:08:04 +00:00
return (
<PreviewContainer>
2021-06-25 15:08:04 +00:00
<Loading loadingText="Loading file content..." />
</PreviewContainer>
2021-06-25 15:08:04 +00:00
)
}
return (
<div>
<PreviewContainer>
<div className="markdown-body">
{/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */}
<ReactMarkdown
remarkPlugins={[gfm, remarkMath]}
rehypePlugins={[rehypeKatex, rehypeRaw as any]}
components={relativeImagePathRenderer}
>
{content}
</ReactMarkdown>
</div>
</PreviewContainer>
2021-06-30 11:53:17 +00:00
{standalone && (
<DownloadBtnContainer>
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
</DownloadBtnContainer>
2021-06-30 11:53:17 +00:00
)}
</div>
2021-06-25 15:08:04 +00:00
)
}
export default MarkdownPreview