resources/js/wysiwyg/lexical/core/LexicalEvents.ts
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import type {LexicalEditor} from './LexicalEditor';
import type {NodeKey} from './LexicalNode';
import type {ElementNode} from './nodes/LexicalElementNode';
import type {TextNode} from './nodes/LexicalTextNode';
import {
CAN_USE_BEFORE_INPUT,
IS_ANDROID_CHROME,
IS_APPLE_WEBKIT,
IS_FIREFOX,
IS_IOS,
IS_SAFARI,
} from 'lexical/shared/environment';
import invariant from 'lexical/shared/invariant';
import {
$getPreviousSelection,
$getRoot,
$getSelection,
$isElementNode,
$isNodeSelection,
$isRangeSelection,
$isRootNode,
$isTextNode,
$setCompositionKey,
BLUR_COMMAND,
CLICK_COMMAND,
CONTROLLED_TEXT_INSERTION_COMMAND,
COPY_COMMAND,
CUT_COMMAND,
DELETE_CHARACTER_COMMAND,
DELETE_LINE_COMMAND,
DELETE_WORD_COMMAND,
DRAGEND_COMMAND,
DRAGOVER_COMMAND,
DRAGSTART_COMMAND,
DROP_COMMAND,
FOCUS_COMMAND,
FORMAT_TEXT_COMMAND,
INSERT_LINE_BREAK_COMMAND,
INSERT_PARAGRAPH_COMMAND,
KEY_ARROW_DOWN_COMMAND,
KEY_ARROW_LEFT_COMMAND,
KEY_ARROW_RIGHT_COMMAND,
KEY_ARROW_UP_COMMAND,
KEY_BACKSPACE_COMMAND,
KEY_DELETE_COMMAND,
KEY_DOWN_COMMAND,
KEY_ENTER_COMMAND,
KEY_ESCAPE_COMMAND,
KEY_SPACE_COMMAND,
KEY_TAB_COMMAND,
MOVE_TO_END,
MOVE_TO_START,
ParagraphNode,
PASTE_COMMAND,
REDO_COMMAND,
REMOVE_TEXT_COMMAND,
SELECTION_CHANGE_COMMAND,
UNDO_COMMAND,
} from '.';
import {KEY_MODIFIER_COMMAND, SELECT_ALL_COMMAND} from './LexicalCommands';
import {
COMPOSITION_START_CHAR,
DOM_ELEMENT_TYPE,
DOM_TEXT_TYPE,
DOUBLE_LINE_BREAK,
IS_ALL_FORMATTING,
} from './LexicalConstants';
import {
$internalCreateRangeSelection,
RangeSelection,
} from './LexicalSelection';
import {getActiveEditor, updateEditor} from './LexicalUpdates';
import {
$flushMutations,
$getNodeByKey,
$isSelectionCapturedInDecorator,
$isTokenOrSegmented,
$setSelection,
$shouldInsertTextAfterOrBeforeTextNode,
$updateSelectedTextFromDOM,
$updateTextNodeFromDOMContent,
dispatchCommand,
doesContainGrapheme,
getAnchorTextFromDOM,
getDOMSelection,
getDOMTextNode,
getEditorPropertyFromDOMNode,
getEditorsToPropagate,
getNearestEditorFromDOMNode,
getWindow,
isBackspace,
isBold,
isCopy,
isCut,
isDelete,
isDeleteBackward,
isDeleteForward,
isDeleteLineBackward,
isDeleteLineForward,
isDeleteWordBackward,
isDeleteWordForward,
isEscape,
isFirefoxClipboardEvents,
isItalic,
isLexicalEditor,
isLineBreak,
isModifier,
isMoveBackward,
isMoveDown,
isMoveForward,
isMoveToEnd,
isMoveToStart,
isMoveUp,
isOpenLineBreak,
isParagraph,
isRedo,
isSelectAll,
isSelectionWithinEditor,
isSpace,
isTab,
isUnderline,
isUndo,
} from './LexicalUtils';
type RootElementRemoveHandles = Array<() => void>;
type RootElementEvents = Array<
[
string,
Record<string, unknown> | ((event: Event, editor: LexicalEditor) => void),
]
>;
const PASS_THROUGH_COMMAND = Object.freeze({});
const ANDROID_COMPOSITION_LATENCY = 30;
const rootElementEvents: RootElementEvents = [
['keydown', onKeyDown],
['pointerdown', onPointerDown],
['compositionstart', onCompositionStart],
['compositionend', onCompositionEnd],
['input', onInput],
['click', onClick],
['cut', PASS_THROUGH_COMMAND],
['copy', PASS_THROUGH_COMMAND],
['dragstart', PASS_THROUGH_COMMAND],
['dragover', PASS_THROUGH_COMMAND],
['dragend', PASS_THROUGH_COMMAND],
['paste', PASS_THROUGH_COMMAND],
['focus', PASS_THROUGH_COMMAND],
['blur', PASS_THROUGH_COMMAND],
['drop', PASS_THROUGH_COMMAND],
];
if (CAN_USE_BEFORE_INPUT) {
rootElementEvents.push([
'beforeinput',
(event, editor) => onBeforeInput(event as InputEvent, editor),
]);
}
let lastKeyDownTimeStamp = 0;
let lastKeyCode: null | string = null;
let lastBeforeInputInsertTextTimeStamp = 0;
let unprocessedBeforeInputData: null | string = null;
const rootElementsRegistered = new WeakMap<Document, number>();
let isSelectionChangeFromDOMUpdate = false;
let isSelectionChangeFromMouseDown = false;
let isInsertLineBreak = false;
let isFirefoxEndingComposition = false;
let collapsedSelectionFormat: [number, string, number, NodeKey, number] = [
0,
'',
0,
'root',
0,
];
// This function is used to determine if Lexical should attempt to override
// the default browser behavior for insertion of text and use its own internal
// heuristics. This is an extremely important function, and makes much of Lexical
// work as intended between different browsers and across word, line and character
// boundary/formats. It also is important for text replacement, node schemas and
// composition mechanics.
function $shouldPreventDefaultAndInsertText(
selection: RangeSelection,
domTargetRange: null | StaticRange,
text: string,
timeStamp: number,
isBeforeInput: boolean,
): boolean {
const anchor = selection.anchor;
const focus = selection.focus;
const anchorNode = anchor.getNode();
const editor = getActiveEditor();
const domSelection = getDOMSelection(editor._window);
const domAnchorNode = domSelection !== null ? domSelection.anchorNode : null;
const anchorKey = anchor.key;
const backingAnchorElement = editor.getElementByKey(anchorKey);
const textLength = text.length;
return (
anchorKey !== focus.key ||
// If we're working with a non-text node.
!$isTextNode(anchorNode) ||
// If we are replacing a range with a single character or grapheme, and not composing.
(((!isBeforeInput &&
(!CAN_USE_BEFORE_INPUT ||
// We check to see if there has been
// a recent beforeinput event for "textInput". If there has been one in the last
// 50ms then we proceed as normal. However, if there is not, then this is likely
// a dangling `input` event caused by execCommand('insertText').
lastBeforeInputInsertTextTimeStamp < timeStamp + 50)) ||
(anchorNode.isDirty() && textLength < 2) ||
doesContainGrapheme(text)) &&
anchor.offset !== focus.offset &&
!anchorNode.isComposing()) ||
// Any non standard text node.
$isTokenOrSegmented(anchorNode) ||
// If the text length is more than a single character and we're either
// dealing with this in "beforeinput" or where the node has already recently
// been changed (thus is dirty).
(anchorNode.isDirty() && textLength > 1) ||
// If the DOM selection element is not the same as the backing node during beforeinput.
((isBeforeInput || !CAN_USE_BEFORE_INPUT) &&
backingAnchorElement !== null &&
!anchorNode.isComposing() &&
domAnchorNode !== getDOMTextNode(backingAnchorElement)) ||
// If TargetRange is not the same as the DOM selection; browser trying to edit random parts
// of the editor.
(domSelection !== null &&
domTargetRange !== null &&
(!domTargetRange.collapsed ||
domTargetRange.startContainer !== domSelection.anchorNode ||
domTargetRange.startOffset !== domSelection.anchorOffset)) ||
// Check if we're changing from bold to italics, or some other format.
anchorNode.getFormat() !== selection.format ||
anchorNode.getStyle() !== selection.style ||
// One last set of heuristics to check against.
$shouldInsertTextAfterOrBeforeTextNode(selection, anchorNode)
);
}
function shouldSkipSelectionChange(
domNode: null | Node,
offset: number,
): boolean {
return (
domNode !== null &&
domNode.nodeValue !== null &&
domNode.nodeType === DOM_TEXT_TYPE &&
offset !== 0 &&
offset !== domNode.nodeValue.length
);
}
function onSelectionChange(
domSelection: Selection,
editor: LexicalEditor,
isActive: boolean,
): void {
const {
anchorNode: anchorDOM,
anchorOffset,
focusNode: focusDOM,
focusOffset,
} = domSelection;
if (isSelectionChangeFromDOMUpdate) {
isSelectionChangeFromDOMUpdate = false;
// If native DOM selection is on a DOM element, then
// we should continue as usual, as Lexical's selection
// may have normalized to a better child. If the DOM
// element is a text node, we can safely apply this
// optimization and skip the selection change entirely.
// We also need to check if the offset is at the boundary,
// because in this case, we might need to normalize to a
// sibling instead.
if (
shouldSkipSelectionChange(anchorDOM, anchorOffset) &&
shouldSkipSelectionChange(focusDOM, focusOffset)
) {
return;
}
}
updateEditor(editor, () => {
// Non-active editor don't need any extra logic for selection, it only needs update
// to reconcile selection (set it to null) to ensure that only one editor has non-null selection.
if (!isActive) {
$setSelection(null);
return;
}
if (!isSelectionWithinEditor(editor, anchorDOM, focusDOM)) {
return;
}
const selection = $getSelection();
// Update the selection format
if ($isRangeSelection(selection)) {
const anchor = selection.anchor;
const anchorNode = anchor.getNode();
if (selection.isCollapsed()) {
// Badly interpreted range selection when collapsed - #1482
if (
domSelection.type === 'Range' &&
domSelection.anchorNode === domSelection.focusNode
) {
selection.dirty = true;
}
// If we have marked a collapsed selection format, and we're
// within the given time range – then attempt to use that format
// instead of getting the format from the anchor node.
const windowEvent = getWindow(editor).event;
const currentTimeStamp = windowEvent
? windowEvent.timeStamp
: performance.now();
const [lastFormat, lastStyle, lastOffset, lastKey, timeStamp] =
collapsedSelectionFormat;
const root = $getRoot();
const isRootTextContentEmpty =
editor.isComposing() === false && root.getTextContent() === '';
if (
currentTimeStamp < timeStamp + 200 &&
anchor.offset === lastOffset &&
anchor.key === lastKey
) {
selection.format = lastFormat;
selection.style = lastStyle;
} else {
if (anchor.type === 'text') {
invariant(
$isTextNode(anchorNode),
'Point.getNode() must return TextNode when type is text',
);
selection.format = anchorNode.getFormat();
selection.style = anchorNode.getStyle();
} else if (anchor.type === 'element' && !isRootTextContentEmpty) {
const lastNode = anchor.getNode();
selection.style = '';
if (
lastNode instanceof ParagraphNode &&
lastNode.getChildrenSize() === 0
) {
selection.format = lastNode.getTextFormat();
selection.style = lastNode.getTextStyle();
} else {
selection.format = 0;
}
}
}
} else {
const anchorKey = anchor.key;
const focus = selection.focus;
const focusKey = focus.key;
const nodes = selection.getNodes();
const nodesLength = nodes.length;
const isBackward = selection.isBackward();
const startOffset = isBackward ? focusOffset : anchorOffset;
const endOffset = isBackward ? anchorOffset : focusOffset;
const startKey = isBackward ? focusKey : anchorKey;
const endKey = isBackward ? anchorKey : focusKey;
let combinedFormat = IS_ALL_FORMATTING;
let hasTextNodes = false;
for (let i = 0; i < nodesLength; i++) {
const node = nodes[i];
const textContentSize = node.getTextContentSize();
if (
$isTextNode(node) &&
textContentSize !== 0 &&
// Exclude empty text nodes at boundaries resulting from user's selection
!(
(i === 0 &&
node.__key === startKey &&
startOffset === textContentSize) ||
(i === nodesLength - 1 &&
node.__key === endKey &&
endOffset === 0)
)
) {
// TODO: what about style?
hasTextNodes = true;
combinedFormat &= node.getFormat();
if (combinedFormat === 0) {
break;
}
}
}
selection.format = hasTextNodes ? combinedFormat : 0;
}
}
dispatchCommand(editor, SELECTION_CHANGE_COMMAND, undefined);
});
}
// This is a work-around is mainly Chrome specific bug where if you select
// the contents of an empty block, you cannot easily unselect anything.
// This results in a tiny selection box that looks buggy/broken. This can
// also help other browsers when selection might "appear" lost, when it
// really isn't.
function onClick(event: PointerEvent, editor: LexicalEditor): void {
updateEditor(editor, () => {
const selection = $getSelection();
const domSelection = getDOMSelection(editor._window);
const lastSelection = $getPreviousSelection();
if (domSelection) {
if ($isRangeSelection(selection)) {
const anchor = selection.anchor;
const anchorNode = anchor.getNode();
if (
anchor.type === 'element' &&
anchor.offset === 0 &&
selection.isCollapsed() &&
!$isRootNode(anchorNode) &&
$getRoot().getChildrenSize() === 1 &&
anchorNode.getTopLevelElementOrThrow().isEmpty() &&
lastSelection !== null &&
selection.is(lastSelection)
) {
domSelection.removeAllRanges();
selection.dirty = true;
} else if (event.detail === 3 && !selection.isCollapsed()) {
// Tripple click causing selection to overflow into the nearest element. In that
// case visually it looks like a single element content is selected, focus node
// is actually at the beginning of the next element (if present) and any manipulations
// with selection (formatting) are affecting second element as well
const focus = selection.focus;
const focusNode = focus.getNode();
if (anchorNode !== focusNode) {
if ($isElementNode(anchorNode)) {
anchorNode.select(0);
} else {
anchorNode.getParentOrThrow().select(0);
}
}
}
} else if (event.pointerType === 'touch') {
// This is used to update the selection on touch devices when the user clicks on text after a
// node selection. See isSelectionChangeFromMouseDown for the inverse
const domAnchorNode = domSelection.anchorNode;
if (domAnchorNode !== null) {
const nodeType = domAnchorNode.nodeType;
// If the user is attempting to click selection back onto text, then
// we should attempt create a range selection.
// When we click on an empty paragraph node or the end of a paragraph that ends
// with an image/poll, the nodeType will be ELEMENT_NODE
if (nodeType === DOM_ELEMENT_TYPE || nodeType === DOM_TEXT_TYPE) {
const newSelection = $internalCreateRangeSelection(
lastSelection,
domSelection,
editor,
event,
);
$setSelection(newSelection);
}
}
}
}
dispatchCommand(editor, CLICK_COMMAND, event);
});
}
function onPointerDown(event: PointerEvent, editor: LexicalEditor) {
// TODO implement text drag & drop
const target = event.target;
const pointerType = event.pointerType;
if (target instanceof Node && pointerType !== 'touch') {
updateEditor(editor, () => {
// Drag & drop should not recompute selection until mouse up; otherwise the initially
// selected content is lost.
if (!$isSelectionCapturedInDecorator(target)) {
isSelectionChangeFromMouseDown = true;
}
});
}
}
function getTargetRange(event: InputEvent): null | StaticRange {
if (!event.getTargetRanges) {
return null;
}
const targetRanges = event.getTargetRanges();
if (targetRanges.length === 0) {
return null;
}
return targetRanges[0];
}
function $canRemoveText(
anchorNode: TextNode | ElementNode,
focusNode: TextNode | ElementNode,
): boolean {
return (
anchorNode !== focusNode ||
$isElementNode(anchorNode) ||
$isElementNode(focusNode) ||
!anchorNode.isToken() ||
!focusNode.isToken()
);
}
function isPossiblyAndroidKeyPress(timeStamp: number): boolean {
return (
lastKeyCode === 'MediaLast' &&
timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY
);
}
function onBeforeInput(event: InputEvent, editor: LexicalEditor): void {
const inputType = event.inputType;
const targetRange = getTargetRange(event);
// We let the browser do its own thing for composition.
if (
inputType === 'deleteCompositionText' ||
// If we're pasting in FF, we shouldn't get this event
// as the `paste` event should have triggered, unless the
// user has dom.event.clipboardevents.enabled disabled in
// about:config. In that case, we need to process the
// pasted content in the DOM mutation phase.
(IS_FIREFOX && isFirefoxClipboardEvents(editor))
) {
return;
} else if (inputType === 'insertCompositionText') {
return;
}
updateEditor(editor, () => {
const selection = $getSelection();
if (inputType === 'deleteContentBackward') {
if (selection === null) {
// Use previous selection
const prevSelection = $getPreviousSelection();
if (!$isRangeSelection(prevSelection)) {
return;
}
$setSelection(prevSelection.clone());
}
if ($isRangeSelection(selection)) {
const isSelectionAnchorSameAsFocus =
selection.anchor.key === selection.focus.key;
if (
isPossiblyAndroidKeyPress(event.timeStamp) &&
editor.isComposing() &&
isSelectionAnchorSameAsFocus
) {
$setCompositionKey(null);
lastKeyDownTimeStamp = 0;
// Fixes an Android bug where selection flickers when backspacing
setTimeout(() => {
updateEditor(editor, () => {
$setCompositionKey(null);
});
}, ANDROID_COMPOSITION_LATENCY);
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
anchorNode.markDirty();
selection.format = anchorNode.getFormat();
invariant(
$isTextNode(anchorNode),
'Anchor node must be a TextNode',
);
selection.style = anchorNode.getStyle();
}
} else {
$setCompositionKey(null);
event.preventDefault();
// Chromium Android at the moment seems to ignore the preventDefault
// on 'deleteContentBackward' and still deletes the content. Which leads
// to multiple deletions. So we let the browser handle the deletion in this case.
const selectedNodeText = selection.anchor.getNode().getTextContent();
const hasSelectedAllTextInNode =
selection.anchor.offset === 0 &&
selection.focus.offset === selectedNodeText.length;
const shouldLetBrowserHandleDelete =
IS_ANDROID_CHROME &&
isSelectionAnchorSameAsFocus &&
!hasSelectedAllTextInNode;
if (!shouldLetBrowserHandleDelete) {
dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
}
}
return;
}
}
if (!$isRangeSelection(selection)) {
return;
}
const data = event.data;
// This represents the case when two beforeinput events are triggered at the same time (without a
// full event loop ending at input). This happens with MacOS with the default keyboard settings,
// a combination of autocorrection + autocapitalization.
// Having Lexical run everything in controlled mode would fix the issue without additional code
// but this would kill the massive performance win from the most common typing event.
// Alternatively, when this happens we can prematurely update our EditorState based on the DOM
// content, a job that would usually be the input event's responsibility.
if (unprocessedBeforeInputData !== null) {
$updateSelectedTextFromDOM(false, editor, unprocessedBeforeInputData);
}
if (
(!selection.dirty || unprocessedBeforeInputData !== null) &&
selection.isCollapsed() &&
!$isRootNode(selection.anchor.getNode()) &&
targetRange !== null
) {
selection.applyDOMRange(targetRange);
}
unprocessedBeforeInputData = null;
const anchor = selection.anchor;
const focus = selection.focus;
const anchorNode = anchor.getNode();
const focusNode = focus.getNode();
if (inputType === 'insertText' || inputType === 'insertTranspose') {
if (data === '\n') {
event.preventDefault();
dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
} else if (data === DOUBLE_LINE_BREAK) {
event.preventDefault();
dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND, undefined);
} else if (data == null && event.dataTransfer) {
// Gets around a Safari text replacement bug.
const text = event.dataTransfer.getData('text/plain');
event.preventDefault();
selection.insertRawText(text);
} else if (
data != null &&
$shouldPreventDefaultAndInsertText(
selection,
targetRange,
data,
event.timeStamp,
true,
)
) {
event.preventDefault();
dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
} else {
unprocessedBeforeInputData = data;
}
lastBeforeInputInsertTextTimeStamp = event.timeStamp;
return;
}
// Prevent the browser from carrying out
// the input event, so we can control the
// output.
event.preventDefault();
switch (inputType) {
case 'insertFromYank':
case 'insertFromDrop':
case 'insertReplacementText': {
dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, event);
break;
}
case 'insertFromComposition': {
// This is the end of composition
$setCompositionKey(null);
dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, event);
break;
}
case 'insertLineBreak': {
// Used for Android
$setCompositionKey(null);
dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
break;
}
case 'insertParagraph': {
// Used for Android
$setCompositionKey(null);
// Safari does not provide the type "insertLineBreak".
// So instead, we need to infer it from the keyboard event.
// We do not apply this logic to iOS to allow newline auto-capitalization
// work without creating linebreaks when pressing Enter
if (isInsertLineBreak && !IS_IOS) {
isInsertLineBreak = false;
dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, false);
} else {
dispatchCommand(editor, INSERT_PARAGRAPH_COMMAND, undefined);
}
break;
}
case 'insertFromPaste':
case 'insertFromPasteAsQuotation': {
dispatchCommand(editor, PASTE_COMMAND, event);
break;
}
case 'deleteByComposition': {
if ($canRemoveText(anchorNode, focusNode)) {
dispatchCommand(editor, REMOVE_TEXT_COMMAND, event);
}
break;
}
case 'deleteByDrag':
case 'deleteByCut': {
dispatchCommand(editor, REMOVE_TEXT_COMMAND, event);
break;
}
case 'deleteContent': {
dispatchCommand(editor, DELETE_CHARACTER_COMMAND, false);
break;
}
case 'deleteWordBackward': {
dispatchCommand(editor, DELETE_WORD_COMMAND, true);
break;
}
case 'deleteWordForward': {
dispatchCommand(editor, DELETE_WORD_COMMAND, false);
break;
}
case 'deleteHardLineBackward':
case 'deleteSoftLineBackward': {
dispatchCommand(editor, DELETE_LINE_COMMAND, true);
break;
}
case 'deleteContentForward':
case 'deleteHardLineForward':
case 'deleteSoftLineForward': {
dispatchCommand(editor, DELETE_LINE_COMMAND, false);
break;
}
case 'formatStrikeThrough': {
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'strikethrough');
break;
}
case 'formatBold': {
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'bold');
break;
}
case 'formatItalic': {
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'italic');
break;
}
case 'formatUnderline': {
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'underline');
break;
}
case 'historyUndo': {
dispatchCommand(editor, UNDO_COMMAND, undefined);
break;
}
case 'historyRedo': {
dispatchCommand(editor, REDO_COMMAND, undefined);
break;
}
default:
// NO-OP
}
});
}
function onInput(event: InputEvent, editor: LexicalEditor): void {
// We don't want the onInput to bubble, in the case of nested editors.
event.stopPropagation();
updateEditor(editor, () => {
const selection = $getSelection();
const data = event.data;
const targetRange = getTargetRange(event);
if (
data != null &&
$isRangeSelection(selection) &&
$shouldPreventDefaultAndInsertText(
selection,
targetRange,
data,
event.timeStamp,
false,
)
) {
// Given we're over-riding the default behavior, we will need
// to ensure to disable composition before dispatching the
// insertText command for when changing the sequence for FF.
if (isFirefoxEndingComposition) {
$onCompositionEndImpl(editor, data);
isFirefoxEndingComposition = false;
}
const anchor = selection.anchor;
const anchorNode = anchor.getNode();
const domSelection = getDOMSelection(editor._window);
if (domSelection === null) {
return;
}
const isBackward = selection.isBackward();
const startOffset = isBackward
? selection.anchor.offset
: selection.focus.offset;
const endOffset = isBackward
? selection.focus.offset
: selection.anchor.offset;
// If the content is the same as inserted, then don't dispatch an insertion.
// Given onInput doesn't take the current selection (it uses the previous)
// we can compare that against what the DOM currently says.
if (
!CAN_USE_BEFORE_INPUT ||
selection.isCollapsed() ||
!$isTextNode(anchorNode) ||
domSelection.anchorNode === null ||
anchorNode.getTextContent().slice(0, startOffset) +
data +
anchorNode.getTextContent().slice(startOffset + endOffset) !==
getAnchorTextFromDOM(domSelection.anchorNode)
) {
dispatchCommand(editor, CONTROLLED_TEXT_INSERTION_COMMAND, data);
}
const textLength = data.length;
// Another hack for FF, as it's possible that the IME is still
// open, even though compositionend has already fired (sigh).
if (
IS_FIREFOX &&
textLength > 1 &&
event.inputType === 'insertCompositionText' &&
!editor.isComposing()
) {
selection.anchor.offset -= textLength;
}
// This ensures consistency on Android.
if (!IS_SAFARI && !IS_IOS && !IS_APPLE_WEBKIT && editor.isComposing()) {
lastKeyDownTimeStamp = 0;
$setCompositionKey(null);
}
} else {
const characterData = data !== null ? data : undefined;
$updateSelectedTextFromDOM(false, editor, characterData);
// onInput always fires after onCompositionEnd for FF.
if (isFirefoxEndingComposition) {
$onCompositionEndImpl(editor, data || undefined);
isFirefoxEndingComposition = false;
}
}
// Also flush any other mutations that might have occurred
// since the change.
$flushMutations();
});
unprocessedBeforeInputData = null;
}
function onCompositionStart(
event: CompositionEvent,
editor: LexicalEditor,
): void {
updateEditor(editor, () => {
const selection = $getSelection();
if ($isRangeSelection(selection) && !editor.isComposing()) {
const anchor = selection.anchor;
const node = selection.anchor.getNode();
$setCompositionKey(anchor.key);
if (
// If it has been 30ms since the last keydown, then we should
// apply the empty space heuristic. We can't do this for Safari,
// as the keydown fires after composition start.
event.timeStamp < lastKeyDownTimeStamp + ANDROID_COMPOSITION_LATENCY ||
// FF has issues around composing multibyte characters, so we also
// need to invoke the empty space heuristic below.
anchor.type === 'element' ||
!selection.isCollapsed() ||
node.getFormat() !== selection.format ||
($isTextNode(node) && node.getStyle() !== selection.style)
) {
// We insert a zero width character, ready for the composition
// to get inserted into the new node we create. If
// we don't do this, Safari will fail on us because
// there is no text node matching the selection.
dispatchCommand(
editor,
CONTROLLED_TEXT_INSERTION_COMMAND,
COMPOSITION_START_CHAR,
);
}
}
});
}
function $onCompositionEndImpl(editor: LexicalEditor, data?: string): void {
const compositionKey = editor._compositionKey;
$setCompositionKey(null);
// Handle termination of composition.
if (compositionKey !== null && data != null) {
// Composition can sometimes move to an adjacent DOM node when backspacing.
// So check for the empty case.
if (data === '') {
const node = $getNodeByKey(compositionKey);
const textNode = getDOMTextNode(editor.getElementByKey(compositionKey));
if (
textNode !== null &&
textNode.nodeValue !== null &&
$isTextNode(node)
) {
$updateTextNodeFromDOMContent(
node,
textNode.nodeValue,
null,
null,
true,
);
}
return;
}
// Composition can sometimes be that of a new line. In which case, we need to
// handle that accordingly.
if (data[data.length - 1] === '\n') {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
// If the last character is a line break, we also need to insert
// a line break.
const focus = selection.focus;
selection.anchor.set(focus.key, focus.offset, focus.type);
dispatchCommand(editor, KEY_ENTER_COMMAND, null);
return;
}
}
}
$updateSelectedTextFromDOM(true, editor, data);
}
function onCompositionEnd(
event: CompositionEvent,
editor: LexicalEditor,
): void {
// Firefox fires onCompositionEnd before onInput, but Chrome/Webkit,
// fire onInput before onCompositionEnd. To ensure the sequence works
// like Chrome/Webkit we use the isFirefoxEndingComposition flag to
// defer handling of onCompositionEnd in Firefox till we have processed
// the logic in onInput.
if (IS_FIREFOX) {
isFirefoxEndingComposition = true;
} else {
updateEditor(editor, () => {
$onCompositionEndImpl(editor, event.data);
});
}
}
function onKeyDown(event: KeyboardEvent, editor: LexicalEditor): void {
lastKeyDownTimeStamp = event.timeStamp;
lastKeyCode = event.key;
if (editor.isComposing()) {
return;
}
const {key, shiftKey, ctrlKey, metaKey, altKey} = event;
if (dispatchCommand(editor, KEY_DOWN_COMMAND, event)) {
return;
}
if (key == null) {
return;
}
if (isMoveForward(key, ctrlKey, altKey, metaKey)) {
dispatchCommand(editor, KEY_ARROW_RIGHT_COMMAND, event);
} else if (isMoveToEnd(key, ctrlKey, shiftKey, altKey, metaKey)) {
dispatchCommand(editor, MOVE_TO_END, event);
} else if (isMoveBackward(key, ctrlKey, altKey, metaKey)) {
dispatchCommand(editor, KEY_ARROW_LEFT_COMMAND, event);
} else if (isMoveToStart(key, ctrlKey, shiftKey, altKey, metaKey)) {
dispatchCommand(editor, MOVE_TO_START, event);
} else if (isMoveUp(key, ctrlKey, metaKey)) {
dispatchCommand(editor, KEY_ARROW_UP_COMMAND, event);
} else if (isMoveDown(key, ctrlKey, metaKey)) {
dispatchCommand(editor, KEY_ARROW_DOWN_COMMAND, event);
} else if (isLineBreak(key, shiftKey)) {
isInsertLineBreak = true;
dispatchCommand(editor, KEY_ENTER_COMMAND, event);
} else if (isSpace(key)) {
dispatchCommand(editor, KEY_SPACE_COMMAND, event);
} else if (isOpenLineBreak(key, ctrlKey)) {
event.preventDefault();
isInsertLineBreak = true;
dispatchCommand(editor, INSERT_LINE_BREAK_COMMAND, true);
} else if (isParagraph(key, shiftKey)) {
isInsertLineBreak = false;
dispatchCommand(editor, KEY_ENTER_COMMAND, event);
} 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(key)) {
dispatchCommand(editor, KEY_ESCAPE_COMMAND, event);
} 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(key, altKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, DELETE_WORD_COMMAND, true);
} else if (isDeleteWordForward(key, altKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, DELETE_WORD_COMMAND, false);
} else if (isDeleteLineBackward(key, metaKey)) {
event.preventDefault();
dispatchCommand(editor, DELETE_LINE_COMMAND, true);
} else if (isDeleteLineForward(key, metaKey)) {
event.preventDefault();
dispatchCommand(editor, DELETE_LINE_COMMAND, false);
} else if (isBold(key, altKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'bold');
} else if (isUnderline(key, altKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'underline');
} else if (isItalic(key, altKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, FORMAT_TEXT_COMMAND, 'italic');
} else if (isTab(key, altKey, ctrlKey, metaKey)) {
dispatchCommand(editor, KEY_TAB_COMMAND, event);
} else if (isUndo(key, shiftKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, UNDO_COMMAND, undefined);
} 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(key, shiftKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, COPY_COMMAND, event);
} else if (isCut(key, shiftKey, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, CUT_COMMAND, event);
} 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(key, metaKey, ctrlKey)) {
event.preventDefault();
dispatchCommand(editor, SELECT_ALL_COMMAND, event);
}
}
if (isModifier(ctrlKey, shiftKey, altKey, metaKey)) {
dispatchCommand(editor, KEY_MODIFIER_COMMAND, event);
}
}
function getRootElementRemoveHandles(
rootElement: HTMLElement,
): RootElementRemoveHandles {
// @ts-expect-error: internal field
let eventHandles = rootElement.__lexicalEventHandles;
if (eventHandles === undefined) {
eventHandles = [];
// @ts-expect-error: internal field
rootElement.__lexicalEventHandles = eventHandles;
}
return eventHandles;
}
// Mapping root editors to their active nested editors, contains nested editors
// mapping only, so if root editor is selected map will have no reference to free up memory
const activeNestedEditorsMap: Map<string, LexicalEditor> = new Map();
function onDocumentSelectionChange(event: Event): void {
const target = event.target as null | Element | Document;
const targetWindow =
target == null
? null
: target.nodeType === 9
? (target as Document).defaultView
: (target as Element).ownerDocument.defaultView;
const domSelection = getDOMSelection(targetWindow);
if (domSelection === null) {
return;
}
const nextActiveEditor = getNearestEditorFromDOMNode(domSelection.anchorNode);
if (nextActiveEditor === null) {
return;
}
if (isSelectionChangeFromMouseDown) {
isSelectionChangeFromMouseDown = false;
updateEditor(nextActiveEditor, () => {
const lastSelection = $getPreviousSelection();
const domAnchorNode = domSelection.anchorNode;
if (domAnchorNode === null) {
return;
}
const nodeType = domAnchorNode.nodeType;
// If the user is attempting to click selection back onto text, then
// we should attempt create a range selection.
// When we click on an empty paragraph node or the end of a paragraph that ends
// with an image/poll, the nodeType will be ELEMENT_NODE
if (nodeType !== DOM_ELEMENT_TYPE && nodeType !== DOM_TEXT_TYPE) {
return;
}
const newSelection = $internalCreateRangeSelection(
lastSelection,
domSelection,
nextActiveEditor,
event,
);
$setSelection(newSelection);
});
}
// When editor receives selection change event, we're checking if
// it has any sibling editors (within same parent editor) that were active
// before, and trigger selection change on it to nullify selection.
const editors = getEditorsToPropagate(nextActiveEditor);
const rootEditor = editors[editors.length - 1];
const rootEditorKey = rootEditor._key;
const activeNestedEditor = activeNestedEditorsMap.get(rootEditorKey);
const prevActiveEditor = activeNestedEditor || rootEditor;
if (prevActiveEditor !== nextActiveEditor) {
onSelectionChange(domSelection, prevActiveEditor, false);
}
onSelectionChange(domSelection, nextActiveEditor, true);
// If newly selected editor is nested, then add it to the map, clean map otherwise
if (nextActiveEditor !== rootEditor) {
activeNestedEditorsMap.set(rootEditorKey, nextActiveEditor);
} else if (activeNestedEditor) {
activeNestedEditorsMap.delete(rootEditorKey);
}
}
function stopLexicalPropagation(event: Event): void {
// We attach a special property to ensure the same event doesn't re-fire
// for parent editors.
// @ts-ignore
event._lexicalHandled = true;
}
function hasStoppedLexicalPropagation(event: Event): boolean {
// @ts-ignore
const stopped = event._lexicalHandled === true;
return stopped;
}
export type EventHandler = (event: Event, editor: LexicalEditor) => void;
export function addRootElementEvents(
rootElement: HTMLElement,
editor: LexicalEditor,
): void {
// We only want to have a single global selectionchange event handler, shared
// between all editor instances.
const doc = rootElement.ownerDocument;
const documentRootElementsCount = rootElementsRegistered.get(doc);
if (
documentRootElementsCount === undefined ||
documentRootElementsCount < 1
) {
doc.addEventListener('selectionchange', onDocumentSelectionChange);
}
rootElementsRegistered.set(doc, (documentRootElementsCount || 0) + 1);
// @ts-expect-error: internal field
rootElement.__lexicalEditor = editor;
const removeHandles = getRootElementRemoveHandles(rootElement);
for (let i = 0; i < rootElementEvents.length; i++) {
const [eventName, onEvent] = rootElementEvents[i];
const eventHandler =
typeof onEvent === 'function'
? (event: Event) => {
if (hasStoppedLexicalPropagation(event)) {
return;
}
stopLexicalPropagation(event);
if (editor.isEditable() || eventName === 'click') {
onEvent(event, editor);
}
}
: (event: Event) => {
if (hasStoppedLexicalPropagation(event)) {
return;
}
stopLexicalPropagation(event);
const isEditable = editor.isEditable();
switch (eventName) {
case 'cut':
return (
isEditable &&
dispatchCommand(editor, CUT_COMMAND, event as ClipboardEvent)
);
case 'copy':
return dispatchCommand(
editor,
COPY_COMMAND,
event as ClipboardEvent,
);
case 'paste':
return (
isEditable &&
dispatchCommand(
editor,
PASTE_COMMAND,
event as ClipboardEvent,
)
);
case 'dragstart':
return (
isEditable &&
dispatchCommand(editor, DRAGSTART_COMMAND, event as DragEvent)
);
case 'dragover':
return (
isEditable &&
dispatchCommand(editor, DRAGOVER_COMMAND, event as DragEvent)
);
case 'dragend':
return (
isEditable &&
dispatchCommand(editor, DRAGEND_COMMAND, event as DragEvent)
);
case 'focus':
return (
isEditable &&
dispatchCommand(editor, FOCUS_COMMAND, event as FocusEvent)
);
case 'blur': {
return (
isEditable &&
dispatchCommand(editor, BLUR_COMMAND, event as FocusEvent)
);
}
case 'drop':
return (
isEditable &&
dispatchCommand(editor, DROP_COMMAND, event as DragEvent)
);
}
};
rootElement.addEventListener(eventName, eventHandler);
removeHandles.push(() => {
rootElement.removeEventListener(eventName, eventHandler);
});
}
}
export function removeRootElementEvents(rootElement: HTMLElement): void {
const doc = rootElement.ownerDocument;
const documentRootElementsCount = rootElementsRegistered.get(doc);
invariant(
documentRootElementsCount !== undefined,
'Root element not registered',
);
// We only want to have a single global selectionchange event handler, shared
// between all editor instances.
const newCount = documentRootElementsCount - 1;
invariant(newCount >= 0, 'Root element count less than 0');
rootElementsRegistered.set(doc, newCount);
if (newCount === 0) {
doc.removeEventListener('selectionchange', onDocumentSelectionChange);
}
const editor = getEditorPropertyFromDOMNode(rootElement);
if (isLexicalEditor(editor)) {
cleanActiveNestedEditorsMap(editor);
// @ts-expect-error: internal field
rootElement.__lexicalEditor = null;
} else if (editor) {
invariant(
false,
'Attempted to remove event handlers from a node that does not belong to this build of Lexical',
);
}
const removeHandles = getRootElementRemoveHandles(rootElement);
for (let i = 0; i < removeHandles.length; i++) {
removeHandles[i]();
}
// @ts-expect-error: internal field
rootElement.__lexicalEventHandles = [];
}
function cleanActiveNestedEditorsMap(editor: LexicalEditor) {
if (editor._parentEditor !== null) {
// For nested editor cleanup map if this editor was marked as active
const editors = getEditorsToPropagate(editor);
const rootEditor = editors[editors.length - 1];
const rootEditorKey = rootEditor._key;
if (activeNestedEditorsMap.get(rootEditorKey) === editor) {
activeNestedEditorsMap.delete(rootEditorKey);
}
} else {
// For top-level editors cleanup map
activeNestedEditorsMap.delete(editor._key);
}
}
export function markSelectionChangeFromDOMUpdate(): void {
isSelectionChangeFromDOMUpdate = true;
}
export function markCollapsedSelectionFormat(
format: number,
style: string,
offset: number,
key: NodeKey,
timeStamp: number,
): void {
collapsedSelectionFormat = [format, style, offset, key, timeStamp];
}