fix: col drag handle orientation

packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.ts

@@ -0,0 +1,459 @@
+import { computePosition, flip, shift, autoUpdate } from "@floating-ui/dom";
+import type { Editor } from "@tiptap/core";
+import { TableMap } from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// icons
+import { DRAG_HANDLE_ICONS, createSvgElement } from "../icons";
+// dropdown
+import { createDropdownContent, handleDropdownAction } from "../dropdown-content";
+import type { DropdownOption } from "../dropdown-content";
+// extensions
+import {
+  findTable,
+  getTableHeightPx,
+  getTableWidthPx,
+  isCellSelection,
+  selectColumn,
+  getSelectedColumns,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { moveSelectedColumns, duplicateColumns } from "../actions";
+import {
+  DROP_MARKER_THICKNESS,
+  getDropMarker,
+  getColDragMarker,
+  hideDragMarker,
+  hideDropMarker,
+  updateColDragMarker,
+  updateColDropMarker,
+} from "../marker-utils";
+import { updateCellContentVisibility } from "../utils";
+import { calculateColumnDropIndex, constructColumnDragPreview, getTableColumnNodesInfo } from "./utils";
+
+export type ColumnDragHandleConfig = {
+  editor: Editor;
+  col: number;
+};
+
+/**
+ * Creates a vanilla JS column drag handle element with dropdown functionality
+ */
+export function createColumnDragHandle(config: ColumnDragHandleConfig): {
+  element: HTMLElement;
+  destroy: () => void;
+} {
+  const { editor, col } = config;
+
+  // Create container
+  const container = document.createElement("div");
+  container.className =
+    "table-col-handle-container absolute z-20 top-0 left-0 flex justify-center items-center w-full -translate-y-1/2";
+
+  // Create button
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "default-state";
+
+  // Create icon (Ellipsis lucide icon as SVG)
+  const icon = createSvgElement(DRAG_HANDLE_ICONS.ellipsis, "size-4 text-primary");
+
+  button.appendChild(icon);
+  container.appendChild(button);
+
+  // State for dropdown
+  let isDropdownOpen = false;
+  let dropdownElement: HTMLElement | null = null;
+  let backdropElement: HTMLElement | null = null;
+  let cleanupFloating: (() => void) | null = null;
+  let backdropClickHandler: (() => void) | null = null;
+
+  // Track drag event listeners for cleanup
+  let dragListeners: {
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  } = {};
+
+  // Dropdown toggle function
+  const toggleDropdown = () => {
+    if (isDropdownOpen) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  };
+
+  const closeDropdown = () => {
+    if (!isDropdownOpen) return;
+
+    isDropdownOpen = false;
+
+    // Reset button to default state
+    button.className = "default-state";
+
+    // Remove dropdown and backdrop
+    if (dropdownElement) {
+      dropdownElement.remove();
+      dropdownElement = null;
+    }
+    if (backdropElement) {
+      // Remove backdrop listener before removing element
+      if (backdropClickHandler) {
+        backdropElement.removeEventListener("click", backdropClickHandler);
+        backdropClickHandler = null;
+      }
+      backdropElement.remove();
+      backdropElement = null;
+    }
+
+    // Cleanup floating UI (this also removes keydown listener)
+    if (cleanupFloating) {
+      cleanupFloating();
+      cleanupFloating = null;
+    }
+
+    // Remove active dropdown extension
+    setTimeout(() => {
+      editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+    }, 0);
+  };
+
+  const openDropdown = () => {
+    if (isDropdownOpen) return;
+
+    isDropdownOpen = true;
+
+    // Update button to open state
+    button.className = "open-state";
+
+    // Add active dropdown extension
+    editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+
+    // Create backdrop
+    backdropElement = document.createElement("div");
+    backdropElement.style.position = "fixed";
+    backdropElement.style.inset = "0";
+    backdropElement.style.zIndex = "99";
+    backdropClickHandler = closeDropdown;
+    backdropElement.addEventListener("click", backdropClickHandler);
+    document.body.appendChild(backdropElement);
+
+    // Create dropdown
+    dropdownElement = document.createElement("div");
+    dropdownElement.className =
+      "max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200";
+    dropdownElement.style.position = "fixed";
+    dropdownElement.style.zIndex = "100";
+
+    // Create and append dropdown content
+    const content = createDropdownContent(getDropdownOptions());
+    dropdownElement.appendChild(content);
+
+    document.body.appendChild(dropdownElement);
+
+    // Attach dropdown event listeners
+    attachDropdownEventListeners(dropdownElement);
+
+    // Setup floating UI positioning
+    cleanupFloating = autoUpdate(button, dropdownElement, () => {
+      void computePosition(button, dropdownElement!, {
+        placement: "bottom-start",
+        middleware: [
+          flip({
+            fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
+          }),
+          shift({
+            padding: 8,
+          }),
+        ],
+      }).then(({ x, y }) => {
+        if (dropdownElement) {
+          dropdownElement.style.left = `${x}px`;
+          dropdownElement.style.top = `${y}px`;
+        }
+        return;
+      });
+    });
+
+    // Handle keyboard events
+    const handleKeyDown = (event: KeyboardEvent) => {
+      closeDropdown();
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Store cleanup for this specific dropdown instance
+    const originalCleanup = cleanupFloating;
+    cleanupFloating = () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (originalCleanup) originalCleanup();
+    };
+  };
+
+  const getDropdownOptions = (): DropdownOption[] => [
+    {
+      key: "toggle-header",
+      label: "Header column",
+      icon: DRAG_HANDLE_ICONS.toggleRight,
+      showRightIcon: true,
+    },
+    {
+      key: "insert-left",
+      label: "Insert left",
+      icon: DRAG_HANDLE_ICONS.arrowLeft,
+      showRightIcon: false,
+    },
+    {
+      key: "insert-right",
+      label: "Insert right",
+      icon: DRAG_HANDLE_ICONS.arrowRight,
+      showRightIcon: false,
+    },
+    {
+      key: "duplicate",
+      label: "Duplicate",
+      icon: DRAG_HANDLE_ICONS.duplicate,
+      showRightIcon: false,
+    },
+    {
+      key: "clear-contents",
+      label: "Clear contents",
+      icon: DRAG_HANDLE_ICONS.close,
+      showRightIcon: false,
+    },
+    {
+      key: "delete",
+      label: "Delete",
+      icon: DRAG_HANDLE_ICONS.trash,
+      showRightIcon: false,
+    },
+  ];
+
+  const attachDropdownEventListeners = (dropdown: HTMLElement) => {
+    const buttons = dropdown.querySelectorAll("button[data-action]");
+    const colorPanel = dropdown.querySelector(".color-panel");
+    const colorChevron = dropdown.querySelector(".color-chevron");
+
+    buttons.forEach((btn) => {
+      const action = btn.getAttribute("data-action");
+      if (!action) return;
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Handle common actions
+        handleDropdownAction(action, editor, closeDropdown, colorPanel, colorChevron);
+
+        // Handle column-specific actions
+        switch (action) {
+          case "toggle-header":
+            editor.chain().focus().toggleHeaderColumn().run();
+            closeDropdown();
+            break;
+          case "set-bg-color": {
+            const color = btn.getAttribute("data-color");
+            if (color) {
+              editor
+                .chain()
+                .focus()
+                .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
+                  background: color,
+                })
+                .run();
+            }
+            closeDropdown();
+            break;
+          }
+          case "insert-left":
+            editor.chain().focus().addColumnBefore().run();
+            closeDropdown();
+            break;
+          case "insert-right":
+            editor.chain().focus().addColumnAfter().run();
+            closeDropdown();
+            break;
+          case "duplicate": {
+            const table = findTable(editor.state.selection);
+            if (table) {
+              const tableMap = TableMap.get(table.node);
+              let tr = editor.state.tr;
+              const selectedColumns = getSelectedColumns(editor.state.selection, tableMap);
+              tr = duplicateColumns(table, selectedColumns, tr);
+              editor.view.dispatch(tr);
+            }
+            closeDropdown();
+            break;
+          }
+          case "clear-contents":
+            editor.chain().focus().clearSelectedCells().run();
+            closeDropdown();
+            break;
+          case "delete":
+            editor.chain().focus().deleteColumn().run();
+            closeDropdown();
+            break;
+        }
+      });
+    });
+  };
+
+  // Handle mousedown for dragging
+  const handleMouseDown = (e: MouseEvent) => {
+    // Prevent dropdown from opening during drag
+    if (e.button !== 0) return; // Only left click
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    // Check if this is a click (will be determined by mouseup without much movement)
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let hasMoved = false;
+
+    // Clean up any existing drag listeners
+    if (dragListeners.mouseup) {
+      window.removeEventListener("mouseup", dragListeners.mouseup);
+    }
+    if (dragListeners.mousemove) {
+      window.removeEventListener("mousemove", dragListeners.mousemove);
+    }
+    dragListeners = {};
+
+    const table = findTable(editor.state.selection);
+    if (!table) return;
+
+    editor.view.dispatch(selectColumn(table, col, editor.state.tr));
+
+    // Drag column logic
+    const tableWidthPx = getTableWidthPx(table, editor);
+    const columns = getTableColumnNodesInfo(table, editor);
+
+    let dropIndex = col;
+    const startLeft = columns[col].left ?? 0;
+    const startXPos = e.clientX;
+    const tableElement = editor.view.nodeDOM(table.pos);
+
+    const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
+    const dragMarker = tableElement instanceof HTMLElement ? getColDragMarker(tableElement) : null;
+
+    const handleFinish = (): void => {
+      // Clean up markers if they exist
+      if (dropMarker && dragMarker) {
+        hideDropMarker(dropMarker);
+        hideDragMarker(dragMarker);
+      }
+
+      if (isCellSelection(editor.state.selection)) {
+        updateCellContentVisibility(editor, false);
+      }
+
+      // Perform drag operation if user moved
+      if (col !== dropIndex && hasMoved) {
+        let tr = editor.state.tr;
+        const selection = editor.state.selection;
+        if (isCellSelection(selection)) {
+          const table = findTable(selection);
+          if (table) {
+            tr = moveSelectedColumns(editor, table, selection, dropIndex, tr);
+          }
+        }
+        editor.view.dispatch(tr);
+      }
+
+      window.removeEventListener("mouseup", handleFinish);
+      window.removeEventListener("mousemove", handleMove);
+      dragListeners.mouseup = undefined;
+      dragListeners.mousemove = undefined;
+
+      // If it was just a click (no movement), toggle dropdown
+      if (!hasMoved) {
+        toggleDropdown();
+      }
+    };
+
+    let pseudoColumn: HTMLElement | undefined;
+
+    const handleMove = (moveEvent: MouseEvent): void => {
+      // Mark that we've moved
+      const deltaX = Math.abs(moveEvent.clientX - startX);
+      const deltaY = Math.abs(moveEvent.clientY - startY);
+      if (deltaX > 3 || deltaY > 3) {
+        hasMoved = true;
+      }
+
+      // Calculate drop index
+      const currentLeft = startLeft + moveEvent.clientX - startXPos;
+      dropIndex = calculateColumnDropIndex(col, columns, currentLeft);
+
+      // Update visual markers if they exist
+      if (dropMarker && dragMarker) {
+        if (!pseudoColumn) {
+          pseudoColumn = constructColumnDragPreview(editor, editor.state.selection, table);
+          const tableHeightPx = getTableHeightPx(table, editor);
+          if (pseudoColumn) {
+            pseudoColumn.style.height = `${tableHeightPx}px`;
+          }
+        }
+
+        const dragMarkerWidthPx = columns[col].width;
+        const dragMarkerLeftPx = Math.max(0, Math.min(currentLeft, tableWidthPx - dragMarkerWidthPx));
+        const dropMarkerLeftPx =
+          dropIndex <= col ? columns[dropIndex].left : columns[dropIndex].left + columns[dropIndex].width;
+
+        updateColDropMarker({
+          element: dropMarker,
+          left: dropMarkerLeftPx - Math.floor(DROP_MARKER_THICKNESS / 2) - 1,
+          width: DROP_MARKER_THICKNESS,
+        });
+        updateColDragMarker({
+          element: dragMarker,
+          left: dragMarkerLeftPx,
+          width: dragMarkerWidthPx,
+          pseudoColumn,
+        });
+      }
+    };
+
+    try {
+      dragListeners.mouseup = handleFinish;
+      dragListeners.mousemove = handleMove;
+      window.addEventListener("mouseup", handleFinish);
+      window.addEventListener("mousemove", handleMove);
+    } catch (error) {
+      console.error("Error in ColumnDragHandle:", error);
+      handleFinish();
+    }
+  };
+
+  // Attach mousedown listener
+  button.addEventListener("mousedown", handleMouseDown);
+
+  // Cleanup function
+  const destroy = () => {
+    // Close dropdown if open
+    if (isDropdownOpen) {
+      closeDropdown();
+    }
+
+    // Remove drag listeners
+    if (dragListeners.mouseup) {
+      window.removeEventListener("mouseup", dragListeners.mouseup);
+    }
+    if (dragListeners.mousemove) {
+      window.removeEventListener("mousemove", dragListeners.mousemove);
+    }
+
+    // Remove mousedown listener
+    button.removeEventListener("mousedown", handleMouseDown);
+
+    // Remove DOM elements
+    container.remove();
+  };
+
+  return {
+    element: container,
+    destroy,
+  };
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx

