Fix keyboard keys
This commit is contained in:
@@ -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]);
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user