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 editor value in local storage

Browse Source
This commit is contained in:
cfngc4594 2025-03-02 00:05:42 +08:00
parent c52748734f
commit 2ebda52857
1 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,10 @@
"use client";
import {
toSocket,
WebSocketMessageReader,
WebSocketMessageWriter,
} from "vscode-ws-jsonrpc";
import dynamic from "next/dynamic";
import { useTheme } from "next-themes";
import normalizeUrl from "normalize-url";
@ -13,7 +18,6 @@ import { DEFAULT_EDITOR_VALUE } from "@/config/editor/value";
import type { MonacoLanguageClient } from "monaco-languageclient";
import { SUPPORTED_LANGUAGE_SERVERS } from "@/config/lsp/language-server";
import { useCodeEditorOption, useCodeEditorState } from "@/store/useCodeEditor";
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from "vscode-ws-jsonrpc";
const Editor = dynamic(
async () => {
@ -104,7 +108,9 @@ export default function CodeEditor() {
// Cleanup old connection
await cleanupConnection(connectionRef.current);
const serverConfig = SUPPORTED_LANGUAGE_SERVERS.find((s) => s.id === language);
const serverConfig = SUPPORTED_LANGUAGE_SERVERS.find(
(s) => s.id === language
);
if (!serverConfig || signal.aborted) return;
// Create WebSocket connection
@ -122,7 +128,9 @@ export default function CodeEditor() {
};
webSocket.onerror = () => reject(new Error("WebSocket error"));
}),
new Promise((_, reject) => setTimeout(() => reject(new Error("Connection timeout")), 5000)),
new Promise((_, reject) =>
setTimeout(() => reject(new Error("Connection timeout")), 5000)
),
]);
if (signal.aborted) {
@ -132,7 +140,9 @@ export default function CodeEditor() {
// Initialize Language Client
const { MonacoLanguageClient } = await import("monaco-languageclient");
const { ErrorAction, CloseAction } = await import("vscode-languageclient");
const { ErrorAction, CloseAction } = await import(
"vscode-languageclient"
);
const socket = toSocket(webSocket);
const client = new MonacoLanguageClient({
@ -186,12 +196,26 @@ export default function CodeEditor() {
lineHeight,
};
function handleEditorChange(value: string | undefined) {
localStorage.setItem(`code-editor-value-${language}`, value ?? "");
}
const editorValue =
typeof window !== "undefined"
? localStorage.getItem(`code-editor-value-${language}`) ||
DEFAULT_EDITOR_VALUE[language]
: DEFAULT_EDITOR_VALUE[language];
return (
<Editor
defaultLanguage={language}
defaultValue={DEFAULT_EDITOR_VALUE[language]}
value={editorValue}
path={DEFAULT_EDITOR_PATH[language]}
theme={resolvedTheme === "light" ? "github-light-default" : "github-dark-default"}
theme={
resolvedTheme === "light"
? "github-light-default"
: "github-dark-default"
}
className="h-full"
options={mergeOptions}
beforeMount={(monaco) => {
@ -200,6 +224,7 @@ export default function CodeEditor() {
onMount={(editor) => {
setEditor(editor);
}}
onChange={handleEditorChange}
// onValidate={(markers) => {
// markers.forEach((marker) => {
// console.log(marker.severity);