Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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 endPos: number
frozenQuery?: string frozenQuery?: string
selected?: number selected?: number
close?: boolean
} }
export interface AutocompleterProps { export interface AutocompleterProps {
@ -80,6 +81,9 @@ function useAutocompleter<T>({
useEffect(() => { useEffect(() => {
if (params.selected !== undefined) { if (params.selected !== undefined) {
onSelect(params.selected) onSelect(params.selected)
if (params.close) {
setAutocomplete(null)
}
} }
}, [onSelect, params.selected]) }, [onSelect, params.selected])
const selected = params.selected !== undefined ? positiveMod(params.selected, items.length) : -1 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 onComposerKeyDown = useEvent((evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
const inp = evt.currentTarget const inp = evt.currentTarget
const fullKey = keyToString(evt) const fullKey = keyToString(evt)
if (fullKey === "Enter") { if (autocomplete) {
sendMessage(evt) let autocompleteUpdate: Partial<AutocompleteQuery> | null | undefined
} else if (autocomplete) {
if (fullKey === "Tab" || fullKey === "ArrowDown") { if (fullKey === "Tab" || fullKey === "ArrowDown") {
setAutocomplete({ ...autocomplete, selected: (autocomplete.selected ?? -1) + 1 }) autocompleteUpdate = { selected: (autocomplete.selected ?? -1) + 1 }
evt.preventDefault()
} else if (fullKey === "Shift+Tab" || fullKey === "ArrowUp") { } 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() evt.preventDefault()
} }
} else if (fullKey === "Enter") {
sendMessage(evt)
} else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) { } else if (fullKey === "ArrowUp" && inp.selectionStart === 0 && inp.selectionEnd === 0) {
const currentlyEditing = editing const currentlyEditing = editing
? roomCtx.ownMessages.indexOf(editing.rowid) ? roomCtx.ownMessages.indexOf(editing.rowid)