Keyboard shortcut to open the sticker picker (#7985)

src/Keyboard.ts

@@ -45,6 +45,7 @@ export const Key = {
     SLASH: "/",
     SQUARE_BRACKET_LEFT: "[",
     SQUARE_BRACKET_RIGHT: "]",
+    SEMICOLON: ";",
     A: "a",
     B: "b",
     C: "c",

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<CategoryName, ICategory> = {
             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,

src/components/views/rooms/MessageComposer.tsx

@@ -341,6 +341,10 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         });
     };
 
+    private toggleStickerPickerOpen = () => {
+        this.setStickerPickerOpen(!this.state.isStickerPickerOpen);
+    };
+
     private toggleButtonMenu = (): void => {
         this.setState({
             isMenuOpen: !this.state.isMenuOpen,
@@ -373,6 +377,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
                     disabled={this.state.haveRecording}
+                    toggleStickerPickerOpen={this.toggleStickerPickerOpen}
                 />,
             );
 

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<ISendMessageComposerPro
                 }
                 break;
             }
+            case KeyBindingAction.ShowStickerPicker: {
+                if (!SettingsStore.getValue("MessageComposerInput.showStickersButton")) {
+                    return; // Do nothing if there is no Stickers button
+                }
+                this.props.toggleStickerPickerOpen();
+                event.preventDefault();
+                break;
+            }
             case KeyBindingAction.EditPrevMessage:
                 // selection must be collapsed and caret at start
                 if (this.editorRef.current?.isSelectionCollapsed() && this.editorRef.current?.isCaretAtStart()) {

src/i18n/strings/en_EN.json

@@ -3430,6 +3430,7 @@
     "Jump to end of the composer": "Jump to end of the composer",
     "Navigate to next message in composer history": "Navigate to next message in composer history",
     "Navigate to previous message in composer history": "Navigate to previous message in composer history",
+    "Send a sticker": "Send a sticker",
     "Toggle microphone mute": "Toggle microphone mute",
     "Toggle webcam on/off": "Toggle webcam on/off",
     "Dismiss read marker and jump to bottom": "Dismiss read marker and jump to bottom",