n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/composer: add enter and esc keybinds to autocompleter

Browse source
This commit is contained in:
Tulir Asokan 2024-11-07 17:21:07 +01:00
parent e0189a2651
commit bb52f1cfa9
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/ui/composer/Autocompleter.tsx
View file

@ -31,6 +31,7 @@ export interface AutocompleteQuery {
endPos: number
frozenQuery?: string
selected?: number
close?: boolean
}
export interface AutocompleterProps {
@ -80,6 +81,9 @@ function useAutocompleter<T>({
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

19
web/src/ui/composer/MessageComposer.tsx
View file

@ -199,16 +199,23 @@ const MessageComposer = () => {
const onComposerKeyDown = useEvent((evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
const inp = evt.currentTarget
const fullKey = keyToString(evt)
if (fullKey === "Enter") {
sendMessage(evt)
} else if (autocomplete) {
if (autocomplete) {
let autocompleteUpdate: Partial<AutocompleteQuery> | 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)