fix(frontend): read KeyboardEvent.key instead of which/code (#10083)
This commit is contained in:
parent
830fabef12
commit
6d82371449
|
@ -17,7 +17,7 @@ describe('Before setup instance', () => {
|
||||||
cy.visit('/');
|
cy.visit('/');
|
||||||
|
|
||||||
cy.intercept('POST', '/api/admin/accounts/create').as('signup');
|
cy.intercept('POST', '/api/admin/accounts/create').as('signup');
|
||||||
|
|
||||||
cy.get('[data-cy-admin-username] input').type('admin');
|
cy.get('[data-cy-admin-username] input').type('admin');
|
||||||
cy.get('[data-cy-admin-password] input').type('admin1234');
|
cy.get('[data-cy-admin-password] input').type('admin1234');
|
||||||
cy.get('[data-cy-admin-ok]').click();
|
cy.get('[data-cy-admin-ok]').click();
|
||||||
|
@ -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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
@ -489,9 +489,9 @@ function onDragover(ev) {
|
||||||
switch (ev.dataTransfer.effectAllowed) {
|
switch (ev.dataTransfer.effectAllowed) {
|
||||||
case 'all':
|
case 'all':
|
||||||
case 'uninitialized':
|
case 'uninitialized':
|
||||||
case 'copy':
|
case 'copy':
|
||||||
case 'copyLink':
|
case 'copyLink':
|
||||||
case 'copyMove':
|
case 'copyMove':
|
||||||
ev.dataTransfer.dropEffect = 'copy';
|
ev.dataTransfer.dropEffect = 'copy';
|
||||||
break;
|
break;
|
||||||
case 'linkMove':
|
case 'linkMove':
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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}`];
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue