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

Work towards unifying KeyboardShortcuts and KeyBindingsDefaults #1 (#7651)

Browse Source
This commit is contained in:
Šimon Brandner 2022-01-27 12:37:53 +01:00 committed by GitHub
parent f2249b3e37
commit 57a5647079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 237 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/KeyBindingsManager.ts
View File

@ -20,117 +20,121 @@ import { isMac } from './Keyboard';
/** Actions for the chat message composer component */ /** Actions for the chat message composer component */
export enum MessageComposerAction { export enum MessageComposerAction {
/** Send a message */ /** Send a message */
Send = 'Send', Send = 'KeyBinding.sendMessageInComposer',
/** Go backwards through the send history and use the message in composer view */ /** Go backwards through the send history and use the message in composer view */
SelectPrevSendHistory = 'SelectPrevSendHistory', SelectPrevSendHistory = 'KeyBinding.previousMessageInComposerHistory',
/** Go forwards through the send history */ /** Go forwards through the send history */
SelectNextSendHistory = 'SelectNextSendHistory', SelectNextSendHistory = 'KeyBinding.nextMessageInComposerHistory',
/** Start editing the user's last sent message */ /** Start editing the user's last sent message */
EditPrevMessage = 'EditPrevMessage', EditPrevMessage = 'KeyBinding.editPreviousMessage',
/** Start editing the user's next sent message */ /** Start editing the user's next sent message */
EditNextMessage = 'EditNextMessage', EditNextMessage = 'KeyBinding.editNextMessage',
/** Cancel editing a message or cancel replying to a message */ /** Cancel editing a message or cancel replying to a message */
CancelEditing = 'CancelEditing', CancelEditing = 'KeyBinding.cancelReplyInComposer',
/** Set bold format the current selection */ /** Set bold format the current selection */
FormatBold = 'FormatBold', FormatBold = 'KeyBinding.toggleBoldInComposer',
/** Set italics format the current selection */ /** Set italics format the current selection */
FormatItalics = 'FormatItalics', FormatItalics = 'KeyBinding.toggleItalicsInComposer',
/** Format the current selection as quote */ /** Format the current selection as quote */
FormatQuote = 'FormatQuote', FormatQuote = 'KeyBinding.toggleQuoteInComposer',
/** Undo the last editing */ /** Undo the last editing */
EditUndo = 'EditUndo', EditUndo = 'KeyBinding.editUndoInComposer',
/** Redo editing */ /** Redo editing */
EditRedo = 'EditRedo', EditRedo = 'KeyBinding.editRedoInComposer',
/** Insert new line */ /** Insert new line */
NewLine = 'NewLine', NewLine = 'KeyBinding.newLineInComposer',
/** Move the cursor to the start of the message */ /** Move the cursor to the start of the message */
MoveCursorToStart = 'MoveCursorToStart', MoveCursorToStart = 'KeyBinding.jumpToStartInComposer',
/** Move the cursor to the end of the message */ /** Move the cursor to the end of the message */
MoveCursorToEnd = 'MoveCursorToEnd', MoveCursorToEnd = 'KeyBinding.jumpToEndInComposer',
} }
/** Actions for text editing autocompletion */ /** Actions for text editing autocompletion */
export enum AutocompleteAction { export enum AutocompleteAction {
/** Accepts chosen autocomplete selection */ /** Accepts chosen autocomplete selection */
Complete = 'Complete', Complete = 'KeyBinding.completeAutocomplete',
/** Accepts chosen autocomplete selection or, /** Accepts chosen autocomplete selection or,
* if the autocompletion window is not shown, open the window and select the first selection */ * if the autocompletion window is not shown, open the window and select the first selection */
ForceComplete = 'ForceComplete', ForceComplete = 'KeyBinding.forceCompleteAutocomplete',
/** Move to the previous autocomplete selection */ /** Move to the previous autocomplete selection */
PrevSelection = 'PrevSelection', PrevSelection = 'KeyBinding.previousOptionInAutoComplete',
/** Move to the next autocomplete selection */ /** Move to the next autocomplete selection */
NextSelection = 'NextSelection', NextSelection = 'KeyBinding.nextOptionInAutoComplete',
/** Close the autocompletion window */ /** Close the autocompletion window */
Cancel = 'Cancel', Cancel = 'KeyBinding.cancelAutoComplete',
} }
/** Actions for the room list sidebar */ /** Actions for the room list sidebar */
export enum RoomListAction { export enum RoomListAction {
/** Clear room list filter field */ /** Clear room list filter field */
ClearSearch = 'ClearSearch', ClearSearch = 'KeyBinding.clearRoomFilter',
/** Navigate up/down in the room list */ /** Navigate up/down in the room list */
PrevRoom = 'PrevRoom', PrevRoom = 'KeyBinding.downerRoom',
/** Navigate down in the room list */ /** Navigate down in the room list */
NextRoom = 'NextRoom', NextRoom = 'KeyBinding.upperRoom',
/** Select room from the room list */ /** Select room from the room list */
SelectRoom = 'SelectRoom', SelectRoom = 'KeyBinding.selectRoomInRoomList',
/** Collapse room list section */ /** Collapse room list section */
CollapseSection = 'CollapseSection', CollapseSection = 'KeyBinding.collapseSectionInRoomList',
/** Expand room list section, if already expanded, jump to first room in the selection */ /** Expand room list section, if already expanded, jump to first room in the selection */
ExpandSection = 'ExpandSection', ExpandSection = 'KeyBinding.expandSectionInRoomList',
} }
/** Actions for the current room view */ /** Actions for the current room view */
export enum RoomAction { export enum RoomAction {
/** Scroll up in the timeline */ /** Scroll up in the timeline */
ScrollUp = 'ScrollUp', ScrollUp = 'KeyBinding.scrollUpInTimeline',
/** Scroll down in the timeline */ /** Scroll down in the timeline */
RoomScrollDown = 'RoomScrollDown', RoomScrollDown = 'KeyBinding.scrollDownInTimeline',
/** Dismiss read marker and jump to bottom */ /** Dismiss read marker and jump to bottom */
DismissReadMarker = 'DismissReadMarker', DismissReadMarker = 'KeyBinding.dismissReadMarkerAndJumpToBottom',
/** Jump to oldest unread message */ /** Jump to oldest unread message */
JumpToOldestUnread = 'JumpToOldestUnread', JumpToOldestUnread = 'KeyBinding.jumpToOldestUnreadMessage',
/** Upload a file */ /** Upload a file */
UploadFile = 'UploadFile', UploadFile = 'KeyBinding.uploadFileToRoom',
/** Focus search message in a room (must be enabled) */ /** Focus search message in a room (must be enabled) */
FocusSearch = 'FocusSearch', FocusSearch = 'KeyBinding.searchInRoom',
/** Jump to the first (downloaded) message in the room */ /** Jump to the first (downloaded) message in the room */
JumpToFirstMessage = 'JumpToFirstMessage', JumpToFirstMessage = 'KeyBinding.jumpToFirstMessageInTimeline',
/** Jump to the latest message in the room */ /** Jump to the latest message in the room */
JumpToLatestMessage = 'JumpToLatestMessage', JumpToLatestMessage = 'KeyBinding.jumpToLastMessageInTimeline',
} }
/** Actions for navigating do various menus, dialogs or screens */ /** Actions for navigating do various menus, dialogs or screens */
export enum NavigationAction { export enum NavigationAction {
/** Jump to room search (search for a room) */ /** Jump to room search (search for a room) */
FocusRoomSearch = 'FocusRoomSearch', FocusRoomSearch = 'KeyBinding.filterRooms',
/** Toggle the space panel */ /** Toggle the space panel */
ToggleSpacePanel = 'ToggleSpacePanel', ToggleSpacePanel = 'KeyBinding.toggleSpacePanel',
/** Toggle the room side panel */ /** Toggle the room side panel */
ToggleRoomSidePanel = 'ToggleRoomSidePanel', ToggleRoomSidePanel = 'KeyBinding.toggleRightPanel',
/** Toggle the user menu */ /** Toggle the user menu */
ToggleUserMenu = 'ToggleUserMenu', ToggleUserMenu = 'KeyBinding.toggleTopLeftMenu',
/** Toggle the short cut help dialog */ /** Toggle the short cut help dialog */
OpenShortCutDialog = 'OpenShortCutDialog', OpenShortCutDialog = 'KeyBinding.showKeyBindingsSettings',
/** Got to the Element home screen */ /** Got to the Element home screen */
GoToHome = 'GoToHome', GoToHome = 'KeyBinding.goToHomeView',
/** Select prev room */ /** Select prev room */
SelectPrevRoom = 'SelectPrevRoom', SelectPrevRoom = 'KeyBinding.previousRoom',
/** Select next room */ /** Select next room */
SelectNextRoom = 'SelectNextRoom', SelectNextRoom = 'KeyBinding.nextRoom',
/** Select prev room with unread messages */ /** Select prev room with unread messages */
SelectPrevUnreadRoom = 'SelectPrevUnreadRoom', SelectPrevUnreadRoom = 'KeyBinding.previousUnreadRoom',
/** Select next room with unread messages */ /** Select next room with unread messages */
SelectNextUnreadRoom = 'SelectNextUnreadRoom', SelectNextUnreadRoom = 'KeyBinding.nextUnreadRoom',
} }
/** Actions only available when labs are enabled */ /** Actions only available when labs are enabled */
export enum LabsAction { export enum LabsAction {
/** Toggle visibility of hidden events */ /** Toggle visibility of hidden events */
ToggleHiddenEventVisibility = 'ToggleHiddenEventVisibility', ToggleHiddenEventVisibility = 'KeyBinding.toggleHiddenEventVisibility',
} }
export type KeyBindingAction = (
MessageComposerAction | AutocompleteAction | RoomListAction | RoomAction | NavigationAction | LabsAction
);
/** /**
* Represent a key combination. * Represent a key combination.
* *

244
src/accessibility/KeyboardShortcuts.ts
View File

@ -18,10 +18,26 @@ limitations under the License.
import { _td } from "../languageHandler"; import { _td } from "../languageHandler";
import { isMac, Key } from "../Keyboard"; import { isMac, Key } from "../Keyboard";
import { ISetting } from "../settings/Settings"; import { ISetting } from "../settings/Settings";
import SettingsStore from "../settings/SettingsStore";
import {
AutocompleteAction,
KeyBindingAction,
LabsAction,
MessageComposerAction,
NavigationAction,
RoomAction,
RoomListAction,
} from "../KeyBindingsManager";
type IKeyboardShortcuts = {
// TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager
[k in (KeyBindingAction | string)]: ISetting;
};
export interface ICategory { export interface ICategory {
categoryLabel: string; categoryLabel: string;
settingNames: string[]; // TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager
settingNames: (KeyBindingAction | string)[];
} }
export enum CategoryName { export enum CategoryName {
@ -65,17 +81,20 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
[CategoryName.COMPOSER]: { [CategoryName.COMPOSER]: {
categoryLabel: _td("Composer"), categoryLabel: _td("Composer"),
settingNames: [ settingNames: [
"KeyBinding.toggleBoldInComposer", MessageComposerAction.Send,
"KeyBinding.toggleItalicsInComposer", MessageComposerAction.FormatBold,
"KeyBinding.toggleQuoteInComposer", MessageComposerAction.FormatItalics,
"KeyBinding.newLineInComposer", MessageComposerAction.FormatQuote,
"KeyBinding.cancelReplyInComposer", MessageComposerAction.NewLine,
"KeyBinding.editNextMessage", MessageComposerAction.CancelEditing,
"KeyBinding.editPreviousMessage", MessageComposerAction.EditNextMessage,
"KeyBinding.jumpToStartInComposer", MessageComposerAction.EditPrevMessage,
"KeyBinding.jumpToEndInComposer", MessageComposerAction.MoveCursorToStart,
"KeyBinding.nextMessageInComposerHistory", MessageComposerAction.MoveCursorToEnd,
"KeyBinding.previousMessageInComposerHistory", MessageComposerAction.SelectNextSendHistory,
MessageComposerAction.EditPrevMessage,
MessageComposerAction.EditUndo,
MessageComposerAction.EditRedo,
], ],
}, [CategoryName.CALLS]: { }, [CategoryName.CALLS]: {
categoryLabel: _td("Calls"), categoryLabel: _td("Calls"),
@ -86,50 +105,54 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
}, [CategoryName.ROOM]: { }, [CategoryName.ROOM]: {
categoryLabel: _td("Room"), categoryLabel: _td("Room"),
settingNames: [ settingNames: [
"KeyBinding.dismissReadMarkerAndJumpToBottom", RoomAction.DismissReadMarker,
"KeyBinding.jumpToOldestUnreadMessage", RoomAction.JumpToOldestUnread,
"KeyBinding.uploadFileToRoom", RoomAction.UploadFile,
"KeyBinding.searchInRoom", RoomAction.FocusSearch,
"KeyBinding.scrollUpInTimeline", RoomAction.ScrollUp,
"KeyBinding.scrollDownInTimeline", RoomAction.RoomScrollDown,
RoomAction.JumpToFirstMessage,
RoomAction.JumpToLatestMessage,
], ],
}, [CategoryName.ROOM_LIST]: { }, [CategoryName.ROOM_LIST]: {
categoryLabel: _td("Room List"), categoryLabel: _td("Room List"),
settingNames: [ settingNames: [
"KeyBinding.filterRooms", RoomListAction.SelectRoom,
"KeyBinding.selectRoomInRoomList", RoomListAction.CollapseSection,
"KeyBinding.collapseSectionInRoomList", RoomListAction.ExpandSection,
"KeyBinding.expandSectionInRoomList", RoomListAction.ClearSearch,
"KeyBinding.clearRoomFilter", RoomListAction.NextRoom,
"KeyBinding.upperRoom", RoomListAction.PrevRoom,
"KeyBinding.downerRoom",
], ],
}, [CategoryName.NAVIGATION]: { }, [CategoryName.NAVIGATION]: {
categoryLabel: _td("Navigation"), categoryLabel: _td("Navigation"),
settingNames: [ settingNames: [
"KeyBinding.toggleTopLeftMenu", NavigationAction.ToggleUserMenu,
"KeyBinding.closeDialogOrContextMenu", "KeyBinding.closeDialogOrContextMenu",
"KeyBinding.activateSelectedButton", "KeyBinding.activateSelectedButton",
"KeyBinding.toggleRightPanel", NavigationAction.ToggleRoomSidePanel,
"KeyBinding.showKeyBindingsSettings", NavigationAction.OpenShortCutDialog,
"KeyBinding.goToHomeView", NavigationAction.GoToHome,
"KeyBinding.nextUnreadRoom", NavigationAction.SelectNextUnreadRoom,
"KeyBinding.previousUnreadRoom", NavigationAction.SelectPrevUnreadRoom,
"KeyBinding.nextRoom", NavigationAction.SelectNextRoom,
"KeyBinding.previousRoom", NavigationAction.SelectPrevRoom,
"KeyBinding.toggleSpacePanel", NavigationAction.ToggleSpacePanel,
NavigationAction.FocusRoomSearch,
], ],
}, [CategoryName.AUTOCOMPLETE]: { }, [CategoryName.AUTOCOMPLETE]: {
categoryLabel: _td("Autocomplete"), categoryLabel: _td("Autocomplete"),
settingNames: [ settingNames: [
"KeyBinding.cancelAutoComplete", AutocompleteAction.Cancel,
"KeyBinding.nextOptionInAutoComplete", AutocompleteAction.NextSelection,
"KeyBinding.previousOptionInAutoComplete", AutocompleteAction.PrevSelection,
AutocompleteAction.Complete,
AutocompleteAction.ForceComplete,
], ],
}, [CategoryName.LABS]: { }, [CategoryName.LABS]: {
categoryLabel: _td("Labs"), categoryLabel: _td("Labs"),
settingNames: [ settingNames: [
"KeyBinding.toggleHiddenEventVisibility", LabsAction.ToggleHiddenEventVisibility,
], ],
}, },
}; };
@ -137,68 +160,61 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
// This is very intentionally modelled after SETTINGS as it will make it easier // This is very intentionally modelled after SETTINGS as it will make it easier
// to implement customizable keyboard shortcuts // to implement customizable keyboard shortcuts
// TODO: TravisR will fix this nightmare when the new version of the SettingsStore becomes a thing // TODO: TravisR will fix this nightmare when the new version of the SettingsStore becomes a thing
export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = { const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
"KeyBinding.toggleBoldInComposer": { [MessageComposerAction.FormatBold]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.B, key: Key.B,
}, },
displayName: _td("Toggle Bold"), displayName: _td("Toggle Bold"),
}, },
"KeyBinding.toggleItalicsInComposer": { [MessageComposerAction.FormatItalics]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.I, key: Key.I,
}, },
displayName: _td("Toggle Italics"), displayName: _td("Toggle Italics"),
}, },
"KeyBinding.toggleQuoteInComposer": { [MessageComposerAction.FormatQuote]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.GREATER_THAN, key: Key.GREATER_THAN,
}, },
displayName: _td("Toggle Quote"), displayName: _td("Toggle Quote"),
}, },
"KeyBinding.newLineInComposer": { [MessageComposerAction.CancelEditing]: {
default: {
shiftKey: true,
key: Key.ENTER,
},
displayName: _td("New line"),
},
"KeyBinding.cancelReplyInComposer": {
default: { default: {
key: Key.ESCAPE, key: Key.ESCAPE,
}, },
displayName: _td("Cancel replying to a message"), displayName: _td("Cancel replying to a message"),
}, },
"KeyBinding.editNextMessage": { [MessageComposerAction.EditNextMessage]: {
default: { default: {
key: Key.ARROW_UP, key: Key.ARROW_UP,
}, },
displayName: _td("Navigate to next message to edit"), displayName: _td("Navigate to next message to edit"),
}, },
"KeyBinding.editPreviousMessage": { [MessageComposerAction.EditPrevMessage]: {
default: { default: {
key: Key.ARROW_DOWN, key: Key.ARROW_DOWN,
}, },
displayName: _td("Navigate to previous message to edit"), displayName: _td("Navigate to previous message to edit"),
}, },
"KeyBinding.jumpToStartInComposer": { [MessageComposerAction.MoveCursorToStart]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.HOME, key: Key.HOME,
}, },
displayName: _td("Jump to start of the composer"), displayName: _td("Jump to start of the composer"),
}, },
"KeyBinding.jumpToEndInComposer": { [MessageComposerAction.MoveCursorToEnd]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.END, key: Key.END,
}, },
displayName: _td("Jump to end of the composer"), displayName: _td("Jump to end of the composer"),
}, },
"KeyBinding.nextMessageInComposerHistory": { [MessageComposerAction.SelectNextSendHistory]: {
default: { default: {
altKey: true, altKey: true,
ctrlKey: true, ctrlKey: true,
@ -206,7 +222,7 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Navigate to next message in composer history"), displayName: _td("Navigate to next message in composer history"),
}, },
"KeyBinding.previousMessageInComposerHistory": { [MessageComposerAction.SelectPrevSendHistory]: {
default: { default: {
altKey: true, altKey: true,
ctrlKey: true, ctrlKey: true,
@ -228,20 +244,20 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Toggle webcam on/off"), displayName: _td("Toggle webcam on/off"),
}, },
"KeyBinding.dismissReadMarkerAndJumpToBottom": { [RoomAction.DismissReadMarker]: {
default: { default: {
key: Key.ESCAPE, key: Key.ESCAPE,
}, },
displayName: _td("Dismiss read marker and jump to bottom"), displayName: _td("Dismiss read marker and jump to bottom"),
}, },
"KeyBinding.jumpToOldestUnreadMessage": { [RoomAction.JumpToOldestUnread]: {
default: { default: {
shiftKey: true, shiftKey: true,
key: Key.PAGE_UP, key: Key.PAGE_UP,
}, },
displayName: _td("Jump to oldest unread message"), displayName: _td("Jump to oldest unread message"),
}, },
"KeyBinding.uploadFileToRoom": { [RoomAction.UploadFile]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
shiftKey: true, shiftKey: true,
@ -249,69 +265,69 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Upload a file"), displayName: _td("Upload a file"),
}, },
"KeyBinding.searchInRoom": { [RoomAction.FocusSearch]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.F, key: Key.F,
}, },
displayName: _td("Search (must be enabled)"), displayName: _td("Search (must be enabled)"),
}, },
"KeyBinding.scrollUpInTimeline": { [RoomAction.ScrollUp]: {
default: { default: {
key: Key.PAGE_UP, key: Key.PAGE_UP,
}, },
displayName: _td("Scroll up in the timeline"), displayName: _td("Scroll up in the timeline"),
}, },
"KeyBinding.scrollDownInTimeline": { [RoomAction.RoomScrollDown]: {
default: { default: {
key: Key.PAGE_DOWN, key: Key.PAGE_DOWN,
}, },
displayName: _td("Scroll down in the timeline"), displayName: _td("Scroll down in the timeline"),
}, },
"KeyBinding.filterRooms": { [NavigationAction.FocusRoomSearch]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.K, key: Key.K,
}, },
displayName: _td("Jump to room search"), displayName: _td("Jump to room search"),
}, },
"KeyBinding.selectRoomInRoomList": { [RoomListAction.SelectRoom]: {
default: { default: {
key: Key.ENTER, key: Key.ENTER,
}, },
displayName: _td("Select room from the room list"), displayName: _td("Select room from the room list"),
}, },
"KeyBinding.collapseSectionInRoomList": { [RoomListAction.CollapseSection]: {
default: { default: {
key: Key.ARROW_LEFT, key: Key.ARROW_LEFT,
}, },
displayName: _td("Collapse room list section"), displayName: _td("Collapse room list section"),
}, },
"KeyBinding.expandSectionInRoomList": { [RoomListAction.ExpandSection]: {
default: { default: {
key: Key.ARROW_RIGHT, key: Key.ARROW_RIGHT,
}, },
displayName: _td("Expand room list section"), displayName: _td("Expand room list section"),
}, },
"KeyBinding.clearRoomFilter": { [RoomListAction.ClearSearch]: {
default: { default: {
key: Key.ESCAPE, key: Key.ESCAPE,
}, },
displayName: _td("Clear room list filter field"), displayName: _td("Clear room list filter field"),
}, },
"KeyBinding.upperRoom": { [RoomListAction.NextRoom]: {
default: { default: {
key: Key.ARROW_UP, key: Key.ARROW_UP,
}, },
displayName: _td("Navigate up in the room list"), displayName: _td("Navigate up in the room list"),
}, },
"KeyBinding.downerRoom": { [RoomListAction.PrevRoom]: {
default: { default: {
key: Key.ARROW_DOWN, key: Key.ARROW_DOWN,
}, },
displayName: _td("Navigate down in the room list"), displayName: _td("Navigate down in the room list"),
}, },
"KeyBinding.toggleTopLeftMenu": { [NavigationAction.ToggleUserMenu]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.BACKTICK, key: Key.BACKTICK,
@ -330,21 +346,21 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Activate selected button"), displayName: _td("Activate selected button"),
}, },
"KeyBinding.toggleRightPanel": { [NavigationAction.ToggleRoomSidePanel]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.PERIOD, key: Key.PERIOD,
}, },
displayName: _td("Toggle right panel"), displayName: _td("Toggle right panel"),
}, },
"KeyBinding.showKeyBindingsSettings": { [NavigationAction.OpenShortCutDialog]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
key: Key.SLASH, key: Key.SLASH,
}, },
displayName: _td("Open this settings tab"), displayName: _td("Open this settings tab"),
}, },
"KeyBinding.goToHomeView": { [NavigationAction.GoToHome]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
altKey: !isMac, altKey: !isMac,
@ -353,7 +369,7 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Go to Home View"), displayName: _td("Go to Home View"),
}, },
"KeyBinding.nextUnreadRoom": { [NavigationAction.SelectNextUnreadRoom]: {
default: { default: {
shiftKey: true, shiftKey: true,
altKey: true, altKey: true,
@ -361,7 +377,7 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Next unread room or DM"), displayName: _td("Next unread room or DM"),
}, },
"KeyBinding.previousUnreadRoom": { [NavigationAction.SelectPrevUnreadRoom]: {
default: { default: {
shiftKey: true, shiftKey: true,
altKey: true, altKey: true,
@ -369,39 +385,39 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Previous unread room or DM"), displayName: _td("Previous unread room or DM"),
}, },
"KeyBinding.nextRoom": { [NavigationAction.SelectNextRoom]: {
default: { default: {
altKey: true, altKey: true,
key: Key.ARROW_UP, key: Key.ARROW_UP,
}, },
displayName: _td("Next room or DM"), displayName: _td("Next room or DM"),
}, },
"KeyBinding.previousRoom": { [NavigationAction.SelectPrevRoom]: {
default: { default: {
altKey: true, altKey: true,
key: Key.ARROW_DOWN, key: Key.ARROW_DOWN,
}, },
displayName: _td("Previous room or DM"), displayName: _td("Previous room or DM"),
}, },
"KeyBinding.cancelAutoComplete": { [AutocompleteAction.Cancel]: {
default: { default: {
key: Key.ESCAPE, key: Key.ESCAPE,
}, },
displayName: _td("Cancel autocomplete"), displayName: _td("Cancel autocomplete"),
}, },
"KeyBinding.nextOptionInAutoComplete": { [AutocompleteAction.NextSelection]: {
default: { default: {
key: Key.ARROW_UP, key: Key.ARROW_UP,
}, },
displayName: _td("Next autocomplete suggestion"), displayName: _td("Next autocomplete suggestion"),
}, },
"KeyBinding.previousOptionInAutoComplete": { [AutocompleteAction.PrevSelection]: {
default: { default: {
key: Key.ARROW_DOWN, key: Key.ARROW_DOWN,
}, },
displayName: _td("Previous autocomplete suggestion"), displayName: _td("Previous autocomplete suggestion"),
}, },
"KeyBinding.toggleSpacePanel": { [NavigationAction.ToggleSpacePanel]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
shiftKey: true, shiftKey: true,
@ -409,7 +425,7 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Toggle space panel"), displayName: _td("Toggle space panel"),
}, },
"KeyBinding.toggleHiddenEventVisibility": { [LabsAction.ToggleHiddenEventVisibility]: {
default: { default: {
ctrlOrCmdKey: true, ctrlOrCmdKey: true,
shiftKey: true, shiftKey: true,
@ -417,6 +433,70 @@ export const KEYBOARD_SHORTCUTS: { [setting: string]: ISetting } = {
}, },
displayName: _td("Toggle hidden event visibility"), displayName: _td("Toggle hidden event visibility"),
}, },
[RoomAction.JumpToFirstMessage]: {
default: {
key: Key.HOME,
ctrlKey: true,
},
displayName: _td("Jump to first message"),
},
[RoomAction.JumpToOldestUnread]: {
default: {
key: Key.END,
ctrlKey: true,
},
displayName: _td("Jump to last message"),
},
[MessageComposerAction.EditUndo]: {
default: {
key: Key.Z,
ctrlOrCmdKey: true,
},
displayName: _td("Undo edit"),
},
[AutocompleteAction.Complete]: {
default: {
key: Key.ENTER,
},
displayName: _td("Complete"),
},
[AutocompleteAction.ForceComplete]: {
default: {
key: Key.TAB,
},
displayName: _td("Force complete"),
},
};
export const getKeyboardShortcuts = (): IKeyboardShortcuts => {
const keyboardShortcuts = KEYBOARD_SHORTCUTS;
const ctrlEnterToSend = SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
keyboardShortcuts[MessageComposerAction.Send] = {
default: {
key: Key.ENTER,
ctrlOrCmdKey: ctrlEnterToSend,
},
displayName: _td("Send message"),
};
keyboardShortcuts[MessageComposerAction.NewLine] = {
default: {
key: Key.ENTER,
shiftKey: !ctrlEnterToSend,
},
displayName: _td("New line"),
};
keyboardShortcuts[MessageComposerAction.EditRedo] = {
default: {
key: isMac ? Key.Z : Key.Y,
ctrlOrCmdKey: true,
shiftKey: isMac,
},
displayName: _td("Redo edit"),
};
return keyboardShortcuts;
}; };
export const registerShortcut = (shortcutName: string, categoryName: CategoryName, shortcut: ISetting): void => { export const registerShortcut = (shortcutName: string, categoryName: CategoryName, shortcut: ISetting): void => {

15
src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx
View File

@ -18,7 +18,7 @@ limitations under the License.
import React from "react"; import React from "react";
import { import {
KEYBOARD_SHORTCUTS, getKeyboardShortcuts,
ALTERNATE_KEY_NAME, ALTERNATE_KEY_NAME,
KEY_ICON, KEY_ICON,
ICategory, ICategory,
@ -29,6 +29,15 @@ import SdkConfig from "../../../../../SdkConfig";
import { isMac, Key } from "../../../../../Keyboard"; import { isMac, Key } from "../../../../../Keyboard";
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
// TODO: This should return KeyCombo but it has ctrlOrCmd instead of ctrlOrCmdKey
const getKeyboardShortcutValue = (name: string) => {
return getKeyboardShortcuts()[name]?.default;
};
const getKeyboardShortcutDisplayName = (name: string): string => {
return getKeyboardShortcuts()[name]?.displayName as string;
};
interface IKeyboardKeyProps { interface IKeyboardKeyProps {
name: string; name: string;
last?: boolean; last?: boolean;
@ -49,7 +58,7 @@ interface IKeyboardShortcutProps {
} }
export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ name }) => { export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ name }) => {
const value = KEYBOARD_SHORTCUTS[name]?.default; const value = getKeyboardShortcutValue(name);
if (!value) return null; if (!value) return null;
const modifiersElement = []; const modifiersElement = [];
@ -83,7 +92,7 @@ const visibleCategories = Object.entries(CATEGORIES).filter(([categoryName]) =>
const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => { const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
return <div className="mx_KeyboardShortcut_shortcutRow"> return <div className="mx_KeyboardShortcut_shortcutRow">
{ KEYBOARD_SHORTCUTS[name].displayName } { getKeyboardShortcutDisplayName(name) }
<KeyboardShortcut name={name} /> <KeyboardShortcut name={name} />
</div>; </div>;
}; };

9
src/i18n/strings/en_EN.json
View File

@ -3379,7 +3379,6 @@
"Toggle Bold": "Toggle Bold", "Toggle Bold": "Toggle Bold",
"Toggle Italics": "Toggle Italics", "Toggle Italics": "Toggle Italics",
"Toggle Quote": "Toggle Quote", "Toggle Quote": "Toggle Quote",
"New line": "New line",
"Cancel replying to a message": "Cancel replying to a message", "Cancel replying to a message": "Cancel replying to a message",
"Navigate to next message to edit": "Navigate to next message to edit", "Navigate to next message to edit": "Navigate to next message to edit",
"Navigate to previous message to edit": "Navigate to previous message to edit", "Navigate to previous message to edit": "Navigate to previous message to edit",
@ -3416,5 +3415,11 @@
"Next autocomplete suggestion": "Next autocomplete suggestion", "Next autocomplete suggestion": "Next autocomplete suggestion",
"Previous autocomplete suggestion": "Previous autocomplete suggestion", "Previous autocomplete suggestion": "Previous autocomplete suggestion",
"Toggle space panel": "Toggle space panel", "Toggle space panel": "Toggle space panel",
"Toggle hidden event visibility": "Toggle hidden event visibility" "Toggle hidden event visibility": "Toggle hidden event visibility",
"Jump to first message": "Jump to first message",
"Jump to last message": "Jump to last message",
"Undo edit": "Undo edit",
"Force complete": "Force complete",
"New line": "New line",
"Redo edit": "Redo edit"
} }

4
test/accessibility/KeyboardShortcuts-test.ts
View File

@ -17,7 +17,7 @@ limitations under the License.
import { import {
CATEGORIES, CATEGORIES,
CategoryName, CategoryName,
KEYBOARD_SHORTCUTS, getKeyboardShortcuts,
registerShortcut, registerShortcut,
} from "../../src/accessibility/KeyboardShortcuts"; } from "../../src/accessibility/KeyboardShortcuts";
import { Key } from "../../src/Keyboard"; import { Key } from "../../src/Keyboard";
@ -38,7 +38,7 @@ describe("KeyboardShortcuts", () => {
registerShortcut(shortcutName, shortcutCategory, shortcut); registerShortcut(shortcutName, shortcutCategory, shortcut);
expect(KEYBOARD_SHORTCUTS[shortcutName]).toBe(shortcut); expect(getKeyboardShortcuts()[shortcutName]).toBe(shortcut);
expect(CATEGORIES[shortcutCategory].settingNames.includes(shortcutName)).toBeTruthy(); expect(CATEGORIES[shortcutCategory].settingNames.includes(shortcutName)).toBeTruthy();
}); });
}); });

12
test/components/views/settings/tabs/user/KeyboardUserSettingsTab-test.tsx
View File

@ -60,7 +60,7 @@ describe("KeyboardUserSettingsTab", () => {
it("doesn't render same modifier twice", async () => { it("doesn't render same modifier twice", async () => {
mockKeyboardShortcuts({ mockKeyboardShortcuts({
"KEYBOARD_SHORTCUTS": { "getKeyboardShortcuts": () => ({
"keybind1": { "keybind1": {
default: { default: {
key: Key.A, key: Key.A,
@ -69,14 +69,14 @@ describe("KeyboardUserSettingsTab", () => {
}, },
displayName: "Cancel replying to a message", displayName: "Cancel replying to a message",
}, },
}, }),
}); });
const body1 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" }); const body1 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" });
expect(body1).toMatchSnapshot(); expect(body1).toMatchSnapshot();
jest.resetModules(); jest.resetModules();
mockKeyboardShortcuts({ mockKeyboardShortcuts({
"KEYBOARD_SHORTCUTS": { "getKeyboardShortcuts": () => ({
"keybind1": { "keybind1": {
default: { default: {
key: Key.A, key: Key.A,
@ -85,7 +85,7 @@ describe("KeyboardUserSettingsTab", () => {
}, },
displayName: "Cancel replying to a message", displayName: "Cancel replying to a message",
}, },
}, }),
}); });
const body2 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" }); const body2 = await renderKeyboardUserSettingsTab("KeyboardShortcut", { name: "keybind1" });
expect(body2).toMatchSnapshot(); expect(body2).toMatchSnapshot();
@ -94,7 +94,7 @@ describe("KeyboardUserSettingsTab", () => {
it("renders list of keyboard shortcuts", async () => { it("renders list of keyboard shortcuts", async () => {
mockKeyboardShortcuts({ mockKeyboardShortcuts({
"KEYBOARD_SHORTCUTS": { "getKeyboardShortcuts": () => ({
"keybind1": { "keybind1": {
default: { default: {
key: Key.A, key: Key.A,
@ -115,7 +115,7 @@ describe("KeyboardUserSettingsTab", () => {
}, },
displayName: "Select room from the room list", displayName: "Select room from the room list",
}, },
}, }),
"CATEGORIES": { "CATEGORIES": {
"Composer": { "Composer": {
settingNames: ["keybind1", "keybind2"], settingNames: ["keybind1", "keybind2"],