Use key bindings in BasicMessageComposer

This commit is contained in:
Clemens Zeidler 2021-02-17 22:00:48 +13:00
parent c84ad9bedc
commit 54c38844d2
2 changed files with 245 additions and 94 deletions

View file

@ -4,6 +4,8 @@ import SettingsStore from './settings/SettingsStore';
export enum KeyBindingContext { export enum KeyBindingContext {
/** Key bindings for the chat message composer component */ /** Key bindings for the chat message composer component */
MessageComposer = 'MessageComposer', MessageComposer = 'MessageComposer',
/** Key bindings for text editing autocompletion */
AutoComplete = 'AutoComplete',
} }
export enum KeyAction { export enum KeyAction {
@ -21,9 +23,34 @@ export enum KeyAction {
EditPrevMessage = 'EditPrevMessage', EditPrevMessage = 'EditPrevMessage',
/** Start editing the user's next sent message */ /** Start editing the user's next sent message */
EditNextMessage = 'EditNextMessage', EditNextMessage = 'EditNextMessage',
/** Cancel editing a message or cancel replying to a message*/
/** Cancel editing a message or cancel replying to a message */
CancelEditing = 'CancelEditing', CancelEditing = 'CancelEditing',
/** Set bold format the current selection */
FormatBold = 'FormatBold',
/** Set italics format the current selection */
FormatItalics = 'FormatItalics',
/** Format the current selection as quote */
FormatQuote = 'FormatQuote',
/** Undo the last editing */
EditUndo = 'EditUndo',
/** Redo editing */
EditRedo = 'EditRedo',
/** Insert new line */
NewLine = 'NewLine',
MoveCursorToStart = 'MoveCursorToStart',
MoveCursorToEnd = 'MoveCursorToEnd',
// Autocomplete
/** Apply the current autocomplete selection */
AutocompleteApply = 'AutocompleteApply',
/** Cancel autocompletion */
AutocompleteCancel = 'AutocompleteCancel',
/** Move to the previous autocomplete selection */
AutocompletePrevSelection = 'AutocompletePrevSelection',
/** Move to the next autocomplete selection */
AutocompleteNextSelection = 'AutocompleteNextSelection',
} }
/** /**
@ -84,7 +111,69 @@ const messageComposerBindings = (): KeyBinding[] => {
key: Key.ESCAPE, key: Key.ESCAPE,
}, },
}, },
{
action: KeyAction.FormatBold,
keyCombo: {
key: Key.B,
ctrlOrCmd: true,
},
},
{
action: KeyAction.FormatItalics,
keyCombo: {
key: Key.I,
ctrlOrCmd: true,
},
},
{
action: KeyAction.FormatQuote,
keyCombo: {
key: Key.GREATER_THAN,
ctrlOrCmd: true,
shiftKey: true,
},
},
{
action: KeyAction.EditUndo,
keyCombo: {
key: Key.Z,
ctrlOrCmd: true,
},
},
// Note: the following two bindings also work with just HOME and END, add them here?
{
action: KeyAction.MoveCursorToStart,
keyCombo: {
key: Key.HOME,
ctrlOrCmd: true,
},
},
{
action: KeyAction.MoveCursorToEnd,
keyCombo: {
key: Key.END,
ctrlOrCmd: true,
},
},
]; ];
if (isMac) {
bindings.push({
action: KeyAction.EditRedo,
keyCombo: {
key: Key.Z,
ctrlOrCmd: true,
shiftKey: true,
},
});
} else {
bindings.push({
action: KeyAction.EditRedo,
keyCombo: {
key: Key.Y,
ctrlOrCmd: true,
},
});
}
if (SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend')) { if (SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend')) {
bindings.push({ bindings.push({
action: KeyAction.Send, action: KeyAction.Send,
@ -93,6 +182,12 @@ const messageComposerBindings = (): KeyBinding[] => {
ctrlOrCmd: true, ctrlOrCmd: true,
}, },
}); });
bindings.push({
action: KeyAction.NewLine,
keyCombo: {
key: Key.ENTER,
},
});
} else { } else {
bindings.push({ bindings.push({
action: KeyAction.Send, action: KeyAction.Send,
@ -100,17 +195,75 @@ const messageComposerBindings = (): KeyBinding[] => {
key: Key.ENTER, key: Key.ENTER,
}, },
}); });
bindings.push({
action: KeyAction.NewLine,
keyCombo: {
key: Key.ENTER,
shiftKey: true,
},
});
if (isMac) {
bindings.push({
action: KeyAction.NewLine,
keyCombo: {
key: Key.ENTER,
altKey: true,
},
});
}
} }
return bindings; return bindings;
} }
const autocompleteBindings = (): KeyBinding[] => {
return [
{
action: KeyAction.AutocompleteApply,
keyCombo: {
key: Key.TAB,
},
},
{
action: KeyAction.AutocompleteApply,
keyCombo: {
key: Key.TAB,
ctrlKey: true,
},
},
{
action: KeyAction.AutocompleteApply,
keyCombo: {
key: Key.TAB,
shiftKey: true,
},
},
{
action: KeyAction.AutocompleteCancel,
keyCombo: {
key: Key.ESCAPE,
},
},
{
action: KeyAction.AutocompletePrevSelection,
keyCombo: {
key: Key.ARROW_UP,
},
},
{
action: KeyAction.AutocompleteNextSelection,
keyCombo: {
key: Key.ARROW_DOWN,
},
},
]
}
/** /**
* Helper method to check if a KeyboardEvent matches a KeyCombo * Helper method to check if a KeyboardEvent matches a KeyCombo
* *
* Note, this method is only exported for testing. * Note, this method is only exported for testing.
*/ */
export function isKeyComboMatch(ev: KeyboardEvent, combo: KeyCombo, onMac: boolean): boolean { export function isKeyComboMatch(ev: KeyboardEvent | React.KeyboardEvent, combo: KeyCombo, onMac: boolean): boolean {
if (combo.key !== undefined && ev.key !== combo.key) { if (combo.key !== undefined && ev.key !== combo.key) {
return false; return false;
} }
@ -160,12 +313,13 @@ export class KeyBindingsManager {
*/ */
contextBindings: Record<KeyBindingContext, KeyBindingsGetter> = { contextBindings: Record<KeyBindingContext, KeyBindingsGetter> = {
[KeyBindingContext.MessageComposer]: messageComposerBindings, [KeyBindingContext.MessageComposer]: messageComposerBindings,
[KeyBindingContext.AutoComplete]: autocompleteBindings,
}; };
/** /**
* Finds a matching KeyAction for a given KeyboardEvent * Finds a matching KeyAction for a given KeyboardEvent
*/ */
getAction(context: KeyBindingContext, ev: KeyboardEvent): KeyAction { getAction(context: KeyBindingContext, ev: KeyboardEvent | React.KeyboardEvent): KeyAction {
const bindings = this.contextBindings[context]?.(); const bindings = this.contextBindings[context]?.();
if (!bindings) { if (!bindings) {
return KeyAction.None; return KeyAction.None;

View file

@ -46,6 +46,7 @@ import {IDiff} from "../../../editor/diff";
import AutocompleteWrapperModel from "../../../editor/autocomplete"; import AutocompleteWrapperModel from "../../../editor/autocomplete";
import DocumentPosition from "../../../editor/position"; import DocumentPosition from "../../../editor/position";
import {ICompletion} from "../../../autocomplete/Autocompleter"; import {ICompletion} from "../../../autocomplete/Autocompleter";
import { getKeyBindingsManager, KeyBindingContext, KeyAction } from '../../../KeyBindingsManager';
// matches emoticons which follow the start of a line or whitespace // matches emoticons which follow the start of a line or whitespace
const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$'); const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$');
@ -419,23 +420,22 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
private onKeyDown = (event: React.KeyboardEvent) => { private onKeyDown = (event: React.KeyboardEvent) => {
const model = this.props.model; const model = this.props.model;
const modKey = IS_MAC ? event.metaKey : event.ctrlKey;
let handled = false; let handled = false;
// format bold const action = getKeyBindingsManager().getAction(KeyBindingContext.MessageComposer, event);
if (modKey && event.key === Key.B) { switch (action) {
case KeyAction.FormatBold:
this.onFormatAction(Formatting.Bold); this.onFormatAction(Formatting.Bold);
handled = true; handled = true;
// format italics break;
} else if (modKey && event.key === Key.I) { case KeyAction.FormatItalics:
this.onFormatAction(Formatting.Italics); this.onFormatAction(Formatting.Italics);
handled = true; handled = true;
// format quote break;
} else if (modKey && event.key === Key.GREATER_THAN) { case KeyAction.FormatQuote:
this.onFormatAction(Formatting.Quote); this.onFormatAction(Formatting.Quote);
handled = true; handled = true;
// redo break;
} else if ((!IS_MAC && modKey && event.key === Key.Y) || case KeyAction.EditRedo:
(IS_MAC && modKey && event.shiftKey && event.key === Key.Z)) {
if (this.historyManager.canRedo()) { if (this.historyManager.canRedo()) {
const {parts, caret} = this.historyManager.redo(); const {parts, caret} = this.historyManager.redo();
// pass matching inputType so historyManager doesn't push echo // pass matching inputType so historyManager doesn't push echo
@ -443,8 +443,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
model.reset(parts, caret, "historyRedo"); model.reset(parts, caret, "historyRedo");
} }
handled = true; handled = true;
// undo break;
} else if (modKey && event.key === Key.Z) { case KeyAction.EditUndo:
if (this.historyManager.canUndo()) { if (this.historyManager.canUndo()) {
const {parts, caret} = this.historyManager.undo(this.props.model); const {parts, caret} = this.historyManager.undo(this.props.model);
// pass matching inputType so historyManager doesn't push echo // pass matching inputType so historyManager doesn't push echo
@ -452,65 +452,62 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
model.reset(parts, caret, "historyUndo"); model.reset(parts, caret, "historyUndo");
} }
handled = true; handled = true;
// insert newline on Shift+Enter break;
} else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) { case KeyAction.NewLine:
this.insertText("\n"); this.insertText("\n");
handled = true; handled = true;
// move selection to start of composer break;
} else if (modKey && event.key === Key.HOME && !event.shiftKey) { case KeyAction.MoveCursorToStart:
setSelection(this.editorRef.current, model, { setSelection(this.editorRef.current, model, {
index: 0, index: 0,
offset: 0, offset: 0,
}); });
handled = true; handled = true;
// move selection to end of composer break;
} else if (modKey && event.key === Key.END && !event.shiftKey) { case KeyAction.MoveCursorToEnd:
setSelection(this.editorRef.current, model, { setSelection(this.editorRef.current, model, {
index: model.parts.length - 1, index: model.parts.length - 1,
offset: model.parts[model.parts.length - 1].text.length, offset: model.parts[model.parts.length - 1].text.length,
}); });
handled = true; handled = true;
// autocomplete or enter to send below shouldn't have any modifier keys pressed. break;
} else { }
const metaOrAltPressed = event.metaKey || event.altKey; if (handled) {
const modifierPressed = metaOrAltPressed || event.shiftKey; event.preventDefault();
event.stopPropagation();
return;
}
const autocompleteAction = getKeyBindingsManager().getAction(KeyBindingContext.AutoComplete, event);
if (model.autoComplete && model.autoComplete.hasCompletions()) { if (model.autoComplete && model.autoComplete.hasCompletions()) {
const autoComplete = model.autoComplete; const autoComplete = model.autoComplete;
switch (event.key) { switch (autocompleteAction) {
case Key.ARROW_UP: case KeyAction.AutocompletePrevSelection:
if (!modifierPressed) {
autoComplete.onUpArrow(event); autoComplete.onUpArrow(event);
handled = true; handled = true;
}
break; break;
case Key.ARROW_DOWN: case KeyAction.AutocompleteNextSelection:
if (!modifierPressed) {
autoComplete.onDownArrow(event); autoComplete.onDownArrow(event);
handled = true; handled = true;
}
break; break;
case Key.TAB: case KeyAction.AutocompleteApply:
if (!metaOrAltPressed) {
autoComplete.onTab(event); autoComplete.onTab(event);
handled = true; handled = true;
}
break; break;
case Key.ESCAPE: case KeyAction.AutocompleteCancel:
if (!modifierPressed) {
autoComplete.onEscape(event); autoComplete.onEscape(event);
handled = true; handled = true;
}
break; break;
default: default:
return; // don't preventDefault on anything else return; // don't preventDefault on anything else
} }
} else if (event.key === Key.TAB) { } else if (autocompleteAction === KeyAction.AutocompleteApply) {
this.tabCompleteName(event); this.tabCompleteName(event);
handled = true; handled = true;
} else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) { } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
this.formatBarRef.current.hide(); this.formatBarRef.current.hide();
} }
}
if (handled) { if (handled) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();