Fixed multi-line command issues with switching between split and not split.
This commit is contained in:
@@ -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%',
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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}`);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user