refactor(code-editor-store): rename and add hydration state, update storage handling

This commit is contained in:
cfngc4594 2025-03-03 14:18:32 +08:00
parent 8bf109679d
commit 64655d8118

View File

@ -1,66 +1,58 @@
import { create } from "zustand"; import { create } from "zustand";
import { type editor } from "monaco-editor"; import { type editor } from "monaco-editor";
import { persist } from "zustand/middleware";
import { JudgeResult } from "@/config/judge"; import { JudgeResult } from "@/config/judge";
import { CODE_EDITOR_OPTIONS } from "@/constants/option"; import { CODE_EDITOR_OPTIONS } from "@/constants/option";
import { SupportedLanguage } from "@/constants/language"; import { SupportedLanguage } from "@/constants/language";
import { MonacoLanguageClient } from "monaco-languageclient"; import { MonacoLanguageClient } from "monaco-languageclient";
import { persist, createJSONStorage } from "zustand/middleware";
import { DEFAULT_EDITOR_LANGUAGE } from "@/config/editor/language"; import { DEFAULT_EDITOR_LANGUAGE } from "@/config/editor/language";
interface CodeEditorState { interface CodeEditorState {
editor: editor.IStandaloneCodeEditor | null; editor: editor.IStandaloneCodeEditor | null;
language: SupportedLanguage; language: SupportedLanguage;
languageClient: MonacoLanguageClient | null; languageClient: MonacoLanguageClient | null;
loading: boolean; hydrated: boolean;
result: JudgeResult | null; result: JudgeResult | null;
setEditor: (editor: editor.IStandaloneCodeEditor | null) => void; setEditor: (editor: editor.IStandaloneCodeEditor | null) => void;
setLanguage: (language: SupportedLanguage) => void; setLanguage: (language: SupportedLanguage) => void;
setLanguageClient: (languageClient: MonacoLanguageClient | null) => void; setLanguageClient: (languageClient: MonacoLanguageClient | null) => void;
setLoading: (loading: boolean) => void; setHydrated: (value: boolean) => void;
setResult: (result: JudgeResult) => void; setResult: (result: JudgeResult) => void;
} }
export const useCodeEditorState = create<CodeEditorState>()( export const useCodeEditorStore = create<CodeEditorState>()(
persist( persist(
(set) => ({ (set) => ({
editor: null, editor: null,
language: DEFAULT_EDITOR_LANGUAGE, language: DEFAULT_EDITOR_LANGUAGE,
languageClient: null, languageClient: null,
loading: true, hydrated: false,
result: null, result: null,
setEditor: (editor) => set({ editor }), setEditor: (editor) => set({ editor }),
setLanguage: (language) => set({ language }), setLanguage: (language) => set({ language }),
setLanguageClient: (languageClient) => set({ languageClient }), setLanguageClient: (languageClient) => set({ languageClient }),
setLoading: (loading) => set({ loading }), setHydrated: (value) => set({ hydrated: value }),
setResult: (result) => set({ result }), setResult: (result) => set({ result }),
}), }),
{ {
name: "code-editor-language", name: "code-editor-language",
storage: createJSONStorage(() => { partialize: (state) => ({
if (typeof window !== "undefined") { language: state.language,
return localStorage;
} else {
return {
getItem: () => null,
setItem: () => { },
removeItem: () => { },
};
}
}), }),
partialize: (state) => ({ language: state.language }), onRehydrateStorage: () => (state, error) => {
if (error) {
console.error("hydrate error", error);
} else if (state) {
state.setHydrated(true);
}
},
} }
) )
); );
export const useCodeEditorOption = create<editor.IEditorConstructionOptions>((set) => ({ export const useCodeEditorOptionStore = create<editor.IEditorConstructionOptions>((set) => ({
fontSize: CODE_EDITOR_OPTIONS.fontSize, fontSize: CODE_EDITOR_OPTIONS.fontSize,
lineHeight: CODE_EDITOR_OPTIONS.lineHeight, lineHeight: CODE_EDITOR_OPTIONS.lineHeight,
setFontSize: (fontSize: number) => set({ fontSize }), setFontSize: (fontSize: number) => set({ fontSize }),
setLineHeight: (lineHeight: number) => set({ lineHeight }), setLineHeight: (lineHeight: number) => set({ lineHeight }),
})); }));
async function initializeEditor() {
useCodeEditorState.getState().setLoading(false);
}
initializeEditor();