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

cypress/e2e/basic.cy.js

@@ -17,7 +17,7 @@ describe('Before setup instance', () => {
     cy.visit('/');
 
 		cy.intercept('POST', '/api/admin/accounts/create').as('signup');
-	
+
 		cy.get('[data-cy-admin-username] input').type('admin');
 		cy.get('[data-cy-admin-password] input').type('admin1234');
 		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(() => {
 		cy.resetState();
 
@@ -141,6 +141,19 @@ describe('After user singed in', () => {
 		cy.get('[data-cy-open-post-form-submit]').click();
 
 		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');
   });
 });
 

packages/frontend/src/components/MkPostForm.vue

@@ -437,8 +437,8 @@ function clear() {
 }
 
 function onKeydown(ev: KeyboardEvent) {
-	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.which === 27) emit('esc');
+	if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey) && canPost) post();
+	if (ev.key === 'Escape') emit('esc');
 }
 
 function onCompositionUpdate(ev: CompositionEvent) {
@@ -489,9 +489,9 @@ function onDragover(ev) {
 		switch (ev.dataTransfer.effectAllowed) {
 			case 'all':
 			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
+			case 'copy':
+			case 'copyLink':
+			case 'copyMove':
 				ev.dataTransfer.dropEffect = 'copy';
 				break;
 			case 'linkMove':

packages/frontend/src/scripts/hotkey.ts

@@ -53,10 +53,10 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 	return result;
 });
 
-const ignoreElemens = ['input', 'textarea'];
+const ignoreElements = ['input', 'textarea'];
 
 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) &&
 		pattern.ctrl === ev.ctrlKey &&
 		pattern.shift === ev.shiftKey &&
@@ -70,7 +70,7 @@ export const makeHotkey = (keymap: Keymap) => {
 
 	return (ev: KeyboardEvent) => {
 		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;
 		}
 

packages/frontend/src/scripts/keycode.ts

@@ -16,18 +16,3 @@ export const aliases = {
 	'right': 'ArrowRight',
 	'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}`];
-}