CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 23:42:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(code-editor): persist code changes and apply problem templates

Browse Source
This commit is contained in:
cfngc4594 2025-03-09 10:48:03 +08:00
parent 5925ea8192
commit 6297419aad
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/code-editor.tsx
View File

@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
import { Skeleton } from "./ui/skeleton"; import { Skeleton } from "./ui/skeleton";
import { highlighter } from "@/lib/shiki"; import { highlighter } from "@/lib/shiki";
import type { editor } from "monaco-editor"; import type { editor } from "monaco-editor";
import { EditorLanguage } from "@prisma/client";
import { shikiToMonaco } from "@shikijs/monaco"; import { shikiToMonaco } from "@shikijs/monaco";
import type { Monaco } from "@monaco-editor/react"; import type { Monaco } from "@monaco-editor/react";
import { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useRef } from "react";
@ -35,7 +36,15 @@ const Editor = dynamic(
} }
); );
export default function CodeEditor() { interface CodeEditorProps {
problemId: string;
templates: { language: EditorLanguage; template: string }[];
}
export default function CodeEditor({
problemId,
templates,
}: CodeEditorProps) {
const { const {
hydrated, hydrated,
language, language,
@ -44,11 +53,30 @@ export default function CodeEditor() {
editorConfig, editorConfig,
isLspEnabled, isLspEnabled,
setEditor, setEditor,
setValue,
} = useCodeEditorStore(); } = useCodeEditorStore();
const { monacoTheme } = useMonacoTheme(); const { monacoTheme } = useMonacoTheme();
const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null); const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
const monacoLanguageClientRef = useRef<MonacoLanguageClient | null>(null); const monacoLanguageClientRef = useRef<MonacoLanguageClient | null>(null);
const valueStorageKey = `value_${problemId}_${language}`;
useEffect(() => {
const storedValue = localStorage.getItem(valueStorageKey);
if (storedValue !== null) {
setValue(storedValue);
} else {
const template = templates.find((t) => t.language === language);
if (template) setValue(template.template);
}
}, [valueStorageKey, setValue, templates, language])
const handleEditorChange = (value: string | undefined, event: editor.IModelContentChangedEvent) => {
if (value === undefined) return;
setValue(value);
localStorage.setItem(valueStorageKey, value);
}
// Connect to LSP only if enabled // Connect to LSP only if enabled
const connectLSP = useCallback(async () => { const connectLSP = useCallback(async () => {
if (!(isLspEnabled && language && editorRef.current)) return; if (!(isLspEnabled && language && editorRef.current)) return;
@ -119,6 +147,7 @@ export default function CodeEditor() {
value={value} value={value}
beforeMount={handleEditorWillMount} beforeMount={handleEditorWillMount}
onMount={handleEditorDidMount} onMount={handleEditorDidMount}
onChange={handleEditorChange}
options={editorConfig} options={editorConfig}
loading={<CodeEditorLoadingSkeleton />} loading={<CodeEditorLoadingSkeleton />}
className="h-full w-full py-2" className="h-full w-full py-2"