mirror of
				https://github.com/cfngc4594/monaco-editor-lsp-next.git
				synced 2025-11-04 08:33:36 +00:00 
			
		
		
		
	refactor(problem-editor): optimize event handlers with useCallback
This commit is contained in:
		
							parent
							
								
									4842c9302c
								
							
						
					
					
						commit
						cd5f3c88dc
					
				@ -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"
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user