107 lines
2.4 KiB
TypeScript
107 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { FitAddon } from "@xterm/addon-fit"
|
|
import { Terminal } from "@xterm/xterm"
|
|
import "./xterm.css"
|
|
|
|
import { Loader2 } from "lucide-react"
|
|
import { useEffect, useRef } from "react"
|
|
import { Socket } from "socket.io-client"
|
|
|
|
export default function EditorTerminal({
|
|
socket,
|
|
id,
|
|
term,
|
|
setTerm,
|
|
visible,
|
|
}: {
|
|
socket: Socket
|
|
id: string
|
|
term: Terminal | null
|
|
setTerm: (term: Terminal) => void
|
|
visible: boolean
|
|
}) {
|
|
const terminalRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (!terminalRef.current) return
|
|
// console.log("new terminal", id, term ? "reusing" : "creating");
|
|
|
|
const terminal = new Terminal({
|
|
cursorBlink: true,
|
|
theme: {
|
|
background: "#262626",
|
|
},
|
|
fontFamily: "var(--font-geist-mono)",
|
|
fontSize: 14,
|
|
lineHeight: 1.5,
|
|
letterSpacing: 0,
|
|
})
|
|
|
|
setTerm(terminal)
|
|
|
|
return () => {
|
|
if (terminal) terminal.dispose()
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!term) return
|
|
|
|
if (!terminalRef.current) return
|
|
const fitAddon = new FitAddon()
|
|
term.loadAddon(fitAddon)
|
|
term.open(terminalRef.current)
|
|
fitAddon.fit()
|
|
|
|
const disposableOnData = term.onData((data) => {
|
|
socket.emit("terminalData", id, data)
|
|
})
|
|
|
|
const disposableOnResize = term.onResize((dimensions) => {
|
|
// const terminal_size = {
|
|
// width: dimensions.cols,
|
|
// height: dimensions.rows,
|
|
// };
|
|
fitAddon.fit()
|
|
socket.emit("terminalResize", dimensions)
|
|
})
|
|
|
|
return () => {
|
|
disposableOnData.dispose()
|
|
disposableOnResize.dispose()
|
|
}
|
|
}, [term, terminalRef.current])
|
|
|
|
useEffect(() => {
|
|
if (!term) return
|
|
const handleTerminalResponse = (response: { id: string; data: string }) => {
|
|
if (response.id === id) {
|
|
term.write(response.data)
|
|
}
|
|
}
|
|
socket.on("terminalResponse", handleTerminalResponse)
|
|
|
|
return () => {
|
|
socket.off("terminalResponse", handleTerminalResponse)
|
|
}
|
|
}, [term, id, socket])
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
ref={terminalRef}
|
|
style={{ display: visible ? "block" : "none" }}
|
|
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>
|
|
</>
|
|
)
|
|
}
|