diff --git a/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx b/packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx index f29da390a1e..3af7e33d67a 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.keyCode === 65 && (IS_APPLE ? event.metaKey : event.ctrlKey); + return event.code === 'KeyA' && (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 8e7a02a459a..01780f7a7ff 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.keyCode; + const keyCode = event.code; - if (keyCode === 8 || keyCode === 13) { + if (keyCode === 'Backspace' || keyCode === 'Enter') { measureEventStart(); } }; diff --git a/packages/lexical-selection/src/__tests__/utils/index.ts b/packages/lexical-selection/src/__tests__/utils/index.ts index ca9d87e27e4..99404424e05 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, }), @@ -877,7 +877,7 @@ export async function applySelectionInputs( } } -export function setAnchorPoint( +export function $setAnchorPoint( point: Pick, ) { const selection = $getSelection(); @@ -885,7 +885,7 @@ export function setAnchorPoint( if (!$isRangeSelection(selection)) { const dummyTextNode = $createTextNode(); dummyTextNode.select(); - return setAnchorPoint(point); + return $setAnchorPoint(point); } if ($isNodeSelection(selection)) { @@ -897,8 +897,10 @@ export function setAnchorPoint( anchor.offset = point.offset; anchor.key = point.key; } +/** @deprecated renamed to $setAnchorPoint by @lexical/eslint-plugin rules-of-lexical */ +export const setAnchorPoint = $setAnchorPoint; -export function setFocusPoint( +export function $setFocusPoint( point: Pick, ) { const selection = $getSelection(); @@ -906,7 +908,7 @@ export function setFocusPoint( if (!$isRangeSelection(selection)) { const dummyTextNode = $createTextNode(); dummyTextNode.select(); - return setFocusPoint(point); + return $setFocusPoint(point); } if ($isNodeSelection(selection)) { @@ -918,3 +920,5 @@ export function setFocusPoint( focus.offset = point.offset; focus.key = point.key; } +/** @deprecated renamed to $setFocusPoint by @lexical/eslint-plugin rules-of-lexical */ +export const setFocusPoint = $setFocusPoint; diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts index 6b3c2973901..222d6709432 100644 --- a/packages/lexical/src/LexicalEvents.ts +++ b/packages/lexical/src/LexicalEvents.ts @@ -162,7 +162,7 @@ if (CAN_USE_BEFORE_INPUT) { } let lastKeyDownTimeStamp = 0; -let lastKeyCode = 0; +let lastKeyCode: null | string = null; let lastBeforeInputInsertTextTimeStamp = 0; let unprocessedBeforeInputData: null | string = null; const rootElementsRegistered = new WeakMap(); @@ -513,7 +513,7 @@ function $canRemoveText( function isPossiblyAndroidKeyPress(timeStamp: number): boolean { return ( - lastKeyCode === 229 && + lastKeyCode === 'Delete' && timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY ); } @@ -817,7 +817,7 @@ function onInput(event: InputEvent, editor: LexicalEditor): void { // to ensure to disable composition before dispatching the // insertText command for when changing the sequence for FF. if (isFirefoxEndingComposition) { - onCompositionEndImpl(editor, data); + $onCompositionEndImpl(editor, data); isFirefoxEndingComposition = false; } const anchor = selection.anchor; @@ -873,7 +873,7 @@ function onInput(event: InputEvent, editor: LexicalEditor): void { // onInput always fires after onCompositionEnd for FF. if (isFirefoxEndingComposition) { - onCompositionEndImpl(editor, data || undefined); + $onCompositionEndImpl(editor, data || undefined); isFirefoxEndingComposition = false; } } @@ -923,7 +923,7 @@ function onCompositionStart( }); } -function onCompositionEndImpl(editor: LexicalEditor, data?: string): void { +function $onCompositionEndImpl(editor: LexicalEditor, data?: string): void { const compositionKey = editor._compositionKey; $setCompositionKey(null); @@ -984,108 +984,108 @@ function onCompositionEnd( isFirefoxEndingComposition = true; } else { updateEditor(editor, () => { - onCompositionEndImpl(editor, event.data); + $onCompositionEndImpl(editor, event.data); }); } } function onKeyDown(event: KeyboardEvent, editor: LexicalEditor): void { lastKeyDownTimeStamp = event.timeStamp; - lastKeyCode = event.keyCode; + lastKeyCode = event.code; if (editor.isComposing()) { return; } - const {keyCode, shiftKey, ctrlKey, metaKey, altKey} = event; + const {code, shiftKey, ctrlKey, metaKey, altKey} = event; if (dispatchCommand(editor, KEY_DOWN_COMMAND, event)) { return; } - if (isMoveForward(keyCode, ctrlKey, altKey, metaKey)) { + if (isMoveForward(code, ctrlKey, altKey, metaKey)) { dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event); - } else if (isMoveToEnd(keyCode, ctrlKey, shiftKey, altKey, metaKey)) { + } else if (isMoveToEnd(code, ctrlKey, shiftKey, altKey, metaKey)) { dispatchCommand(editor, MOVE_TO_END, event); - } else if (isMoveBackward(keyCode, ctrlKey, altKey, metaKey)) { + } else if (isMoveBackward(code, ctrlKey, altKey, metaKey)) { dispatchCommand(editor, KEY_ARROW_LEFT_COMMAND, event); - } else if (isMoveToStart(keyCode, ctrlKey, shiftKey, altKey, metaKey)) { + } else if (isMoveToStart(code, ctrlKey, shiftKey, altKey, metaKey)) { dispatchCommand(editor, MOVE_TO_START, event); - } else if (isMoveUp(keyCode, ctrlKey, metaKey)) { + } else if (isMoveUp(code, ctrlKey, metaKey)) { dispatchCommand(editor, KEY_ARROW_UP_COMMAND, event); - } else if (isMoveDown(keyCode, ctrlKey, metaKey)) { + } else if (isMoveDown(code, ctrlKey, metaKey)) { dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event); - } else if (isLineBreak(keyCode, shiftKey)) { + } else if (isLineBreak(code, shiftKey)) { isInsertLineBreak = true; dispatchCommand(editor, KEY_ENTER_COMMAND, event); - } else if (isSpace(keyCode)) { + } else if (isSpace(code)) { dispatchCommand(editor, KEY_SPACE_COMMAND, event); - } else if (isOpenLineBreak(keyCode, ctrlKey)) { + } else if (isOpenLineBreak(code, ctrlKey)) { event.preventDefault(); isInsertLineBreak = true; dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, true); - } else if (isParagraph(keyCode, shiftKey)) { + } else if (isParagraph(code, shiftKey)) { isInsertLineBreak = false; dispatchCommand(editor, KEY_ENTER_COMMAND, event); - } else if (isDeleteBackward(keyCode, altKey, metaKey, ctrlKey)) { - if (isBackspace(keyCode)) { + } else if (isDeleteBackward(code, altKey, metaKey, ctrlKey)) { + if (isBackspace(code)) { dispatchCommand(editor, KEY_BACKSPACE_COMMAND, event); } else { event.preventDefault(); dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true); } - } else if (isEscape(keyCode)) { + } else if (isEscape(code)) { dispatchCommand(editor, KEY_ESCAPE_COMMAND, event); - } else if (isDeleteForward(keyCode, ctrlKey, shiftKey, altKey, metaKey)) { - if (isDelete(keyCode)) { + } else if (isDeleteForward(code, ctrlKey, shiftKey, altKey, metaKey)) { + if (isDelete(code)) { dispatchCommand(editor, KEY_DELETE_COMMAND, event); } else { event.preventDefault(); dispatchCommand(editor, DELETE_CHARACTER_COMMAND, false); } - } else if (isDeleteWordBackward(keyCode, altKey, ctrlKey)) { + } else if (isDeleteWordBackward(code, altKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, DELETE_WORD_COMMAND, true); - } else if (isDeleteWordForward(keyCode, altKey, ctrlKey)) { + } else if (isDeleteWordForward(code, altKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, DELETE_WORD_COMMAND, false); - } else if (isDeleteLineBackward(keyCode, metaKey)) { + } else if (isDeleteLineBackward(code, metaKey)) { event.preventDefault(); dispatchCommand(editor, DELETE_LINE_COMMAND, true); - } else if (isDeleteLineForward(keyCode, metaKey)) { + } else if (isDeleteLineForward(code, metaKey)) { event.preventDefault(); dispatchCommand(editor, DELETE_LINE_COMMAND, false); - } else if (isBold(keyCode, altKey, metaKey, ctrlKey)) { + } else if (isBold(code, altKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'bold'); - } else if (isUnderline(keyCode, altKey, metaKey, ctrlKey)) { + } else if (isUnderline(code, altKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'underline'); - } else if (isItalic(keyCode, altKey, metaKey, ctrlKey)) { + } else if (isItalic(code, altKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'italic'); - } else if (isTab(keyCode, altKey, ctrlKey, metaKey)) { + } else if (isTab(code, altKey, ctrlKey, metaKey)) { dispatchCommand(editor, KEY_TAB_COMMAND, event); - } else if (isUndo(keyCode, shiftKey, metaKey, ctrlKey)) { + } else if (isUndo(code, shiftKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, UNDO_COMMAND, undefined); - } else if (isRedo(keyCode, shiftKey, metaKey, ctrlKey)) { + } else if (isRedo(code, shiftKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, REDO_COMMAND, undefined); } else { const prevSelection = editor._editorState._selection; if ($isNodeSelection(prevSelection)) { - if (isCopy(keyCode, shiftKey, metaKey, ctrlKey)) { + if (isCopy(code, shiftKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, COPY_COMMAND, event); - } else if (isCut(keyCode, shiftKey, metaKey, ctrlKey)) { + } else if (isCut(code, shiftKey, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, CUT_COMMAND, event); - } else if (isSelectAll(keyCode, metaKey, ctrlKey)) { + } else if (isSelectAll(code, metaKey, ctrlKey)) { event.preventDefault(); dispatchCommand(editor, SELECT_ALL_COMMAND, event); } // FF does it well (no need to override behavior) - } else if (!IS_FIREFOX && isSelectAll(keyCode, metaKey, ctrlKey)) { + } else if (!IS_FIREFOX && isSelectAll(code, 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 c4bc5ae882f..63f3c947353 100644 --- a/packages/lexical/src/LexicalUtils.ts +++ b/packages/lexical/src/LexicalUtils.ts @@ -391,7 +391,7 @@ export function $getNodeByKey( return node; } -export function getNodeFromDOMNode( +export function $getNodeFromDOMNode( dom: Node, editorState?: EditorState, ): LexicalNode | null { @@ -403,6 +403,8 @@ export function getNodeFromDOMNode( } return null; } +/** @deprecated renamed to $getNodeFromDOMNode by @lexical/eslint-plugin rules-of-lexical */ +export const getNodeFromDOMNode = $getNodeFromDOMNode; export function $getNearestNodeFromDOMNode( startingDOM: Node, @@ -410,7 +412,7 @@ export function $getNearestNodeFromDOMNode( ): LexicalNode | null { let dom: Node | null = startingDOM; while (dom != null) { - const node = getNodeFromDOMNode(dom, editorState); + const node = $getNodeFromDOMNode(dom, editorState); if (node !== null) { return node; } @@ -490,7 +492,7 @@ export function $flushMutations(): void { flushRootMutations(editor); } -export function getNodeFromDOM(dom: Node): null | LexicalNode { +export function $getNodeFromDOM(dom: Node): null | LexicalNode { const editor = getActiveEditor(); const nodeKey = getNodeKeyFromDOM(dom, editor); if (nodeKey === null) { @@ -502,6 +504,8 @@ export function getNodeFromDOM(dom: Node): null | LexicalNode { } return $getNodeByKey(nodeKey); } +/** @deprecated renamed to $getNodeFromDOM by @lexical/eslint-plugin rules-of-lexical */ +export const getNodeFromDOM = $getNodeFromDOM; export function getTextNodeOffset( node: TextNode, @@ -730,88 +734,82 @@ export function $shouldInsertTextAfterOrBeforeTextNode( } export function isTab( - keyCode: number, + code: string, altKey: boolean, ctrlKey: boolean, metaKey: boolean, ): boolean { - return keyCode === 9 && !altKey && !ctrlKey && !metaKey; + return code === 'Tab' && !altKey && !ctrlKey && !metaKey; } export function isBold( - keyCode: number, + code: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return keyCode === 66 && !altKey && controlOrMeta(metaKey, ctrlKey); + return code === 'KeyB' && !altKey && controlOrMeta(metaKey, ctrlKey); } export function isItalic( - keyCode: number, + code: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return keyCode === 73 && !altKey && controlOrMeta(metaKey, ctrlKey); + return code === 'KeyI' && !altKey && controlOrMeta(metaKey, ctrlKey); } export function isUnderline( - keyCode: number, + code: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return keyCode === 85 && !altKey && controlOrMeta(metaKey, ctrlKey); + return code === 'KeyU' && !altKey && controlOrMeta(metaKey, ctrlKey); } -export function isParagraph(keyCode: number, shiftKey: boolean): boolean { - return isReturn(keyCode) && !shiftKey; +export function isParagraph(code: string, shiftKey: boolean): boolean { + return isReturn(code) && !shiftKey; } -export function isLineBreak(keyCode: number, shiftKey: boolean): boolean { +export function isLineBreak(keyCode: string, shiftKey: boolean): boolean { return isReturn(keyCode) && shiftKey; } // Inserts a new line after the selection -export function isOpenLineBreak(keyCode: number, ctrlKey: boolean): boolean { +export function isOpenLineBreak(code: string, ctrlKey: boolean): boolean { // 79 = KeyO - return IS_APPLE && ctrlKey && keyCode === 79; + return IS_APPLE && ctrlKey && code === 'KeyO'; } export function isDeleteWordBackward( - keyCode: number, + code: string, altKey: boolean, ctrlKey: boolean, ): boolean { - return isBackspace(keyCode) && (IS_APPLE ? altKey : ctrlKey); + return isBackspace(code) && (IS_APPLE ? altKey : ctrlKey); } export function isDeleteWordForward( - keyCode: number, + code: string, altKey: boolean, ctrlKey: boolean, ): boolean { - return isDelete(keyCode) && (IS_APPLE ? altKey : ctrlKey); + return isDelete(code) && (IS_APPLE ? altKey : ctrlKey); } -export function isDeleteLineBackward( - keyCode: number, - metaKey: boolean, -): boolean { - return IS_APPLE && metaKey && isBackspace(keyCode); +export function isDeleteLineBackward(code: string, metaKey: boolean): boolean { + return IS_APPLE && metaKey && isBackspace(code); } -export function isDeleteLineForward( - keyCode: number, - metaKey: boolean, -): boolean { - return IS_APPLE && metaKey && isDelete(keyCode); +export function isDeleteLineForward(code: string, metaKey: boolean): boolean { + return IS_APPLE && metaKey && isDelete(code); } export function isDeleteBackward( - keyCode: number, + code: string, altKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -820,16 +818,16 @@ export function isDeleteBackward( if (altKey || metaKey) { return false; } - return isBackspace(keyCode) || (keyCode === 72 && ctrlKey); + return isBackspace(code) || (code === 'KeyH' && ctrlKey); } if (ctrlKey || altKey || metaKey) { return false; } - return isBackspace(keyCode); + return isBackspace(code); } export function isDeleteForward( - keyCode: number, + code: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, @@ -839,37 +837,39 @@ export function isDeleteForward( if (shiftKey || altKey || metaKey) { return false; } - return isDelete(keyCode) || (keyCode === 68 && ctrlKey); + return isDelete(code) || (code === 'KeyD' && ctrlKey); } if (ctrlKey || altKey || metaKey) { return false; } - return isDelete(keyCode); + return isDelete(code); } export function isUndo( - keyCode: number, + code: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { - return keyCode === 90 && !shiftKey && controlOrMeta(metaKey, ctrlKey); + return code === 'KeyZ' && !shiftKey && controlOrMeta(metaKey, ctrlKey); } export function isRedo( - keyCode: number, + code: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, ): boolean { if (IS_APPLE) { - return keyCode === 90 && metaKey && shiftKey; + return code === 'KeyZ' && metaKey && shiftKey; } - return (keyCode === 89 && ctrlKey) || (keyCode === 90 && ctrlKey && shiftKey); + return ( + (code === 'KeyY' && ctrlKey) || (code === 'KeyZ' && ctrlKey && shiftKey) + ); } export function isCopy( - keyCode: number, + code: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -877,7 +877,7 @@ export function isCopy( if (shiftKey) { return false; } - if (keyCode === 67) { + if (code === 'KeyC') { return IS_APPLE ? metaKey : ctrlKey; } @@ -885,7 +885,7 @@ export function isCopy( } export function isCut( - keyCode: number, + code: string, shiftKey: boolean, metaKey: boolean, ctrlKey: boolean, @@ -893,81 +893,81 @@ export function isCut( if (shiftKey) { return false; } - if (keyCode === 88) { + if (code === 'KeyX') { return IS_APPLE ? metaKey : ctrlKey; } return false; } -function isArrowLeft(keyCode: number): boolean { - return keyCode === 37; +function isArrowLeft(code: string): boolean { + return code === 'ArrowLeft'; } -function isArrowRight(keyCode: number): boolean { - return keyCode === 39; +function isArrowRight(code: string): boolean { + return code === 'ArrowRight'; } -function isArrowUp(keyCode: number): boolean { - return keyCode === 38; +function isArrowUp(code: string): boolean { + return code === 'ArrowUp'; } -function isArrowDown(keyCode: number): boolean { - return keyCode === 40; +function isArrowDown(code: string): boolean { + return code === 'ArrowDown'; } export function isMoveBackward( - keyCode: number, + code: string, ctrlKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowLeft(keyCode) && !ctrlKey && !metaKey && !altKey; + return isArrowLeft(code) && !ctrlKey && !metaKey && !altKey; } export function isMoveToStart( - keyCode: number, + code: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowLeft(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey); + return isArrowLeft(code) && !altKey && !shiftKey && (ctrlKey || metaKey); } export function isMoveForward( - keyCode: number, + code: string, ctrlKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowRight(keyCode) && !ctrlKey && !metaKey && !altKey; + return isArrowRight(code) && !ctrlKey && !metaKey && !altKey; } export function isMoveToEnd( - keyCode: number, + code: string, ctrlKey: boolean, shiftKey: boolean, altKey: boolean, metaKey: boolean, ): boolean { - return isArrowRight(keyCode) && !altKey && !shiftKey && (ctrlKey || metaKey); + return isArrowRight(code) && !altKey && !shiftKey && (ctrlKey || metaKey); } export function isMoveUp( - keyCode: number, + code: string, ctrlKey: boolean, metaKey: boolean, ): boolean { - return isArrowUp(keyCode) && !ctrlKey && !metaKey; + return isArrowUp(code) && !ctrlKey && !metaKey; } export function isMoveDown( - keyCode: number, + code: string, ctrlKey: boolean, metaKey: boolean, ): boolean { - return isArrowDown(keyCode) && !ctrlKey && !metaKey; + return isArrowDown(code) && !ctrlKey && !metaKey; } export function isModifier( @@ -979,8 +979,8 @@ export function isModifier( return ctrlKey || shiftKey || altKey || metaKey; } -export function isSpace(keyCode: number): boolean { - return keyCode === 32; +export function isSpace(code: string): boolean { + return code === 'Space'; } export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean { @@ -990,28 +990,28 @@ export function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean { return ctrlKey; } -export function isReturn(keyCode: number): boolean { - return keyCode === 13; +export function isReturn(code: string): boolean { + return code === 'Enter'; } -export function isBackspace(keyCode: number): boolean { - return keyCode === 8; +export function isBackspace(code: string): boolean { + return code === 'Backspace'; } -export function isEscape(keyCode: number): boolean { - return keyCode === 27; +export function isEscape(code: string): boolean { + return code === 'Escape'; } -export function isDelete(keyCode: number): boolean { - return keyCode === 46; +export function isDelete(code: string): boolean { + return code === 'Delete'; } export function isSelectAll( - keyCode: number, + code: string, metaKey: boolean, ctrlKey: boolean, ): boolean { - return keyCode === 65 && controlOrMeta(metaKey, ctrlKey); + return code === 'KeyA' && controlOrMeta(metaKey, ctrlKey); } export function $selectAll(): void {