Spaces:
Running
Running
File size: 3,949 Bytes
e538a38 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
import { Box, Button, useMantineTheme } from "@mantine/core";
import React, { lazy } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import syntaxHighlighterStyle from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
import rehypeExternalLinks from "rehype-external-links";
import remarkGfm from "remark-gfm";
const Markdown = lazy(() => import("react-markdown"));
const CopyIconButton = lazy(() => import("./CopyIconButton"));
interface MarkdownRendererProps {
content: string;
enableCopy?: boolean;
className?: string;
}
export default function MarkdownRenderer({
content,
enableCopy = true,
className = "",
}: MarkdownRendererProps) {
const theme = useMantineTheme();
if (!content) {
return null;
}
return (
<Box className={className}>
<Markdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[
[
rehypeExternalLinks,
{ target: "_blank", rel: ["nofollow", "noopener", "noreferrer"] },
],
]}
components={{
a(props) {
const { href, children } = props;
return (
<Button
component="a"
href={href}
target="_blank"
rel="nofollow noopener noreferrer"
variant="light"
color="gray"
size="compact-xs"
radius="xl"
style={{
textDecoration: "none",
transform: "translateY(-2px)",
}}
>
{children}
</Button>
);
},
li(props) {
const { children } = props;
const processedChildren = React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === "p") {
return (child.props as { children: React.ReactNode }).children;
}
return child;
});
return <li>{processedChildren}</li>;
},
pre(props) {
return <>{props.children}</>;
},
code(props) {
const { children, className, node, ref, ...rest } = props;
void node;
const languageMatch = /language-(\w+)/.exec(className || "");
const codeContent = children?.toString().replace(/\n$/, "") ?? "";
if (languageMatch) {
return (
<Box
style={{
position: "relative",
marginBottom: theme.spacing.md,
}}
>
{enableCopy && (
<Box
style={{
position: "absolute",
top: theme.spacing.xs,
right: theme.spacing.xs,
zIndex: 2,
}}
>
<CopyIconButton value={codeContent} />
</Box>
)}
<SyntaxHighlighter
{...rest}
ref={ref as never}
language={languageMatch[1]}
style={syntaxHighlighterStyle}
>
{codeContent}
</SyntaxHighlighter>
</Box>
);
}
return (
<code
{...rest}
className={className}
style={{
backgroundColor: theme.colors.gray[8],
padding: "0.2em 0.4em",
borderRadius: theme.radius.sm,
fontSize: "0.9em",
}}
>
{children}
</code>
);
},
}}
>
{content}
</Markdown>
</Box>
);
}
|