Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-17 23:12:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(mdx-preview): replace next-themes with useMonacoTheme

Browse Source
This commit is contained in:
cfngc4594 2025-03-06 21:29:52 +08:00
parent af59e0f432
commit 2a42c711bf
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,13 +5,13 @@ 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 { useTheme } from "next-themes";
// import rehypeSlug from "rehype-slug"; // import rehypeSlug from "rehype-slug";
import rehypePretty from "rehype-pretty-code"; import rehypePretty from "rehype-pretty-code";
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 { CodeBlockWithCopy } from "./mdx/code-block-with-copy"; import { CodeBlockWithCopy } from "./mdx/code-block-with-copy";
// import rehypeAutolinkHeadings from "rehype-autolink-headings"; // import rehypeAutolinkHeadings from "rehype-autolink-headings";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -22,7 +22,7 @@ interface MdxPreviewProps {
} }
export default function MdxPreview({ source }: MdxPreviewProps) { export default function MdxPreview({ source }: MdxPreviewProps) {
const { resolvedTheme } = useTheme(); const { monacoTheme } = 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);
@ -56,7 +56,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
[ [
rehypePretty, rehypePretty,
{ {
theme: resolvedTheme === "light" ? "github-light-default" : "github-dark-default", theme: monacoTheme.id,
keepBackground: false, keepBackground: false,
}, },
], ],
@ -72,7 +72,7 @@ export default function MdxPreview({ source }: MdxPreviewProps) {
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
}, [source, resolvedTheme]); }, [source, monacoTheme]);
// Delay the serialize process to the next event loop to avoid flickering // Delay the serialize process to the next event loop to avoid flickering
// when copying code to the editor and the MDX preview shrinks. // when copying code to the editor and the MDX preview shrinks.