Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split ApplySelection into CompleteOrPrevSelection and CompleteOrNextSelection

Browse Source 
When moving through the autocomplete selection list distinguish between
the following cases:
1) When there is no autocomplete window open, only open one and select
the first item when the CompleteOrPrevSelection /
CompleteOrNextSelection actions are emitted (e.g. by pressing SHIFT +
TAB, TAB)
2) Otherwise navigate through the selection list (e.g. SHIFT + TAB, TAB,
UP, DOWN)

- Remove references to raw keyboard events in autocomplete.ts
- Clarify the purpose of startSelection (previously onTab)

Signed-off-by: Clemens Zeidler <clemens.zeidler@gmail.com>
This commit is contained in:
Clemens Zeidler 2021-03-28 19:59:33 +13:00
parent 7d087524a5
commit 57cd8afbc4
4 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/KeyBindingsDefaults.ts
View File

@ -161,27 +161,27 @@ const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
return [
{
action: AutocompleteAction.ApplySelection,
action: AutocompleteAction.CompleteOrNextSelection,
keyCombo: {
key: Key.TAB,
},
},
{
action: AutocompleteAction.ApplySelection,
action: AutocompleteAction.CompleteOrNextSelection,
keyCombo: {
key: Key.TAB,
ctrlKey: true,
},
},
{
action: AutocompleteAction.ApplySelection,
action: AutocompleteAction.CompleteOrPrevSelection,
keyCombo: {
key: Key.TAB,
shiftKey: true,
},
},
{
action: AutocompleteAction.ApplySelection,
action: AutocompleteAction.CompleteOrPrevSelection,
keyCombo: {
key: Key.TAB,
ctrlKey: true,

13
src/KeyBindingsManager.ts
View File

@ -52,14 +52,19 @@ export enum MessageComposerAction {
/** Actions for text editing autocompletion */
export enum AutocompleteAction {
/** Apply the current autocomplete selection */
ApplySelection = 'ApplySelection',
/** Cancel autocompletion */
Cancel = 'Cancel',
/**
* Select previous selection or, if the autocompletion window is not shown, open the window and select the first
* selection.
*/
CompleteOrPrevSelection = 'ApplySelection',
/** Select next selection or, if the autocompletion window is not shown, open it and select the first selection */
CompleteOrNextSelection = 'CompleteOrNextSelection',
/** Move to the previous autocomplete selection */
PrevSelection = 'PrevSelection',
/** Move to the next autocomplete selection */
NextSelection = 'NextSelection',
/** Close the autocompletion window */
Cancel = 'Cancel',
}
/** Actions for the room list sidebar */

20
src/components/views/rooms/BasicMessageComposer.tsx
View File

@ -485,16 +485,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
if (model.autoComplete && model.autoComplete.hasCompletions()) {
const autoComplete = model.autoComplete;
switch (autocompleteAction) {
case AutocompleteAction.CompleteOrPrevSelection:
case AutocompleteAction.PrevSelection:
autoComplete.onUpArrow(event);
autoComplete.selectPreviousSelection();
handled = true;
break;
case AutocompleteAction.CompleteOrNextSelection:
case AutocompleteAction.NextSelection:
autoComplete.onDownArrow(event);
handled = true;
break;
case AutocompleteAction.ApplySelection:
autoComplete.onTab(event);
autoComplete.selectNextSelection();
handled = true;
break;
case AutocompleteAction.Cancel:
@ -504,8 +502,10 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
default:
return; // don't preventDefault on anything else
}
} else if (autocompleteAction === AutocompleteAction.ApplySelection) {
this.tabCompleteName(event);
} else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
|| autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
// there is no current autocomplete window, try to open it
this.tabCompleteName();
handled = true;
} else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
this.formatBarRef.current.hide();
@ -517,7 +517,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
}
};
private async tabCompleteName(event: React.KeyboardEvent) {
private async tabCompleteName() {
try {
await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
const {model} = this.props;
@ -540,7 +540,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
// Don't try to do things with the autocomplete if there is none shown
if (model.autoComplete) {
await model.autoComplete.onTab(event);
await model.autoComplete.startSelection();
if (!model.autoComplete.hasSelection()) {
this.setState({showVisualBell: true});
model.autoComplete.close();

12
src/editor/autocomplete.ts
View File

@ -68,24 +68,24 @@ export default class AutocompleteWrapperModel {
this.updateCallback({close: true});
}
public async onTab(e: KeyboardEvent) {
/**
* If there is no current autocompletion, start one and move to the first selection.
*/
public async startSelection() {
const acComponent = this.getAutocompleterComponent();
if (acComponent.countCompletions() === 0) {
// Force completions to show for the text currently entered
await acComponent.forceComplete();
// Select the first item by moving "down"
await acComponent.moveSelection(+1);
} else {
await acComponent.moveSelection(e.shiftKey ? -1 : +1);
}
}
public onUpArrow(e: KeyboardEvent) {
public selectPreviousSelection() {
this.getAutocompleterComponent().moveSelection(-1);
}
public onDownArrow(e: KeyboardEvent) {
public selectNextSelection() {
this.getAutocompleterComponent().moveSelection(+1);
}