@@ -1,258 +0,0 @@
-import {
-  shift,
-  flip,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  autoUpdate,
-  useClick,
-  useRole,
-  FloatingOverlay,
-  FloatingPortal,
-} from "@floating-ui/react";
-import type { Editor } from "@tiptap/core";
-import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-// plane imports
-import { cn } from "@plane/utils";
-// constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import {
-  findTable,
-  getTableHeightPx,
-  getTableWidthPx,
-  isCellSelection,
-  selectColumn,
-} from "@/extensions/table/table/utilities/helpers";
-// local imports
-import { moveSelectedColumns } from "../actions";
-import {
-  DROP_MARKER_THICKNESS,
-  getColDragMarker,
-  getDropMarker,
-  hideDragMarker,
-  hideDropMarker,
-  updateColDragMarker,
-  updateColDropMarker,
-} from "../marker-utils";
-import { updateCellContentVisibility } from "../utils";
-import { ColumnOptionsDropdown } from "./dropdown";
-import { calculateColumnDropIndex, constructColumnDragPreview, getTableColumnNodesInfo } from "./utils";
-
-export type ColumnDragHandleProps = {
-  col: number;
-  editor: Editor;
-};
-
-export function ColumnDragHandle(props: ColumnDragHandleProps) {
-  const { col, editor } = props;
-  // states
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  // Track active event listeners for cleanup
-  const activeListenersRef = useRef<{
-    mouseup?: (e: MouseEvent) => void;
-    mousemove?: (e: MouseEvent) => void;
-  }>({});
-
-  // Cleanup window event listeners on unmount
-  useEffect(() => {
-    const listenersRef = activeListenersRef.current;
-    return () => {
-      // Remove any lingering window event listeners when component unmounts
-      if (listenersRef.mouseup) {
-        window.removeEventListener("mouseup", listenersRef.mouseup);
-      }
-      if (listenersRef.mousemove) {
-        window.removeEventListener("mousemove", listenersRef.mousemove);
-      }
-    };
-  }, []);
-  // floating ui
-  const { refs, floatingStyles, context } = useFloating({
-    placement: "bottom-start",
-    middleware: [
-      flip({
-        fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
-      }),
-      shift({
-        padding: 8,
-      }),
-    ],
-    open: isDropdownOpen,
-    onOpenChange: (open) => {
-      setIsDropdownOpen(open);
-      if (open) {
-        editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
-      } else {
-        setTimeout(() => {
-          editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
-        }, 0);
-      }
-    },
-    whileElementsMounted: autoUpdate,
-  });
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
-
-  useEffect(() => {
-    if (!isDropdownOpen) return;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      context.onOpenChange(false);
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isDropdownOpen, context]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      // Prevent multiple simultaneous drag operations
-      // If there are already listeners attached, remove them first
-      if (activeListenersRef.current.mouseup) {
-        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
-      }
-      if (activeListenersRef.current.mousemove) {
-        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
-      }
-      activeListenersRef.current.mouseup = undefined;
-      activeListenersRef.current.mousemove = undefined;
-
-      const table = findTable(editor.state.selection);
-      if (!table) return;
-
-      editor.view.dispatch(selectColumn(table, col, editor.state.tr));
-
-      // drag column
-      const tableWidthPx = getTableWidthPx(table, editor);
-      const columns = getTableColumnNodesInfo(table, editor);
-
-      let dropIndex = col;
-      const startLeft = columns[col].left ?? 0;
-      const startX = e.clientX;
-      const tableElement = editor.view.nodeDOM(table.pos);
-
-      const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
-      const dragMarker = tableElement instanceof HTMLElement ? getColDragMarker(tableElement) : null;
-
-      const handleFinish = () => {
-        if (!dropMarker || !dragMarker) return;
-        hideDropMarker(dropMarker);
-        hideDragMarker(dragMarker);
-
-        if (isCellSelection(editor.state.selection)) {
-          updateCellContentVisibility(editor, false);
-        }
-
-        if (col !== dropIndex) {
-          let tr = editor.state.tr;
-          const selection = editor.state.selection;
-          if (isCellSelection(selection)) {
-            const table = findTable(selection);
-            if (table) {
-              tr = moveSelectedColumns(editor, table, selection, dropIndex, tr);
-            }
-          }
-          editor.view.dispatch(tr);
-        }
-        window.removeEventListener("mouseup", handleFinish);
-        window.removeEventListener("mousemove", handleMove);
-        // Clear the ref
-        activeListenersRef.current.mouseup = undefined;
-        activeListenersRef.current.mousemove = undefined;
-      };
-
-      let pseudoColumn: HTMLElement | undefined;
-
-      const handleMove = (moveEvent: MouseEvent) => {
-        if (!dropMarker || !dragMarker) return;
-        const currentLeft = startLeft + moveEvent.clientX - startX;
-        dropIndex = calculateColumnDropIndex(col, columns, currentLeft);
-
-        if (!pseudoColumn) {
-          pseudoColumn = constructColumnDragPreview(editor, editor.state.selection, table);
-          const tableHeightPx = getTableHeightPx(table, editor);
-          if (pseudoColumn) {
-            pseudoColumn.style.height = `${tableHeightPx}px`;
-          }
-        }
-
-        const dragMarkerWidthPx = columns[col].width;
-        const dragMarkerLeftPx = Math.max(0, Math.min(currentLeft, tableWidthPx - dragMarkerWidthPx));
-        const dropMarkerLeftPx =
-          dropIndex <= col ? columns[dropIndex].left : columns[dropIndex].left + columns[dropIndex].width;
-
-        updateColDropMarker({
-          element: dropMarker,
-          left: dropMarkerLeftPx - Math.floor(DROP_MARKER_THICKNESS / 2) - 1,
-          width: DROP_MARKER_THICKNESS,
-        });
-        updateColDragMarker({
-          element: dragMarker,
-          left: dragMarkerLeftPx,
-          width: dragMarkerWidthPx,
-          pseudoColumn,
-        });
-      };
-
-      try {
-        // Store references for cleanup
-        activeListenersRef.current.mouseup = handleFinish;
-        activeListenersRef.current.mousemove = handleMove;
-        window.addEventListener("mouseup", handleFinish);
-        window.addEventListener("mousemove", handleMove);
-      } catch (error) {
-        console.error("Error in ColumnDragHandle:", error);
-        handleFinish();
-      }
-    },
-    [col, editor]
-  );
-
-  return (
-    <>
-      <div className="table-col-handle-container absolute z-20 top-0 left-0 flex justify-center items-center w-full -translate-y-1/2">
-        <button
-          ref={refs.setReference}
-          {...getReferenceProps()}
-          type="button"
-          onMouseDown={handleMouseDown}
-          className={cn("px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
-            "hover:bg-layer-1-hover": !isDropdownOpen,
-          })}
-        >
-          <Ellipsis className="size-4 text-primary" />
-        </button>
-      </div>
-      {isDropdownOpen && (
-        <FloatingPortal>
-          {/* Backdrop */}
-          <FloatingOverlay
-            style={{
-              zIndex: 99,
-            }}
-            lockScroll
-          />
-          <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-            style={{
-              ...floatingStyles,
-              zIndex: 100,
-            }}
-          >
-            <ColumnOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
-          </div>
-        </FloatingPortal>
-      )}
-    </>
-  );
-}

