refactor(problem-editor): optimize event handlers with useCallback

This commit is contained in:
cfngc4594 2025-03-23 21:03:53 +08:00
parent 4842c9302c
commit cd5f3c88dc

View File

@ -61,7 +61,7 @@ export function CodeEditor() {
try { try {
const monacoLanguageClient = await connectToLanguageServer( const monacoLanguageClient = await connectToLanguageServer(
currentEditorLanguageConfig, currentEditorLanguageConfig,
currentLanguageServerConfig, currentLanguageServerConfig
); );
monacoLanguageClientRef.current = monacoLanguageClient; monacoLanguageClientRef.current = monacoLanguageClient;
setMonacoLanguageClient(monacoLanguageClient); setMonacoLanguageClient(monacoLanguageClient);
@ -92,33 +92,40 @@ export function CodeEditor() {
}; };
}, [setMonacoLanguageClient]); }, [setMonacoLanguageClient]);
const handleEditorWillMount = useCallback((monaco: Monaco) => {
shikiToMonaco(highlighter, monaco);
}, []);
const handleOnMount = useCallback(
async (editor: editor.IStandaloneCodeEditor) => {
setEditor(editor);
await connectLSP();
},
[setEditor, connectLSP]
);
const handleEditorChange = useCallback(
(value: string | undefined) => {
if (value !== undefined) {
changeValue(value);
}
},
[changeValue]
);
if (!hydrated) { if (!hydrated) {
return <Loading />; return <Loading />;
} }
const handleBeforeMount = (monaco: Monaco) => {
shikiToMonaco(highlighter, monaco);
};
const handleOnMount = async (editor: editor.IStandaloneCodeEditor) => {
setEditor(editor);
await connectLSP();
};
const handleOnChange = (value: string | undefined) => {
if (value === undefined) return;
changeValue(value);
};
return ( return (
<Editor <Editor
language={currentLang} language={currentLang}
theme={currentTheme} theme={currentTheme}
path={currentPath} path={currentPath}
value={currentValue} value={currentValue}
beforeMount={handleBeforeMount} beforeMount={handleEditorWillMount}
onMount={handleOnMount} onMount={handleOnMount}
onChange={handleOnChange} onChange={handleEditorChange}
options={DefaultEditorOptionConfig} options={DefaultEditorOptionConfig}
loading={<Loading />} loading={<Loading />}
className="h-full w-full py-2" className="h-full w-full py-2"