Skip to content

Commit

Permalink
perf: skip TableCellResizer logic when no table present
Browse files Browse the repository at this point in the history
- Add table existence check using ().getChildren()
- Skip event listener attachment when no table exists
- Improve performance by preventing unnecessary evaluations

Fixes #7099
  • Loading branch information
kirandash committed Feb 17, 2025
1 parent 9deab94 commit a4c0d80
Showing 1 changed file with 41 additions and 11 deletions.
52 changes: 41 additions & 11 deletions packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,19 @@ import {
$getTableNodeFromLexicalNodeOrThrow,
$getTableRowIndexFromTableCellNode,
$isTableCellNode,
$isTableNode,
$isTableRowNode,
getDOMCellFromTarget,
getTableElement,
TableNode,
} from '@lexical/table';
import {calculateZoomLevel} from '@lexical/utils';
import {$getNearestNodeFromDOMNode, isHTMLElement} from 'lexical';
import {
$getNearestNodeFromDOMNode,
$getRoot,
isHTMLElement,
LexicalNode,
} from 'lexical';
import * as React from 'react';
import {
MouseEventHandler,
Expand All @@ -51,6 +57,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
const targetRef = useRef<HTMLElement | null>(null);
const resizerRef = useRef<HTMLDivElement | null>(null);
const tableRectRef = useRef<ClientRect | null>(null);
const [hasTable, setHasTable] = useState(false);

const mouseStartPosRef = useRef<MousePosition | null>(null);
const [mouseCurrentPos, updateMouseCurrentPos] =
Expand All @@ -74,20 +81,43 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
};

useEffect(() => {
return editor.registerNodeTransform(TableNode, (tableNode) => {
if (tableNode.getColWidths()) {
return tableNode;
}
// Check for table existence using editorState
const unregisterUpdate = editor.registerUpdateListener(() => {
editor.getEditorState().read(() => {
const hasTableNow = $getRoot()
.getChildren()
.some((node: LexicalNode) => $isTableNode(node));
setHasTable(hasTableNow);
});
});

const numColumns = tableNode.getColumnCount();
const columnWidth = MIN_COLUMN_WIDTH;
// Register table node transform
const unregisterTransform = editor.registerNodeTransform(
TableNode,
(tableNode) => {
if (tableNode.getColWidths()) {
return tableNode;
}

tableNode.setColWidths(Array(numColumns).fill(columnWidth));
return tableNode;
});
const numColumns = tableNode.getColumnCount();
const columnWidth = MIN_COLUMN_WIDTH;

tableNode.setColWidths(Array(numColumns).fill(columnWidth));
return tableNode;
},
);

return () => {
unregisterUpdate();
unregisterTransform();
};
}, [editor]);

useEffect(() => {
if (!hasTable) {
return;
}

const onMouseMove = (event: MouseEvent) => {
const target = event.target;
if (!isHTMLElement(target)) {
Expand Down Expand Up @@ -163,7 +193,7 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
return () => {
removeRootListener();
};
}, [activeCell, draggingDirection, editor, resetState]);
}, [activeCell, draggingDirection, editor, resetState, hasTable]);

const isHeightChanging = (direction: MouseDraggingDirection) => {
if (direction === 'bottom') {
Expand Down

0 comments on commit a4c0d80

Please sign in to comment.