packages/editor/src/core/extensions/table/plugins/drag-handles/column/plugin.ts

@@ -2,7 +2,6 @@ import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { ReactRenderer } from "@tiptap/react";
 // extensions
 import {
   findTable,
@@ -10,16 +9,20 @@ import {
   haveTableRelatedChanges,
 } from "@/extensions/table/table/utilities/helpers";
 // local imports
-import type { ColumnDragHandleProps } from "./drag-handle";
-import { ColumnDragHandle } from "./drag-handle";
+import { createColumnDragHandle } from "./drag-handle";
+
+type DragHandleInstance = {
+  element: HTMLElement;
+  destroy: () => void;
+};
 
 type TableColumnDragHandlePluginState = {
   decorations?: DecorationSet;
   // track table structure to detect changes
   tableWidth?: number;
   tableNodePos?: number;
-  // track renderers for cleanup
-  renderers?: ReactRenderer[];
+  // track drag handle instances for cleanup
+  dragHandles?: DragHandleInstance[];
 };
 
 const TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableColumnHandlerDecorationPlugin");
@@ -60,43 +63,40 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
             decorations: mapped,
             tableWidth: tableMap.width,
             tableNodePos: table.pos,
-            renderers: prev.renderers,
+            dragHandles: prev.dragHandles,
           };
         }
 
