feat(editor): add editor state management to CodeEditorStore

This commit is contained in:
ngc2207 2025-01-01 13:38:36 +08:00
parent bc39266f2c
commit fe0c27da0a
2 changed files with 13 additions and 1 deletions

View File

@ -1,9 +1,10 @@
import { create } from "zustand"; import { create } from "zustand";
import { editor } from "monaco-editor";
import { CodeEditorState } from "@/types"; import { CodeEditorState } from "@/types";
import { DEFAULT_THEME } from "@/constants/editor/themes"; import { DEFAULT_THEME } from "@/constants/editor/themes";
import { DEFAULT_FONT_SIZE } from "@/constants/editor/options";
import { DEFAULT_LANGUAGE } from "@/constants/editor/languages"; import { DEFAULT_LANGUAGE } from "@/constants/editor/languages";
import { persist, createJSONStorage } from "zustand/middleware"; import { persist, createJSONStorage } from "zustand/middleware";
import { DEFAULT_FONT_SIZE } from "@/constants/editor/options";
export const useCodeEditorStore = create<CodeEditorState>()( export const useCodeEditorStore = create<CodeEditorState>()(
persist( persist(
@ -11,14 +12,21 @@ export const useCodeEditorStore = create<CodeEditorState>()(
language: DEFAULT_LANGUAGE, language: DEFAULT_LANGUAGE,
theme: DEFAULT_THEME, theme: DEFAULT_THEME,
fontSize: DEFAULT_FONT_SIZE, fontSize: DEFAULT_FONT_SIZE,
editor: null,
setLanguage: (language: string) => set({ language }), setLanguage: (language: string) => set({ language }),
setTheme: (theme: string) => set({ theme }), setTheme: (theme: string) => set({ theme }),
setFontSize: (fontSize: number) => set({ fontSize }), setFontSize: (fontSize: number) => set({ fontSize }),
setEditor: (editor: editor.IStandaloneCodeEditor) => set({ editor }),
}), }),
{ {
name: "code-editor-storage", name: "code-editor-storage",
storage: createJSONStorage(() => localStorage), storage: createJSONStorage(() => localStorage),
partialize: (state) => ({
language: state.language,
theme: state.theme,
fontSize: state.fontSize,
}),
} }
) )
); );

View File

@ -1,9 +1,13 @@
import { editor } from "monaco-editor";
export interface CodeEditorState { export interface CodeEditorState {
language: string; language: string;
theme: string; theme: string;
fontSize: number; fontSize: number;
editor: editor.IStandaloneCodeEditor | null;
setLanguage: (language: string) => void; setLanguage: (language: string) => void;
setTheme: (theme: string) => void; setTheme: (theme: string) => void;
setFontSize: (fontSize: number) => void; setFontSize: (fontSize: number) => void;
setEditor: (editor: editor.IStandaloneCodeEditor) => void;
} }