TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Code-Victor/sandbox into feat/light-theme

Browse Source
This commit is contained in:
Hamzat Victor
2024-10-23 11:00:24 +01:00
parent eb4e34cf10 7563df85a7
commit 9546d4ad7b
63 changed files with 1325 additions and 1112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/components/editor/terminals/index.tsx
View File

@ -1,18 +1,17 @@
"use client";
"use client"
import { Button } from "@/components/ui/button";
import Tab from "@/components/ui/tab";
import { Terminal } from "@xterm/xterm";
import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react";
import { toast } from "sonner";
import EditorTerminal from "./terminal";
import { useTerminal } from "@/context/TerminalContext";
import { useEffect } from "react";
import { Button } from "@/components/ui/button"
import Tab from "@/components/ui/tab"
import { useSocket } from "@/context/SocketContext"
import { useTerminal } from "@/context/TerminalContext"
import { Terminal } from "@xterm/xterm"
import { Loader2, Plus, SquareTerminal, TerminalSquare } from "lucide-react"
import { useEffect } from "react"
import { toast } from "sonner"
import EditorTerminal from "./terminal"
export default function Terminals() {
const { socket } = useSocket();
const { socket } = useSocket()
const {
terminals,
@ -22,24 +21,24 @@ export default function Terminals() {
activeTerminalId,
setActiveTerminalId,
creatingTerminal,
} = useTerminal();
} = useTerminal()
const activeTerminal = terminals.find((t) => t.id === activeTerminalId);
const activeTerminal = terminals.find((t) => t.id === activeTerminalId)
// Effect to set the active terminal when a new one is created
useEffect(() => {
if (terminals.length > 0 && !activeTerminalId) {
setActiveTerminalId(terminals[terminals.length - 1].id);
setActiveTerminalId(terminals[terminals.length - 1].id)
}
}, [terminals, activeTerminalId, setActiveTerminalId]);
}, [terminals, activeTerminalId, setActiveTerminalId])
const handleCreateTerminal = () => {
if (terminals.length >= 4) {
toast.error("You reached the maximum # of terminals.");
return;
toast.error("You reached the maximum # of terminals.")
return
}
createNewTerminal();
};
createNewTerminal()
}
return (
<>
@ -85,7 +84,7 @@ export default function Terminals() {
? { ...term, terminal: t }
: term
)
);
)
}}
visible={activeTerminalId === term.id}
/>
@ -98,5 +97,5 @@ export default function Terminals() {
</div>
)}
</>
);
}
)
}

8
frontend/components/editor/terminals/terminal.tsx
View File

@ -1,13 +1,13 @@
"use client"
import { Terminal } from "@xterm/xterm"
import { FitAddon } from "@xterm/addon-fit"
import { Terminal } from "@xterm/xterm"
import "./xterm.css"
import { ElementRef, useEffect, useRef, useState } from "react"
import { Socket } from "socket.io-client"
import { Loader2 } from "lucide-react"
import { debounce } from "@/lib/utils"
import { Loader2 } from "lucide-react"
import { ElementRef, useEffect, useRef } from "react"
import { Socket } from "socket.io-client"
export default function EditorTerminal({
socket,

62
frontend/components/editor/terminals/xterm.css
View File

@ -35,7 +35,7 @@
* Default styles for xterm.js
*/
.xterm {
.xterm {
cursor: text;
position: relative;
user-select: none;
@ -80,7 +80,7 @@
.xterm .composition-view {
/* TODO: Composition position got messed up somewhere */
background: transparent;
color: #FFF;
color: #fff;
display: none;
position: absolute;
white-space: nowrap;
@ -154,12 +154,12 @@
}
.xterm .xterm-accessibility-tree:not(.debug) *::selection {
color: transparent;
color: transparent;
}
.xterm .xterm-accessibility-tree {
user-select: text;
white-space: pre;
user-select: text;
white-space: pre;
}
.xterm .live-region {
@ -176,33 +176,55 @@ white-space: pre;
opacity: 1 !important;
}
.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }
.xterm-underline-1 {
text-decoration: underline;
}
.xterm-underline-2 {
text-decoration: double underline;
}
.xterm-underline-3 {
text-decoration: wavy underline;
}
.xterm-underline-4 {
text-decoration: dotted underline;
}
.xterm-underline-5 {
text-decoration: dashed underline;
}
.xterm-overline {
text-decoration: overline;
}
.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
.xterm-overline.xterm-underline-1 {
text-decoration: overline underline;
}
.xterm-overline.xterm-underline-2 {
text-decoration: overline double underline;
}
.xterm-overline.xterm-underline-3 {
text-decoration: overline wavy underline;
}
.xterm-overline.xterm-underline-4 {
text-decoration: overline dotted underline;
}
.xterm-overline.xterm-underline-5 {
text-decoration: overline dashed underline;
}
.xterm-strikethrough {
text-decoration: line-through;
}
.xterm-screen .xterm-decoration-container .xterm-decoration {
z-index: 6;
position: absolute;
z-index: 6;
position: absolute;
}
.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
z-index: 7;
.xterm-screen
.xterm-decoration-container
.xterm-decoration.xterm-decoration-top-layer {
z-index: 7;
}
.xterm-decoration-overview-ruler {
@ -216,4 +238,4 @@ z-index: 7;
.xterm-decoration-top {
z-index: 2;
position: relative;
}
}