Perf: Optimizing table performance

apps/www/src/registry/default/plate-ui/table-cell-element.tsx

@@ -6,12 +6,10 @@ import { cn, withProps, withRef } from '@udecode/cn';
 import {
   useTableCellElement,
   useTableCellElementResizable,
-  useTableCellElementResizableState,
   useTableCellElementState,
 } from '@udecode/plate-table/react';
 
 import { PlateElement } from './plate-element';
-import { ResizeHandle } from './resizable';
 
 export const TableCellElement = withRef<
   typeof PlateElement,
@@ -22,27 +20,11 @@ export const TableCellElement = withRef<
 >(({ children, className, hideBorder, isHeader, style, ...props }, ref) => {
   const { element } = props;
 
-  const {
-    borders,
-    colIndex,
-    colSpan,
-    hovered,
-    hoveredLeft,
-    isSelectingCell,
-    readOnly,
-    rowIndex,
-    rowSize,
-    selected,
-  } = useTableCellElementState();
+  const { borders, isFirstCell, readOnly, selected } =
+    useTableCellElementState();
   const { props: cellProps } = useTableCellElement({ element: props.element });
-  const resizableState = useTableCellElementResizableState({
-    colIndex,
-    colSpan,
-    rowIndex,
-  });
 
-  const { bottomProps, hiddenLeft, leftProps, rightProps } =
-    useTableCellElementResizable(resizableState);
+  const { bottomProps, leftProps, rightProps } = useTableCellElementResizable();
 
   return (
     <PlateElement
@@ -78,56 +60,30 @@ export const TableCellElement = withRef<
         } as React.CSSProperties
       }
     >
-      <div
-        className="relative z-20 box-border h-full px-3 py-2"
-        style={{
-          minHeight: rowSize,
-        }}
-      >
+      <div className="relative z-20 box-border h-full px-3 py-2">
         {children}
       </div>
 
-      {!isSelectingCell && (
+      {!readOnly && (
         <div
           className="group absolute top-0 size-full select-none"
           contentEditable={false}
           suppressContentEditableWarning={true}
         >
-          {!readOnly && (
-            <>
-              <ResizeHandle
-                {...rightProps}
-                className="-top-3 right-[-5px] w-[10px]"
-              />
-              <ResizeHandle
-                {...bottomProps}
-                className="bottom-[-5px] h-[10px]"
-              />
-              {!hiddenLeft && (
-                <ResizeHandle
-                  {...leftProps}
-                  className="-top-3 left-[-5px] w-[10px]"
-                />
-              )}
-
-              {hovered && (
-                <div
-                  className={cn(
-                    'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
-                    'right-[-1.5px]'
-                  )}
-                />
-              )}
-              {hoveredLeft && (
-                <div
-                  className={cn(
-                    'absolute -top-3 z-30 h-[calc(100%_+_12px)] w-1 bg-ring',
-                    'left-[-1.5px]'
-                  )}
-                />
-              )}
-            </>
+          {isFirstCell && (
+            <div
+              className="absolute left-[-2px] z-30 h-full w-1 cursor-col-resize bg-transparent"
+              {...leftProps}
+            />
           )}
+          <div
+            className="absolute right-[-2px] z-30 h-full w-1 cursor-col-resize bg-transparent"
+            {...rightProps}
+          />
+          <div
+            className="absolute bottom-[-2px] z-30 h-1 w-full cursor-row-resize bg-transparent"
+            {...bottomProps}
+          />
         </div>
       )}
     </PlateElement>

apps/www/src/registry/default/plate-ui/table-element.tsx

@@ -23,6 +23,8 @@ import {
   useTableElement,
   useTableElementState,
   useTableMergeState,
+  useTableResizableState,
+  useTableResize,
 } from '@udecode/plate-table/react';
 import { type LucideProps, Combine, Trash2Icon, Ungroup } from 'lucide-react';
 import { useReadOnly, useSelected } from 'slate-react';
@@ -38,6 +40,7 @@ import {
 } from './dropdown-menu';
 import { PlateElement } from './plate-element';
 import { Popover, PopoverContent, popoverVariants } from './popover';
+import { ResizeHandle } from './resizable';
 
 export const TableBordersDropdownMenuContent = withRef<
   typeof DropdownMenuPrimitive.Content
@@ -200,13 +203,34 @@ export const TableFloatingToolbar = withRef<typeof PopoverContent>(
 export const TableElement = withHOC(
   TableProvider,
   withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {
-    const { colSizes, isSelectingCell, marginLeft, minColumnWidth } =
-      useTableElementState();
+    const {
+      colSizes,
+      containerRef,
+      element,
+      isSelectingCell,
+      marginLeft,
+      minColumnWidth,
+    } = useTableElementState();
     const { colGroupProps, props: tableProps } = useTableElement();
 
+    const tableResizableState = useTableResizableState({});
+
+    const { currentColIndex, currentRowIndex, resizeHandleProps, resizeStyle } =
+      useTableResize({
+        containerRef,
+        element,
+        isSelectingCell,
+        minColumnWidth,
+        ...tableResizableState,
+      });
+
     return (
       <TableFloatingToolbar>
-        <div className="overflow-x-auto" style={{ paddingLeft: marginLeft }}>
+        <div
+          ref={containerRef}
+          className="overflow-x-auto"
+          style={{ paddingLeft: marginLeft }}
+        >
           <PlateElement
             ref={ref}
             as="table"
@@ -232,6 +256,38 @@ export const TableElement = withHOC(
 
             <tbody className="min-w-full">{children}</tbody>
           </PlateElement>
+          {!isSelectingCell && (
+            <div
+              className="absolute left-0 top-0 my-4"
+              style={resizeStyle}
+              contentEditable={false}
+              suppressContentEditableWarning={true}
+            >
+              <ResizeHandle
+                className={cn(
+                  'absolute left-0 z-40 h-full w-1 cursor-col-resize select-none bg-ring transition-opacity duration-200',
+                  currentColIndex === -1 ? 'opacity-100' : 'z-0 opacity-0'
+                )}
+                {...resizeHandleProps.leftProps}
+              />
+              <ResizeHandle
+                className={cn(
+                  'absolute z-40 h-full w-1 cursor-col-resize select-none bg-ring transition-opacity duration-200',
+                  currentColIndex === null || currentColIndex === -1
+                    ? 'z-0 opacity-0'
+                    : 'opacity-100'
+                )}
+                {...resizeHandleProps.rightProps}
+              />
+              <ResizeHandle
+                className={cn(
+                  'absolute z-40 h-1 w-full cursor-row-resize select-none bg-ring transition-opacity duration-200',
+                  currentRowIndex === null ? 'z-0 opacity-0' : 'opacity-100'
+                )}
+                {...resizeHandleProps.bottomProps}
+              />
+            </div>
+          )}
         </div>
       </TableFloatingToolbar>
     );

packages/table/src/lib/queries/getTableOverriddenRowSizes.ts

@@ -0,0 +1,19 @@
+import type {
+  TTableElement,
+  TTableRowElement,
+  TableStoreSizeOverrides,
+} from '../types';
+
+export const getTableOverriddenRowSizes = (
+  tableNode: TTableElement,
+  rowSizeOverrides?: TableStoreSizeOverrides
+): number[] => {
+  const rowSizes = Array.from({ length: tableNode.children.length }).map(
+    (_, index) =>
+      rowSizeOverrides?.get?.(index) ??
+      (tableNode.children?.[index] as TTableRowElement)?.size ??
+      0
+  );
+
+  return rowSizes;
+};

packages/table/src/lib/queries/index.ts

@@ -13,5 +13,6 @@ export * from './getTableAbove';
 export * from './getTableColumnCount';
 export * from './getTableEntries';
 export * from './getTableOverriddenColSizes';
+export * from './getTableOverriddenRowSizes';
 export * from './getTopTableCell';
 export * from './isTableBorderHidden';

packages/table/src/react/TablePlugin.tsx

@@ -1,5 +1,7 @@
 import { toPlatePlugin } from '@udecode/plate-common/react';
 
+import type { TTableRowElement } from '../lib';
+
 import {
   BaseTableCellHeaderPlugin,
   BaseTableCellPlugin,
@@ -9,7 +11,18 @@ import {
 import { onKeyDownTable } from './onKeyDownTable';
 import { withTable } from './withTable';
 
-export const TableRowPlugin = toPlatePlugin(BaseTableRowPlugin);
+export const TableRowPlugin = toPlatePlugin(BaseTableRowPlugin, {
+  node: {
+    props: ({ element }: { element: TTableRowElement }) => ({
+      nodeProps: {
+        style: {
+          height:
+            element.size === 0 || !element?.size ? 'auto' : `${element.size}px`,
+        },
+      },
+    }),
+  },
+});
 
 export const TableCellPlugin = toPlatePlugin(BaseTableCellPlugin, {
   node: {