-        // Clean up old renderers before creating new ones
-        prev.renderers?.forEach((renderer) => {
+        // Clean up old drag handles before creating new ones
+        prev.dragHandles?.forEach((handle) => {
           try {
-            renderer.destroy();
+            handle.destroy();
           } catch (error) {
-            console.error("Error destroying renderer:", error);
+            console.error("Error destroying drag handle:", error);
           }
         });
 
         // recreate all decorations
         const decorations: Decoration[] = [];
-        const renderers: ReactRenderer[] = [];
+        const dragHandles: DragHandleInstance[] = [];
 
         for (let col = 0; col < tableMap.width; col++) {
           const pos = getTableCellWidgetDecorationPos(table, tableMap, col);
 
-          const dragHandleComponent = new ReactRenderer(ColumnDragHandle, {
-            props: {
-              col,
-              editor,
-            } satisfies ColumnDragHandleProps,
+          const dragHandle = createColumnDragHandle({
             editor,
+            col,
           });
 
-          renderers.push(dragHandleComponent);
-          decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
+          dragHandles.push(dragHandle);
+          decorations.push(Decoration.widget(pos, () => dragHandle.element));
         }
 
         return {
           decorations: DecorationSet.create(newState.doc, decorations),
           tableWidth: tableMap.width,
           tableNodePos: table.pos,
-          renderers,
+          dragHandles,
         };
       },
     },
@@ -107,15 +107,15 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
       },
     },
     destroy() {
-      // Clean up all renderers when plugin is destroyed
+      // Clean up all drag handles when plugin is destroyed
       const state =
         editor.state &&
         (TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableColumnDragHandlePluginState | undefined);
-      state?.renderers?.forEach((renderer: ReactRenderer) => {
+      state?.dragHandles?.forEach((handle: DragHandleInstance) => {
         try {
-          renderer.destroy();
+          handle.destroy();
         } catch (error) {
-          console.error("Error destroying renderer:", error);
+          console.error("Error destroying drag handle:", error);
         }
       });
     },

packages/editor/src/core/extensions/table/plugins/drag-handles/dropdown-content.ts

@@ -0,0 +1,179 @@
+import type { Editor } from "@tiptap/core";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// icons
+import { DRAG_HANDLE_ICONS, createSvgElement } from "./icons";
+
+export type DropdownOption = {
+  key: string;
+  label: string;
+  icon: string;
+  showRightIcon: boolean;
+};
+
+/**
+ * Creates the color selector section for the dropdown
+ */
+export function createColorSelector(): HTMLElement {
+  const container = document.createElement("div");
+  container.className = "mb-2";
+
+  // Create toggle button
+  const toggleBtn = document.createElement("button");
+  toggleBtn.type = "button";
+  toggleBtn.className =
+    "flex items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-transparent-hover";
+  toggleBtn.setAttribute("data-action", "toggle-color-selector");
+
+  // Left span with icon and text
+  const leftSpan = document.createElement("span");
+  leftSpan.className = "flex items-center gap-2";
+  const paletteIcon = createSvgElement(DRAG_HANDLE_ICONS.palette, "shrink-0 size-3");
+  leftSpan.appendChild(paletteIcon);
+  leftSpan.appendChild(document.createTextNode("Color"));
+
+  // Right chevron icon
+  const chevronIcon = createSvgElement(
+    DRAG_HANDLE_ICONS.chevronRight,
+    "shrink-0 size-3 transition-transform duration-200 color-chevron"
+  );
+
+  toggleBtn.appendChild(leftSpan);
+  toggleBtn.appendChild(chevronIcon);
+  container.appendChild(toggleBtn);
+
+  // Create color panel
+  const colorPanel = document.createElement("div");
+  colorPanel.className = "p-1 space-y-2 mb-1.5 hidden color-panel";
+
+  const innerDiv = document.createElement("div");
+  innerDiv.className = "space-y-1";
+
+  const title = document.createElement("p");
+  title.className = "text-11 text-tertiary font-semibold";
+  title.textContent = "Background colors";
+  innerDiv.appendChild(title);
+
+  const colorsContainer = document.createElement("div");
+  colorsContainer.className = "flex items-center flex-wrap gap-2";
+
+  // Create color buttons
+  COLORS_LIST.forEach((color) => {
+    const colorBtn = document.createElement("button");
+    colorBtn.type = "button";
+    colorBtn.className =
+      "flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity";
+    colorBtn.style.backgroundColor = color.backgroundColor;
+    colorBtn.setAttribute("data-action", "set-bg-color");
+    colorBtn.setAttribute("data-color", color.backgroundColor);
+    colorsContainer.appendChild(colorBtn);
+  });
+
+  // Create clear color button
+  const clearBtn = document.createElement("button");
+  clearBtn.type = "button";
+  clearBtn.className =
+    "flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-transparent-hover transition-colors";
+  clearBtn.setAttribute("data-action", "clear-bg-color");
+  const banIcon = createSvgElement(DRAG_HANDLE_ICONS.ban, "size-4");
+  clearBtn.appendChild(banIcon);
+  colorsContainer.appendChild(clearBtn);
+
+  innerDiv.appendChild(colorsContainer);
+  colorPanel.appendChild(innerDiv);
+  container.appendChild(colorPanel);
+
+  return container;
+}
+
+/**
+ * Creates the dropdown content with options and color selector
+ */
+export function createDropdownContent(options: DropdownOption[]): DocumentFragment {
+  const fragment = document.createDocumentFragment();
+
+  // Create option buttons
+  options.forEach((option, index) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = `flex items-center ${option.showRightIcon ? "justify-between" : ""} gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-transparent-hover`;
+    btn.setAttribute("data-action", option.key);
+
+    // Create icon element
+    const iconElement = createSvgElement(option.icon, "shrink-0 size-3");
+
+    // Create label
+    const labelDiv = document.createElement("div");
+    labelDiv.className = "flex-grow truncate";
+    labelDiv.textContent = option.label;
+
+    // Append in correct order
+    if (option.showRightIcon) {
+      btn.appendChild(labelDiv);
+      btn.appendChild(iconElement);
+    } else {
+      btn.appendChild(iconElement);
+      btn.appendChild(labelDiv);
+    }
+
+    fragment.appendChild(btn);
+
+    // Add divider after first option (header toggle)
+    if (index === 0) {
+      const hr = document.createElement("hr");
+      hr.className = "my-2 border-subtle";
+      fragment.appendChild(hr);
+
+      // Add color selector after divider
+      const colorSection = createColorSelector();
+      fragment.appendChild(colorSection);
+    }
+  });
+
+  return fragment;
+}
+
+/**
+ * Handles dropdown action events
+ */
+export function handleDropdownAction(
+  action: string,
+  editor: Editor,
+  onClose: () => void,
+  colorPanel?: Element | null,
+  colorChevron?: Element | null
+): void {
+  switch (action) {
+    case "toggle-color-selector":
+      if (colorPanel && colorChevron) {
+        const isHidden = colorPanel.classList.contains("hidden");
+        if (isHidden) {
+          colorPanel.classList.remove("hidden");
+          colorChevron.classList.add("rotate-90");
+        } else {
+          colorPanel.classList.add("hidden");
+          colorChevron.classList.remove("rotate-90");
+        }
+      }
+      break;
+    case "set-bg-color": {
+      // Color is handled by the button's data-color attribute
+      // This case is handled in the event listener
+      break;
+    }
+    case "clear-bg-color":
+      editor
+        .chain()
+        .focus()
+        .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
+          background: null,
+        })
+        .run();
+      onClose();
+      break;
+    default:
+      // Other actions are handled by specific implementations
+      break;
+  }
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/icons.ts

