mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-05 23:10:22 +08:00
feat: fallback to textarea when loading
This commit is contained in:
@@ -1,19 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { css } from "@codemirror/lang-css";
|
||||
import { html } from "@codemirror/lang-html";
|
||||
import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
import { json } from "@codemirror/lang-json";
|
||||
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
|
||||
import { python } from "@codemirror/lang-python";
|
||||
import { languages } from "@codemirror/language-data";
|
||||
import { basicLightInit } from "@uiw/codemirror-theme-basic";
|
||||
import { monokaiInit } from "@uiw/codemirror-theme-monokai";
|
||||
import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
import { json } from "@codemirror/lang-json";
|
||||
import { html } from "@codemirror/lang-html";
|
||||
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
|
||||
import { python } from "@codemirror/lang-python";
|
||||
import { css } from "@codemirror/lang-css";
|
||||
import CodeMirror from "@uiw/react-codemirror";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useMemo } from "react";
|
||||
|
||||
import { Textarea } from "../ui/textarea";
|
||||
import { useThread } from "./messages/context";
|
||||
const customDarkTheme = monokaiInit({
|
||||
settings: {
|
||||
background: "transparent",
|
||||
@@ -48,6 +51,9 @@ export function CodeEditor({
|
||||
autoFocus?: boolean;
|
||||
settings?: any;
|
||||
}) {
|
||||
const {
|
||||
thread: { isLoading },
|
||||
} = useThread();
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const extensions = useMemo(() => {
|
||||
@@ -71,24 +77,36 @@ export function CodeEditor({
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<CodeMirror
|
||||
readOnly={readonly ?? disabled}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
|
||||
"px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
|
||||
)}
|
||||
theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme}
|
||||
extensions={extensions}
|
||||
basicSetup={{
|
||||
foldGutter: settings?.foldGutter ?? false,
|
||||
highlightActiveLine: false,
|
||||
highlightActiveLineGutter: false,
|
||||
lineNumbers: settings?.lineNumbers ?? false,
|
||||
}}
|
||||
autoFocus={autoFocus}
|
||||
value={value}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<Textarea
|
||||
className={cn(
|
||||
"h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
|
||||
"resize-none p-4! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
|
||||
"border-none",
|
||||
)}
|
||||
readOnly
|
||||
value={value}
|
||||
/>
|
||||
) : (
|
||||
<CodeMirror
|
||||
readOnly={readonly ?? disabled}
|
||||
placeholder={placeholder}
|
||||
className={cn(
|
||||
"h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
|
||||
"px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
|
||||
)}
|
||||
theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme}
|
||||
extensions={extensions}
|
||||
basicSetup={{
|
||||
foldGutter: settings?.foldGutter ?? false,
|
||||
highlightActiveLine: false,
|
||||
highlightActiveLineGutter: false,
|
||||
lineNumbers: settings?.lineNumbers ?? false,
|
||||
}}
|
||||
autoFocus={autoFocus}
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user