51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { FC } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import rehypeHighlight from 'rehype-highlight';
|
|
import rehypeRaw from 'rehype-raw';
|
|
import rehypeSanitize from 'rehype-sanitize';
|
|
import 'highlight.js/styles/github-dark.css';
|
|
|
|
import { defaultSchema } from 'hast-util-sanitize';
|
|
import { cn } from '../../lib/cn';
|
|
|
|
const schema = {
|
|
...defaultSchema,
|
|
attributes: {
|
|
...defaultSchema.attributes,
|
|
div: [
|
|
...(defaultSchema.attributes?.div || []),
|
|
['style'], // разрешаем атрибут style на div
|
|
],
|
|
},
|
|
};
|
|
|
|
interface MarkdownPreviewProps {
|
|
content: string;
|
|
className?: string;
|
|
}
|
|
|
|
const MarkdownPreview: FC<MarkdownPreviewProps> = ({
|
|
content,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<div className={cn('flex-1 bg-[#161b22] rounded-lg p-6', className)}>
|
|
<div className="prose prose-invert max-w-none h-full overflow-auto pr-4 medium-scrollbar">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[
|
|
rehypeRaw,
|
|
[rehypeSanitize, schema],
|
|
rehypeHighlight,
|
|
]}
|
|
>
|
|
{content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MarkdownPreview;
|