fix(table): read table element from context to prevent stale-path crash on Enter (#5064)

When Enter splits or inserts a block before a table, useElementSelector's
path becomes stale and resolves to the wrong node (e.g. the heading).
Passing this non-table node to compileTableGrid crashes with:
  TypeError: Cannot read properties of undefined (reading 'forEach')

Fix: useTableColSizes now reads the table element from useElement(KEYS.table)
which always returns the context-bound table node, instead of re-reading from
the editor via a potentially stale path.

Closes #5064

Author: SamarthNimangre

.changeset/fix-table-grid-enter-crash.md

@@ -0,0 +1,5 @@
+---
+"@platejs/table": patch
+---
+
+Fix crash when pressing Enter before a table on the homepage editor. `useTableColSizes` now reads the table element from React context (`useElement`) instead of re-reading from the editor via a potentially stale path, preventing `compileTableGrid` from receiving a non-table node during mid-transaction re-renders.

packages/table/src/react/useTableElement.ts

@@ -4,9 +4,8 @@ import {
   useEditorPlugin,
   useEditorSelector,
   useElement,
-  useElementSelector,
 } from '@platejs/core/react';
-import { PathApi } from '@platejs/plite';
+
 import { useClaimEditableDOMCommit } from '@platejs/plite-react/internal';
 import { KEYS, type TTableElement } from '@platejs/utils';
 import React from 'react';
@@ -52,31 +51,30 @@ export const useTableColSizes = ({
 } = {}): number[] => {
   const { editor } = useEditorPlugin(TablePlugin);
   const colSizeOverrides = useTableValue('colSizeOverrides');
-  const tablePath = useElementSelector(([, path]) => path, {
-    name: KEYS.table,
-  });
-
-  const overriddenColSizes = useEditorSelector(
-    () => {
-      const tableNode = editor.read.nodes.get<TTableElement>(tablePath)?.[0];
-
-      if (!tableNode) return [];
-
-      const colSizes = editor
-        .plugin(TablePlugin)
-        .api.getOverriddenColumnSizes(
-          tableNode,
-          disableOverrides ? undefined : colSizeOverrides
-        );
 
-      if (transformColSizes) {
-        return transformColSizes(colSizes);
-      }
+  // Read the table element from React context rather than re-reading from the
+  // editor via a path. During a transaction that inserts or splits a block
+  // before the table (e.g. pressing Enter in a heading), the path from
+  // useElementSelector can become stale and resolve to the wrong node, crashing
+  // compileTableGrid. useElement always returns the context-bound table node.
+  const tableElement = useElement<TTableElement>(KEYS.table);
+
+  const overriddenColSizes = React.useMemo(() => {
+    if (!tableElement) return [];
+
+    const colSizes = editor
+      .plugin(TablePlugin)
+      .api.getOverriddenColumnSizes(
+        tableElement,
+        disableOverrides ? undefined : colSizeOverrides
+      );
+
+    if (transformColSizes) {
+      return transformColSizes(colSizes);
+    }
 
-      return colSizes;
-    },
-    { equalityFn: (a, b) => !!a && PathApi.equals(a, b) }
-  );
+    return colSizes;
+  }, [tableElement, colSizeOverrides, disableOverrides, editor, transformColSizes]);
 
   return overriddenColSizes;
 };