From bb52f1cfa9cd155bfd8a21af4daf1b07178f03c4 Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Thu, 7 Nov 2024 17:21:07 +0100 Subject: [PATCH] web/composer: add enter and esc keybinds to autocompleter --- web/src/ui/composer/Autocompleter.tsx | 4 ++++ web/src/ui/composer/MessageComposer.tsx | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/web/src/ui/composer/Autocompleter.tsx b/web/src/ui/composer/Autocompleter.tsx index fdd49cc..5c1c87e 100644 --- a/web/src/ui/composer/Autocompleter.tsx +++ b/web/src/ui/composer/Autocompleter.tsx @@ -31,6 +31,7 @@ export interface AutocompleteQuery { endPos: number frozenQuery?: string selected?: number + close?: boolean } export interface AutocompleterProps { @@ -80,6 +81,9 @@ function useAutocompleter({ useEffect(() => { if (params.selected !== undefined) { onSelect(params.selected) + if (params.close) { + setAutocomplete(null) + } } }, [onSelect, params.selected]) const selected = params.selected !== undefined ? positiveMod(params.selected, items.length) : -1 diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx index 0a27b3e..eb23782 100644 --- a/web/src/ui/composer/MessageComposer.tsx +++ b/web/src/ui/composer/MessageComposer.tsx @@ -199,16 +199,23 @@ const MessageComposer = () => { const onComposerKeyDown = useEvent((evt: React.KeyboardEvent) => { const inp = evt.currentTarget const fullKey = keyToString(evt) - if (fullKey === "Enter") { - sendMessage(evt) - } else if (autocomplete) { + if (autocomplete) { + let autocompleteUpdate: Partial | null | undefined if (fullKey === "Tab" || fullKey === "ArrowDown") { - setAutocomplete({ ...autocomplete, selected: (autocomplete.selected ?? -1) + 1 }) - evt.preventDefault() + autocompleteUpdate = { selected: (autocomplete.selected ?? -1) + 1 } } else if (fullKey === "Shift+Tab" || fullKey === "ArrowUp") { - setAutocomplete({ ...autocomplete, selected: (autocomplete.selected ?? 0) - 1 }) + autocompleteUpdate = { selected: (autocomplete.selected ?? 0) - 1 } + } else if (fullKey === "Enter") { + autocompleteUpdate = autocomplete.selected !== undefined ? null : { selected: 0, close: true } + } else if (fullKey === "Escape") { + autocompleteUpdate = null + } + if (autocompleteUpdate !== undefined) { + setAutocomplete(autocompleteUpdate && { ...autocomplete, ...autocompleteUpdate }) evt.preventDefault() } + } else if (fullKey === "Enter") { + sendMessage(evt) } else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) { const currentlyEditing = editing ? roomCtx.ownMessages.indexOf(editing.rowid)