@@ -0,0 +1,49 @@
+/**
+ * SVG icon paths for table drag handle dropdowns
+ */
+
+export const DRAG_HANDLE_ICONS = {
+  // Toggle icons
+  toggleRight: '<rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/>',
+
+  // Arrow icons
+  arrowUp: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
+  arrowDown: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
+  arrowLeft: '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  arrowRight: '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+
+  // Action icons
+  duplicate:
+    '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  trash:
+    '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
+
+  // Color icons
+  palette:
+    '<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>',
+  chevronRight: '<path d="m9 18 6-6-6-6"/>',
+  ban: '<circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/>',
+
+  // Ellipsis (drag handle button)
+  ellipsis: '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
+} as const;
+
+/**
+ * Creates an SVG element (DOM element) with the given icon path
+ */
+export function createSvgElement(iconPath: string, className = "size-3"): SVGSVGElement {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", className);
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("width", "24");
+  svg.setAttribute("height", "24");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.innerHTML = iconPath;
+  return svg;
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.ts

@@ -0,0 +1,458 @@
+import { computePosition, flip, shift, autoUpdate } from "@floating-ui/dom";
+import type { Editor } from "@tiptap/core";
+import { TableMap } from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// icons
+import { DRAG_HANDLE_ICONS, createSvgElement } from "../icons";
+// dropdown
+import { createDropdownContent, handleDropdownAction } from "../dropdown-content";
+import type { DropdownOption } from "../dropdown-content";
+// extensions
+import {
+  findTable,
+  getTableHeightPx,
+  getTableWidthPx,
+  isCellSelection,
+  selectRow,
+  getSelectedRows,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { moveSelectedRows, duplicateRows } from "../actions";
+import {
+  DROP_MARKER_THICKNESS,
+  getDropMarker,
+  getRowDragMarker,
+  hideDragMarker,
+  hideDropMarker,
+  updateRowDragMarker,
+  updateRowDropMarker,
+} from "../marker-utils";
+import { updateCellContentVisibility } from "../utils";
+import { calculateRowDropIndex, constructRowDragPreview, getTableRowNodesInfo } from "./utils";
+
+export type RowDragHandleConfig = {
+  editor: Editor;
+  row: number;
+};
+
+/**
+ * Creates a vanilla JS row drag handle element with dropdown functionality
+ */
+export function createRowDragHandle(config: RowDragHandleConfig): {
+  element: HTMLElement;
+  destroy: () => void;
+} {
+  const { editor, row } = config;
+
+  // Create container
+  const container = document.createElement("div");
+  container.className =
+    "table-row-handle-container absolute z-20 top-0 left-0 flex justify-center items-center h-full -translate-x-1/2";
+
+  // Create button
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "default-state";
+
+  // Create icon (Ellipsis lucide icon as SVG)
+  const icon = createSvgElement(DRAG_HANDLE_ICONS.ellipsis, "size-4 text-primary");
+
+  button.appendChild(icon);
+  container.appendChild(button);
+
+  // State for dropdown
+  let isDropdownOpen = false;
+  let dropdownElement: HTMLElement | null = null;
+  let backdropElement: HTMLElement | null = null;
+  let cleanupFloating: (() => void) | null = null;
+  let backdropClickHandler: (() => void) | null = null;
+
+  // Track drag event listeners for cleanup
+  let dragListeners: {
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  } = {};
+
+  // Dropdown toggle function
+  const toggleDropdown = () => {
+    if (isDropdownOpen) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+  };
+
+  const closeDropdown = () => {
+    if (!isDropdownOpen) return;
+
+    isDropdownOpen = false;
+
+    // Reset button to default state
+    button.className = "default-state";
+
+    // Remove dropdown and backdrop
+    if (dropdownElement) {
+      dropdownElement.remove();
+      dropdownElement = null;
+    }
+    if (backdropElement) {
+      // Remove backdrop listener before removing element
+      if (backdropClickHandler) {
+        backdropElement.removeEventListener("click", backdropClickHandler);
+        backdropClickHandler = null;
+      }
+      backdropElement.remove();
+      backdropElement = null;
+    }
+
+    // Cleanup floating UI (this also removes keydown listener)
+    if (cleanupFloating) {
+      cleanupFloating();
+      cleanupFloating = null;
+    }
+
+    // Remove active dropdown extension
+    setTimeout(() => {
+      editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+    }, 0);
+  };
+
+  const openDropdown = () => {
+    if (isDropdownOpen) return;
+
+    isDropdownOpen = true;
+
+    // Update button to open state
+    button.className = "open-state";
+
+    // Add active dropdown extension
+    editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+
+    // Create backdrop
+    backdropElement = document.createElement("div");
+    backdropElement.style.position = "fixed";
+    backdropElement.style.inset = "0";
+    backdropElement.style.zIndex = "99";
+    backdropClickHandler = closeDropdown;
+    backdropElement.addEventListener("click", backdropClickHandler);
+    document.body.appendChild(backdropElement);
+
+    // Create dropdown
+    dropdownElement = document.createElement("div");
+    dropdownElement.className =
+      "max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200";
+    dropdownElement.style.position = "fixed";
+    dropdownElement.style.zIndex = "100";
+
+    // Create and append dropdown content
+    const content = createDropdownContent(getDropdownOptions());
+    dropdownElement.appendChild(content);
+
+    document.body.appendChild(dropdownElement);
+
+    // Attach dropdown event listeners
+    attachDropdownEventListeners(dropdownElement);
+
+    // Setup floating UI positioning
+    cleanupFloating = autoUpdate(button, dropdownElement, () => {
+      void computePosition(button, dropdownElement!, {
+        placement: "bottom-start",
+        middleware: [
+          flip({
+            fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
+          }),
+          shift({
+            padding: 8,
+          }),
+        ],
+      }).then(({ x, y }) => {
+        if (dropdownElement) {
+          dropdownElement.style.left = `${x}px`;
+          dropdownElement.style.top = `${y}px`;
+        }
+        return;
+      });
+    });
+
+    // Handle keyboard events
+    const handleKeyDown = (event: KeyboardEvent) => {
+      closeDropdown();
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Store cleanup for this specific dropdown instance
+    const originalCleanup = cleanupFloating;
+    cleanupFloating = () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (originalCleanup) originalCleanup();
+    };
+  };
+
+  const getDropdownOptions = (): DropdownOption[] => [
+    {
+      key: "toggle-header",
+      label: "Header row",
+      icon: DRAG_HANDLE_ICONS.toggleRight,
+      showRightIcon: true,
+    },
+    {
+      key: "insert-above",
+      label: "Insert above",
+      icon: DRAG_HANDLE_ICONS.arrowUp,
+      showRightIcon: false,
+    },
+    {
+      key: "insert-below",
+      label: "Insert below",
+      icon: DRAG_HANDLE_ICONS.arrowDown,
+      showRightIcon: false,
+    },
+    {
+      key: "duplicate",
+      label: "Duplicate",
+      icon: DRAG_HANDLE_ICONS.duplicate,
+      showRightIcon: false,
+    },
+    {
+      key: "clear-contents",
+      label: "Clear contents",
+      icon: DRAG_HANDLE_ICONS.close,
+      showRightIcon: false,
+    },
+    {
+      key: "delete",
+      label: "Delete",
+      icon: DRAG_HANDLE_ICONS.trash,
+      showRightIcon: false,
+    },
+  ];
+
+  const attachDropdownEventListeners = (dropdown: HTMLElement) => {
+    const buttons = dropdown.querySelectorAll("button[data-action]");
+    const colorPanel = dropdown.querySelector(".color-panel");
+    const colorChevron = dropdown.querySelector(".color-chevron");
+
+    buttons.forEach((btn) => {
+      const action = btn.getAttribute("data-action");
+      if (!action) return;
+
+      btn.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Handle common actions
+        handleDropdownAction(action, editor, closeDropdown, colorPanel, colorChevron);
+
+        // Handle row-specific actions
+        switch (action) {
+          case "toggle-header":
+            editor.chain().focus().toggleHeaderRow().run();
+            closeDropdown();
+            break;
+          case "set-bg-color": {
+            const color = btn.getAttribute("data-color");
+            if (color) {
+              editor
+                .chain()
+                .focus()
+                .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
+                  background: color,
+                })
+                .run();
+            }
+            closeDropdown();
+            break;
+          }
+          case "insert-above":
+            editor.chain().focus().addRowBefore().run();
+            closeDropdown();
+            break;
+          case "insert-below":
+            editor.chain().focus().addRowAfter().run();
+            closeDropdown();
+            break;
+          case "duplicate": {
+            const table = findTable(editor.state.selection);
+            if (table) {
+              const tableMap = TableMap.get(table.node);
+              let tr = editor.state.tr;
+              const selectedRows = getSelectedRows(editor.state.selection, tableMap);
+              tr = duplicateRows(table, selectedRows, tr);
+              editor.view.dispatch(tr);
+            }
+            closeDropdown();
+            break;
+          }
+          case "clear-contents":
+            editor.chain().focus().clearSelectedCells().run();
+            closeDropdown();
+            break;
+          case "delete":
+            editor.chain().focus().deleteRow().run();
+            closeDropdown();
+            break;
+        }
+      });
+    });
+  };
+
+  // Handle mousedown for dragging
+  const handleMouseDown = (e: MouseEvent) => {
+    // Prevent dropdown from opening during drag
+    if (e.button !== 0) return; // Only left click
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    // Check if this is a click (will be determined by mouseup without much movement)
+    const startX = e.clientX;
+    const startY = e.clientY;
+    let hasMoved = false;
+
+    // Clean up any existing drag listeners
+    if (dragListeners.mouseup) {
+      window.removeEventListener("mouseup", dragListeners.mouseup);
+    }
+    if (dragListeners.mousemove) {
+      window.removeEventListener("mousemove", dragListeners.mousemove);
+    }
+    dragListeners = {};
+
+    const table = findTable(editor.state.selection);
+    if (!table) return;
+
+    editor.view.dispatch(selectRow(table, row, editor.state.tr));
+
+    // Drag row logic
+    const tableHeightPx = getTableHeightPx(table, editor);
+    const rows = getTableRowNodesInfo(table, editor);
+
+    let dropIndex = row;
+    const startTop = rows[row].top ?? 0;
+    const startYPos = e.clientY;
+    const tableElement = editor.view.nodeDOM(table.pos);
+
+    const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
+    const dragMarker = tableElement instanceof HTMLElement ? getRowDragMarker(tableElement) : null;
+
+    const handleFinish = (): void => {
+      // Clean up markers if they exist
+      if (dropMarker && dragMarker) {
+        hideDropMarker(dropMarker);
+        hideDragMarker(dragMarker);
+      }
+
+      if (isCellSelection(editor.state.selection)) {
+        updateCellContentVisibility(editor, false);
+      }
+
+      // Perform drag operation if user moved
+      if (row !== dropIndex && hasMoved) {
+        let tr = editor.state.tr;
+        const selection = editor.state.selection;
+        if (isCellSelection(selection)) {
+          const table = findTable(selection);
+          if (table) {
+            tr = moveSelectedRows(editor, table, selection, dropIndex, tr);
+          }
+        }
+        editor.view.dispatch(tr);
+      }
+
+      window.removeEventListener("mouseup", handleFinish);
+      window.removeEventListener("mousemove", handleMove);
+      dragListeners.mouseup = undefined;
+      dragListeners.mousemove = undefined;
+
+      // If it was just a click (no movement), toggle dropdown
+      if (!hasMoved) {
+        toggleDropdown();
+      }
+    };
+
+    let pseudoRow: HTMLElement | undefined;
+
+    const handleMove = (moveEvent: MouseEvent): void => {
+      // Mark that we've moved
+      const deltaX = Math.abs(moveEvent.clientX - startX);
+      const deltaY = Math.abs(moveEvent.clientY - startY);
+      if (deltaX > 3 || deltaY > 3) {
+        hasMoved = true;
+      }
+
+      // Calculate drop index
+      const cursorTop = startTop + moveEvent.clientY - startYPos;
+      dropIndex = calculateRowDropIndex(row, rows, cursorTop);
+
+      // Update visual markers if they exist
+      if (dropMarker && dragMarker) {
+        if (!pseudoRow) {
+          pseudoRow = constructRowDragPreview(editor, editor.state.selection, table);
+          const tableWidthPx = getTableWidthPx(table, editor);
+          if (pseudoRow) {
+            pseudoRow.style.width = `${tableWidthPx}px`;
+          }
+        }
+
+        const dragMarkerHeightPx = rows[row].height;
+        const dragMarkerTopPx = Math.max(0, Math.min(cursorTop, tableHeightPx - dragMarkerHeightPx));
+        const dropMarkerTopPx = dropIndex <= row ? rows[dropIndex].top : rows[dropIndex].top + rows[dropIndex].height;
+
+        updateRowDropMarker({
+          element: dropMarker,
+          top: dropMarkerTopPx - DROP_MARKER_THICKNESS / 2,
+          height: DROP_MARKER_THICKNESS,
+        });
+        updateRowDragMarker({
+          element: dragMarker,
+          top: dragMarkerTopPx,
+          height: dragMarkerHeightPx,
+          pseudoRow,
+        });
+      }
+    };
+
+    try {
+      dragListeners.mouseup = handleFinish;
+      dragListeners.mousemove = handleMove;
+      window.addEventListener("mouseup", handleFinish);
+      window.addEventListener("mousemove", handleMove);
+    } catch (error) {
+      console.error("Error in RowDragHandle:", error);
+      handleFinish();
+    }
+  };
+
+  // Attach mousedown listener
+  button.addEventListener("mousedown", handleMouseDown);
+
+  // Cleanup function
+  const destroy = () => {
+    // Close dropdown if open
+    if (isDropdownOpen) {
+      closeDropdown();
+    }
+
+    // Remove drag listeners
+    if (dragListeners.mouseup) {
+      window.removeEventListener("mouseup", dragListeners.mouseup);
+    }
+    if (dragListeners.mousemove) {
+      window.removeEventListener("mousemove", dragListeners.mousemove);
+    }
+
+    // Remove mousedown listener
+    button.removeEventListener("mousedown", handleMouseDown);
+
+    // Remove DOM elements
+    container.remove();
+  };
+
+  return {
+    element: container,
+    destroy,
+  };
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx

