Fix listeners cleaning on unmount

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/RichEditor/TableCellMenu/TableCellMenuTrigger.tsx

@@ -6,7 +6,7 @@ import { autoUpdate, offset, useFloating } from "@floating-ui/react";
 import { CircleIcon, DotsThreeCircleVerticalIcon } from "@phosphor-icons/react";
 import { cellAround, CellSelection, TableMap } from "@tiptap/pm/tables";
 import { type Editor } from "@tiptap/react";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import { cellDomElement } from "../_lib/cellDomElement";
 import { DRAG_THRESHOLD } from "../_lib/constants";
@@ -41,6 +41,13 @@ export function TableCellMenuTrigger({
     bottomRow: number;
     tableStart: number;
   } | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
 
   const {
     refs: handleRefs,
@@ -196,6 +203,7 @@ export function TableCellMenuTrigger({
     const onMouseUp = () => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
+      dragCleanupRef.current = null;
 
       if (!draggingRef.current) {
         setMenuOpen(prev => !prev);
@@ -208,6 +216,10 @@ export function TableCellMenuTrigger({
 
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
+    dragCleanupRef.current = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
   };
 
   return (

packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenu.tsx

@@ -102,8 +102,6 @@ export function TableColumnMenu({ editor }: TableColumnMenuProps) {
 
   const [hoveredCol, setHoveredCol] = useState<HoveredColumn | null>(null);
 
-  if (!hoveredCol && !menuOpen) return null;
-
   return (
     <>
       <TableColumnMenuTrigger

packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuContent.tsx

@@ -207,9 +207,9 @@ export function TableColumnMenuContent({
       if (!table) return;
 
       const map = TableMap.get(table);
-      const firstCellPos = map.map[colIndex] + tableStart;
+      const firstCellPos = map.map[colIndex] + tableStart + 1;
       const lastCellPos
-        = map.map[(map.height - 1) * map.width + colIndex] + tableStart;
+        = map.map[(map.height - 1) * map.width + colIndex] + tableStart + 1;
 
       const $anchor = editor.state.doc.resolve(firstCellPos);
       const $head = editor.state.doc.resolve(lastCellPos);

packages/ui/src/RichEditor/TableColumnMenu/TableColumnMenuTrigger.tsx

@@ -45,11 +45,18 @@ export function TableColumnMenuTrigger({
   const dragStartPos = useRef({ x: 0, y: 0 });
   const rafId = useRef<number | null>(null);
   const hoveredColRef = useRef<HoveredColumn | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
     hoveredColRef.current = hoveredCol;
   }, [hoveredCol]);
 
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
+
   useEffect(() => {
     if (editor.isDestroyed || !editor.isEditable) return;
 
@@ -285,6 +292,7 @@ export function TableColumnMenuTrigger({
     const onMouseUp = (ev: MouseEvent) => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
+      dragCleanupRef.current = null;
 
       if (draggingRef.current) {
         setDragIndicator(null);
@@ -327,6 +335,10 @@ export function TableColumnMenuTrigger({
 
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
+    dragCleanupRef.current = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
   };
 
   return (

packages/ui/src/RichEditor/TableRowMenu/TableRowMenu.tsx

@@ -98,8 +98,6 @@ export function TableRowMenu({ editor }: TableRowMenuProps) {
 
   const [hoveredRow, setHoveredRow] = useState<HoveredRow | null>(null);
 
-  if (!hoveredRow && !menuOpen) return null;
-
   return (
     <>
       <TableRowMenuTrigger

packages/ui/src/RichEditor/TableRowMenu/TableRowMenuTrigger.tsx

@@ -45,11 +45,18 @@ export function TableRowMenuTrigger({
   const dragStartPos = useRef({ x: 0, y: 0 });
   const rafId = useRef<number | null>(null);
   const hoveredRowRef = useRef<HoveredRow | null>(null);
+  const dragCleanupRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
     hoveredRowRef.current = hoveredRow;
   }, [hoveredRow]);
 
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
+
   useEffect(() => {
     if (editor.isDestroyed || !editor.isEditable) return;
 
@@ -285,6 +292,7 @@ export function TableRowMenuTrigger({
     const onMouseUp = (ev: MouseEvent) => {
       document.removeEventListener("mousemove", onMouseMove);
       document.removeEventListener("mouseup", onMouseUp);
+      dragCleanupRef.current = null;
 
       if (draggingRef.current) {
         setDragIndicator(null);
@@ -327,6 +335,10 @@ export function TableRowMenuTrigger({
 
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
+    dragCleanupRef.current = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
   };
 
   return (