2021-02-14 02:56:55 +00:00
|
|
|
import { isMac, Key } from './Keyboard';
|
|
|
|
import SettingsStore from './settings/SettingsStore';
|
2021-02-11 09:18:10 +00:00
|
|
|
|
|
|
|
export enum KeyBindingContext {
|
2021-02-16 06:05:39 +00:00
|
|
|
/** Key bindings for the chat message composer component */
|
|
|
|
MessageComposer = 'MessageComposer',
|
2021-02-17 09:00:48 +00:00
|
|
|
/** Key bindings for text editing autocompletion */
|
|
|
|
AutoComplete = 'AutoComplete',
|
2021-02-11 09:18:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export enum KeyAction {
|
|
|
|
None = 'None',
|
2021-02-16 06:05:39 +00:00
|
|
|
|
2021-02-14 02:56:55 +00:00
|
|
|
// SendMessageComposer actions:
|
2021-02-16 06:05:39 +00:00
|
|
|
|
|
|
|
/** Send a message */
|
2021-02-14 02:56:55 +00:00
|
|
|
Send = 'Send',
|
2021-02-16 06:05:39 +00:00
|
|
|
/** Go backwards through the send history and use the message in composer view */
|
2021-02-14 02:56:55 +00:00
|
|
|
SelectPrevSendHistory = 'SelectPrevSendHistory',
|
2021-02-16 06:05:39 +00:00
|
|
|
/** Go forwards through the send history */
|
2021-02-14 02:56:55 +00:00
|
|
|
SelectNextSendHistory = 'SelectNextSendHistory',
|
2021-02-16 06:05:39 +00:00
|
|
|
/** Start editing the user's last sent message */
|
|
|
|
EditPrevMessage = 'EditPrevMessage',
|
|
|
|
/** Start editing the user's next sent message */
|
|
|
|
EditNextMessage = 'EditNextMessage',
|
2021-02-17 09:00:48 +00:00
|
|
|
/** Cancel editing a message or cancel replying to a message*/
|
2021-02-16 06:05:39 +00:00
|
|
|
CancelEditing = 'CancelEditing',
|
2021-02-17 09:00:48 +00:00
|
|
|
|
|
|
|
/** 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',
|
2021-02-11 09:18:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Represent a key combination.
|
2021-02-16 06:05:39 +00:00
|
|
|
*
|
2021-02-14 02:56:55 +00:00
|
|
|
* The combo is evaluated strictly, i.e. the KeyboardEvent must match exactly what is specified in the KeyCombo.
|
2021-02-11 09:18:10 +00:00
|
|
|
*/
|
|
|
|
export type KeyCombo = {
|
2021-02-15 06:21:08 +00:00
|
|
|
key?: string;
|
2021-02-11 09:18:10 +00:00
|
|
|
|
|
|
|
/** On PC: ctrl is pressed; on Mac: meta is pressed */
|
|
|
|
ctrlOrCmd?: boolean;
|
|
|
|
|
|
|
|
altKey?: boolean;
|
|
|
|
ctrlKey?: boolean;
|
|
|
|
metaKey?: boolean;
|
|
|
|
shiftKey?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export type KeyBinding = {
|
|
|
|
action: KeyAction;
|
2021-02-14 02:56:55 +00:00
|
|
|
keyCombo: KeyCombo;
|
|
|
|
}
|
|
|
|
|
|
|
|
const messageComposerBindings = (): KeyBinding[] => {
|
|
|
|
const bindings: KeyBinding[] = [
|
|
|
|
{
|
|
|
|
action: KeyAction.SelectPrevSendHistory,
|
|
|
|
keyCombo: {
|
2021-02-15 06:21:08 +00:00
|
|
|
key: Key.ARROW_UP,
|
2021-02-14 02:56:55 +00:00
|
|
|
altKey: true,
|
|
|
|
ctrlKey: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: KeyAction.SelectNextSendHistory,
|
|
|
|
keyCombo: {
|
2021-02-15 06:21:08 +00:00
|
|
|
key: Key.ARROW_DOWN,
|
2021-02-14 02:56:55 +00:00
|
|
|
altKey: true,
|
|
|
|
ctrlKey: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
2021-02-16 06:05:39 +00:00
|
|
|
action: KeyAction.EditPrevMessage,
|
2021-02-14 02:56:55 +00:00
|
|
|
keyCombo: {
|
2021-02-15 06:21:08 +00:00
|
|
|
key: Key.ARROW_UP,
|
2021-02-16 06:05:39 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: KeyAction.EditNextMessage,
|
|
|
|
keyCombo: {
|
|
|
|
key: Key.ARROW_DOWN,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: KeyAction.CancelEditing,
|
|
|
|
keyCombo: {
|
|
|
|
key: Key.ESCAPE,
|
|
|
|
},
|
2021-02-14 02:56:55 +00:00
|
|
|
},
|
2021-02-17 09:00:48 +00:00
|
|
|
{
|
|
|
|
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,
|
|
|
|
},
|
|
|
|
},
|
2021-02-14 02:56:55 +00:00
|
|
|
];
|
2021-02-17 09:00:48 +00:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2021-02-14 02:56:55 +00:00
|
|
|
if (SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend')) {
|
|
|
|
bindings.push({
|
|
|
|
action: KeyAction.Send,
|
|
|
|
keyCombo: {
|
2021-02-15 06:21:08 +00:00
|
|
|
key: Key.ENTER,
|
2021-02-14 02:56:55 +00:00
|
|
|
ctrlOrCmd: true,
|
|
|
|
},
|
|
|
|
});
|
2021-02-17 09:00:48 +00:00
|
|
|
bindings.push({
|
|
|
|
action: KeyAction.NewLine,
|
|
|
|
keyCombo: {
|
|
|
|
key: Key.ENTER,
|
|
|
|
},
|
|
|
|
});
|
2021-02-14 02:56:55 +00:00
|
|
|
} else {
|
|
|
|
bindings.push({
|
|
|
|
action: KeyAction.Send,
|
|
|
|
keyCombo: {
|
2021-02-15 06:21:08 +00:00
|
|
|
key: Key.ENTER,
|
2021-02-14 02:56:55 +00:00
|
|
|
},
|
|
|
|
});
|
2021-02-17 09:00:48 +00:00
|
|
|
bindings.push({
|
|
|
|
action: KeyAction.NewLine,
|
|
|
|
keyCombo: {
|
|
|
|
key: Key.ENTER,
|
|
|
|
shiftKey: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
if (isMac) {
|
|
|
|
bindings.push({
|
|
|
|
action: KeyAction.NewLine,
|
|
|
|
keyCombo: {
|
|
|
|
key: Key.ENTER,
|
|
|
|
altKey: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
2021-02-14 02:56:55 +00:00
|
|
|
}
|
|
|
|
return bindings;
|
2021-02-11 09:18:10 +00:00
|
|
|
}
|
|
|
|
|
2021-02-17 09:00:48 +00:00
|
|
|
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,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
2021-02-11 09:18:10 +00:00
|
|
|
/**
|
|
|
|
* Helper method to check if a KeyboardEvent matches a KeyCombo
|
2021-02-16 06:05:39 +00:00
|
|
|
*
|
2021-02-11 09:18:10 +00:00
|
|
|
* Note, this method is only exported for testing.
|
|
|
|
*/
|
2021-02-17 09:00:48 +00:00
|
|
|
export function isKeyComboMatch(ev: KeyboardEvent | React.KeyboardEvent, combo: KeyCombo, onMac: boolean): boolean {
|
2021-02-28 07:12:36 +00:00
|
|
|
if (combo.key !== undefined) {
|
|
|
|
// When shift is pressed, letters are returned as upper case chars. In this case do a lower case comparison.
|
|
|
|
// This works for letter combos such as shift + U as well for none letter combos such as shift + Escape.
|
|
|
|
// If shift is not pressed, the toLowerCase conversion can be avoided.
|
|
|
|
if (ev.shiftKey) {
|
|
|
|
if (ev.key.toLowerCase() !== combo.key.toLowerCase()) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
} else if (ev.key !== combo.key) {
|
|
|
|
return false;
|
|
|
|
}
|
2021-02-11 09:18:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const comboCtrl = combo.ctrlKey ?? false;
|
|
|
|
const comboAlt = combo.altKey ?? false;
|
|
|
|
const comboShift = combo.shiftKey ?? false;
|
|
|
|
const comboMeta = combo.metaKey ?? false;
|
|
|
|
// When ctrlOrCmd is set, the keys need do evaluated differently on PC and Mac
|
|
|
|
if (combo.ctrlOrCmd) {
|
|
|
|
if (onMac) {
|
|
|
|
if (!ev.metaKey
|
|
|
|
|| ev.ctrlKey !== comboCtrl
|
|
|
|
|| ev.altKey !== comboAlt
|
|
|
|
|| ev.shiftKey !== comboShift) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (!ev.ctrlKey
|
|
|
|
|| ev.metaKey !== comboMeta
|
|
|
|
|| ev.altKey !== comboAlt
|
|
|
|
|| ev.shiftKey !== comboShift) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (ev.metaKey !== comboMeta
|
|
|
|
|| ev.ctrlKey !== comboCtrl
|
|
|
|
|| ev.altKey !== comboAlt
|
|
|
|
|| ev.shiftKey !== comboShift) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2021-02-14 02:56:55 +00:00
|
|
|
export type KeyBindingsGetter = () => KeyBinding[];
|
|
|
|
|
2021-02-11 09:18:10 +00:00
|
|
|
export class KeyBindingsManager {
|
2021-02-14 02:56:55 +00:00
|
|
|
/**
|
|
|
|
* Map of KeyBindingContext to a KeyBinding getter arrow function.
|
2021-02-16 06:05:39 +00:00
|
|
|
*
|
2021-02-14 02:56:55 +00:00
|
|
|
* Returning a getter function allowed to have dynamic bindings, e.g. when settings change the bindings can be
|
|
|
|
* recalculated.
|
|
|
|
*/
|
|
|
|
contextBindings: Record<KeyBindingContext, KeyBindingsGetter> = {
|
2021-02-16 06:05:39 +00:00
|
|
|
[KeyBindingContext.MessageComposer]: messageComposerBindings,
|
2021-02-17 09:00:48 +00:00
|
|
|
[KeyBindingContext.AutoComplete]: autocompleteBindings,
|
2021-02-14 02:56:55 +00:00
|
|
|
};
|
2021-02-11 09:18:10 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Finds a matching KeyAction for a given KeyboardEvent
|
|
|
|
*/
|
2021-02-17 09:00:48 +00:00
|
|
|
getAction(context: KeyBindingContext, ev: KeyboardEvent | React.KeyboardEvent): KeyAction {
|
2021-02-14 02:56:55 +00:00
|
|
|
const bindings = this.contextBindings[context]?.();
|
2021-02-11 09:18:10 +00:00
|
|
|
if (!bindings) {
|
|
|
|
return KeyAction.None;
|
|
|
|
}
|
|
|
|
const binding = bindings.find(it => isKeyComboMatch(ev, it.keyCombo, isMac));
|
|
|
|
if (binding) {
|
|
|
|
return binding.action;
|
|
|
|
}
|
|
|
|
|
|
|
|
return KeyAction.None;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const manager = new KeyBindingsManager();
|
|
|
|
|
|
|
|
export function getKeyBindingsManager(): KeyBindingsManager {
|
|
|
|
return manager;
|
|
|
|
}
|