monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(frontend): read KeyboardEvent.key instead of which/code (#10083)

Browse source
This commit is contained in:
Kagami Sascha Rosylight 2023-03-01 07:24:09 +01:00 committed by GitHub
parent 830fabef12
commit 6d82371449
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
cypress/e2e/basic.cy.js
View file

@ -112,7 +112,7 @@ describe('After user signup', () => {
}); });
}); });
describe('After user singed in', () => { describe('After user signed in', () => {
beforeEach(() => { beforeEach(() => {
cy.resetState(); cy.resetState();
@ -141,6 +141,19 @@ describe('After user singed in', () => {
cy.get('[data-cy-open-post-form-submit]').click(); cy.get('[data-cy-open-post-form-submit]').click();
cy.contains('Hello, Misskey!'); cy.contains('Hello, Misskey!');
});
it('open note form with hotkey', () => {
// Wait until the page loads
cy.get('[data-cy-open-post-form]').should('be.visible');
// Use trigger() to give different `code` to test if hotkeys also work on non-QWERTY keyboards.
cy.document().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "n", code: "KeyL" });
// See if the form is opened
cy.get('[data-cy-post-form-text]').should('be.visible');
// Close it
cy.focused().trigger("keydown", { eventConstructor: 'KeyboardEvent', key: "Escape", code: "Escape" });
// See if the form is closed
cy.get('[data-cy-post-form-text]').should('not.be.visible');
}); });
}); });

4
packages/frontend/src/components/MkPostForm.vue
View file

@ -437,8 +437,8 @@ function clear() {
} }
function onKeydown(ev: KeyboardEvent) { function onKeydown(ev: KeyboardEvent) {
if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post(); if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
if (ev.which === 27) emit('esc'); if (ev.key === 'Escape') emit('esc');
} }
function onCompositionUpdate(ev: CompositionEvent) { function onCompositionUpdate(ev: CompositionEvent) {

6
packages/frontend/src/scripts/hotkey.ts
View file

@ -53,10 +53,10 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
return result; return result;
}); });
const ignoreElemens = ['input', 'textarea']; const ignoreElements = ['input', 'textarea'];
function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean { function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
const key = ev.code.toLowerCase(); const key = ev.key.toLowerCase();
return patterns.some(pattern => pattern.which.includes(key) && return patterns.some(pattern => pattern.which.includes(key) &&
pattern.ctrl === ev.ctrlKey && pattern.ctrl === ev.ctrlKey &&
pattern.shift === ev.shiftKey && pattern.shift === ev.shiftKey &&
@ -70,7 +70,7 @@ export const makeHotkey = (keymap: Keymap) => {
return (ev: KeyboardEvent) => { return (ev: KeyboardEvent) => {
if (document.activeElement) { if (document.activeElement) {
if (ignoreElemens.some(el => document.activeElement!.matches(el))) return; if (ignoreElements.some(el => document.activeElement!.matches(el))) return;
if (document.activeElement.attributes['contenteditable']) return; if (document.activeElement.attributes['contenteditable']) return;
} }

15
packages/frontend/src/scripts/keycode.ts
View file

@ -16,18 +16,3 @@ export const aliases = {
'right': 'ArrowRight', 'right': 'ArrowRight',
'plus': ['NumpadAdd', 'Semicolon'], 'plus': ['NumpadAdd', 'Semicolon'],
}; };
/*!
* Programmatically add the following
*/
// lower case chars
for (let i = 97; i < 123; i++) {
const char = String.fromCharCode(i);
aliases[char] = `Key${char.toUpperCase()}`;
}
// numbers
for (let i = 0; i < 10; i++) {
aliases[i] = [`Numpad${i}`, `Digit${i}`];
}