diff --git a/src/Keyboard.ts b/src/Keyboard.ts index 7040898872e..8d7d39fc190 100644 --- a/src/Keyboard.ts +++ b/src/Keyboard.ts @@ -45,6 +45,7 @@ export const Key = { SLASH: "/", SQUARE_BRACKET_LEFT: "[", SQUARE_BRACKET_RIGHT: "]", + SEMICOLON: ";", A: "a", B: "b", C: "c", diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts index c7f4ef68bbd..a2287a74bed 100644 --- a/src/accessibility/KeyboardShortcuts.ts +++ b/src/accessibility/KeyboardShortcuts.ts @@ -35,6 +35,8 @@ export enum KeyBindingAction { EditNextMessage = 'KeyBinding.editNextMessage', /** Cancel editing a message or cancel replying to a message */ CancelReplyOrEdit = 'KeyBinding.cancelReplyInComposer', + /** Show the sticker picker */ + ShowStickerPicker = 'KeyBinding.showStickerPicker', /** Set bold format the current selection */ FormatBold = 'KeyBinding.toggleBoldInComposer', @@ -227,6 +229,7 @@ export const CATEGORIES: Record = { KeyBindingAction.EditPrevMessage, KeyBindingAction.SelectNextSendHistory, KeyBindingAction.SelectPrevSendHistory, + KeyBindingAction.ShowStickerPicker, ], }, [CategoryName.CALLS]: { categoryLabel: _td("Calls"), @@ -392,6 +395,13 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = { }, displayName: _td("Navigate to previous message in composer history"), }, + [KeyBindingAction.ShowStickerPicker]: { + default: { + ctrlOrCmdKey: true, + key: Key.SEMICOLON, + }, + displayName: _td("Send a sticker"), + }, [KeyBindingAction.ToggleMicInCall]: { default: { ctrlOrCmdKey: true, diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 704a4745a87..a3293578e2c 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -331,6 +331,10 @@ export default class MessageComposer extends React.Component { }); }; + private toggleStickerPickerOpen = () => { + this.setStickerPickerOpen(!this.state.isStickerPickerOpen); + }; + private toggleButtonMenu = (): void => { this.setState({ isMenuOpen: !this.state.isMenuOpen, @@ -363,6 +367,7 @@ export default class MessageComposer extends React.Component { replyToEvent={this.props.replyToEvent} onChange={this.onChange} disabled={this.state.haveRecording} + toggleStickerPickerOpen={this.toggleStickerPickerOpen} />, ); diff --git a/src/components/views/rooms/SendMessageComposer.tsx b/src/components/views/rooms/SendMessageComposer.tsx index 4274db9bf5e..d4837c84014 100644 --- a/src/components/views/rooms/SendMessageComposer.tsx +++ b/src/components/views/rooms/SendMessageComposer.tsx @@ -173,6 +173,7 @@ interface ISendMessageComposerProps extends MatrixClientProps { disabled?: boolean; onChange?(model: EditorModel): void; includeReplyLegacyFallback?: boolean; + toggleStickerPickerOpen: () => void; } @replaceableComponent("views.rooms.SendMessageComposer") @@ -237,6 +238,14 @@ export class SendMessageComposer extends React.Component