From db080e29d3b737bc4133e8e6455b53165393ab5e Mon Sep 17 00:00:00 2001 From: Erik Michelson Date: Thu, 27 Aug 2020 14:32:06 +0200 Subject: [PATCH] =?UTF-8?q?Fix=20editor=20being=20filled=20with=20?= =?UTF-8?q?=E2=82=AC-symbols=20when=20pressing=20the=20editor-mode-shortcu?= =?UTF-8?q?t=20(#493)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This fix needs a little bit of explanation. Normally the 'keyUp' prevent is preferred because it fires after being sure, that not some buttons more belong to the shortcut. Additionally some platforms set the key-property of the 'keyDown'-event to the composition result of the key-combination thus resolving under certain environments to '€' while in other environments to 'e'. The browser's event flow is as following: keyDown -> keyPress -> textInput -> keyUp. As the keyUp-event is too late (after textinput) and the keyPress-event does not work properly with the modifiers, we felt compelled to use 'keyDown' and watch for 'e' as well as '€' key-properties. If some other keyboard locale does output different characters than these two, that person got a problem - meaning no functionality of the shortcut. But still better than nothing. --- src/components/editor/editor.tsx | 4 ++-- src/components/editor/shortcut/shortcut.ts | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 39ace8f6e..36fcab04d 100644 --- a/src/components/editor/editor.tsx +++ b/src/components/editor/editor.tsx @@ -66,9 +66,9 @@ export const Editor: React.FC = () => { }, [updateDocumentTitle]) useEffect(() => { - document.addEventListener('keyup', shortcutHandler, false) + document.addEventListener('keydown', shortcutHandler, false) return () => { - document.removeEventListener('keyup', shortcutHandler, false) + document.removeEventListener('keydown', shortcutHandler, false) } }, []) diff --git a/src/components/editor/shortcut/shortcut.ts b/src/components/editor/shortcut/shortcut.ts index b14c1b3b8..853212d5f 100644 --- a/src/components/editor/shortcut/shortcut.ts +++ b/src/components/editor/shortcut/shortcut.ts @@ -4,13 +4,16 @@ import { EditorMode } from '../app-bar/editor-view-mode' export const shortcutHandler = (event: KeyboardEvent): void => { if (event.ctrlKey && event.altKey && event.key === 'b') { setEditorMode(EditorMode.BOTH) + event.preventDefault() } if (event.ctrlKey && event.altKey && event.key === 'v') { setEditorMode(EditorMode.PREVIEW) + event.preventDefault() } - if (event.ctrlKey && event.altKey && event.key === 'e') { + if (event.ctrlKey && event.altKey && (event.key === 'e' || event.key === '€')) { setEditorMode(EditorMode.EDITOR) + event.preventDefault() } }