feat(code-editor): refactor to support dynamic language and LSP configuration

This commit is contained in:
cfngc4594 2025-03-16 16:36:02 +08:00
parent 332e019e70
commit f3b9ae64f4

View File

@ -4,15 +4,14 @@ import dynamic from "next/dynamic";
import { highlighter } from "@/lib/shiki"; import { highlighter } from "@/lib/shiki";
import type { editor } from "monaco-editor"; import type { editor } from "monaco-editor";
import { Loading } from "@/components/loading"; import { Loading } from "@/components/loading";
import { EditorLanguage } from "@prisma/client";
import { shikiToMonaco } from "@shikijs/monaco"; import { shikiToMonaco } from "@shikijs/monaco";
import type { Monaco } from "@monaco-editor/react"; import type { Monaco } from "@monaco-editor/react";
import { useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useRef } from "react";
import { useMonacoTheme } from "@/hooks/use-monaco-theme"; import { useMonacoTheme } from "@/hooks/use-monaco-theme";
import LanguageServerConfig from "@/config/language-server";
import { connectToLanguageServer } from "@/lib/language-server"; import { connectToLanguageServer } from "@/lib/language-server";
import { useCodeEditorStore } from "@/store/useCodeEditorStore"; import { useCodeEditorStore } from "@/store/useCodeEditorStore";
import type { MonacoLanguageClient } from "monaco-languageclient"; import type { MonacoLanguageClient } from "monaco-languageclient";
import { EditorLanguage, EditorLanguageConfig, LanguageServerConfig } from "@prisma/client";
// Dynamically import Monaco Editor with SSR disabled // Dynamically import Monaco Editor with SSR disabled
const Editor = dynamic( const Editor = dynamic(
@ -32,11 +31,15 @@ const Editor = dynamic(
interface CodeEditorProps { interface CodeEditorProps {
problemId: string; problemId: string;
templates: { language: EditorLanguage; template: string }[]; templates: { language: EditorLanguage; template: string }[];
editorLanguageConfigs: EditorLanguageConfig[];
languageServerConfigs: LanguageServerConfig[];
} }
export default function CodeEditor({ export default function CodeEditor({
problemId, problemId,
templates, templates,
editorLanguageConfigs,
languageServerConfigs,
}: CodeEditorProps) { }: CodeEditorProps) {
const { const {
hydrated, hydrated,
@ -74,24 +77,26 @@ export default function CodeEditor({
const connectLSP = useCallback(async () => { const connectLSP = useCallback(async () => {
if (!(isLspEnabled && language && editorRef.current)) return; if (!(isLspEnabled && language && editorRef.current)) return;
const lspConfig = LanguageServerConfig[language];
if (!lspConfig) return;
// If there's an existing language client, stop it first // If there's an existing language client, stop it first
if (monacoLanguageClientRef.current) { if (monacoLanguageClientRef.current) {
monacoLanguageClientRef.current.stop(); monacoLanguageClientRef.current.stop();
monacoLanguageClientRef.current = null; monacoLanguageClientRef.current = null;
} }
const selectedEditorLanguageConfig = editorLanguageConfigs.find(
(config) => config.language === language
);
const selectedLanguageServerConfig = languageServerConfigs.find(
(config) => config.language === language
);
if (!selectedEditorLanguageConfig || !selectedLanguageServerConfig) return;
// Create a new language client // Create a new language client
try { try {
const monacoLanguageClient = await connectToLanguageServer( const monacoLanguageClient = await connectToLanguageServer(
lspConfig.protocol, selectedEditorLanguageConfig,
lspConfig.hostname, selectedLanguageServerConfig,
lspConfig.port,
lspConfig.path,
lspConfig.lang
); );
monacoLanguageClientRef.current = monacoLanguageClient; monacoLanguageClientRef.current = monacoLanguageClient;
} catch (error) { } catch (error) {