feat(code-editor): add loading state management to improve editor initialization

This commit is contained in:
cfngc4594 2025-02-26 15:57:49 +08:00
parent 0fa89804bc
commit e00741e48c

View File

@ -1,26 +1,30 @@
import { create } from "zustand"; import { create } from "zustand";
import * as monaco from "monaco-editor"; import * as monaco from "monaco-editor";
import { DEFAULT_EDITOR_LANGUAGE } from "@/config/editor/language";
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 { DEFAULT_EDITOR_LANGUAGE } from "@/config/editor/language";
interface CodeEditorState { interface CodeEditorState {
editor: monaco.editor.IStandaloneCodeEditor | null; editor: monaco.editor.IStandaloneCodeEditor | null;
language: SupportedLanguage; language: SupportedLanguage;
languageClient: MonacoLanguageClient | null; languageClient: MonacoLanguageClient | null;
loading: boolean;
setEditor: (editor: monaco.editor.IStandaloneCodeEditor | null) => void; setEditor: (editor: monaco.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;
} }
export const useCodeEditorState = create<CodeEditorState>((set) => ({ export const useCodeEditorState = create<CodeEditorState>((set) => ({
editor: null, editor: null,
language: DEFAULT_EDITOR_LANGUAGE, language: DEFAULT_EDITOR_LANGUAGE,
languageClient: null, languageClient: null,
loading: true,
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 }),
})); }));
export const useCodeEditorOption = create<monaco.editor.IEditorConstructionOptions>((set) => ({ export const useCodeEditorOption = create<monaco.editor.IEditorConstructionOptions>((set) => ({
@ -29,3 +33,9 @@ export const useCodeEditorOption = create<monaco.editor.IEditorConstructionOptio
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();