[staging] Fix keyboard shortcuts on Edge and non-English layouts (#2334)

* change all codes to keys * lowercase key because Edge
Automattic · Sep 14, 2020 · adea08e · adea08e
1 parent b544848
commit adea08e
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 24 deletions.
diff --git a/lib/app-layout/index.tsx b/lib/app-layout/index.tsx
@@ -65,11 +65,12 @@ export class AppLayout extends Component<Props> {
       keyboardShortcutsAreOpen,
       showKeyboardShortcuts,
     } = this.props;
-    const { ctrlKey, code, metaKey } = event;
+    const { ctrlKey, metaKey } = event;
+    const key = event.key.toLowerCase();
 
     const cmdOrCtrl = ctrlKey || metaKey;
 
-    if (cmdOrCtrl && code === 'Slash') {
+    if (cmdOrCtrl && key === '/') {
       keyboardShortcutsAreOpen
         ? hideKeyboardShortcuts()
         : showKeyboardShortcuts();

diff --git a/lib/app.tsx b/lib/app.tsx
@@ -77,13 +77,14 @@ class AppComponent extends Component<Props> {
     if (!hotkeysEnabled) {
       return;
     }
-    const { code, ctrlKey, metaKey, shiftKey } = event;
+    const { ctrlKey, metaKey, shiftKey } = event;
+    const key = event.key.toLowerCase();
 
     // Is either cmd or ctrl pressed? (But not both)
     const cmdOrCtrl = (ctrlKey || metaKey) && ctrlKey !== metaKey;
 
     // open tag list
-    if (cmdOrCtrl && shiftKey && 'KeyU' === code) {
+    if (cmdOrCtrl && shiftKey && 'u' === key) {
       this.props.toggleTagList();
 
       event.stopPropagation();
@@ -92,8 +93,8 @@ class AppComponent extends Component<Props> {
     }
 
     if (
-      (cmdOrCtrl && shiftKey && 'KeyS' === code) ||
-      (cmdOrCtrl && !shiftKey && 'KeyF' === code)
+      (cmdOrCtrl && shiftKey && 's' === key) ||
+      (cmdOrCtrl && !shiftKey && 'f' === key)
     ) {
       this.props.focusSearchField();
 
@@ -102,19 +103,19 @@ class AppComponent extends Component<Props> {
       return false;
     }
 
-    if (('Escape' === code || 'Esc' === code) && this.props.isSearchActive) {
+    if (('Escape' === key || 'Esc' === key) && this.props.isSearchActive) {
       this.props.clearSearch();
     }
 
-    if (cmdOrCtrl && shiftKey && 'KeyF' === code) {
+    if (cmdOrCtrl && shiftKey && 'f' === key) {
       this.props.toggleFocusMode();
 
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
-    if (cmdOrCtrl && shiftKey && 'KeyI' === code) {
+    if (cmdOrCtrl && shiftKey && 'i' === key) {
       this.props.createNote();
 
       event.stopPropagation();
@@ -123,7 +124,7 @@ class AppComponent extends Component<Props> {
     }
 
     // prevent default browser behavior for search and find
-    if (cmdOrCtrl && ('KeyG' === code || 'KeyF' === code)) {
+    if (cmdOrCtrl && ('g' === key || 'f' === key)) {
       event.stopPropagation();
       event.preventDefault();
     }

diff --git a/lib/note-content-editor.tsx b/lib/note-content-editor.tsx
@@ -164,17 +164,18 @@ class NoteContentEditor extends Component<Props> {
   };
 
   handleShortcut = (event: KeyboardEvent) => {
-    const { ctrlKey, code, metaKey, shiftKey } = event;
+    const { ctrlKey, metaKey, shiftKey } = event;
+    const key = event.key.toLowerCase();
 
     const cmdOrCtrl = ctrlKey || metaKey;
-    if (cmdOrCtrl && shiftKey && code === 'KeyG') {
+    if (cmdOrCtrl && shiftKey && key === 'g') {
       this.setPrevSearchSelection();
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
-    if (cmdOrCtrl && !shiftKey && code === 'KeyG') {
+    if (cmdOrCtrl && !shiftKey && key === 'g') {
       this.setNextSearchSelection();
       event.stopPropagation();
       event.preventDefault();

diff --git a/lib/note-editor/index.tsx b/lib/note-editor/index.tsx
@@ -49,13 +49,15 @@ export class NoteEditor extends Component<Props> {
     if (!this.props.keyboardShortcuts) {
       return;
     }
-    const { code, ctrlKey, metaKey, shiftKey } = event;
+
+    const { ctrlKey, metaKey, shiftKey } = event;
+    const key = event.key.toLowerCase();
     const { note, noteId, toggleMarkdown } = this.props;
 
     const cmdOrCtrl = ctrlKey || metaKey;
 
     // toggle Markdown enabled
-    if (note && cmdOrCtrl && shiftKey && 'KeyM' === code) {
+    if (note && cmdOrCtrl && shiftKey && 'm' === key) {
       console.log('toggling markdown');
       toggleMarkdown(noteId, !this.markdownEnabled());
       event.stopPropagation();
@@ -64,15 +66,15 @@ export class NoteEditor extends Component<Props> {
     }
 
     // toggle editor mode
-    if (cmdOrCtrl && shiftKey && 'KeyP' === code && this.markdownEnabled()) {
+    if (cmdOrCtrl && shiftKey && 'p' === key && this.markdownEnabled()) {
       this.props.toggleEditMode();
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
     // toggle between tag editor and note editor
-    if (shiftKey && cmdOrCtrl && 'KeyY' === code && this.props.isEditorActive) {
+    if (shiftKey && cmdOrCtrl && 'y' === key && this.props.isEditorActive) {
       // prefer focusing the edit field first
       if (!this.editFieldHasFocus() || this.props.isSearchActive) {
         this.focusNoteEditor?.();

diff --git a/lib/note-list/index.tsx b/lib/note-list/index.tsx
@@ -216,35 +216,36 @@ export class NoteList extends Component<Props> {
     if (!this.props.keyboardShortcuts) {
       return;
     }
-    const { ctrlKey, code, metaKey, shiftKey } = event;
+    const { ctrlKey, metaKey, shiftKey } = event;
+    const key = event.key.toLowerCase();
     const { isSmallScreen, showNoteList } = this.props;
 
     const cmdOrCtrl = ctrlKey || metaKey;
-    if (cmdOrCtrl && shiftKey && code === 'KeyK') {
+    if (cmdOrCtrl && shiftKey && key === 'k') {
       this.props.selectNoteAbove();
 
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
-    if (cmdOrCtrl && shiftKey && code === 'KeyJ') {
+    if (cmdOrCtrl && shiftKey && key === 'j') {
       this.props.selectNoteBelow();
 
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
-    if (isSmallScreen && cmdOrCtrl && shiftKey && code === 'KeyL') {
+    if (isSmallScreen && cmdOrCtrl && shiftKey && key === 'l') {
       this.props.toggleNoteList();
 
       event.stopPropagation();
       event.preventDefault();
       return false;
     }
 
-    if (isSmallScreen && showNoteList && code === 'Enter') {
+    if (isSmallScreen && showNoteList && key === 'Enter') {
       this.props.openNote();
 
       event.stopPropagation();

diff --git a/lib/tag-field/index.tsx b/lib/tag-field/index.tsx
@@ -154,7 +154,7 @@ export class TagField extends Component<Props, OwnState> {
 
   preventStealingFocus = ({
     ctrlKey,
-    code,
+    key,
     metaKey,
     shiftKey,
   }: KeyboardEvent) => {
@@ -163,7 +163,7 @@ export class TagField extends Component<Props, OwnState> {
     }
     const cmdOrCtrl = ctrlKey || metaKey;
 
-    if (cmdOrCtrl && shiftKey && 'KeyY' === code) {
+    if (cmdOrCtrl && shiftKey && 'y' === key.toLowerCase()) {
       this.setState({ selectedTag: '' as T.TagName });
     }