83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client';
|
||
|
||
import ReactMarkdown, { type Components } from 'react-markdown';
|
||
import { isHTMLContent } from '@/lib/content';
|
||
|
||
interface ContentViewProps {
|
||
content: string | null | undefined;
|
||
className?: string;
|
||
/**
|
||
* 显式指定内容格式，优先于内容探测。
|
||
* - 'html'：富文本，dangerouslySetInnerHTML 渲染
|
||
* - 'markdown'：用 react-markdown 解析
|
||
* 不传时回退到 isHTMLContent 自动判断（旧调用方兼容）。
|
||
*/
|
||
format?: 'html' | 'markdown';
|
||
}
|
||
|
||
const mdComponents: Components = {
|
||
pre: ({ children }) => (
|
||
<pre className="my-4 overflow-x-auto rounded-md bg-gray-900 p-4 text-sm text-gray-100">
|
||
{children}
|
||
</pre>
|
||
),
|
||
code: ({ className: cls, children }) => {
|
||
// 行内 code（无 language- 前缀）→ 灰底圆角；块级 code 由 <pre> 包裹
|
||
const isBlock = typeof cls === 'string' && cls.includes('language-');
|
||
if (isBlock) {
|
||
return <code className={cls}>{children}</code>;
|
||
}
|
||
return (
|
||
<code className="rounded bg-gray-100 px-1.5 py-0.5 text-sm text-pink-600">
|
||
{children}
|
||
</code>
|
||
);
|
||
},
|
||
table: ({ children }) => (
|
||
<table className="my-4 w-full border-collapse border border-gray-300 text-sm">
|
||
{children}
|
||
</table>
|
||
),
|
||
th: ({ children }) => (
|
||
<th className="border border-gray-300 bg-gray-50 px-3 py-2 text-left font-medium">
|
||
{children}
|
||
</th>
|
||
),
|
||
td: ({ children }) => (
|
||
<td className="border border-gray-300 px-3 py-2">{children}</td>
|
||
),
|
||
hr: () => <hr className="my-6 border-gray-200" />,
|
||
};
|
||
|
||
/**
|
||
* 智能内容渲染器：
|
||
* - HTML 内容（来自 RichEditor） → 用 dangerouslySetInnerHTML 直接渲染
|
||
* - Markdown 内容（来自 .md 上传）→ 用 react-markdown 解析为 React 元素后渲染
|
||
* 两者都套 `.prose-rich` 类以复用全局排版样式。
|
||
*
|
||
* 注：MD 内容用 suppressHydrationWarning 包裹，避免 react-markdown
|
||
* SSR/客户端解析在边界字符（HTML 标签、空白）上产生 hydration 不一致。
|
||
*/
|
||
export function ContentView({ content, className, format }: ContentViewProps) {
|
||
if (!content?.trim()) return null;
|
||
|
||
const wrapperClass = className ? `prose-rich ${className}` : 'prose-rich';
|
||
const isHtml =
|
||
format === 'html' ? true : format === 'markdown' ? false : isHTMLContent(content);
|
||
|
||
if (isHtml) {
|
||
return (
|
||
<div
|
||
className={wrapperClass}
|
||
dangerouslySetInnerHTML={{ __html: content }}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={wrapperClass} suppressHydrationWarning>
|
||
<ReactMarkdown components={mdComponents}>{content}</ReactMarkdown>
|
||
</div>
|
||
);
|
||
}
|