Skip to content

Commit

Permalink
[Lexical] Replace code with key to check KeyboardEvents (#6110)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sahejkm
Sahejkm authored May 17, 2024
1 parent f02e163 commit d65d142
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 106 deletions.
5 changes: 4 additions & 1 deletion packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-playground/src/plugins/TypingPerfPlugin/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
};
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-selection/src/__tests__/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -781,8 +781,8 @@ export async function applySelectionInputs(
new KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
code: 'KeyZ',
ctrlKey: true,
key: 'z',
keyCode: 90,
}),
);
Expand All @@ -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,
}),
Expand Down
64 changes: 32 additions & 32 deletions packages/lexical/src/LexicalEvents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,7 @@ function $canRemoveText(

function isPossiblyAndroidKeyPress(timeStamp: number): boolean {
return (
lastKeyCode === 'Delete' &&
lastKeyCode === 'MediaLast' &&
timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY
);
}
Expand Down Expand Up @@ -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);
}
Expand Down
Loading

0 comments on commit d65d142

Please sign in to comment.