import { memo, useEffect, useState } from "react" import styles from './preview.module.css' type Props = { height?: number | string fileId?: string content?: string title?: string // file extensions we can highlight } const MarkdownPreview = ({ height = 500, fileId, content, title }: Props) => { const [preview, setPreview] = useState(content || "") const [isLoading, setIsLoading] = useState(true) useEffect(() => { async function fetchPost() { if (fileId) { const resp = await fetch(`/api/html/${fileId}`, { method: "GET", }) if (resp.ok) { const res = await resp.text() setPreview(res) setIsLoading(false) } } else if (content) { const resp = await fetch(`/api/render-markdown`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title, content, }), }) if (resp.ok) { const res = await resp.text() setPreview(res) setIsLoading(false) } } setIsLoading(false) } fetchPost() }, [content, fileId, title]) return (<> {isLoading ?
Loading...
:
} ) } export default memo(MarkdownPreview)