81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Terminal } from "@xterm/xterm";
|
|
import { FitAddon } from "@xterm/addon-fit";
|
|
import "./xterm.css";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { Socket } from "socket.io-client";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export default function EditorTerminal({
|
|
socket,
|
|
term,
|
|
setTerm,
|
|
}: {
|
|
socket: Socket;
|
|
term: Terminal | null;
|
|
setTerm: (term: Terminal) => void;
|
|
}) {
|
|
const terminalRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (!terminalRef.current) return;
|
|
|
|
const terminal = new Terminal({
|
|
cursorBlink: true,
|
|
theme: {
|
|
background: "#262626",
|
|
},
|
|
fontFamily: "var(--font-geist-mono)",
|
|
fontSize: 14,
|
|
});
|
|
|
|
setTerm(terminal);
|
|
|
|
return () => {
|
|
if (terminal) terminal.dispose();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!term) return;
|
|
|
|
// const onTerminalResponse = (response: { data: string }) => {
|
|
// const res = response.data;
|
|
// term.write(res);
|
|
// };
|
|
|
|
if (terminalRef.current) {
|
|
// socket.on("terminalResponse", onTerminalResponse);
|
|
|
|
const fitAddon = new FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
term.open(terminalRef.current);
|
|
fitAddon.fit();
|
|
setTerm(term);
|
|
}
|
|
const disposable = term.onData((data) => {
|
|
console.log("sending data", data);
|
|
socket.emit("terminalData", "testId", data);
|
|
});
|
|
|
|
// socket.emit("terminalData", "\n");
|
|
|
|
return () => {
|
|
disposable.dispose();
|
|
};
|
|
}, [term, terminalRef.current]);
|
|
|
|
return (
|
|
<div ref={terminalRef} className="w-full h-full text-left">
|
|
{term === null ? (
|
|
<div className="flex items-center text-muted-foreground p-2">
|
|
<Loader2 className="animate-spin mr-2 h-4 w-4" />
|
|
<span>Connecting to terminal...</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|