Keyboard shortcut to open the sticker picker

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

@@ -331,6 +331,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,
@@ -363,6 +367,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

@@ -3427,6 +3427,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",