@@ -1,257 +0,0 @@
-import {
-  autoUpdate,
-  flip,
-  FloatingOverlay,
-  FloatingPortal,
-  shift,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useRole,
-} from "@floating-ui/react";
-import type { Editor } from "@tiptap/core";
-import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-// plane imports
-import { cn } from "@plane/utils";
-// constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import {
-  findTable,
-  getTableHeightPx,
-  getTableWidthPx,
-  isCellSelection,
-  selectRow,
-} from "@/extensions/table/table/utilities/helpers";
-// local imports
-import { moveSelectedRows } from "../actions";
-import {
-  DROP_MARKER_THICKNESS,
-  getDropMarker,
-  getRowDragMarker,
-  hideDragMarker,
-  hideDropMarker,
-  updateRowDragMarker,
-  updateRowDropMarker,
-} from "../marker-utils";
-import { updateCellContentVisibility } from "../utils";
-import { RowOptionsDropdown } from "./dropdown";
-import { calculateRowDropIndex, constructRowDragPreview, getTableRowNodesInfo } from "./utils";
-
-export type RowDragHandleProps = {
-  editor: Editor;
-  row: number;
-};
-
-export function RowDragHandle(props: RowDragHandleProps) {
-  const { editor, row } = props;
-  // states
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  // Track active event listeners for cleanup
-  const activeListenersRef = useRef<{
-    mouseup?: (e: MouseEvent) => void;
-    mousemove?: (e: MouseEvent) => void;
-  }>({});
-
-  // Cleanup window event listeners on unmount
-  useEffect(() => {
-    const listenersRef = activeListenersRef.current;
-    return () => {
-      // Remove any lingering window event listeners when component unmounts
-      if (listenersRef.mouseup) {
-        window.removeEventListener("mouseup", listenersRef.mouseup);
-      }
-      if (listenersRef.mousemove) {
-        window.removeEventListener("mousemove", listenersRef.mousemove);
-      }
-    };
-  }, []);
-  // floating ui
-  const { refs, floatingStyles, context } = useFloating({
-    placement: "bottom-start",
-    middleware: [
-      flip({
-        fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
-      }),
-      shift({
-        padding: 8,
-      }),
-    ],
-    open: isDropdownOpen,
-    onOpenChange: (open) => {
-      setIsDropdownOpen(open);
-      if (open) {
-        editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
-      } else {
-        setTimeout(() => {
-          editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
-        }, 0);
-      }
-    },
-    whileElementsMounted: autoUpdate,
-  });
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
-
-  useEffect(() => {
-    if (!isDropdownOpen) return;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      context.onOpenChange(false);
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isDropdownOpen, context]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      // Prevent multiple simultaneous drag operations
-      // If there are already listeners attached, remove them first
-      if (activeListenersRef.current.mouseup) {
-        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
-      }
-      if (activeListenersRef.current.mousemove) {
-        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
-      }
-      activeListenersRef.current.mouseup = undefined;
-      activeListenersRef.current.mousemove = undefined;
-
-      const table = findTable(editor.state.selection);
-      if (!table) return;
-
-      editor.view.dispatch(selectRow(table, row, editor.state.tr));
-
-      // drag row
-      const tableHeightPx = getTableHeightPx(table, editor);
-      const rows = getTableRowNodesInfo(table, editor);
-
-      let dropIndex = row;
-      const startTop = rows[row].top ?? 0;
-      const startY = e.clientY;
-      const tableElement = editor.view.nodeDOM(table.pos);
-
-      const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
-      const dragMarker = tableElement instanceof HTMLElement ? getRowDragMarker(tableElement) : null;
-
-      const handleFinish = (): void => {
-        if (!dropMarker || !dragMarker) return;
-        hideDropMarker(dropMarker);
-        hideDragMarker(dragMarker);
-
-        if (isCellSelection(editor.state.selection)) {
-          updateCellContentVisibility(editor, false);
-        }
-
-        if (row !== dropIndex) {
-          let tr = editor.state.tr;
-          const selection = editor.state.selection;
-          if (isCellSelection(selection)) {
-            const table = findTable(selection);
-            if (table) {
-              tr = moveSelectedRows(editor, table, selection, dropIndex, tr);
-            }
-          }
-          editor.view.dispatch(tr);
-        }
-        window.removeEventListener("mouseup", handleFinish);
-        window.removeEventListener("mousemove", handleMove);
-        // Clear the ref
-        activeListenersRef.current.mouseup = undefined;
-        activeListenersRef.current.mousemove = undefined;
-      };
-
-      let pseudoRow: HTMLElement | undefined;
-
-      const handleMove = (moveEvent: MouseEvent): void => {
-        if (!dropMarker || !dragMarker) return;
-        const cursorTop = startTop + moveEvent.clientY - startY;
-        dropIndex = calculateRowDropIndex(row, rows, cursorTop);
-
-        if (!pseudoRow) {
-          pseudoRow = constructRowDragPreview(editor, editor.state.selection, table);
-          const tableWidthPx = getTableWidthPx(table, editor);
-          if (pseudoRow) {
-            pseudoRow.style.width = `${tableWidthPx}px`;
-          }
-        }
-
-        const dragMarkerHeightPx = rows[row].height;
-        const dragMarkerTopPx = Math.max(0, Math.min(cursorTop, tableHeightPx - dragMarkerHeightPx));
-        const dropMarkerTopPx = dropIndex <= row ? rows[dropIndex].top : rows[dropIndex].top + rows[dropIndex].height;
-
-        updateRowDropMarker({
-          element: dropMarker,
-          top: dropMarkerTopPx - DROP_MARKER_THICKNESS / 2,
-          height: DROP_MARKER_THICKNESS,
-        });
-        updateRowDragMarker({
-          element: dragMarker,
-          top: dragMarkerTopPx,
-          height: dragMarkerHeightPx,
-          pseudoRow,
-        });
-      };
-
-      try {
-        // Store references for cleanup
-        activeListenersRef.current.mouseup = handleFinish;
-        activeListenersRef.current.mousemove = handleMove;
-        window.addEventListener("mouseup", handleFinish);
-        window.addEventListener("mousemove", handleMove);
-      } catch (error) {
-        console.error("Error in RowDragHandle:", error);
-        handleFinish();
-      }
-    },
-    [editor, row]
-  );
-
-  return (
-    <>
-      <div className="table-row-handle-container absolute z-20 top-0 left-0 flex justify-center items-center h-full -translate-x-1/2">
-        <button
-          ref={refs.setReference}
-          {...getReferenceProps()}
-          type="button"
-          onMouseDown={handleMouseDown}
-          className={cn("py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
-            "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
-            "hover:bg-layer-1-hover": !isDropdownOpen,
-          })}
-        >
-          <Ellipsis className="size-4 text-primary rotate-90" />
-        </button>
-      </div>
-      {isDropdownOpen && (
-        <FloatingPortal>
-          {/* Backdrop */}
-          <FloatingOverlay
-            style={{
-              zIndex: 99,
-            }}
-            lockScroll
-          />
-          <div
-            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-            style={{
-              ...floatingStyles,
-              zIndex: 100,
-            }}
-          >
-            <RowOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
-          </div>
-        </FloatingPortal>
-      )}
-    </>
-  );
-}

