start terminal ui + logic
This commit is contained in:
Ishaan Dey
@ -25,6 +25,12 @@ import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"
|
||||
import { io } from "socket.io-client"
|
||||
import { processFileType } from "@/lib/utils"
|
||||
import { toast } from "sonner"
|
||||
import EditorTerminal from "./terminal"
|
||||
|
||||
import { Terminal } from "@xterm/xterm"
|
||||
import { FitAddon } from "@xterm/addon-fit"
|
||||
|
||||
import { decodeTerminalResponse } from "@/lib/utils"
|
||||
|
||||
export default function CodeEditor({
|
||||
userId,
|
||||
@ -33,6 +39,8 @@ export default function CodeEditor({
|
||||
userId: string
|
||||
sandboxId: string
|
||||
}) {
|
||||
const clerk = useClerk()
|
||||
|
||||
const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
|
||||
|
||||
const handleEditorMount: OnMount = (editor, monaco) => {
|
||||
@ -73,7 +81,7 @@ export default function CodeEditor({
|
||||
}
|
||||
}, [tabs, activeId])
|
||||
|
||||
// WS event handlers ------------
|
||||
// WS event handlers:
|
||||
|
||||
// connection/disconnection effect
|
||||
useEffect(() => {
|
||||
@ -86,21 +94,28 @@ export default function CodeEditor({
|
||||
|
||||
// event listener effect
|
||||
useEffect(() => {
|
||||
function onLoadedEvent(files: (TFolder | TFile)[]) {
|
||||
const onConnect = () => {}
|
||||
|
||||
const onDisconnect = () => {}
|
||||
|
||||
const onLoadedEvent = (files: (TFolder | TFile)[]) => {
|
||||
console.log("onLoadedEvent")
|
||||
setFiles(files)
|
||||
}
|
||||
|
||||
socket.on("connect", onConnect)
|
||||
|
||||
socket.on("disconnect", onDisconnect)
|
||||
socket.on("loaded", onLoadedEvent)
|
||||
|
||||
return () => {
|
||||
socket.off("connect", onConnect)
|
||||
socket.off("disconnect", onDisconnect)
|
||||
socket.off("loaded", onLoadedEvent)
|
||||
}
|
||||
}, [])
|
||||
|
||||
// ------------
|
||||
|
||||
const clerk = useClerk()
|
||||
// Helper functions:
|
||||
|
||||
const selectFile = (tab: TTab) => {
|
||||
setTabs((prev) => {
|
||||
@ -274,7 +289,9 @@ export default function CodeEditor({
|
||||
<Tab selected>Node</Tab>
|
||||
<Tab>Console</Tab>
|
||||
</div>
|
||||
<div className="w-full grow rounded-md bg-secondary"></div>
|
||||
<div className="w-full relative grow rounded-md bg-secondary">
|
||||
{socket ? <EditorTerminal socket={socket} /> : null}
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
|
||||
@ -24,60 +24,67 @@ export default function Sidebar({
|
||||
const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
|
||||
|
||||
return (
|
||||
<div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
|
||||
<div className="flex w-full items-center justify-between h-8 mb-1 ">
|
||||
<div className="text-muted-foreground">Explorer</div>
|
||||
<div className="flex space-x-1">
|
||||
<button
|
||||
onClick={() => setCreatingNew("file")}
|
||||
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<FilePlus className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCreatingNew("folder")}
|
||||
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
</button>
|
||||
{/* Todo: Implement file searching */}
|
||||
{/* <button className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
<div className="h-full w-56 select-none flex flex-col text-sm items-start justify-between p-2">
|
||||
<div className="w-full flex flex-col items-start">
|
||||
<div className="flex w-full items-center justify-between h-8 mb-1 ">
|
||||
<div className="text-muted-foreground">Explorer</div>
|
||||
<div className="flex space-x-1">
|
||||
<button
|
||||
onClick={() => setCreatingNew("file")}
|
||||
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<FilePlus className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setCreatingNew("folder")}
|
||||
className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
</button>
|
||||
{/* Todo: Implement file searching */}
|
||||
{/* <button className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
|
||||
<Search className="w-4 h-4" />
|
||||
</button> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-1 flex flex-col">
|
||||
{files.length === 0 ? (
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{files.map((child) =>
|
||||
child.type === "file" ? (
|
||||
<SidebarFile
|
||||
key={child.id}
|
||||
data={child}
|
||||
selectFile={selectFile}
|
||||
handleRename={handleRename}
|
||||
/>
|
||||
) : (
|
||||
<SidebarFolder
|
||||
key={child.id}
|
||||
data={child}
|
||||
selectFile={selectFile}
|
||||
handleRename={handleRename}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{creatingNew !== null ? (
|
||||
<New
|
||||
type={creatingNew}
|
||||
stopEditing={() => setCreatingNew(null)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-1 flex flex-col">
|
||||
{files.length === 0 ? (
|
||||
<div className="w-full flex justify-center">
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{files.map((child) =>
|
||||
child.type === "file" ? (
|
||||
<SidebarFile
|
||||
key={child.id}
|
||||
data={child}
|
||||
selectFile={selectFile}
|
||||
handleRename={handleRename}
|
||||
/>
|
||||
) : (
|
||||
<SidebarFolder
|
||||
key={child.id}
|
||||
data={child}
|
||||
selectFile={selectFile}
|
||||
handleRename={handleRename}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
{creatingNew !== null ? (
|
||||
<New
|
||||
type={creatingNew}
|
||||
stopEditing={() => setCreatingNew(null)}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
<div className="flex items-center">
|
||||
{/* <div className="text-muted-foreground">
|
||||
{connected ? "Connected" : "Not connected"}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
79
frontend/components/editor/terminal.tsx
Normal file
79
frontend/components/editor/terminal.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
"use client"
|
||||
|
||||
import { Terminal } from "@xterm/xterm"
|
||||
import { FitAddon } from "@xterm/addon-fit"
|
||||
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { Socket } from "socket.io-client"
|
||||
import { decodeTerminalResponse } from "@/lib/utils"
|
||||
|
||||
export default function EditorTerminal({ socket }: { socket: Socket }) {
|
||||
const terminalRef = useRef(null)
|
||||
const [term, setTerm] = useState<Terminal | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!terminalRef.current) return
|
||||
|
||||
const terminal = new Terminal({
|
||||
cursorBlink: false,
|
||||
})
|
||||
|
||||
setTerm(terminal)
|
||||
|
||||
return () => {
|
||||
if (terminal) terminal.dispose()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!term) return
|
||||
|
||||
const onConnect = () => {
|
||||
console.log("Connected to server", socket.connected)
|
||||
setTimeout(() => {
|
||||
console.log("sending createTerminal")
|
||||
socket.emit("createTerminal", { id: "testId" })
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const onTerminalResponse = (data: Buffer) => {
|
||||
console.log("received data", decodeTerminalResponse(data))
|
||||
term.write(decodeTerminalResponse(data))
|
||||
}
|
||||
|
||||
socket.on("connect", onConnect)
|
||||
|
||||
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", {
|
||||
id: "testId",
|
||||
data,
|
||||
})
|
||||
})
|
||||
|
||||
socket.emit("terminalData", {
|
||||
data: "\n",
|
||||
})
|
||||
|
||||
return () => {
|
||||
socket.off("connect", onConnect)
|
||||
socket.off("terminalResponse", onTerminalResponse)
|
||||
disposable.dispose()
|
||||
}
|
||||
}, [term, terminalRef.current])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div ref={terminalRef} className="w-full h-1/2 text-left"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user