57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import axios from "axios";
|
||
|
|
import ReactMarkdown from "react-markdown";
|
||
|
|
import remarkGfm from "remark-gfm";
|
||
|
|
import rehypeHighlight from "rehype-highlight";
|
||
|
|
import rehypeRaw from "rehype-raw";
|
||
|
|
import "highlight.js/styles/github.css";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
url?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function MarkdownPreview({ url }: Props) {
|
||
|
|
const { data, isLoading, error, isError } = useQuery({
|
||
|
|
queryKey: ["markdown", url],
|
||
|
|
queryFn: () => axios.get(url!, { responseType: "text" }),
|
||
|
|
enabled: !!url,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!url) {
|
||
|
|
return (
|
||
|
|
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
|
||
|
|
Markdown 文件地址无效
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-full">
|
||
|
|
<div>加载中...</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isError) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-full text-red-500">
|
||
|
|
{error?.message || "加载失败"}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="h-full overflow-auto p-8 bg-white dark:bg-slate-950">
|
||
|
|
<div className="max-w-4xl mx-auto prose prose-slate dark:prose-invert prose-headings:font-bold prose-a:text-blue-600 prose-code:text-pink-600 prose-pre:bg-slate-100 dark:prose-pre:bg-slate-900">
|
||
|
|
<ReactMarkdown
|
||
|
|
remarkPlugins={[remarkGfm]}
|
||
|
|
rehypePlugins={[rehypeHighlight, rehypeRaw]}
|
||
|
|
>
|
||
|
|
{data?.data || ""}
|
||
|
|
</ReactMarkdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|