packages/editor/src/core/extensions/table/plugins/drag-handles/row/plugin.ts

@@ -2,7 +2,6 @@ import type { Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { TableMap } from "@tiptap/pm/tables";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { ReactRenderer } from "@tiptap/react";
 // extensions
 import {
   findTable,
@@ -10,16 +9,20 @@ import {
   haveTableRelatedChanges,
 } from "@/extensions/table/table/utilities/helpers";
 // local imports
-import type { RowDragHandleProps } from "./drag-handle";
-import { RowDragHandle } from "./drag-handle";
+import { createRowDragHandle } from "./drag-handle";
+
+type DragHandleInstance = {
+  element: HTMLElement;
+  destroy: () => void;
+};
 
 type TableRowDragHandlePluginState = {
   decorations?: DecorationSet;
   // track table structure to detect changes
   tableHeight?: number;
   tableNodePos?: number;
-  // track renderers for cleanup
-  renderers?: ReactRenderer[];
+  // track drag handle instances for cleanup
+  dragHandles?: DragHandleInstance[];
 };
 
 const TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableRowDragHandlePlugin");
@@ -60,43 +63,40 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
             decorations: mapped,
             tableHeight: tableMap.height,
             tableNodePos: table.pos,
-            renderers: prev.renderers,
+            dragHandles: prev.dragHandles,
           };
         }
 
-        // Clean up old renderers before creating new ones
-        prev.renderers?.forEach((renderer) => {
+        // Clean up old drag handles before creating new ones
+        prev.dragHandles?.forEach((handle) => {
           try {
-            renderer.destroy();
+            handle.destroy();
           } catch (error) {
-            console.error("Error destroying renderer:", error);
+            console.error("Error destroying drag handle:", error);
           }
         });
 
         // recreate all decorations
         const decorations: Decoration[] = [];
-        const renderers: ReactRenderer[] = [];
+        const dragHandles: DragHandleInstance[] = [];
 
         for (let row = 0; row < tableMap.height; row++) {
           const pos = getTableCellWidgetDecorationPos(table, tableMap, row * tableMap.width);
 
-          const dragHandleComponent = new ReactRenderer(RowDragHandle, {
-            props: {
-              editor,
-              row,
-            } satisfies RowDragHandleProps,
+          const dragHandle = createRowDragHandle({
             editor,
+            row,
           });
 
-          renderers.push(dragHandleComponent);
-          decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
+          dragHandles.push(dragHandle);
+          decorations.push(Decoration.widget(pos, () => dragHandle.element));
         }
 
         return {
           decorations: DecorationSet.create(newState.doc, decorations),
           tableHeight: tableMap.height,
           tableNodePos: table.pos,
-          renderers,
+          dragHandles,
         };
       },
     },
@@ -107,15 +107,15 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
       },
     },
     destroy() {
-      // Clean up all renderers when plugin is destroyed
+      // Clean up all drag handles when plugin is destroyed
       const state =
         editor.state &&
         (TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableRowDragHandlePluginState | undefined);
-      state?.renderers?.forEach((renderer: ReactRenderer) => {
+      state?.dragHandles?.forEach((handle: DragHandleInstance) => {
         try {
-          renderer.destroy();
+          handle.destroy();
         } catch (error) {
-          console.error("Error destroying renderer:", error);
+          console.error("Error destroying drag handle:", error);
         }
       });
     },

packages/editor/src/core/extensions/table/plugins/insert-handlers/plugin.ts

@@ -72,6 +72,18 @@ export const TableInsertPlugin = (editor: Editor): Plugin => {
     });
   };
 
+  let updateScheduled = false;
+
+  const scheduleUpdate = () => {
+    if (updateScheduled) return;
+    updateScheduled = true;
+
+    requestAnimationFrame(() => {
+      updateScheduled = false;
+      updateAllTables();
+    });
+  };
+
   return new Plugin({
     key: TABLE_INSERT_PLUGIN_KEY,
 
@@ -80,9 +92,9 @@ export const TableInsertPlugin = (editor: Editor): Plugin => {
 
       return {
         update(view, prevState) {
-          // Update when document changes
+          // Debounce updates using RAF to batch multiple changes
           if (!prevState.doc.eq(view.state.doc)) {
-            updateAllTables();
+            scheduleUpdate();
           }
         },
         destroy() {

packages/editor/src/core/extensions/table/plugins/insert-handlers/utils.ts

@@ -219,16 +219,11 @@ export const createRowInsertButton = (editor: Editor, tableInfo: TableInfo): HTM
 
 export const findAllTables = (editor: Editor): TableInfo[] => {
   const tables: TableInfo[] = [];
-  const tableElements = editor.view.dom.querySelectorAll("table");
 
-  tableElements.forEach((tableElement) => {
-    // Find the table's ProseMirror position
-    let tablePos = -1;
-    let tableNode: ProseMirrorNode | null = null;
-
-    // Walk through the document to find matching table nodes
-    editor.state.doc.descendants((node, pos) => {
-      if (node.type.spec.tableRole === "table") {
+  // Iterate through document to look for tables
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.spec.tableRole === "table") {
+      try {
         const domAtPos = editor.view.domAtPos(pos + 1);
         let domTable = domAtPos.node;
 
@@ -241,20 +236,17 @@ export const findAllTables = (editor: Editor): TableInfo[] => {
           domTable = domTable.parentNode;
         }
 
-        if (domTable === tableElement) {
-          tablePos = pos;
-          tableNode = node;
-          return false; // Stop iteration
+        if (domTable instanceof HTMLElement && domTable.tagName === "TABLE") {
+          tables.push({
+            tableElement: domTable,
+            tableNode: node,
+            tablePos: pos,
+          });
         }
+      } catch (error) {
+        // Skip tables that fail to resolve
+        console.error("Error finding table:", error);
       }
-    });
-
-    if (tablePos !== -1 && tableNode) {
-      tables.push({
-        tableElement,
-        tableNode,
-        tablePos,
-      });
     }
   });
 

packages/editor/src/styles/table.css

@@ -57,7 +57,31 @@
       .table-col-handle-container,
       .table-row-handle-container {
         & > button {
-          opacity: 0;
+          @apply opacity-0 rounded-sm outline-none;
+
+          &.default-state {
+            @apply bg-layer-1 hover:bg-layer-1-hover border border-strong-1;
+          }
+
+          &.open-state {
+            @apply opacity-100! bg-accent-primary border-accent-strong;
+          }
+        }
+      }
+
+      .table-col-handle-container {
+        & > button {
+          @apply px-1;
+
+          svg {
+            @apply rotate-90;
+          }
+        }
+      }
+
+      .table-row-handle-container {
+        & > button {
+          @apply py-1;
         }
       }