From a4c0d8067a8f14f451c2b2e3156e8fcfd8617a5e Mon Sep 17 00:00:00 2001
From: kirandash <thekirankumardash@gmail.com>
Date: Tue, 18 Feb 2025 01:56:22 +0800
Subject: [PATCH] perf: skip TableCellResizer logic when no table present

- Add table existence check using ().getChildren()
- Skip event listener attachment when no table exists
- Improve performance by preventing unnecessary evaluations

Fixes #7099
---
 .../src/plugins/TableCellResizer/index.tsx    | 52 +++++++++++++++----
 1 file changed, 41 insertions(+), 11 deletions(-)

diff --git a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
index 570ad5d11ff..33e38ef853a 100644
--- a/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableCellResizer/index.tsx
@@ -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,
@@ -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] =
@@ -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)) {
@@ -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') {