Fixed multi-line command issues with switching between split and not split.

This commit is contained in:
Karmaa
2025-03-09 14:06:07 -05:00
parent 0a81bea075
commit fb720c8c42
2 changed files with 39 additions and 32 deletions

View File

@@ -16,9 +16,7 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
const terminalContainer = terminalRef.current; const terminalContainer = terminalRef.current;
const parentContainer = terminalContainer?.parentElement; const parentContainer = terminalContainer?.parentElement;
if (!parentContainer || !isVisible) return; if (!parentContainer || parentContainer.clientWidth === 0) return;
void parentContainer.offsetHeight;
const parentWidth = parentContainer.clientWidth; const parentWidth = parentContainer.clientWidth;
const parentHeight = parentContainer.clientHeight; const parentHeight = parentContainer.clientHeight;
@@ -26,12 +24,13 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
terminalContainer.style.width = `${parentWidth}px`; terminalContainer.style.width = `${parentWidth}px`;
terminalContainer.style.height = `${parentHeight}px`; terminalContainer.style.height = `${parentHeight}px`;
fitAddon.current.fit(); requestAnimationFrame(() => {
fitAddon.current.fit();
if (socketRef.current && terminalInstance.current) { if (socketRef.current && terminalInstance.current) {
const { cols, rows } = terminalInstance.current; const { cols, rows } = terminalInstance.current;
socketRef.current.emit("resize", { cols, rows }); socketRef.current.emit("resize", { cols, rows });
} }
});
}; };
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
@@ -50,7 +49,6 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}, },
fontSize: 14, fontSize: 14,
scrollback: 1000, scrollback: 1000,
fontFamily: 'monospace',
ignoreBracketedPasteMode: true, ignoreBracketedPasteMode: true,
}); });
@@ -86,24 +84,29 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
terminalInstance.current.write(decoder.decode(new Uint8Array(data))); terminalInstance.current.write(decoder.decode(new Uint8Array(data)));
}); });
let isPasting = false;
terminalInstance.current.onData((data) => { terminalInstance.current.onData((data) => {
socketRef.current.emit("data", data); socketRef.current.emit("data", data);
}); });
terminalInstance.current.attachCustomKeyEventHandler((event) => { terminalInstance.current.attachCustomKeyEventHandler((event) => {
if ( console.log("Event caled");
(event.ctrlKey && event.key === "v") || if (isPasting) return;
(event.metaKey && event.key === "v") ||
(event.shiftKey && event.key === "Insert") isPasting = true;
) { setTimeout(() => {
navigator.clipboard isPasting = false;
.readText() }, 200);
.then((text) => {
socketRef.current.emit("data", text); if ((event.ctrlKey || event.metaKey) && event.key === "v") {
}) event.preventDefault();
.catch((err) => {
console.error("Failed to read clipboard contents:", err); navigator.clipboard.readText().then((text) => {
}); socketRef.current.emit("data", text);
}).catch((err) => {
console.error("Failed to read clipboard contents:", err);
});
return false; return false;
} }
return true; return true;
@@ -129,20 +132,21 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
}, [hostConfig]); }, [hostConfig]);
useEffect(() => { useEffect(() => {
if (isVisible) { resizeTerminal();
resizeTerminal();
}
}, [isVisible]); }, [isVisible]);
useEffect(() => { useEffect(() => {
const terminalContainer = terminalRef.current; const terminalContainer = terminalRef.current;
if (!terminalContainer) return; if (!terminalContainer) return;
const parentContainer = terminalContainer.parentElement;
if (!parentContainer) return;
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
resizeTerminal(); resizeTerminal();
}); });
observer.observe(terminalContainer); observer.observe(parentContainer);
return () => { return () => {
observer.disconnect(); observer.disconnect();
@@ -153,7 +157,12 @@ export const NewTerminal = forwardRef(({ hostConfig, isVisible }, ref) => {
<div <div
ref={terminalRef} ref={terminalRef}
className="w-full h-full overflow-hidden text-left" className="w-full h-full overflow-hidden text-left"
style={{ display: isVisible ? "block" : "none" }} style={{
visibility: isVisible ? 'visible' : 'hidden',
position: 'absolute',
width: '100%',
height: '100%',
}}
/> />
); );
}); });
@@ -168,4 +177,4 @@ NewTerminal.propTypes = {
port: PropTypes.string.isRequired, port: PropTypes.string.isRequired,
}).isRequired, }).isRequired,
isVisible: PropTypes.bool.isRequired, isVisible: PropTypes.bool.isRequired,
}; };

View File

@@ -46,11 +46,10 @@ io.on("connection", (socket) => {
socket.emit("error", err.message); socket.emit("error", err.message);
return; return;
} }
stream = newStream; stream = newStream;
// Set initial terminal size // Set initial terminal size
stream.setWindow(rows, cols, rows * 100, cols * 100); stream.setWindow(rows, cols, rows * 100, cols * 100);
console.log(`Initial terminal size: cols=${cols}, rows=${rows}`);
// Pipe SSH output to client // Pipe SSH output to client
stream.on("data", function (data) { stream.on("data", function (data) {
@@ -71,7 +70,6 @@ io.on("connection", (socket) => {
socket.on("resize", ({ cols, rows }) => { socket.on("resize", ({ cols, rows }) => {
if (stream && stream.setWindow) { if (stream && stream.setWindow) {
stream.setWindow(rows, cols, rows * 100, cols * 100); stream.setWindow(rows, cols, rows * 100, cols * 100);
console.log(`Terminal resized: cols=${cols}, rows=${rows}`);
} }
}); });