diff --git a/packages/lexical-table/src/LexicalTablePluginHelpers.ts b/packages/lexical-table/src/LexicalTablePluginHelpers.ts index 10c53eba838..f9a45f261bb 100644 --- a/packages/lexical-table/src/LexicalTablePluginHelpers.ts +++ b/packages/lexical-table/src/LexicalTablePluginHelpers.ts @@ -306,27 +306,7 @@ export function registerTablePlugin(editor: LexicalEditor): () => void { invariant(false, 'TablePlugin: TableNode is not registered on editor'); } - // Add mousedown handler for triple clicks or more - const removeTripleClickHandler = editor.registerRootListener( - (rootElement: null | HTMLElement) => { - if (rootElement !== null) { - const onMouseDown = (event: MouseEvent) => { - if (event.detail >= 3) { - // Prevent default multi-click behavior - event.preventDefault(); - } - }; - rootElement.addEventListener('mousedown', onMouseDown); - return () => { - rootElement.removeEventListener('mousedown', onMouseDown); - }; - } - return () => {}; - }, - ); - return mergeRegister( - removeTripleClickHandler, editor.registerCommand( INSERT_TABLE_COMMAND, $insertTableCommandListener, diff --git a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts index 10d83e36bbf..63fc9cdac09 100644 --- a/packages/lexical-table/src/LexicalTableSelectionHelpers.ts +++ b/packages/lexical-table/src/LexicalTableSelectionHelpers.ts @@ -287,6 +287,26 @@ export function applyTableHandlers( onMouseDown, tableObserver.listenerOptions, ); + tableObserver.listenersToRemove.add(() => { + tableElement.removeEventListener('mousedown', onMouseDown); + }); + + const onTripleClick = (event: MouseEvent) => { + if (event.detail >= 3 && isDOMNode(event.target)) { + const targetCell = getDOMCellFromTarget(event.target); + if (targetCell !== null) { + event.preventDefault(); + } + } + }; + tableElement.addEventListener( + 'mousedown', + onTripleClick, + tableObserver.listenerOptions, + ); + tableObserver.listenersToRemove.add(() => { + tableElement.removeEventListener('mousedown', onTripleClick); + }); // Clear selection when clicking outside of dom. const mouseDownCallback = (event: MouseEvent) => { @@ -312,6 +332,9 @@ export function applyTableHandlers( mouseDownCallback, tableObserver.listenerOptions, ); + tableObserver.listenersToRemove.add(() => { + editorWindow.removeEventListener('mousedown', mouseDownCallback); + }); for (const [command, direction] of ARROW_KEY_COMMANDS_WITH_DIRECTION) { tableObserver.listenersToRemove.add(