OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Keybinding code unification #3 (#7850)

pull/21833/head
Šimon Brandner 2022-02-23 10:12:04 +01:00 committed by GitHub
parent b0737b6e31
commit 93a9af7b3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 214 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/BasePlatform.ts
View File

@ -309,6 +309,12 @@ export default abstract class BasePlatform {
return false;
}
public overrideBrowserShortcuts(): boolean {
return false;
}
public navigateForwardBack(back: boolean): void {}
getAvailableSpellCheckLanguages(): Promise<string[]> | null {
return null;
}

7
src/KeyBindingsDefaults.ts
View File

@ -152,7 +152,7 @@ const navigationBindings = (): KeyBinding[] => {
const bindings = getBindingsByCategory(CategoryName.NAVIGATION);
bindings.push({
action: "KeyBinding.closeDialogOrContextMenu" as KeyBindingAction,
action: KeyBindingAction.CloseDialogOrContextMenu,
keyCombo: {
key: Key.ESCAPE,
},
@ -161,6 +161,10 @@ const navigationBindings = (): KeyBinding[] => {
return bindings;
};
const callBindings = (): KeyBinding[] => {
return getBindingsByCategory(CategoryName.CALLS);
};
const labsBindings = (): KeyBinding[] => {
if (!SdkConfig.get()['showLabsSettings']) return [];
@ -173,5 +177,6 @@ export const defaultBindingsProvider: IKeyBindingsProvider = {
getRoomListBindings: roomListBindings,
getRoomBindings: roomBindings,
getNavigationBindings: navigationBindings,
getCallBindings: callBindings,
getLabsBindings: labsBindings,
};

4
src/KeyBindingsManager.ts
View File

@ -155,6 +155,10 @@ export class KeyBindingsManager {
return this.getAction(this.bindingsProviders.map(it => it.getNavigationBindings), ev);
}
getCallAction(ev: KeyboardEvent | React.KeyboardEvent): KeyBindingAction | undefined {
return this.getAction(this.bindingsProviders.map(it => it.getCallBindings), ev);
}
getLabsAction(ev: KeyboardEvent | React.KeyboardEvent): KeyBindingAction | undefined {
return this.getAction(this.bindingsProviders.map(it => it.getLabsBindings), ev);
}

147
src/accessibility/KeyboardShortcuts.ts
View File

@ -20,6 +20,7 @@ import { isMac, Key } from "../Keyboard";
import { IBaseSetting } from "../settings/Settings";
import SettingsStore from "../settings/SettingsStore";
import IncompatibleController from "../settings/controllers/IncompatibleController";
import PlatformPeg from "../PlatformPeg";
export enum KeyBindingAction {
/** Send a message */
@ -115,6 +116,25 @@ export enum KeyBindingAction {
/** Select next room with unread messages */
SelectNextUnreadRoom = 'KeyBinding.nextUnreadRoom',
/** Switches to a space by number */
SwitchToSpaceByNumber = "KeyBinding.switchToSpaceByNumber",
/** Opens user settings */
OpenUserSettings = "KeyBinding.openUserSettings",
/** Navigates backward */
PreviousVisitedRoomOrCommunity = "KeyBinding.previousVisitedRoomOrCommunity",
/** Navigates forward */
NextVisitedRoomOrCommunity = "KeyBinding.nextVisitedRoomOrCommunity",
/** Toggles microphone while on a call */
ToggleMicInCall = "KeyBinding.toggleMicInCall",
/** Toggles webcam while on a call */
ToggleWebcamInCall = "KeyBinding.toggleWebcamInCall",
/** Closes a dialog or a context menu */
CloseDialogOrContextMenu = "KeyBinding.closeDialogOrContextMenu",
/** Clicks the selected button */
ActivateSelectedButton = "KeyBinding.activateSelectedButton",
/** Toggle visibility of hidden events */
ToggleHiddenEventVisibility = 'KeyBinding.toggleHiddenEventVisibility',
}
@ -132,13 +152,13 @@ type KeyboardShortcutSetting = IBaseSetting<KeyBindingConfig>;
type IKeyboardShortcuts = {
// TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager
[k in (KeyBindingAction | string)]: KeyboardShortcutSetting;
[k in (KeyBindingAction)]?: KeyboardShortcutSetting;
};
export interface ICategory {
categoryLabel: string;
// TODO: We should figure out what to do with the keyboard shortcuts that are not handled by KeybindingManager
settingNames: (KeyBindingAction | string)[];
settingNames: (KeyBindingAction)[];
}
export enum CategoryName {
@ -200,8 +220,8 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
}, [CategoryName.CALLS]: {
categoryLabel: _td("Calls"),
settingNames: [
"KeyBinding.toggleMicInCall",
"KeyBinding.toggleWebcamInCall",
KeyBindingAction.ToggleMicInCall,
KeyBindingAction.ToggleWebcamInCall,
],
}, [CategoryName.ROOM]: {
categoryLabel: _td("Room"),
@ -229,8 +249,8 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
categoryLabel: _td("Navigation"),
settingNames: [
KeyBindingAction.ToggleUserMenu,
"KeyBinding.closeDialogOrContextMenu",
"KeyBinding.activateSelectedButton",
KeyBindingAction.CloseDialogOrContextMenu,
KeyBindingAction.ActivateSelectedButton,
KeyBindingAction.ToggleRoomSidePanel,
KeyBindingAction.ToggleSpacePanel,
KeyBindingAction.ShowKeyboardSettings,
@ -240,6 +260,10 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
KeyBindingAction.SelectPrevUnreadRoom,
KeyBindingAction.SelectNextRoom,
KeyBindingAction.SelectPrevRoom,
KeyBindingAction.OpenUserSettings,
KeyBindingAction.SwitchToSpaceByNumber,
KeyBindingAction.PreviousVisitedRoomOrCommunity,
KeyBindingAction.NextVisitedRoomOrCommunity,
],
}, [CategoryName.AUTOCOMPLETE]: {
categoryLabel: _td("Autocomplete"),
@ -258,6 +282,17 @@ export const CATEGORIES: Record<CategoryName, ICategory> = {
},
};
const DESKTOP_SHORTCUTS = [
KeyBindingAction.OpenUserSettings,
KeyBindingAction.SwitchToSpaceByNumber,
KeyBindingAction.PreviousVisitedRoomOrCommunity,
KeyBindingAction.NextVisitedRoomOrCommunity,
];
const MAC_ONLY_SHORTCUTS = [
KeyBindingAction.OpenUserSettings,
];
// This is very intentionally modelled after SETTINGS as it will make it easier
// to implement customizable keyboard shortcuts
// TODO: TravisR will fix this nightmare when the new version of the SettingsStore becomes a thing
@ -332,14 +367,14 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
},
displayName: _td("Navigate to previous message in composer history"),
},
"KeyBinding.toggleMicInCall": {
[KeyBindingAction.ToggleMicInCall]: {
default: {
ctrlOrCmdKey: true,
key: Key.D,
},
displayName: _td("Toggle microphone mute"),
},
"KeyBinding.toggleWebcamInCall": {
[KeyBindingAction.ToggleWebcamInCall]: {
default: {
ctrlOrCmdKey: true,
key: Key.E,
@ -538,13 +573,51 @@ export const KEYBOARD_SHORTCUTS: IKeyboardShortcuts = {
},
displayName: _td("Undo edit"),
},
[KeyBindingAction.EditRedo]: {
default: {
key: isMac ? Key.Z : Key.Y,
ctrlOrCmdKey: true,
shiftKey: isMac,
},
displayName: _td("Redo edit"),
},
[KeyBindingAction.PreviousVisitedRoomOrCommunity]: {
default: {
metaKey: isMac,
altKey: !isMac,
key: isMac ? Key.SQUARE_BRACKET_LEFT : Key.ARROW_LEFT,
},
displayName: _td("Previous recently visited room or community"),
},
[KeyBindingAction.NextVisitedRoomOrCommunity]: {
default: {
metaKey: isMac,
altKey: !isMac,
key: isMac ? Key.SQUARE_BRACKET_RIGHT : Key.ARROW_RIGHT,
},
displayName: _td("Next recently visited room or community"),
},
[KeyBindingAction.SwitchToSpaceByNumber]: {
default: {
ctrlOrCmdKey: true,
key: DIGITS,
},
displayName: _td("Switch to space by number"),
},
[KeyBindingAction.OpenUserSettings]: {
default: {
metaKey: true,
key: Key.COMMA,
},
displayName: _td("Open user settings"),
},
};
// XXX: These have to be manually mirrored in KeyBindingDefaults
const getNonCustomizableShortcuts = (): IKeyboardShortcuts => {
const ctrlEnterToSend = SettingsStore.getValue('MessageComposerInput.ctrlEnterToSend');
return {
const keyboardShortcuts: IKeyboardShortcuts = {
[KeyBindingAction.SendMessage]: {
default: {
key: Key.ENTER,
@ -578,39 +651,46 @@ const getNonCustomizableShortcuts = (): IKeyboardShortcuts => {
},
displayName: _td("Search (must be enabled)"),
},
"KeyBinding.closeDialogOrContextMenu": {
[KeyBindingAction.CloseDialogOrContextMenu]: {
default: {
key: Key.ESCAPE,
},
displayName: _td("Close dialog or context menu"),
},
"KeyBinding.activateSelectedButton": {
[KeyBindingAction.ActivateSelectedButton]: {
default: {
key: Key.ENTER,
},
displayName: _td("Activate selected button"),
},
};
if (PlatformPeg.get().overrideBrowserShortcuts()) {
keyboardShortcuts[KeyBindingAction.SwitchToSpaceByNumber] = {
default: {
ctrlOrCmdKey: true,
key: DIGITS,
},
displayName: _td("Switch to space by number"),
};
}
return keyboardShortcuts;
};
export const getCustomizableShortcuts = (): IKeyboardShortcuts => {
const keyboardShortcuts = Object.assign({}, KEYBOARD_SHORTCUTS);
const overrideBrowserShortcuts = PlatformPeg.get().overrideBrowserShortcuts();
keyboardShortcuts[KeyBindingAction.EditRedo] = {
default: {
key: isMac ? Key.Z : Key.Y,
ctrlOrCmdKey: true,
shiftKey: isMac,
},
displayName: _td("Redo edit"),
};
return Object.keys(KEYBOARD_SHORTCUTS).filter((k: KeyBindingAction) => {
if (KEYBOARD_SHORTCUTS[k]?.controller?.settingDisabled) return false;
if (MAC_ONLY_SHORTCUTS.includes(k) && !isMac) return false;
if (DESKTOP_SHORTCUTS.includes(k) && !overrideBrowserShortcuts) return false;
return Object.keys(keyboardShortcuts).filter(k => {
return !keyboardShortcuts[k].controller?.settingDisabled;
return true;
}).reduce((o, key) => {
o[key] = keyboardShortcuts[key];
o[key] = KEYBOARD_SHORTCUTS[key];
return o;
}, {});
}, {} as IKeyboardShortcuts);
};
export const getKeyboardShortcuts = (): IKeyboardShortcuts => {
@ -622,14 +702,15 @@ export const getKeyboardShortcuts = (): IKeyboardShortcuts => {
return entries.reduce((acc, [key, value]) => {
acc[key] = value;
return acc;
}, {});
}, {} as IKeyboardShortcuts);
};
export const registerShortcut = (
shortcutName: string,
categoryName: CategoryName,
shortcut: KeyboardShortcutSetting,
): void => {
KEYBOARD_SHORTCUTS[shortcutName] = shortcut;
CATEGORIES[categoryName].settingNames.push(shortcutName);
};
// For tests
export function mock({ keyboardShortcuts, macOnlyShortcuts, desktopShortcuts }): void {
Object.keys(KEYBOARD_SHORTCUTS).forEach((k) => delete KEYBOARD_SHORTCUTS[k]);
if (keyboardShortcuts) Object.assign(KEYBOARD_SHORTCUTS, keyboardShortcuts);
MAC_ONLY_SHORTCUTS.splice(0, MAC_ONLY_SHORTCUTS.length);
if (macOnlyShortcuts) macOnlyShortcuts.forEach((e) => MAC_ONLY_SHORTCUTS.push(e));
DESKTOP_SHORTCUTS.splice(0, DESKTOP_SHORTCUTS.length);
if (desktopShortcuts) desktopShortcuts.forEach((e) => DESKTOP_SHORTCUTS.push(e));
}

32
src/components/structures/LoggedInView.tsx
View File

@ -23,7 +23,7 @@ import { ISyncStateData, SyncState } from 'matrix-js-sdk/src/sync';
import { IUsageLimit } from 'matrix-js-sdk/src/@types/partials';
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Key } from '../../Keyboard';
import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../Keyboard';
import PageTypes from '../../PageTypes';
import MediaDeviceHandler from '../../MediaDeviceHandler';
import { fixupColorFonts } from '../../utils/FontManager';
@ -73,6 +73,7 @@ import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
import RightPanelStore from '../../stores/right-panel/RightPanelStore';
import { TimelineRenderingType } from "../../contexts/RoomContext";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
@ -535,9 +536,14 @@ class LoggedInView extends React.Component<IProps, IState> {
unread: true,
});
break;
default:
// if we do not have a handler for it, pass it to the platform which might
handled = PlatformPeg.get().onKeyDown(ev);
case KeyBindingAction.PreviousVisitedRoomOrCommunity:
PlatformPeg.get().navigateForwardBack(true);
handled = true;
break;
case KeyBindingAction.NextVisitedRoomOrCommunity:
PlatformPeg.get().navigateForwardBack(false);
handled = true;
break;
}
// Handle labs actions here, as they apply within the same scope
@ -560,12 +566,24 @@ class LoggedInView extends React.Component<IProps, IState> {
handled = true;
break;
}
default:
// if we do not have a handler for it, pass it to the platform which might
handled = PlatformPeg.get().onKeyDown(ev);
}
}
if (
!handled &&
PlatformPeg.get().overrideBrowserShortcuts() &&
SpaceStore.spacesEnabled &&
ev.code.startsWith("Digit") &&
ev.code !== "Digit0" && // this is the shortcut for reset zoom, don't override it
isOnlyCtrlOrCmdKeyEvent(ev)
) {
dis.dispatch<SwitchSpacePayload>({
action: Action.SwitchSpace,
num: ev.code.slice(5), // Cut off the first 5 characters - "Digit"
});
handled = true;
}
if (handled) {
ev.stopPropagation();
ev.preventDefault();

31
src/components/views/voip/CallView.tsx
View File

@ -29,7 +29,6 @@ import { _t, _td } from '../../../languageHandler';
import VideoFeed from './VideoFeed';
import RoomAvatar from "../avatars/RoomAvatar";
import AccessibleButton from '../elements/AccessibleButton';
import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
import { avatarUrlForMember } from '../../../Avatar';
import { replaceableComponent } from "../../../utils/replaceableComponent";
import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker";
@ -38,6 +37,8 @@ import CallViewSidebar from './CallViewSidebar';
import CallViewHeader from './CallView/CallViewHeader';
import CallViewButtons from "./CallView/CallViewButtons";
import PlatformPeg from "../../../PlatformPeg";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
interface IProps {
// The call for us to display
@ -293,25 +294,21 @@ export default class CallView extends React.Component<IProps, IState> {
// CallHandler would probably be a better place for this
private onNativeKeyDown = (ev): void => {
let handled = false;
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
switch (ev.key) {
case Key.D:
if (ctrlCmdOnly) {
this.onMicMuteClick();
// show the controls to give feedback
this.buttonsRef.current?.showControls();
handled = true;
}
const callAction = getKeyBindingsManager().getCallAction(ev);
switch (callAction) {
case KeyBindingAction.ToggleMicInCall:
this.onMicMuteClick();
// show the controls to give feedback
this.buttonsRef.current?.showControls();
handled = true;
break;
case Key.E:
if (ctrlCmdOnly) {
this.onVidMuteClick();
// show the controls to give feedback
this.buttonsRef.current?.showControls();
handled = true;
}
case KeyBindingAction.ToggleWebcamInCall:
this.onVidMuteClick();
// show the controls to give feedback
this.buttonsRef.current?.showControls();
handled = true;
break;
}

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

@ -3442,10 +3442,14 @@
"Jump to first message": "Jump to first message",
"Jump to last message": "Jump to last message",
"Undo edit": "Undo edit",
"Redo edit": "Redo edit",
"Previous recently visited room or community": "Previous recently visited room or community",
"Next recently visited room or community": "Next recently visited room or community",
"Switch to space by number": "Switch to space by number",
"Open user settings": "Open user settings",
"New line": "New line",
"Force complete": "Force complete",
"Search (must be enabled)": "Search (must be enabled)",
"Close dialog or context menu": "Close dialog or context menu",
"Activate selected button": "Activate selected button",
"Redo edit": "Redo edit"
"Activate selected button": "Activate selected button"
}

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

@ -15,18 +15,24 @@ limitations under the License.
*/
import {
CATEGORIES,
CategoryName,
getCustomizableShortcuts,
getKeyboardShortcuts,
KEYBOARD_SHORTCUTS,
registerShortcut,
mock,
} from "../../src/accessibility/KeyboardShortcuts";
import { Key } from "../../src/Keyboard";
import { ISetting } from "../../src/settings/Settings";
import PlatformPeg from "../../src/PlatformPeg";
describe("KeyboardShortcuts", () => {
it("doesn't change KEYBOARD_SHORTCUTS when getting shortcuts", () => {
it("doesn't change KEYBOARD_SHORTCUTS when getting shortcuts", async () => {
mock({
keyboardShortcuts: {
"Keybind1": {},
"Keybind2": {},
},
macOnlyShortcuts: ["Keybind1"],
desktopShortcuts: ["Keybind2"],
});
PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
const copyKeyboardShortcuts = Object.assign({}, KEYBOARD_SHORTCUTS);
getCustomizableShortcuts();
@ -35,22 +41,31 @@ describe("KeyboardShortcuts", () => {
expect(KEYBOARD_SHORTCUTS).toEqual(copyKeyboardShortcuts);
});
describe("registerShortcut()", () => {
it("correctly registers shortcut", () => {
const shortcutName = "Keybinding.definitelyARealShortcut";
const shortcutCategory = CategoryName.NAVIGATION;
const shortcut: ISetting = {
displayName: "A real shortcut",
default: {
ctrlKey: true,
key: Key.A,
},
};
it("correctly filters shortcuts", async () => {
mock({
keyboardShortcuts: {
"Keybind1": {},
"Keybind2": {},
"Keybind3": { "controller": { settingDisabled: true } },
"Keybind4": {},
},
macOnlyShortcuts: ["Keybind1"],
desktopShortcuts: ["Keybind2"],
registerShortcut(shortcutName, shortcutCategory, shortcut);
expect(getKeyboardShortcuts()[shortcutName]).toBe(shortcut);
expect(CATEGORIES[shortcutCategory].settingNames.includes(shortcutName)).toBeTruthy();
});
PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
expect(getCustomizableShortcuts()).toEqual({ "Keybind4": {} });
mock({
keyboardShortcuts: {
"Keybind1": {},
"Keybind2": {},
},
macOnlyShortcuts: undefined,
desktopShortcuts: ["Keybind2"],
});
PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => true });
expect(getCustomizableShortcuts()).toEqual({ "Keybind1": {}, "Keybind2": {} });
jest.resetModules();
});
});

3
test/components/views/rooms/SendMessageComposer-test.tsx
View File

@ -37,6 +37,7 @@ import MatrixToPermalinkConstructor from "../../../../src/utils/permalinks/Matri
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
import DocumentOffset from '../../../../src/editor/offset';
import { Layout } from '../../../../src/settings/enums/Layout';
import PlatformPeg from "../../../../src/PlatformPeg";
describe('<SendMessageComposer/>', () => {
const roomContext = {
@ -253,6 +254,8 @@ describe('<SendMessageComposer/>', () => {
});
it("persists to session history upon sending", async () => {
PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={roomContext}>