Skip to content

[pull] main from facebook:main #224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Mar 14, 2026
Merged

[pull] main from facebook:main #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/lexical-link/src/ClickableLinkExtension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,14 @@ export function registerClickableLink(
}
};

return editor.registerRootListener((rootElement, prevRootElement) => {
if (prevRootElement !== null) {
prevRootElement.removeEventListener('click', onClick);
prevRootElement.removeEventListener('mouseup', onMouseUp);
}
if (rootElement !== null) {
return editor.registerRootListener((rootElement) => {
if (rootElement) {
rootElement.addEventListener('click', onClick, eventOptions);
rootElement.addEventListener('mouseup', onMouseUp, eventOptions);
return () => {
rootElement.removeEventListener('click', onClick);
rootElement.removeEventListener('mouseup', onMouseUp);
};
}
});
}
Expand Down
51 changes: 25 additions & 26 deletions packages/lexical-list/src/checkList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export function registerCheckList(
COMMAND_PRIORITY_LOW,
),

editor.registerRootListener((rootElement, prevElement) => {
editor.registerRootListener((rootElement) => {
if (rootElement !== null) {
rootElement.addEventListener('click', configHandleClick);
// Use capture so we run before other listeners that might move focus.
Expand All @@ -185,31 +185,30 @@ export function registerCheckList(
capture: true,
passive: false,
});
}

if (prevElement !== null) {
prevElement.removeEventListener('click', configHandleClick);
prevElement.removeEventListener(
'pointerdown',
configHandleSelectDefaults,
{
capture: true,
},
);
prevElement.removeEventListener(
'mousedown',
configHandleSelectDefaults,
{
capture: true,
},
);
prevElement.removeEventListener(
'touchstart',
configHandleSelectDefaults,
{
capture: true,
},
);
return () => {
rootElement.removeEventListener('click', configHandleClick);
rootElement.removeEventListener(
'pointerdown',
configHandleSelectDefaults,
{
capture: true,
},
);
rootElement.removeEventListener(
'mousedown',
configHandleSelectDefaults,
{
capture: true,
},
);
rootElement.removeEventListener(
'touchstart',
configHandleSelectDefaults,
{
capture: true,
},
);
};
}
}),
);
Expand Down
8 changes: 1 addition & 7 deletions packages/lexical-playground/src/nodes/ImageComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,8 +237,6 @@ function BrokenImage(): JSX.Element {
);
}

function noop() {}

export default function ImageComponent({
src,
altText,
Expand Down Expand Up @@ -397,7 +395,6 @@ export default function ImageComponent({
);
}, [editor]);
useEffect(() => {
let rootCleanup = noop;
return mergeRegister(
editor.registerCommand<MouseEvent>(
CLICK_COMMAND,
Expand All @@ -416,15 +413,12 @@ export default function ImageComponent({
COMMAND_PRIORITY_LOW,
),
editor.registerRootListener((rootElement) => {
rootCleanup();
rootCleanup = noop;
if (rootElement) {
rootElement.addEventListener('contextmenu', onRightClick);
rootCleanup = () =>
return () =>
rootElement.removeEventListener('contextmenu', onRightClick);
}
}),
() => rootCleanup(),
);
}, [editor, $onEnter, $onEscape, onClick, onRightClick]);

Expand Down
16 changes: 6 additions & 10 deletions packages/lexical-playground/src/nodes/StickyComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,16 +100,12 @@ export default function StickyComponent({
}
});

const removeRootListener = editor.registerRootListener(
(nextRootElem, prevRootElem) => {
if (prevRootElem !== null) {
resizeObserver.unobserve(prevRootElem);
}
if (nextRootElem !== null) {
resizeObserver.observe(nextRootElem);
}
},
);
const removeRootListener = editor.registerRootListener((nextRootElem) => {
if (nextRootElem !== null) {
resizeObserver.observe(nextRootElem);
return () => resizeObserver.unobserve(nextRootElem);
}
});

const handleWindowResize = () => {
const rootElement = editor.getRootElement();
Expand Down
5 changes: 2 additions & 3 deletions packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -869,12 +869,11 @@ function TableCellActionMenuContainer({
COMMAND_PRIORITY_CRITICAL,
),
editor.registerRootListener((rootElement, prevRootElement) => {
if (prevRootElement) {
prevRootElement.removeEventListener('pointerup', delayedCallback);
}
if (rootElement) {
rootElement.addEventListener('pointerup', delayedCallback);
delayedCallback();
return () =>
rootElement.removeEventListener('pointerup', delayedCallback);
}
}),
() => clearTimeout(timeoutId),
Expand Down
18 changes: 10 additions & 8 deletions packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,14 +176,16 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
capture: true,
});

const removeRootListener = editor.registerRootListener(
(rootElement, prevRootElement) => {
prevRootElement?.removeEventListener('pointermove', onPointerMove);
prevRootElement?.removeEventListener('pointerdown', onPointerDown);
rootElement?.addEventListener('pointermove', onPointerMove);
rootElement?.addEventListener('pointerdown', onPointerDown);
},
);
const removeRootListener = editor.registerRootListener((rootElement) => {
if (rootElement) {
rootElement.addEventListener('pointermove', onPointerMove);
rootElement.addEventListener('pointerdown', onPointerDown);
return () => {
rootElement.removeEventListener('pointermove', onPointerMove);
rootElement.removeEventListener('pointerdown', onPointerDown);
};
}
});

return () => {
removeRootListener();
Expand Down
20 changes: 6 additions & 14 deletions packages/lexical-playground/src/plugins/TableHoverActionsV2Plugin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,6 @@ function TableHoverActionsV2({
const dragHandleRef = useRef<HTMLButtonElement | null>(null);
const hoveredLeftCellRef = useRef<HTMLTableCellElement | null>(null);
const hoveredTopCellRef = useRef<HTMLTableCellElement | null>(null);
const handleMouseLeaveRef = useRef<((event: MouseEvent) => void) | null>(
null,
);
const dropIndicatorCleanupRef = useRef<Array<() => void>>([]);
const [hoveredTable, setHoveredTable] = useState<HTMLTableElement | null>(
null,
Expand Down Expand Up @@ -358,17 +355,12 @@ function TableHoverActionsV2({
setIsVisible(false);
setIsLeftVisible(false);
};
handleMouseLeaveRef.current = handleMouseLeave;

return editor.registerRootListener((rootElement, prevRootElement) => {
if (prevRootElement && handleMouseLeaveRef.current) {
prevRootElement.removeEventListener(
'mouseleave',
handleMouseLeaveRef.current,
);
}
if (rootElement && handleMouseLeaveRef.current) {
rootElement.addEventListener('mouseleave', handleMouseLeaveRef.current);

return editor.registerRootListener((rootElement) => {
if (rootElement) {
rootElement.addEventListener('mouseleave', handleMouseLeave);
return () =>
rootElement.removeEventListener('mouseleave', handleMouseLeave);
}
});
}, [editor]);
Expand Down
25 changes: 10 additions & 15 deletions packages/lexical-playground/src/plugins/TestRecorderPlugin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,21 +277,16 @@ ${steps.map(formatStep).join(`\n`)}
}
};

return editor.registerRootListener(
(
rootElement: null | HTMLElement,
prevRootElement: null | HTMLElement,
) => {
if (prevRootElement !== null) {
prevRootElement.removeEventListener('keydown', onKeyDown);
prevRootElement.removeEventListener('keyup', onKeyUp);
}
if (rootElement !== null) {
rootElement.addEventListener('keydown', onKeyDown);
rootElement.addEventListener('keyup', onKeyUp);
}
},
);
return editor.registerRootListener((rootElement) => {
if (rootElement) {
rootElement.addEventListener('keydown', onKeyDown);
rootElement.addEventListener('keyup', onKeyUp);
return () => {
rootElement.removeEventListener('keydown', onKeyDown);
rootElement.removeEventListener('keyup', onKeyUp);
};
}
});
}, [editor, isRecording, pushStep]);

useLayoutEffect(() => {
Expand Down
7 changes: 2 additions & 5 deletions packages/lexical-react/src/LexicalDraggableBlockPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,7 @@ function useDraggableBlockMenu(
}

return mergeRegister(
editor.registerRootListener((rootElement, prevRootElement) => {
editor.registerRootListener((rootElement) => {
function onBlur(event: FocusEvent) {
const relatedTarget = event.relatedTarget;
if (
Expand All @@ -483,10 +483,7 @@ function useDraggableBlockMenu(

if (rootElement) {
rootElement.addEventListener('blur', onBlur, true);
}

if (prevRootElement) {
prevRootElement.removeEventListener('blur', onBlur, true);
return () => rootElement.removeEventListener('blur', onBlur, true);
}
}),
// Intercept BLUR_COMMAND if focus is on the menu (fallback in case event propagation wasn't stopped)
Expand Down
7 changes: 3 additions & 4 deletions packages/lexical-react/src/LexicalNodeContextMenuPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,12 +248,11 @@ const NodeContextMenuPlugin = forwardRef<
setIsOpen(true);
}

return editor.registerRootListener((rootElement, prevRootElement) => {
if (prevRootElement !== null) {
prevRootElement.removeEventListener('contextmenu', onContextMenu);
}
return editor.registerRootListener((rootElement) => {
if (rootElement !== null) {
rootElement.addEventListener('contextmenu', onContextMenu);
return () =>
rootElement.removeEventListener('contextmenu', onContextMenu);
}
});
}, [items, itemClassName, separatorClassName, refs, editor]);
Expand Down
8 changes: 3 additions & 5 deletions packages/lexical-react/src/LexicalNodeEventPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,11 @@ export function NodeEventPlugin({
});
};

return editor.registerRootListener((rootElement, prevRootElement) => {
return editor.registerRootListener((rootElement) => {
if (rootElement) {
rootElement.addEventListener(eventType, onEvent, isCaptured);
}

if (prevRootElement) {
prevRootElement.removeEventListener(eventType, onEvent, isCaptured);
return () =>
rootElement.removeEventListener(eventType, onEvent, isCaptured);
}
});
// We intentionally don't respect changes to eventType.
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-website/docs/concepts/dom-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ function myListener(event) {
alert('Nice!');
}

const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
const removeRootListener = editor.registerRootListener((rootElement) => {
// add the listener to the current root element
rootElement.addEventListener('click', myListener);
// remove the listener from the old root element - make sure the ref to myListener
// is stable so the removal works and you avoid a memory leak.
prevRootElement.removeEventListener('click', myListener);
return () => rootElement.removeEventListener('click', myListener);
});

// teardown the listener - return this from your useEffect callback if you're using React.
Expand Down
12 changes: 6 additions & 6 deletions packages/lexical/flow/Lexical.js.flow
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ type DecoratorListener = (decorator: {
type RootListener = (
rootElement: null | HTMLElement,
prevRootElement: null | HTMLElement,
) => void;
) => void | (() => void);
type TextContentListener = (text: string) => void;
type ErrorHandler = (error: Error) => void;
export type MutationListener = (
Expand All @@ -123,13 +123,13 @@ export type MutationListener = (
export type MutationListenerOptions = {
skipInitialization?: boolean;
};
export type EditableListener = (editable: boolean) => void;
export type EditableListener = (editable: boolean) => void | (() => void);
type Listeners = {
decorator: Set<DecoratorListener>,
decorator: Map<DecoratorListener, void | (() => void)>,
mutation: MutationListeners,
textcontent: Set<TextContentListener>,
root: Set<RootListener>,
update: Set<UpdateListener>,
textcontent: Map<TextContentListener, void | (() => void)>,
root: Map<RootListener, void | (() => void)>,
update: Map<UpdateListener, void | (() => void)>,
};
export type CommandListener<P> = (payload: P, editor: LexicalEditor) => boolean;
// $FlowFixMe[unclear-type]
Expand Down
Loading
Loading