CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-11-04 08:33:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(mdx-preview): use MdxComponents and add className prop

Browse Source
This commit is contained in:
cfngc4594 2025-03-24 10:31:09 +08:00
parent 7a0a13aa97
commit 0c9ad2b8b0
1 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/mdx-preview.tsx
View File

@ -1,39 +1,36 @@
"use client"; "use client";
import "@/style/mdx.css"; import "@/style/mdx.css";
import { cn } from "@/lib/utils";
import "katex/dist/katex.min.css"; import "katex/dist/katex.min.css";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
// import rehypeSlug from "rehype-slug"; // import rehypeSlug from "rehype-slug";
import rehypePretty from "rehype-pretty-code"; import rehypePretty from "rehype-pretty-code";
import { Pre } from "@/components/content/pre";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { serialize } from "next-mdx-remote/serialize"; import { serialize } from "next-mdx-remote/serialize";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { CircleAlert, TriangleAlert } from "lucide-react"; import { CircleAlert, TriangleAlert } from "lucide-react";
import { useMonacoTheme } from "@/hooks/use-monaco-theme"; import { useMonacoTheme } from "@/hooks/use-monaco-theme";
// import rehypeAutolinkHeadings from "rehype-autolink-headings"; // import rehypeAutolinkHeadings from "rehype-autolink-headings";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { MdxComponents } from "@/components/content/mdx-components";
import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote"; import { MDXRemote, MDXRemoteSerializeResult } from "next-mdx-remote";
interface MdxPreviewProps { interface MdxPreviewProps {
source: string; source: string;
className?: string;
} }
export default function MdxPreview({ source }: MdxPreviewProps) { export default function MdxPreview({
source,
className,
}: MdxPreviewProps) {
const { currentTheme } = useMonacoTheme(); const { currentTheme } = useMonacoTheme();
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null); const [mdxSource, setMdxSource] = useState<MDXRemoteSerializeResult | null>(null);
const components = {
// Define your custom components here
// For example:
// Test: ({ name }: { name: string }) => <p>Test Component: {name}</p>,
pre: Pre,
};
const getMdxSource = useCallback(async () => { const getMdxSource = useCallback(async () => {
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
@ -119,11 +116,8 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
} }
return ( return (
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-132px)]"> <article className={cn("markdown-body", className)}>
<div className="markdown-body"> <MDXRemote {...mdxSource!} components={MdxComponents} />
<MDXRemote {...mdxSource!} components={components} /> </article>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
); );
} }