diff --git a/src/components/terminal/KeyBar.tsx b/src/components/terminal/KeyBar.tsx index 7914a43..fe069f7 100644 --- a/src/components/terminal/KeyBar.tsx +++ b/src/components/terminal/KeyBar.tsx @@ -91,11 +91,7 @@ export function KeyBar({ }; return ( - onPagerScrollEnabled?.(false)} - onTouchEnd={() => onPagerScrollEnabled?.(true)} - onTouchCancel={() => onPagerScrollEnabled?.(true)}> + onPagerScrollEnabled?.(false)} + onScrollEndDrag={() => onPagerScrollEnabled?.(true)} + onMomentumScrollEnd={() => onPagerScrollEnabled?.(true)} contentContainerStyle={styles.capsuleContent}> send(ESC)} /> void; }; +const INPUT_SENTINEL = '​'; + export function TerminalView({ paneId, onPagerScrollEnabled }: Props) { const tokens = useTokens(); const webRef = useRef(null); const inputRef = useRef(null); const lastSentRef = useRef(''); - const [inputValue, setInputValue] = useState(''); + const [inputValue, setInputValue] = useState(INPUT_SENTINEL); const lastTheme = useDevicesStore((s) => s.lastAppliedTheme); const activePairing = useDevicesStore((s) => { @@ -128,24 +130,32 @@ export function TerminalView({ paneId, onPagerScrollEnabled }: Props) { const handleInputChange = useCallback( (text: string) => { - const newlineIdx = text.indexOf('\n'); + const sentinelIdx = text.lastIndexOf(INPUT_SENTINEL); + if (sentinelIdx === -1) { + sendTerminalInput(paneId, bytesToBase64(new Uint8Array([0x7f]))); + lastSentRef.current = ''; + setInputValue(INPUT_SENTINEL); + return; + } + const body = text.slice(sentinelIdx + INPUT_SENTINEL.length); + const newlineIdx = body.indexOf('\n'); if (newlineIdx === -1) { - setInputValue(text); - sendInputDiff(text); + setInputValue(INPUT_SENTINEL + body); + sendInputDiff(body); return; } - const before = text.slice(0, newlineIdx); + const before = body.slice(0, newlineIdx); sendInputDiff(before); sendTerminalInput(paneId, stringToBase64('\r')); lastSentRef.current = ''; - setInputValue(''); + setInputValue(INPUT_SENTINEL); }, [paneId, sendInputDiff], ); const handleInputBlur = useCallback(() => { lastSentRef.current = ''; - setInputValue(''); + setInputValue(INPUT_SENTINEL); }, []); const keyboardVisibleRef = useRef(false); @@ -171,6 +181,11 @@ export function TerminalView({ paneId, onPagerScrollEnabled }: Props) { inputRef.current?.focus(); }, []); + const inputSelection = useMemo( + () => ({ start: inputValue.length, end: inputValue.length }), + [inputValue], + ); + const { height } = useReanimatedKeyboardAnimation(); const slideStyle = useAnimatedStyle(() => ({ paddingBottom: -height.value, @@ -195,6 +210,7 @@ export function TerminalView({ paneId, onPagerScrollEnabled }: Props) {