Skip to content

Commit

Permalink
refactor(lexical-table): move triple-click handler to table level
Browse files Browse the repository at this point in the history
Previously, triple-click handling was done at the root level which prevented native
triple-click behavior everywhere.

This change:

- Removes root-level triple-click handler (removeTripleClickHandler)
- Adds table-specific triple-click handler in applyTableHandlers
- Scopes preventDefault() to only trigger for table cell targets
- Preserves native triple-click behavior outside tables

Co-authored-by: Bob Ippolito <bob@redivi.com>
  • Loading branch information
kirandash and etrepum committed Feb 24, 2025
1 parent 9a6365b commit e2f75c0
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 20 deletions.
20 changes: 0 additions & 20 deletions packages/lexical-table/src/LexicalTablePluginHelpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
23 changes: 23 additions & 0 deletions packages/lexical-table/src/LexicalTableSelectionHelpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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(
Expand Down

0 comments on commit e2f75c0

Please sign in to comment.