[Lexical] Replace code with key to check KeyboardEvents

packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx

@@ -95,7 +95,10 @@ const formatStep = (step: Step) => {
 };
 
 export function isSelectAll(event: KeyboardEvent): boolean {
-  return event.code === 'KeyA' && (IS_APPLE ? event.metaKey : event.ctrlKey);
+  return (
+    event.key.toLowerCase() === 'a' &&
+    (IS_APPLE ? event.metaKey : event.ctrlKey)
+  );
 }
 
 // stolen from LexicalSelection-test

packages/lexical-playground/src/plugins/TypingPerfPlugin/index.ts

@@ -83,9 +83,9 @@ export default function TypingPerfPlugin(): JSX.Element | null {
     };
 
     const keyDownHandler = function keyDownHandler(event: KeyboardEvent) {
-      const keyCode = event.code;
+      const key = event.key;
 
-      if (keyCode === 'Backspace' || keyCode === 'Enter') {
+      if (key === 'Backspace' || key === 'Enter') {
         measureEventStart();
       }
     };

packages/lexical-selection/src/__tests__/utils/index.ts

@@ -781,8 +781,8 @@ export async function applySelectionInputs(
               new KeyboardEvent('keydown', {
                 bubbles: true,
                 cancelable: true,
-                code: 'KeyZ',
                 ctrlKey: true,
+                key: 'z',
                 keyCode: 90,
               }),
             );
@@ -794,8 +794,8 @@ export async function applySelectionInputs(
               new KeyboardEvent('keydown', {
                 bubbles: true,
                 cancelable: true,
-                code: 'KeyZ',
                 ctrlKey: true,
+                key: 'z',
                 keyCode: 90,
                 shiftKey: true,
               }),

packages/lexical/src/LexicalEvents.ts

@@ -516,7 +516,7 @@ function $canRemoveText(
 
 function isPossiblyAndroidKeyPress(timeStamp: number): boolean {
   return (
-    lastKeyCode === 'Delete' &&
+    lastKeyCode === 'MediaLast' &&
     timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY
   );
 }
@@ -994,101 +994,101 @@ function onCompositionEnd(
 
 function onKeyDown(event: KeyboardEvent, editor: LexicalEditor): void {
   lastKeyDownTimeStamp = event.timeStamp;
-  lastKeyCode = event.code;
+  lastKeyCode = event.key;
   if (editor.isComposing()) {
     return;
   }
 
-  const {code, shiftKey, ctrlKey, metaKey, altKey} = event;
+  const {key, shiftKey, ctrlKey, metaKey, altKey} = event;
 
   if (dispatchCommand(editor, KEY_DOWN_COMMAND, event)) {
     return;
   }
 
-  if (isMoveForward(code, ctrlKey, altKey, metaKey)) {
+  if (isMoveForward(key, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
-  } else if (isMoveToEnd(code, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveToEnd(key, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_END, event);
-  } else if (isMoveBackward(code, ctrlKey, altKey, metaKey)) {
+  } else if (isMoveBackward(key, ctrlKey, altKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_LEFT_COMMAND, event);
-  } else if (isMoveToStart(code, ctrlKey, shiftKey, altKey, metaKey)) {
+  } else if (isMoveToStart(key, ctrlKey, shiftKey, altKey, metaKey)) {
     dispatchCommand(editor, MOVE_TO_START, event);
-  } else if (isMoveUp(code, ctrlKey, metaKey)) {
+  } else if (isMoveUp(key, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_UP_COMMAND, event);
-  } else if (isMoveDown(code, ctrlKey, metaKey)) {
+  } else if (isMoveDown(key, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event);
-  } else if (isLineBreak(code, shiftKey)) {
+  } else if (isLineBreak(key, shiftKey)) {
     isInsertLineBreak = true;
     dispatchCommand(editor, KEY_ENTER_COMMAND, event);
-  } else if (isSpace(code)) {
+  } else if (isSpace(key)) {
     dispatchCommand(editor, KEY_SPACE_COMMAND, event);
-  } else if (isOpenLineBreak(code, ctrlKey)) {
+  } else if (isOpenLineBreak(key, ctrlKey)) {
     event.preventDefault();
     isInsertLineBreak = true;
     dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, true);
-  } else if (isParagraph(code, shiftKey)) {
+  } else if (isParagraph(key, shiftKey)) {
     isInsertLineBreak = false;
     dispatchCommand(editor, KEY_ENTER_COMMAND, event);
-  } else if (isDeleteBackward(code, altKey, metaKey, ctrlKey)) {
-    if (isBackspace(code)) {
+  } else if (isDeleteBackward(key, altKey, metaKey, ctrlKey)) {
+    if (isBackspace(key)) {
       dispatchCommand(editor, KEY_BACKSPACE_COMMAND, event);
     } else {
       event.preventDefault();
       dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
     }
-  } else if (isEscape(code)) {
+  } else if (isEscape(key)) {
     dispatchCommand(editor, KEY_ESCAPE_COMMAND, event);
-  } else if (isDeleteForward(code, ctrlKey, shiftKey, altKey, metaKey)) {
-    if (isDelete(code)) {
+  } else if (isDeleteForward(key, ctrlKey, shiftKey, altKey, metaKey)) {
+    if (isDelete(key)) {
       dispatchCommand(editor, KEY_DELETE_COMMAND, event);
     } else {
       event.preventDefault();
       dispatchCommand(editor, DELETE_CHARACTER_COMMAND, false);
     }
-  } else if (isDeleteWordBackward(code, altKey, ctrlKey)) {
+  } else if (isDeleteWordBackward(key, altKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, DELETE_WORD_COMMAND, true);
-  } else if (isDeleteWordForward(code, altKey, ctrlKey)) {
+  } else if (isDeleteWordForward(key, altKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, DELETE_WORD_COMMAND, false);
-  } else if (isDeleteLineBackward(code, metaKey)) {
+  } else if (isDeleteLineBackward(key, metaKey)) {
     event.preventDefault();
     dispatchCommand(editor, DELETE_LINE_COMMAND, true);
-  } else if (isDeleteLineForward(code, metaKey)) {
+  } else if (isDeleteLineForward(key, metaKey)) {
     event.preventDefault();
     dispatchCommand(editor, DELETE_LINE_COMMAND, false);
-  } else if (isBold(code, altKey, metaKey, ctrlKey)) {
+  } else if (isBold(key, altKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'bold');
-  } else if (isUnderline(code, altKey, metaKey, ctrlKey)) {
+  } else if (isUnderline(key, altKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'underline');
-  } else if (isItalic(code, altKey, metaKey, ctrlKey)) {
+  } else if (isItalic(key, altKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'italic');
-  } else if (isTab(code, altKey, ctrlKey, metaKey)) {
+  } else if (isTab(key, altKey, ctrlKey, metaKey)) {
     dispatchCommand(editor, KEY_TAB_COMMAND, event);
-  } else if (isUndo(code, shiftKey, metaKey, ctrlKey)) {
+  } else if (isUndo(key, shiftKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, UNDO_COMMAND, undefined);
-  } else if (isRedo(code, shiftKey, metaKey, ctrlKey)) {
+  } else if (isRedo(key, shiftKey, metaKey, ctrlKey)) {
     event.preventDefault();
     dispatchCommand(editor, REDO_COMMAND, undefined);
   } else {
     const prevSelection = editor._editorState._selection;
     if ($isNodeSelection(prevSelection)) {
-      if (isCopy(code, shiftKey, metaKey, ctrlKey)) {
+      if (isCopy(key, shiftKey, metaKey, ctrlKey)) {
         event.preventDefault();
         dispatchCommand(editor, COPY_COMMAND, event);
-      } else if (isCut(code, shiftKey, metaKey, ctrlKey)) {
+      } else if (isCut(key, shiftKey, metaKey, ctrlKey)) {
         event.preventDefault();
         dispatchCommand(editor, CUT_COMMAND, event);
-      } else if (isSelectAll(code, metaKey, ctrlKey)) {
+      } else if (isSelectAll(key, metaKey, ctrlKey)) {
         event.preventDefault();
         dispatchCommand(editor, SELECT_ALL_COMMAND, event);
       }
       // FF does it well (no need to override behavior)
-    } else if (!IS_FIREFOX && isSelectAll(code, metaKey, ctrlKey)) {
+    } else if (!IS_FIREFOX && isSelectAll(key, metaKey, ctrlKey)) {
       event.preventDefault();
       dispatchCommand(editor, SELECT_ALL_COMMAND, event);
     }