Fix keyboard keys

This commit is contained in:
LukeGus
2025-09-06 00:24:20 -05:00
parent 97c7500487
commit 198a5c2796
2 changed files with 100 additions and 95 deletions

View File

@@ -105,6 +105,17 @@ export const Terminal = forwardRef<any, SSHTerminalProps>(function SSHTerminal(
textarea.setAttribute("readonly", "true"); textarea.setAttribute("readonly", "true");
textarea.setAttribute("inputmode", "none"); textarea.setAttribute("inputmode", "none");
textarea.style.caretColor = "transparent"; textarea.style.caretColor = "transparent";
const preventKeyboard = () => {
textarea.blur();
};
textarea.addEventListener('focus', preventKeyboard);
textarea.blur(); // Initial blur
return () => {
textarea.removeEventListener('focus', preventKeyboard);
};
} }
}, [terminal]); }, [terminal]);

View File

@@ -1,4 +1,4 @@
import React, {useState} from "react"; import React, {useState, useCallback} from "react";
import Keyboard from "react-simple-keyboard"; import Keyboard from "react-simple-keyboard";
import "react-simple-keyboard/build/css/index.css"; import "react-simple-keyboard/build/css/index.css";
import "./kb-dark-theme.css"; import "./kb-dark-theme.css";
@@ -12,42 +12,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
const [isCtrl, setIsCtrl] = useState(false); const [isCtrl, setIsCtrl] = useState(false);
const [isAlt, setIsAlt] = useState(false); const [isAlt, setIsAlt] = useState(false);
const onKeyPress = async (button: string) => { const handlePaste = useCallback(async () => {
if (button === "{shift}") {
setLayoutName("shift");
return;
}
if (button === "{unshift}") {
setLayoutName("default");
return;
}
if (button === "{more}") {
setLayoutName("more");
return;
}
if (button === "{less}") {
setLayoutName("default");
return;
}
if (button === "{hide}") {
setLayoutName("hide");
return;
}
if (button === "{unhide}") {
setLayoutName("default");
return;
}
if (button === "{ctrl}") {
setIsCtrl(prev => !prev);
return;
}
if (button === "{alt}") {
setIsAlt(prev => !prev);
return;
}
if (button === "{paste}") {
if (navigator.clipboard?.readText) { if (navigator.clipboard?.readText) {
try { try {
const text = await navigator.clipboard.readText(); const text = await navigator.clipboard.readText();
@@ -55,9 +20,37 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
onSendInput(text); onSendInput(text);
} }
} catch (err) { } catch (err) {
console.error("Failed to read clipboard:", err);
}
}
}, [onSendInput]);
const onKeyPress = useCallback((button: string) => {
const layoutMap: { [key: string]: string } = {
"{shift}": "shift",
"{unshift}": "default",
"{symbols}": "symbols",
"{fn}": "fn",
"{abc}": "default",
};
if (layoutMap[button]) {
setLayoutName(layoutMap[button]);
return;
} }
if (button === "{paste}") {
handlePaste();
return;
} }
if (button === "{ctrl}") {
setIsCtrl(prev => !prev);
return;
}
if (button === "{alt}") {
setIsAlt(prev => !prev);
return; return;
} }
@@ -80,6 +73,7 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
if (isCtrl) { if (isCtrl) {
if (input.length === 1) { if (input.length === 1) {
const charCode = input.toUpperCase().charCodeAt(0); const charCode = input.toUpperCase().charCodeAt(0);
// @, A-Z, [, \, ], ^, _
if (charCode >= 64 && charCode <= 95) { if (charCode >= 64 && charCode <= 95) {
input = String.fromCharCode(charCode - 64); input = String.fromCharCode(charCode - 64);
} }
@@ -90,9 +84,9 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
input = `\x1b${input}`; input = `\x1b${input}`;
} }
navigator.vibrate(20) navigator.vibrate(20);
onSendInput(input); onSendInput(input);
}; }, [isCtrl, isAlt, onSendInput, handlePaste]);
const buttonTheme = [ const buttonTheme = [
{ {
@@ -102,10 +96,6 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
{ {
class: "hg-space-medium", class: "hg-space-medium",
buttons: "{enter} {backspace}", buttons: "{enter} {backspace}",
},
{
class: "hg-space-small",
buttons: "{hide} {less} {more}",
} }
]; ];
@@ -116,53 +106,48 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
buttonTheme.push({class: "key-active", buttons: "{alt}"}); buttonTheme.push({class: "key-active", buttons: "{alt}"});
} }
return ( const layout = {
<div className="">
<Keyboard
layout={{
default: [ default: [
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
"q w e r t y u i o p", "q w e r t y u i o p",
"a s d f g h j k l", "a s d f g h j k l",
"{shift} z x c v b n m {backspace}", "{shift} z x c v b n m {backspace}",
"{hide} {more} {space} {enter}", "{symbols} {ctrl} {alt} {space} {enter}",
], ],
shift: [ shift: [
"{esc} {tab} {ctrl} {alt} {arrowLeft} {arrowRight} {arrowUp} {arrowDown}",
"Q W E R T Y U I O P", "Q W E R T Y U I O P",
"A S D F G H J K L", "A S D F G H J K L",
"{unshift} Z X C V B N M {backspace}", "{unshift} Z X C V B N M {backspace}",
"{hide} {more} {space} {enter}", "{symbols} {ctrl} {alt} {space} {enter}",
], ],
more: [ symbols: [
"{esc} {tab} {ctrl} {alt} {end} {home} {pgUp} {pgDn}",
"1 2 3 4 5 6 7 8 9 0", "1 2 3 4 5 6 7 8 9 0",
"! @ # $ % ^ & * ( ) _ +", "! @ # $ % ^ & * ( )",
"[ ] { } | \\ ; : ' \" , . / < >", "- _ = + [ ] { } \\ |",
"F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12", "~ ` ' \" ; : , . / < > ?",
"{arrowLeft} {arrowRight} {arrowUp} {arrowDown} {paste} {backspace}", "{abc} {fn} {space} {backspace}",
"{hide} {less} {space} {enter}",
], ],
hide: [ fn: [
"{unhide}" "F1 F2 F3 F4 F5 F6",
"F7 F8 F9 F10 F11 F12",
"{esc} {tab} {home} {end}",
"{pgUp} {pgDn} {arrowUp} {arrowDown}",
"{abc} {arrowLeft} {arrowRight} {paste} {backspace}",
] ]
}} };
layoutName={layoutName}
onKeyPress={onKeyPress} const display = {
display={{ "{shift}": "⇧",
"{shift}": "up", "{unshift}": "",
"{unshift}": "dn", "{backspace}": "",
"{backspace}": "back", "{symbols}": "?123",
"{more}": "more", "{abc}": "abc",
"{less}": "less", "{fn}": "Fn",
"{space}": "space", "{space}": "space",
"{enter}": "enter", "{enter}": "enter",
"{arrowLeft}": "←", "{arrowLeft}": "←",
"{arrowRight}": "→", "{arrowRight}": "→",
"{arrowUp}": "↑", "{arrowUp}": "↑",
"{arrowDown}": "↓", "{arrowDown}": "↓",
"{hide}": "hide",
"{unhide}": "unhide",
"{esc}": "esc", "{esc}": "esc",
"{tab}": "tab", "{tab}": "tab",
"{ctrl}": "ctrl", "{ctrl}": "ctrl",
@@ -172,9 +157,18 @@ export function TerminalKeyboard({onSendInput}: TerminalKeyboardProps) {
"{home}": "home", "{home}": "home",
"{pgUp}": "pgUp", "{pgUp}": "pgUp",
"{pgDn}": "pgDn", "{pgDn}": "pgDn",
}} };
return (
<div className="">
<Keyboard
layout={layout}
layoutName={layoutName}
onKeyPress={onKeyPress}
display={display}
theme={"hg-theme-default dark-theme"} theme={"hg-theme-default dark-theme"}
useTouchEvents={true} useTouchEvents={true}
disableButtonHold={true}
buttonTheme={buttonTheme} buttonTheme={buttonTheme}
/> />
</div> </div>