render relative path images in markdown, close #10
This commit is contained in:
parent
08cd0d7191
commit
12c551468f
2 changed files with 35 additions and 9 deletions
|
@ -274,7 +274,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
|
||||
{renderReadme && (
|
||||
<div className="border-t dark:border-gray-700">
|
||||
<MarkdownPreview file={readmeFile} standalone={false} />
|
||||
<MarkdownPreview file={readmeFile} path={path} standalone={false} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
@ -303,7 +303,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
return <CodePreview file={resp} />
|
||||
|
||||
case preview.markdown:
|
||||
return <MarkdownPreview file={resp} />
|
||||
return <MarkdownPreview file={resp} path={path} />
|
||||
|
||||
case preview.video:
|
||||
return <VideoPreview file={resp} />
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, FunctionComponent } from 'react'
|
||||
import { useEffect, FunctionComponent, CSSProperties } from 'react'
|
||||
import Prism from 'prismjs'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import gfm from 'remark-gfm'
|
||||
|
@ -13,13 +13,35 @@ import Loading from '../Loading'
|
|||
import DownloadBtn from '../DownloadBtn'
|
||||
import { useStaleSWR } from '../../utils/tools'
|
||||
|
||||
const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> = ({ file, standalone = true }) => {
|
||||
const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?: boolean }> = ({
|
||||
file,
|
||||
path,
|
||||
standalone = true,
|
||||
}) => {
|
||||
const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
|
||||
|
||||
// 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
|
||||
const isUrlAbsolute = url => url.indexOf('://') > 0 || url.indexOf('//') === 0
|
||||
// Custom renderer to render images with relative path
|
||||
const relativeImagePathRenderer = {
|
||||
img: ({ alt, src, title, style }: { alt?: string; src?: string; title?: string; style?: CSSProperties }) => {
|
||||
if (isUrlAbsolute(src as string)) {
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img alt={alt} src={src} title={title} style={style} />
|
||||
)
|
||||
}
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img alt={alt} src={`/api?path=${parentPath}/${src}&raw=true`} title={title} style={style} />
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
Prism.highlightAll()
|
||||
}
|
||||
Prism.highlightAll()
|
||||
}, [data])
|
||||
|
||||
if (error) {
|
||||
|
@ -46,8 +68,12 @@ const MarkdownPreview: FunctionComponent<{ file: any; standalone?: boolean }> =
|
|||
: 'markdown-body p-3 dark:text-white'
|
||||
}
|
||||
>
|
||||
{/* Using rehypeRaw to render HTML inside Markdown, is potentially dangerous, use under safe environments. (#18) */}
|
||||
<ReactMarkdown remarkPlugins={[gfm, remarkMath]} rehypePlugins={[rehypeKatex, rehypeRaw as any]}>
|
||||
{/* 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}
|
||||
>
|
||||
{data}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue