feat: fallback to textarea when loading

This commit is contained in:
Henry Li
2026-01-28 10:13:17 +08:00
parent 6b3e101b66
commit 86c8f1a25e

View File

@@ -1,19 +1,22 @@
"use client"; "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 { languages } from "@codemirror/language-data";
import { basicLightInit } from "@uiw/codemirror-theme-basic"; import { basicLightInit } from "@uiw/codemirror-theme-basic";
import { monokaiInit } from "@uiw/codemirror-theme-monokai"; import { monokaiInit } from "@uiw/codemirror-theme-monokai";
import { javascript, javascriptLanguage } from "@codemirror/lang-javascript"; import CodeMirror from "@uiw/react-codemirror";
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 { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { useMemo } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useMemo } from "react";
import { Textarea } from "../ui/textarea";
import { useThread } from "./messages/context";
const customDarkTheme = monokaiInit({ const customDarkTheme = monokaiInit({
settings: { settings: {
background: "transparent", background: "transparent",
@@ -48,6 +51,9 @@ export function CodeEditor({
autoFocus?: boolean; autoFocus?: boolean;
settings?: any; settings?: any;
}) { }) {
const {
thread: { isLoading },
} = useThread();
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
const extensions = useMemo(() => { const extensions = useMemo(() => {
@@ -71,24 +77,36 @@ export function CodeEditor({
className, className,
)} )}
> >
<CodeMirror {isLoading ? (
readOnly={readonly ?? disabled} <Textarea
placeholder={placeholder} className={cn(
className={cn( "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
"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!",
"px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!", "border-none",
)} )}
theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme} readOnly
extensions={extensions} value={value}
basicSetup={{ />
foldGutter: settings?.foldGutter ?? false, ) : (
highlightActiveLine: false, <CodeMirror
highlightActiveLineGutter: false, readOnly={readonly ?? disabled}
lineNumbers: settings?.lineNumbers ?? false, placeholder={placeholder}
}} className={cn(
autoFocus={autoFocus} "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
value={value} "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> </div>
); );
} }