diff --git a/src/Keyboard.js b/src/Keyboard.js index 5e350bcad5..738da478e4 100644 --- a/src/Keyboard.js +++ b/src/Keyboard.js @@ -63,15 +63,29 @@ export const KeyCode = { export const Key = { HOME: "Home", - End: "End", + END: "End", PAGE_UP: "PageUp", PAGE_DOWN: "PageDown", BACKSPACE: "Backspace", + ARROW_UP: "ArrowUp", + ARROW_DOWN: "ArrowDown", + TAB: "Tab", + ESCAPE: "Escape", + ENTER: "Enter", + ALT: "Alt", + CONTROL: "Control", + META: "Meta", + SHIFT: "Shift", + + LESS_THAN: "<", + GREATER_THAN: ">", BACKTICK: "`", SPACE: " ", - ENTER: "Enter", - + B: "b", + I: "i", K: "k", + Y: "y", + Z: "z", }; export function isOnlyCtrlOrCmdKeyEvent(ev) { diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js index ce3d27c2f7..8449839f85 100644 --- a/src/components/structures/LoggedInView.js +++ b/src/components/structures/LoggedInView.js @@ -351,7 +351,7 @@ const LoggedInView = createReactClass({ let handled = false; const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev); const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey || - ev.key === "Alt" || ev.key === "Control" || ev.key === "Meta" || ev.key === "Shift"; + ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT; switch (ev.key) { case Key.PAGE_UP: diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js index 026c60235a..6a73d22708 100644 --- a/src/components/views/dialogs/CreateRoomDialog.js +++ b/src/components/views/dialogs/CreateRoomDialog.js @@ -22,6 +22,7 @@ import SdkConfig from '../../../SdkConfig'; import withValidation from '../elements/Validation'; import { _t } from '../../../languageHandler'; import MatrixClientPeg from '../../../MatrixClientPeg'; +import {Key} from "../../../Keyboard"; export default createReactClass({ displayName: 'CreateRoomDialog', @@ -74,7 +75,7 @@ export default createReactClass({ }, _onKeyDown: function(event) { - if (event.key === "Enter") { + if (event.key === Key.ENTER) { this.onOk(); event.preventDefault(); event.stopPropagation(); diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js index 172a3ed9ea..300e6b7f18 100644 --- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js +++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js @@ -23,6 +23,7 @@ import Modal from '../../../../Modal'; import { MatrixClient } from 'matrix-js-sdk'; import { _t } from '../../../../languageHandler'; +import {Key} from "../../../../Keyboard"; const RESTORE_TYPE_PASSPHRASE = 0; const RESTORE_TYPE_RECOVERYKEY = 1; @@ -136,13 +137,13 @@ export default createReactClass({ }, _onPassPhraseKeyPress: function(e) { - if (e.key === "Enter") { + if (e.key === Key.ENTER) { this._onPassPhraseNext(); } }, _onRecoveryKeyKeyPress: function(e) { - if (e.key === "Enter" && this.state.recoveryKeyValid) { + if (e.key === Key.ENTER && this.state.recoveryKeyValid) { this._onRecoveryKeyNext(); } }, diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js index 0f5c4a2192..dee6f68a44 100644 --- a/src/components/views/elements/EditableText.js +++ b/src/components/views/elements/EditableText.js @@ -18,6 +18,7 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; import createReactClass from 'create-react-class'; +import {Key} from "../../../Keyboard"; module.exports = createReactClass({ displayName: 'EditableText', @@ -133,7 +134,7 @@ module.exports = createReactClass({ this.showPlaceholder(false); } - if (ev.key === "Enter") { + if (ev.key === Key.ENTER) { ev.stopPropagation(); ev.preventDefault(); } @@ -150,9 +151,9 @@ module.exports = createReactClass({ this.value = ev.target.textContent; } - if (ev.key === "Enter") { + if (ev.key === Key.ENTER) { this.onFinish(ev); - } else if (ev.key === "Escape") { + } else if (ev.key === Key.ESCAPE) { this.cancelEdit(); } @@ -184,7 +185,7 @@ module.exports = createReactClass({ onFinish: function(ev, shouldSubmit) { const self = this; - const submit = (ev.key === "Enter") || shouldSubmit; + const submit = (ev.key === Key.ENTER) || shouldSubmit; this.setState({ phase: this.Phases.Display, }, () => { diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index c56a5d8502..5bc8eeba58 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -20,6 +20,7 @@ import createReactClass from 'create-react-class'; import * as Roles from '../../../Roles'; import { _t } from '../../../languageHandler'; import Field from "./Field"; +import {Key} from "../../../Keyboard"; module.exports = createReactClass({ displayName: 'PowerSelector', @@ -113,7 +114,7 @@ module.exports = createReactClass({ }, onCustomKeyDown: function(event) { - if (event.key === "Enter") { + if (event.key === Key.ENTER) { event.preventDefault(); event.stopPropagation(); diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index 92c2ae29e6..b16a09b4f9 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -38,6 +38,7 @@ import EMOJIBASE from 'emojibase-data/en/compact.json'; import SettingsStore from "../../../settings/SettingsStore"; import EMOTICON_REGEX from 'emojibase-regex/emoticon'; import sdk from '../../../index'; +import {Key} from "../../../Keyboard"; const REGEX_EMOTICON_WHITESPACE = new RegExp('(?:^|\\s)(' + EMOTICON_REGEX.source + ')\\s$'); @@ -313,19 +314,19 @@ export default class BasicMessageEditor extends React.Component { const modKey = IS_MAC ? event.metaKey : event.ctrlKey; let handled = false; // format bold - if (modKey && event.key === "b") { + if (modKey && event.key === Key.B) { this._onFormatAction("bold"); handled = true; // format italics - } else if (modKey && event.key === "i") { + } else if (modKey && event.key === Key.I) { this._onFormatAction("italics"); handled = true; // format quote - } else if (modKey && event.key === ">") { + } else if (modKey && event.key === Key.GREATER_THAN) { this._onFormatAction("quote"); handled = true; // undo - } else if (modKey && event.key === "z") { + } else if (modKey && event.key === Key.Z) { if (this.historyManager.canUndo()) { const {parts, caret} = this.historyManager.undo(this.props.model); // pass matching inputType so historyManager doesn't push echo @@ -334,7 +335,7 @@ export default class BasicMessageEditor extends React.Component { } handled = true; // redo - } else if (modKey && event.key === "y") { + } else if (modKey && event.key === Key.Y) { if (this.historyManager.canRedo()) { const {parts, caret} = this.historyManager.redo(); // pass matching inputType so historyManager doesn't push echo @@ -343,7 +344,7 @@ export default class BasicMessageEditor extends React.Component { } handled = true; // insert newline on Shift+Enter - } else if (event.key === "Enter" && (event.shiftKey || (IS_MAC && event.altKey))) { + } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) { this._insertText("\n"); handled = true; // autocomplete or enter to send below shouldn't have any modifier keys pressed. @@ -353,25 +354,25 @@ export default class BasicMessageEditor extends React.Component { if (model.autoComplete && model.autoComplete.hasCompletions()) { const autoComplete = model.autoComplete; switch (event.key) { - case "ArrowUp": + case Key.ARROW_UP: if (!modifierPressed) { autoComplete.onUpArrow(event); handled = true; } break; - case "ArrowDown": + case Key.ARROW_DOWN: if (!modifierPressed) { autoComplete.onDownArrow(event); handled = true; } break; - case "Tab": + case Key.TAB: if (!metaOrAltPressed) { autoComplete.onTab(event); handled = true; } break; - case "Escape": + case Key.ESCAPE: if (!modifierPressed) { autoComplete.onEscape(event); handled = true; @@ -380,7 +381,7 @@ export default class BasicMessageEditor extends React.Component { default: return; // don't preventDefault on anything else } - } else if (event.key === "Tab") { + } else if (event.key === Key.TAB) { this._tabCompleteName(); handled = true; } diff --git a/src/components/views/rooms/EditMessageComposer.js b/src/components/views/rooms/EditMessageComposer.js index 3430e793ac..fce30e6081 100644 --- a/src/components/views/rooms/EditMessageComposer.js +++ b/src/components/views/rooms/EditMessageComposer.js @@ -30,6 +30,7 @@ import {MatrixClient} from 'matrix-js-sdk'; import classNames from 'classnames'; import {EventStatus} from 'matrix-js-sdk'; import BasicMessageComposer from "./BasicMessageComposer"; +import {Key} from "../../../Keyboard"; function _isReply(mxEvent) { const relatesTo = mxEvent.getContent()["m.relates_to"]; @@ -134,12 +135,12 @@ export default class EditMessageComposer extends React.Component { if (event.metaKey || event.altKey || event.shiftKey) { return; } - if (event.key === "Enter") { + if (event.key === Key.ENTER) { this._sendEdit(); event.preventDefault(); - } else if (event.key === "Escape") { + } else if (event.key === Key.ESCAPE) { this._cancelEdit(); - } else if (event.key === "ArrowUp") { + } else if (event.key === Key.ARROW_UP) { if (this._editorRef.isModified() || !this._editorRef.isCaretAtStart()) { return; } @@ -148,7 +149,7 @@ export default class EditMessageComposer extends React.Component { dis.dispatch({action: 'edit_event', event: previousEvent}); event.preventDefault(); } - } else if (event.key === "ArrowDown") { + } else if (event.key === Key.ARROW_DOWN) { if (this._editorRef.isModified() || !this._editorRef.isCaretAtEnd()) { return; } diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 3d81631309..00110ca9ed 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -39,6 +39,7 @@ import sdk from '../../../index'; import Modal from '../../../Modal'; import { _t } from '../../../languageHandler'; import ContentMessages from '../../../ContentMessages'; +import {Key} from "../../../Keyboard"; function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) { const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent); @@ -109,12 +110,12 @@ export default class SendMessageComposer extends React.Component { return; } const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey; - if (event.key === "Enter" && !hasModifier) { + if (event.key === Key.ENTER && !hasModifier) { this._sendMessage(); event.preventDefault(); - } else if (event.key === "ArrowUp") { + } else if (event.key === Key.ARROW_UP) { this.onVerticalArrow(event, true); - } else if (event.key === "ArrowDown") { + } else if (event.key === Key.ARROW_DOWN) { this.onVerticalArrow(event, false); } }