2025-01-04 18:47:14 +00:00
|
|
|
"use client";
|
|
|
|
|
2025-01-05 00:03:46 +00:00
|
|
|
import * as monaco from "monaco-editor";
|
2025-01-04 19:18:15 +00:00
|
|
|
import { useEffect, useRef, useState } from "react";
|
2025-01-04 19:47:37 +00:00
|
|
|
import { Editor, loader } from "@monaco-editor/react";
|
|
|
|
import { MonacoLanguageClient } from "monaco-languageclient";
|
2025-01-04 18:47:14 +00:00
|
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
|
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
|
|
|
import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
|
2025-01-05 00:26:13 +00:00
|
|
|
import { connectToLanguageServer, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
|
2025-01-04 18:47:14 +00:00
|
|
|
|
|
|
|
const files: {
|
|
|
|
[key: string]: { name: string; language: string; value: string };
|
|
|
|
} = {
|
|
|
|
c: {
|
|
|
|
name: "main.c",
|
|
|
|
language: "c",
|
|
|
|
value: `#include <stdio.h>
|
|
|
|
int main() {
|
|
|
|
printf("Hello, World!");
|
|
|
|
return 0;
|
|
|
|
}`,
|
|
|
|
},
|
|
|
|
cpp: {
|
|
|
|
name: "main.cpp",
|
|
|
|
language: "cpp",
|
|
|
|
value: `#include <iostream>
|
|
|
|
int main() {
|
|
|
|
std::cout << "Hello, World!";
|
|
|
|
return 0;
|
|
|
|
}`,
|
|
|
|
},
|
|
|
|
java: {
|
|
|
|
name: "Main.java",
|
|
|
|
language: "java",
|
|
|
|
value: `public class Main {
|
|
|
|
public static void main(String[] args) {
|
|
|
|
System.out.println("Hello, World!");
|
|
|
|
}
|
|
|
|
}`,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2025-01-05 00:03:46 +00:00
|
|
|
loader.config({ monaco });
|
2025-01-04 19:47:37 +00:00
|
|
|
|
2025-01-04 18:47:14 +00:00
|
|
|
export default function PlaygroundPage() {
|
2025-01-04 19:47:37 +00:00
|
|
|
const [language, setLanguage] = useState<string>("c");
|
2025-01-04 18:47:14 +00:00
|
|
|
const file = files[language];
|
2025-01-05 00:03:46 +00:00
|
|
|
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
|
2025-01-04 19:47:37 +00:00
|
|
|
const webSocketRef = useRef<WebSocket | null>(null);
|
|
|
|
const languageClientRef = useRef<MonacoLanguageClient | null>(null);
|
2025-01-04 18:47:14 +00:00
|
|
|
|
2025-01-04 19:18:15 +00:00
|
|
|
useEffect(() => {
|
2025-01-04 20:09:52 +00:00
|
|
|
const handleLanguageChange = async () => {
|
|
|
|
if (editorRef.current) {
|
|
|
|
const model = editorRef.current.getModel();
|
|
|
|
if (model) {
|
|
|
|
const lineCount = model.getLineCount();
|
|
|
|
const lastLineLength = model.getLineLength(lineCount);
|
|
|
|
editorRef.current.setPosition({
|
|
|
|
lineNumber: lineCount,
|
|
|
|
column: lastLineLength + 1,
|
|
|
|
});
|
|
|
|
editorRef.current.focus();
|
2025-01-05 00:26:13 +00:00
|
|
|
if (
|
|
|
|
languageClientRef.current &&
|
|
|
|
language in LSP_SUPPORTED_LANGUAGES
|
|
|
|
) {
|
2025-01-04 20:09:52 +00:00
|
|
|
await languageClientRef.current.stop();
|
|
|
|
languageClientRef.current = null;
|
|
|
|
}
|
|
|
|
if (
|
|
|
|
webSocketRef.current &&
|
|
|
|
webSocketRef.current.readyState !== WebSocket.CLOSED &&
|
2025-01-05 00:26:13 +00:00
|
|
|
webSocketRef.current.readyState !== WebSocket.CLOSING &&
|
|
|
|
language in LSP_SUPPORTED_LANGUAGES
|
2025-01-04 20:09:52 +00:00
|
|
|
) {
|
|
|
|
webSocketRef.current.close();
|
|
|
|
webSocketRef.current = null;
|
|
|
|
}
|
2025-01-05 00:26:13 +00:00
|
|
|
if(language in LSP_SUPPORTED_LANGUAGES){
|
|
|
|
try {
|
|
|
|
const languageClient = await connectToLanguageServer(
|
|
|
|
language,
|
|
|
|
webSocketRef
|
|
|
|
);
|
|
|
|
languageClientRef.current = languageClient;
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Failed to connect to language server:", error);
|
|
|
|
}
|
2025-01-04 19:47:37 +00:00
|
|
|
}
|
2025-01-04 20:09:52 +00:00
|
|
|
}
|
2025-01-04 19:18:15 +00:00
|
|
|
}
|
2025-01-04 20:09:52 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
handleLanguageChange();
|
2025-01-04 19:18:15 +00:00
|
|
|
}, [language]);
|
|
|
|
|
2025-01-04 18:47:14 +00:00
|
|
|
return (
|
|
|
|
<div className="h-full flex flex-col">
|
|
|
|
<Tabs defaultValue={language as string}>
|
|
|
|
<ScrollArea>
|
|
|
|
<TabsList className="m-3">
|
|
|
|
<TabsTrigger
|
|
|
|
value="c"
|
|
|
|
onClick={() => setLanguage("c")}
|
|
|
|
disabled={language === "c"}
|
|
|
|
>
|
|
|
|
<COriginal
|
|
|
|
className="-ms-0.5 me-1.5"
|
|
|
|
size={16}
|
|
|
|
strokeWidth={2}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
C
|
|
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger
|
|
|
|
value="cpp"
|
|
|
|
className="group"
|
|
|
|
onClick={() => setLanguage("cpp")}
|
|
|
|
disabled={language === "cpp"}
|
|
|
|
>
|
|
|
|
<CplusplusOriginal
|
|
|
|
className="-ms-0.5 me-1.5"
|
|
|
|
size={16}
|
|
|
|
strokeWidth={2}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
C++
|
|
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger
|
|
|
|
value="java"
|
|
|
|
className="group"
|
|
|
|
onClick={() => setLanguage("java")}
|
|
|
|
disabled={language === "java"}
|
|
|
|
>
|
|
|
|
<JavaOriginal
|
|
|
|
className="-ms-0.5 me-1.5"
|
|
|
|
size={16}
|
|
|
|
strokeWidth={2}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
Java
|
|
|
|
</TabsTrigger>
|
|
|
|
</TabsList>
|
|
|
|
<ScrollBar orientation="horizontal" />
|
|
|
|
</ScrollArea>
|
|
|
|
</Tabs>
|
|
|
|
<Editor
|
|
|
|
theme="vs-dark"
|
|
|
|
path={file.name}
|
|
|
|
defaultLanguage={file.language}
|
|
|
|
defaultValue={file.value}
|
|
|
|
options={{ automaticLayout: true }}
|
2025-01-04 19:05:19 +00:00
|
|
|
onMount={(editor) => {
|
|
|
|
editorRef.current = editor;
|
2025-01-04 19:28:52 +00:00
|
|
|
if (editorRef.current) {
|
|
|
|
const model = editorRef.current.getModel();
|
|
|
|
if (model) {
|
|
|
|
const lineCount = model.getLineCount();
|
|
|
|
const lastLineLength = model.getLineLength(lineCount);
|
|
|
|
editorRef.current.setPosition({
|
|
|
|
lineNumber: lineCount,
|
|
|
|
column: lastLineLength + 1,
|
|
|
|
});
|
|
|
|
editorRef.current.focus();
|
2025-01-04 20:09:52 +00:00
|
|
|
connectToLanguageServer(language, webSocketRef)
|
|
|
|
.then((languageClient) => {
|
2025-01-04 19:47:37 +00:00
|
|
|
languageClientRef.current = languageClient;
|
2025-01-04 20:09:52 +00:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error("Failed to connect to language server:", error);
|
|
|
|
});
|
2025-01-04 19:28:52 +00:00
|
|
|
}
|
2025-01-04 19:05:19 +00:00
|
|
|
}
|
|
|
|
}}
|
2025-01-04 18:47:14 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|