feat: fallback to textarea when loading

This commit is contained in:
Henry Li
2026-01-28 10:13:17 +08:00
parent 90782f29a2
commit dab4093103

View File

@@ -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>
);
}