From d9df115c0bb6c484c3d3907e3f373a00aebc683b Mon Sep 17 00:00:00 2001 From: sahejkm Date: Thu, 16 May 2024 03:15:48 +0800 Subject: [PATCH] [Lexical]Replace code with key to check KeyboardEvents --- .../src/plugins/TestRecorderPlugin/index.tsx | 2 +- .../src/plugins/TypingPerfPlugin/index.ts | 4 +- .../src/__tests__/utils/index.ts | 4 +- packages/lexical/src/LexicalEvents.ts | 64 ++++---- packages/lexical/src/LexicalUtils.ts | 140 +++++++++--------- 5 files changed, 106 insertions(+), 108 deletions(-) diff --git a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx index 3af7e33d67a..92cdd4a51be 100644 --- a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx +++ b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx @@ -95,7 +95,7 @@ const formatStep = (step: Step) => { }; export function isSelectAll(event: KeyboardEvent): boolean { - return event.code === 'KeyA' && (IS_APPLE ? event.metaKey : event.ctrlKey); + return event.key === 'A' && (IS_APPLE ? event.metaKey : event.ctrlKey); } // stolen from LexicalSelection-test diff --git a/packages/lexical-playground/src/plugins/TypingPerfPlugin/index.ts b/packages/lexical-playground/src/plugins/TypingPerfPlugin/index.ts index 01780f7a7ff..535a9dd1bb4 100644 --- a/packages/lexical-playground/src/plugins/TypingPerfPlugin/index.ts +++ b/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(); } }; diff --git a/packages/lexical-selection/src/__tests__/utils/index.ts b/packages/lexical-selection/src/__tests__/utils/index.ts index 648c533c09a..b8317d56b3e 100644 --- a/packages/lexical-selection/src/__tests__/utils/index.ts +++ b/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, }), diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts index 0216eb8d5b2..932af7698d6 100644 --- a/packages/lexical/src/LexicalEvents.ts +++ b/packages/lexical/src/LexicalEvents.ts @@ -516,7 +516,7 @@ function $canRemoveText( function isPossiblyAndroidKeyPress(timeStamp: number): boolean { return ( - lastKeyCode === 'Delete' && + lastKeyCode === '229' && 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); } diff --git a/packages/lexical/src/LexicalUtils.ts b/packages/lexical/src/LexicalUtils.ts index 7fb995868f7..b81e62ce1a2 100644 --- a/packages/lexical/src/LexicalUtils.ts +++ b/packages/lexical/src/LexicalUtils.ts @@ -763,82 +763,82 @@ export function $shouldInsertTextAfterOrBeforeTextNode( } export function isTab( - code: string, + key: string, altKey: boolean, ctrlKey: boolean, metaKey: boolean, ): boolean { - return code === 'Tab' && !altKey && !ctrlKey && !metaKey; + return key === '9' && !altKey && !ctrlKey && !metaKey; } export function isBold( - code: string, + key: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return code === 'KeyB' && !altKey && controlOrMeta(metaKey, ctrlKey); + return key === 'B' && !altKey && controlOrMeta(metaKey, ctrlKey); } export function isItalic( - code: string, + key: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return code === 'KeyI' && !altKey && controlOrMeta(metaKey, ctrlKey); + return key === 'I' && !altKey && controlOrMeta(metaKey, ctrlKey); } export function isUnderline( - code: string, + key: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return code === 'KeyU' && !altKey && controlOrMeta(metaKey, ctrlKey); + return key === 'U' && !altKey && controlOrMeta(metaKey, ctrlKey); } -export function isParagraph(code: string, shiftKey: boolean): boolean { - return isReturn(code) && !shiftKey; +export function isParagraph(key: string, shiftKey: boolean): boolean { + return isReturn(key) && !shiftKey; } -export function isLineBreak(keyCode: string, shiftKey: boolean): boolean { - return isReturn(keyCode) && shiftKey; +export function isLineBreak(key: string, shiftKey: boolean): boolean { + return isReturn(key) && shiftKey; } // Inserts a new line after the selection -export function isOpenLineBreak(code: string, ctrlKey: boolean): boolean { +export function isOpenLineBreak(key: string, ctrlKey: boolean): boolean { // 79 = KeyO - return IS_APPLE && ctrlKey && code === 'KeyO'; + return IS_APPLE && ctrlKey && key === 'O'; } export function isDeleteWordBackward( - code: string, + key: string, altKey: boolean, ctrlKey: boolean, ): boolean { - return isBackspace(code) && (IS_APPLE ? altKey : ctrlKey); + return isBackspace(key) && (IS_APPLE ? altKey : ctrlKey); } export function isDeleteWordForward( - code: string, + key: string, altKey: boolean, ctrlKey: boolean, ): boolean { - return isDelete(code) && (IS_APPLE ? altKey : ctrlKey); + return isDelete(key) && (IS_APPLE ? altKey : ctrlKey); } -export function isDeleteLineBackward(code: string, metaKey: boolean): boolean { - return IS_APPLE && metaKey && isBackspace(code); +export function isDeleteLineBackward(key: string, metaKey: boolean): boolean { + return IS_APPLE && metaKey && isBackspace(key); } -export function isDeleteLineForward(code: string, metaKey: boolean): boolean { - return IS_APPLE && metaKey && isDelete(code); +export function isDeleteLineForward(key: string, metaKey: boolean): boolean { + return IS_APPLE && metaKey && isDelete(key); } export function isDeleteBackward( - code: string, + key: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -847,16 +847,16 @@ export function isDeleteBackward( if (altKey || metaKey) { return false; } - return isBackspace(code) || (code === 'KeyH' && ctrlKey); + return isBackspace(key) || (key === 'H' && ctrlKey); } if (ctrlKey || altKey || metaKey) { return false; } - return isBackspace(code); + return isBackspace(key); } export function isDeleteForward( - code: string, + key: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, @@ -866,39 +866,37 @@ export function isDeleteForward( if (shiftKey || altKey || metaKey) { return false; } - return isDelete(code) || (code === 'KeyD' && ctrlKey); + return isDelete(key) || (key === 'D' && ctrlKey); } if (ctrlKey || altKey || metaKey) { return false; } - return isDelete(code); + return isDelete(key); } export function isUndo( - code: string, + key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return code === 'KeyZ' && !shiftKey && controlOrMeta(metaKey, ctrlKey); + return key === 'Z' && !shiftKey && controlOrMeta(metaKey, ctrlKey); } export function isRedo( - code: string, + key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { if (IS_APPLE) { - return code === 'KeyZ' && metaKey && shiftKey; + return key === 'Z' && metaKey && shiftKey; } - return ( - (code === 'KeyY' && ctrlKey) || (code === 'KeyZ' && ctrlKey && shiftKey) - ); + return (key === 'Y' && ctrlKey) || (key === 'Z' && ctrlKey && shiftKey); } export function isCopy( - code: string, + key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -906,7 +904,7 @@ export function isCopy( if (shiftKey) { return false; } - if (code === 'KeyC') { + if (key === 'C') { return IS_APPLE ? metaKey : ctrlKey; } @@ -914,7 +912,7 @@ export function isCopy( } export function isCut( - code: string, + key: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -922,81 +920,81 @@ export function isCut( if (shiftKey) { return false; } - if (code === 'KeyX') { + if (key === 'X') { return IS_APPLE ? metaKey : ctrlKey; } return false; } -function isArrowLeft(code: string): boolean { - return code === 'ArrowLeft'; +function isArrowLeft(key: string): boolean { + return key === 'ArrowLeft'; } -function isArrowRight(code: string): boolean { - return code === 'ArrowRight'; +function isArrowRight(key: string): boolean { + return key === 'ArrowRight'; } -function isArrowUp(code: string): boolean { - return code === 'ArrowUp'; +function isArrowUp(key: string): boolean { + return key === 'ArrowUp'; } -function isArrowDown(code: string): boolean { - return code === 'ArrowDown'; +function isArrowDown(key: string): boolean { + return key === 'ArrowDown'; } export function isMoveBackward( - code: string, + key: string, ctrlKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowLeft(code) && !ctrlKey && !metaKey && !altKey; + return isArrowLeft(key) && !ctrlKey && !metaKey && !altKey; } export function isMoveToStart( - code: string, + key: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowLeft(code) && !altKey && !shiftKey && (ctrlKey || metaKey); + return isArrowLeft(key) && !altKey && !shiftKey && (ctrlKey || metaKey); } export function isMoveForward( - code: string, + key: string, ctrlKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowRight(code) && !ctrlKey && !metaKey && !altKey; + return isArrowRight(key) && !ctrlKey && !metaKey && !altKey; } export function isMoveToEnd( - code: string, + key: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowRight(code) && !altKey && !shiftKey && (ctrlKey || metaKey); + return isArrowRight(key) && !altKey && !shiftKey && (ctrlKey || metaKey); } export function isMoveUp( - code: string, + key: string, ctrlKey: boolean, metaKey: boolean, ): boolean { - return isArrowUp(code) && !ctrlKey && !metaKey; + return isArrowUp(key) && !ctrlKey && !metaKey; } export function isMoveDown( - code: string, + key: string, ctrlKey: boolean, metaKey: boolean, ): boolean { - return isArrowDown(code) && !ctrlKey && !metaKey; + return isArrowDown(key) && !ctrlKey && !metaKey; } export function isModifier( @@ -1008,8 +1006,8 @@ export function isModifier( return ctrlKey || shiftKey || altKey || metaKey; } -export function isSpace(code: string): boolean { - return code === 'Space'; +export function isSpace(key: string): boolean { + return key === ' '; } export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean { @@ -1019,28 +1017,28 @@ export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean { return ctrlKey; } -export function isReturn(code: string): boolean { - return code === 'Enter'; +export function isReturn(key: string): boolean { + return key === 'Enter'; } -export function isBackspace(code: string): boolean { - return code === 'Backspace'; +export function isBackspace(key: string): boolean { + return key === 'Backspace'; } -export function isEscape(code: string): boolean { - return code === 'Escape'; +export function isEscape(key: string): boolean { + return key === 'Escape'; } -export function isDelete(code: string): boolean { - return code === 'Delete'; +export function isDelete(key: string): boolean { + return key === 'Delete'; } export function isSelectAll( - code: string, + key: string, metaKey: boolean, ctrlKey: boolean, ): boolean { - return code === 'KeyA' && controlOrMeta(metaKey, ctrlKey); + return key === 'A' && controlOrMeta(metaKey, ctrlKey); } export function $selectAll(): void {