81 lines
1.5 KiB
TypeScript
81 lines
1.5 KiB
TypeScript
import { memo, useEffect, useState } from "react"
|
|
import styles from "./preview.module.css"
|
|
import "@styles/markdown.css"
|
|
import "./marked.css"
|
|
|
|
type Props = {
|
|
height?: number | string
|
|
fileId?: string
|
|
content?: string
|
|
title?: string
|
|
}
|
|
|
|
const MarkdownPreview = ({
|
|
height = 500,
|
|
fileId,
|
|
content: initial = "",
|
|
title
|
|
}: Props) => {
|
|
const [content, setPreview] = useState<string>(initial)
|
|
const [isLoading, setIsLoading] = useState<boolean>(true)
|
|
useEffect(() => {
|
|
async function fetchPost() {
|
|
if (fileId) {
|
|
const resp = await fetch(`/api/file/html/${fileId}`, {
|
|
method: "GET"
|
|
})
|
|
if (resp.ok) {
|
|
const res = await resp.text()
|
|
setPreview(res)
|
|
setIsLoading(false)
|
|
}
|
|
} else if (content) {
|
|
const urlQuery = new URLSearchParams({
|
|
title: title || "",
|
|
content
|
|
})
|
|
|
|
const resp = await fetch(`/api/file/get-html?${urlQuery}`, {
|
|
method: "GET"
|
|
})
|
|
|
|
if (resp.ok) {
|
|
const res = await resp.text()
|
|
setPreview(res)
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
setIsLoading(false)
|
|
}
|
|
fetchPost()
|
|
}, [content, fileId, title])
|
|
return (
|
|
<>
|
|
{isLoading ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<StaticPreview content={content} height={height} />
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MarkdownPreview
|
|
|
|
export const StaticPreview = ({
|
|
content,
|
|
height = 500
|
|
}: {
|
|
content: string
|
|
height: string | number
|
|
}) => {
|
|
return (
|
|
<article
|
|
className={styles.markdownPreview}
|
|
dangerouslySetInnerHTML={{ __html: content }}
|
|
style={{
|
|
height
|
|
}}
|
|
/>
|
|
)
|
|
}
|