Memoized Floating UI options in TableHandlesController

Author: matthewlipski

packages/react/src/components/TableHandles/TableHandlesController.tsx

@@ -12,6 +12,7 @@ import { FC, useMemo, useState } from "react";
 import { offset, size } from "@floating-ui/react";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useExtensionState } from "../../hooks/useExtension.js";
+import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
 import {
   GenericPopover,
   GenericPopoverReference,
@@ -143,6 +144,119 @@ export const TableHandlesController = <
     };
   }, [editor, state]);
 
+  const floatingUIOptions = useMemo<
+    | {
+        rowTableHandle: FloatingUIOptions;
+        columnTableHandle: FloatingUIOptions;
+        tableCellHandle: FloatingUIOptions;
+        extendRowsButton: FloatingUIOptions;
+        extendColumnsButton: FloatingUIOptions;
+      }
+    | undefined
+  >(
+    () =>
+      state !== undefined
+        ? {
+            rowTableHandle: {
+              useFloatingOptions: {
+                open:
+                  state.show &&
+                  state.rowIndex !== undefined &&
+                  (!onlyShownElement || onlyShownElement === "rowTableHandle"),
+                placement: "left",
+                middleware: [offset(-10)],
+              },
+              elementProps: {
+                style: {
+                  zIndex: 10,
+                },
+              },
+            },
+            columnTableHandle: {
+              useFloatingOptions: {
+                open:
+                  state.show &&
+                  state.colIndex !== undefined &&
+                  (!onlyShownElement ||
+                    onlyShownElement === "columnTableHandle"),
+                placement: "top",
+                middleware: [offset(-12)],
+              },
+              elementProps: {
+                style: {
+                  zIndex: 10,
+                },
+              },
+            },
+            tableCellHandle: {
+              useFloatingOptions: {
+                open:
+                  state.show &&
+                  state.rowIndex !== undefined &&
+                  state.colIndex !== undefined &&
+                  (!onlyShownElement || onlyShownElement === "tableCellHandle"),
+                placement: "top-end",
+                middleware: [offset({ mainAxis: -15, crossAxis: -1 })],
+              },
+              elementProps: {
+                style: {
+                  zIndex: 10,
+                },
+              },
+            },
+            extendRowsButton: {
+              useFloatingOptions: {
+                open:
+                  state.show &&
+                  state.showAddOrRemoveRowsButton &&
+                  (!onlyShownElement ||
+                    onlyShownElement === "extendRowsButton"),
+                placement: "bottom",
+                middleware: [
+                  size({
+                    apply({ rects, elements }) {
+                      Object.assign(elements.floating.style, {
+                        width: `${rects.reference.width}px`,
+                      });
+                    },
+                  }),
+                ],
+              },
+              elementProps: {
+                style: {
+                  zIndex: 10,
+                },
+              },
+            },
+            extendColumnsButton: {
+              useFloatingOptions: {
+                open:
+                  state.show &&
+                  state.showAddOrRemoveColumnsButton &&
+                  (!onlyShownElement ||
+                    onlyShownElement === "extendColumnsButton"),
+                placement: "right",
+                middleware: [
+                  size({
+                    apply({ rects, elements }) {
+                      Object.assign(elements.floating.style, {
+                        height: `${rects.reference.height}px`,
+                      });
+                    },
+                  }),
+                ],
+              },
+              elementProps: {
+                style: {
+                  zIndex: 10,
+                },
+              },
+            },
+          }
+        : undefined,
+    [onlyShownElement, state],
+  );
+
   if (!state) {
     return null;
   }
@@ -155,19 +269,7 @@ export const TableHandlesController = <
     <>
       <GenericPopover
         reference={references?.rowReference}
-        useFloatingOptions={{
-          open:
-            state.show &&
-            state.rowIndex !== undefined &&
-            (!onlyShownElement || onlyShownElement === "rowTableHandle"),
-          placement: "left",
-          middleware: [offset(-10)],
-        }}
-        elementProps={{
-          style: {
-            zIndex: 10,
-          },
-        }}
+        {...floatingUIOptions?.rowTableHandle}
       >
         {state.show &&
           state.rowIndex !== undefined &&
@@ -182,19 +284,7 @@ export const TableHandlesController = <
       </GenericPopover>
       <GenericPopover
         reference={references?.columnReference}
-        useFloatingOptions={{
-          open:
-            state.show &&
-            state.colIndex !== undefined &&
-            (!onlyShownElement || onlyShownElement === "columnTableHandle"),
-          placement: "top",
-          middleware: [offset(-12)],
-        }}
-        elementProps={{
-          style: {
-            zIndex: 10,
-          },
-        }}
+        {...floatingUIOptions?.columnTableHandle}
       >
         {state.show &&
           state.colIndex !== undefined &&
@@ -209,20 +299,7 @@ export const TableHandlesController = <
       </GenericPopover>
       <GenericPopover
         reference={references?.cellReference}
-        useFloatingOptions={{
-          open:
-            state.show &&
-            state.rowIndex !== undefined &&
-            state.colIndex !== undefined &&
-            (!onlyShownElement || onlyShownElement === "tableCellHandle"),
-          placement: "top-end",
-          middleware: [offset({ mainAxis: -15, crossAxis: -1 })],
-        }}
-        elementProps={{
-          style: {
-            zIndex: 10,
-          },
-        }}
+        {...floatingUIOptions?.tableCellHandle}
       >
         {state.show &&
           state.rowIndex !== undefined &&
@@ -237,27 +314,7 @@ export const TableHandlesController = <
       </GenericPopover>
       <GenericPopover
         reference={references?.tableReference}
-        useFloatingOptions={{
-          open:
-            state.show &&
-            state.showAddOrRemoveRowsButton &&
-            (!onlyShownElement || onlyShownElement === "extendRowsButton"),
-          placement: "bottom",
-          middleware: [
-            size({
-              apply({ rects, elements }) {
-                Object.assign(elements.floating.style, {
-                  width: `${rects.reference.width}px`,
-                });
-              },
-            }),
-          ],
-        }}
-        elementProps={{
-          style: {
-            zIndex: 10,
-          },
-        }}
+        {...floatingUIOptions?.extendRowsButton}
       >
         {state.show &&
           state.showAddOrRemoveRowsButton &&
@@ -272,27 +329,7 @@ export const TableHandlesController = <
       </GenericPopover>
       <GenericPopover
         reference={references?.tableReference}
-        useFloatingOptions={{
-          open:
-            state.show &&
-            state.showAddOrRemoveColumnsButton &&
-            (!onlyShownElement || onlyShownElement === "extendColumnsButton"),
-          placement: "right",
-          middleware: [
-            size({
-              apply({ rects, elements }) {
-                Object.assign(elements.floating.style, {
-                  height: `${rects.reference.height}px`,
-                });
-              },
-            }),
-          ],
-        }}
-        elementProps={{
-          style: {
-            zIndex: 10,
-          },
-        }}
+        {...floatingUIOptions?.extendColumnsButton}
       >
         {state.show &&
           state.showAddOrRemoveColumnsButton &&