github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-26 03:33:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix editor being filled with €-symbols when pressing the editor-mode-shortcut (#493)

Browse source 
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.
This commit is contained in:
Erik Michelson 2020-08-27 14:32:06 +02:00 committed by GitHub
parent 7f04db9389
commit db080e29d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/editor/editor.tsx
View file

@ -66,9 +66,9 @@ export const Editor: React.FC = () => {
}, [updateDocumentTitle]) }, [updateDocumentTitle])
useEffect(() => { useEffect(() => {
document.addEventListener('keyup', shortcutHandler, false) document.addEventListener('keydown', shortcutHandler, false)
return () => { return () => {
document.removeEventListener('keyup', shortcutHandler, false) document.removeEventListener('keydown', shortcutHandler, false)
} }
}, []) }, [])

5
src/components/editor/shortcut/shortcut.ts
View file

@ -4,13 +4,16 @@ import { EditorMode } from '../app-bar/editor-view-mode'
export const shortcutHandler = (event: KeyboardEvent): void => { export const shortcutHandler = (event: KeyboardEvent): void => {
if (event.ctrlKey && event.altKey && event.key === 'b') { if (event.ctrlKey && event.altKey && event.key === 'b') {
setEditorMode(EditorMode.BOTH) setEditorMode(EditorMode.BOTH)
event.preventDefault()
} }
if (event.ctrlKey && event.altKey && event.key === 'v') { if (event.ctrlKey && event.altKey && event.key === 'v') {
setEditorMode(EditorMode.PREVIEW) 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) setEditorMode(EditorMode.EDITOR)
event.preventDefault()
} }
} }