72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
|
|
import { languages } from "@codemirror/language-data";
|
|
import { basicLightInit } from "@uiw/codemirror-theme-basic";
|
|
import { monokaiInit } from "@uiw/codemirror-theme-monokai";
|
|
import CodeMirror from "@uiw/react-codemirror";
|
|
import { useTheme } from "next-themes";
|
|
import { useMemo } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
|
|
import { reasoningPlugins } from "@/core/streamdown";
|
|
|
|
const lightTheme = basicLightInit({ settings: { background: "transparent", fontSize: "14px" } });
|
|
const darkTheme = monokaiInit({
|
|
settings: { background: "transparent", gutterBackground: "transparent", fontSize: "14px" },
|
|
});
|
|
|
|
/** Markdown-aware source editor shared by Wiki create/edit dialogs. */
|
|
export function MarkdownCodeEditor({
|
|
value,
|
|
onChange,
|
|
className,
|
|
}: {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
className?: string;
|
|
}) {
|
|
const { resolvedTheme } = useTheme();
|
|
const extensions = useMemo(
|
|
() => [markdown({ base: markdownLanguage, codeLanguages: languages })],
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div className={cn("grid min-h-[46vh] overflow-hidden rounded-lg border bg-background lg:grid-cols-2", className)}>
|
|
<section className="flex min-h-0 flex-col border-b lg:border-r lg:border-b-0">
|
|
<div className="flex h-9 shrink-0 items-center border-b bg-muted/40 px-3 text-xs font-medium text-muted-foreground">
|
|
Markdown 编辑
|
|
</div>
|
|
<CodeMirror
|
|
value={value}
|
|
onChange={onChange}
|
|
theme={resolvedTheme === "dark" ? darkTheme : lightTheme}
|
|
extensions={extensions}
|
|
basicSetup={{
|
|
foldGutter: true,
|
|
highlightActiveLine: true,
|
|
highlightActiveLineGutter: false,
|
|
lineNumbers: true,
|
|
}}
|
|
className="min-h-[42vh] flex-1 overflow-auto font-mono text-sm [&_.cm-editor]:min-h-[42vh] [&_.cm-focused]:outline-none!"
|
|
/>
|
|
</section>
|
|
<section className="flex min-h-0 flex-col bg-muted/10">
|
|
<div className="flex h-9 shrink-0 items-center border-b bg-muted/40 px-3 text-xs font-medium text-muted-foreground">
|
|
实时渲染
|
|
</div>
|
|
<div className="min-h-[42vh] flex-1 overflow-auto p-4">
|
|
<MarkdownContent
|
|
content={value || "*暂无正文*"}
|
|
isLoading={false}
|
|
remarkPlugins={reasoningPlugins.remarkPlugins}
|
|
rehypePlugins={reasoningPlugins.rehypePlugins}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|