CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-19 07:56:34 +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"; "use client";
import {
toSocket,
WebSocketMessageReader,
WebSocketMessageWriter,
} from "vscode-ws-jsonrpc";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import normalizeUrl from "normalize-url"; import normalizeUrl from "normalize-url";
@ -13,7 +18,6 @@ import { DEFAULT_EDITOR_VALUE } from "@/config/editor/value";
import type { MonacoLanguageClient } from "monaco-languageclient"; import type { MonacoLanguageClient } from "monaco-languageclient";
import { SUPPORTED_LANGUAGE_SERVERS } from "@/config/lsp/language-server"; import { SUPPORTED_LANGUAGE_SERVERS } from "@/config/lsp/language-server";
import { useCodeEditorOption, useCodeEditorState } from "@/store/useCodeEditor"; import { useCodeEditorOption, useCodeEditorState } from "@/store/useCodeEditor";
import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from "vscode-ws-jsonrpc";
const Editor = dynamic( const Editor = dynamic(
async () => { async () => {
@ -104,7 +108,9 @@ export default function CodeEditor() {
// Cleanup old connection // Cleanup old connection
await cleanupConnection(connectionRef.current); 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; if (!serverConfig || signal.aborted) return;
// Create WebSocket connection // Create WebSocket connection
@ -122,7 +128,9 @@ export default function CodeEditor() {
}; };
webSocket.onerror = () => reject(new Error("WebSocket error")); 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) { if (signal.aborted) {
@ -132,7 +140,9 @@ export default function CodeEditor() {
// Initialize Language Client // Initialize Language Client
const { MonacoLanguageClient } = await import("monaco-languageclient"); 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 socket = toSocket(webSocket);
const client = new MonacoLanguageClient({ const client = new MonacoLanguageClient({
@ -186,12 +196,26 @@ export default function CodeEditor() {
lineHeight, 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 ( return (
<Editor <Editor
defaultLanguage={language} defaultLanguage={language}
defaultValue={DEFAULT_EDITOR_VALUE[language]} value={editorValue}
path={DEFAULT_EDITOR_PATH[language]} 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" className="h-full"
options={mergeOptions} options={mergeOptions}
beforeMount={(monaco) => { beforeMount={(monaco) => {
@ -200,6 +224,7 @@ export default function CodeEditor() {
onMount={(editor) => { onMount={(editor) => {
setEditor(editor); setEditor(editor);
}} }}
onChange={handleEditorChange}
// onValidate={(markers) => { // onValidate={(markers) => {
// markers.forEach((marker) => { // markers.forEach((marker) => {
// console.log(marker.severity); // console.log(marker.severity);