From 334ea49c7d9cbb55a008602d48ca01dc844f7cf8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 23 Sep 2025 14:43:41 +0530
Subject: [PATCH 1/5] fix: peek overview closing while dropdowns are open

---
 .../issues/peek-overview/issue-detail.tsx     | 12 +++++-----
 .../components/issues/peek-overview/view.tsx  | 11 ++++++---
 .../core/extensions/slash-commands/root.tsx   | 24 +++++++++++++++----
 .../drag-handles/column/drag-handle.tsx       | 24 +++++++++++++++++--
 .../plugins/drag-handles/row/drag-handle.tsx  | 24 +++++++++++++++++--
 .../editor/src/core/extensions/utility.ts     | 11 ++++++---
 .../editor/src/core/helpers/editor-ref.ts     |  5 ++++
 packages/editor/src/core/types/editor.ts      |  1 +
 8 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/apps/web/core/components/issues/peek-overview/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
index 781aa623cf8..20d89a78f04 100644
--- a/apps/web/core/components/issues/peek-overview/issue-detail.tsx
+++ b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -29,7 +29,8 @@ import { IssueTitleInput } from "../title-input";
 // services init
 const workItemVersionService = new WorkItemVersionService();
 
-interface IPeekOverviewIssueDetails {
+type Props = {
+  editorRef: React.RefObject<EditorRefApi>;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
@@ -38,12 +39,11 @@ interface IPeekOverviewIssueDetails {
   isArchived: boolean;
   isSubmitting: TNameDescriptionLoader;
   setIsSubmitting: (value: TNameDescriptionLoader) => void;
-}
+};
 
-export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
-  const { workspaceSlug, issueId, issueOperations, disabled, isArchived, isSubmitting, setIsSubmitting } = props;
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
+export const PeekOverviewIssueDetails: FC<Props> = observer((props) => {
+  const { editorRef, workspaceSlug, issueId, issueOperations, disabled, isArchived, isSubmitting, setIsSubmitting } =
+    props;
   // store hooks
   const { data: currentUser } = useUser();
   const {
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index bbae72db332..9840de4ceec 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -2,6 +2,7 @@ import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
 // plane imports
+import type { EditorRefApi } from "@plane/editor";
 import { EIssueServiceType, TNameDescriptionLoader } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
@@ -53,6 +54,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<EditorRefApi>(null);
   // store hooks
   const {
     setPeekIssue,
@@ -80,8 +82,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   usePeekOverviewOutsideClickDetector(
     issuePeekOverviewRef,
     () => {
+      const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
       if (!embedIssue) {
-        if (!isAnyModalOpen && !isAnyEpicModalOpen && !isAnyLocalModalOpen) {
+        if (!isAnyModalOpen && !isAnyEpicModalOpen && !isAnyLocalModalOpen && !isAnyDropbarOpen) {
           removeRoutePeekId();
         }
       }
@@ -90,10 +93,10 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   );
 
   const handleKeyDown = () => {
-    const slashCommandDropdownElement = document.querySelector("#slash-command");
     const editorImageFullScreenModalElement = document.querySelector(".editor-image-full-screen-modal");
     const dropdownElement = document.activeElement?.tagName === "INPUT";
-    if (!isAnyModalOpen && !slashCommandDropdownElement && !dropdownElement && !editorImageFullScreenModalElement) {
+    const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+    if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
       removeRoutePeekId();
       const issueElement = document.getElementById(`issue-${issueId}`);
       if (issueElement) issueElement?.focus();
@@ -166,6 +169,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                 {["side-peek", "modal"].includes(peekMode) ? (
                   <div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
                     <PeekOverviewIssueDetails
+                      editorRef={editorRef}
                       workspaceSlug={workspaceSlug}
                       projectId={projectId}
                       issueId={issueId}
@@ -206,6 +210,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                     <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
                       <div className="space-y-3">
                         <PeekOverviewIssueDetails
+                          editorRef={editorRef}
                           workspaceSlug={workspaceSlug}
                           projectId={projectId}
                           issueId={issueId}
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 43d7cf61289..49deffa631d 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -5,6 +5,7 @@ import tippy, { Instance } from "tippy.js";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
 import { CommandListInstance } from "@/helpers/tippy";
 // types
 import { IEditorProps, ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
@@ -55,11 +56,16 @@ const Command = Extension.create<SlashCommandOptions>({
   },
 });
 
-const renderItems = () => {
+const renderItems: SuggestionOptions["render"] = () => {
   let component: ReactRenderer<CommandListInstance, SlashCommandsMenuProps> | null = null;
   let popup: Instance | null = null;
   return {
-    onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+    onStart: (props) => {
+      // Track active dropdown
+      getExtensionStorage(props.editor, CORE_EXTENSIONS.UTILITY).activeDropbarExtensions.push(
+        CORE_EXTENSIONS.SLASH_COMMANDS
+      );
+
       component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
         props,
         editor: props.editor,
@@ -78,14 +84,14 @@ const renderItems = () => {
         placement: "bottom-start",
       });
     },
-    onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+    onUpdate: (props) => {
       component?.updateProps(props);
 
       popup?.[0]?.setProps({
         getReferenceClientRect: props.clientRect,
       });
     },
-    onKeyDown: (props: { event: KeyboardEvent }) => {
+    onKeyDown: (props) => {
       if (props.event.key === "Escape") {
         popup?.[0].hide();
         return true;
@@ -95,7 +101,15 @@ const renderItems = () => {
       }
       return false;
     },
-    onExit: () => {
+    onExit: ({ editor }) => {
+      // Remove from active dropdowns
+      if (editor) {
+        const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
+        const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.EMOJI);
+        if (index > -1) {
+          utilityStorage.activeDropbarExtensions.splice(index, 1);
+        }
+      }
       popup?.[0].destroy();
       component?.destroy();
     },
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 425bc7572fa..ffeccedd17a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -12,9 +12,11 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import {
   findTable,
@@ -23,6 +25,8 @@ import {
   isCellSelection,
   selectColumn,
 } from "@/extensions/table/table/utilities/helpers";
+// helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { moveSelectedColumns } from "../actions";
 import {
@@ -157,6 +161,21 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
     [col, editor]
   );
 
+  // toggle utility storage
+  useEffect(() => {
+    const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
+    const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.TABLE);
+    if (isDropdownOpen) {
+      if (index === -1) {
+        utilityStorage.activeDropbarExtensions.push(CORE_EXTENSIONS.TABLE);
+      }
+    } else {
+      if (index !== -1) {
+        utilityStorage.activeDropbarExtensions.splice(index, 1);
+      }
+    }
+  }, [editor, isDropdownOpen]);
+
   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">
@@ -184,8 +203,8 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
               zIndex: 99,
             }}
             lockScroll
+            data-prevent-outside-click
           />
-
           <div
             className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
             ref={refs.setFloating}
@@ -194,6 +213,7 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
               ...floatingStyles,
               zIndex: 100,
             }}
+            data-prevent-outside-click
           >
             <ColumnOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
           </div>
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 7c0f1449a1d..a9830d5553a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -12,9 +12,11 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import {
   findTable,
@@ -23,6 +25,8 @@ import {
   isCellSelection,
   selectRow,
 } from "@/extensions/table/table/utilities/helpers";
+// helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { moveSelectedRows } from "../actions";
 import {
@@ -156,6 +160,21 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
     [editor, row]
   );
 
+  // toggle utility storage
+  useEffect(() => {
+    const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
+    const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.TABLE);
+    if (isDropdownOpen) {
+      if (index === -1) {
+        utilityStorage.activeDropbarExtensions.push(CORE_EXTENSIONS.TABLE);
+      }
+    } else {
+      if (index !== -1) {
+        utilityStorage.activeDropbarExtensions.splice(index, 1);
+      }
+    }
+  }, [editor, isDropdownOpen]);
+
   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">
@@ -183,8 +202,8 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
               zIndex: 99,
             }}
             lockScroll
+            data-prevent-outside-click
           />
-
           <div
             className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
             ref={refs.setFloating}
@@ -193,6 +212,7 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
               ...floatingStyles,
               zIndex: 100,
             }}
+            data-prevent-outside-click
           >
             <RowOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
           </div>
diff --git a/packages/editor/src/core/extensions/utility.ts b/packages/editor/src/core/extensions/utility.ts
index 3c014538d32..593097b0605 100644
--- a/packages/editor/src/core/extensions/utility.ts
+++ b/packages/editor/src/core/extensions/utility.ts
@@ -9,13 +9,18 @@ import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
 // types
-
 import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
-type TActiveDropbarExtensions = CORE_EXTENSIONS.MENTION | CORE_EXTENSIONS.EMOJI | TAdditionalActiveDropbarExtensions;
+
+type TActiveDropbarExtensions =
+  | CORE_EXTENSIONS.MENTION
+  | CORE_EXTENSIONS.EMOJI
+  | CORE_EXTENSIONS.SLASH_COMMANDS
+  | CORE_EXTENSIONS.TABLE
+  | TAdditionalActiveDropbarExtensions;
 
 declare module "@tiptap/core" {
   interface Commands {
-    utility: {
+    [CORE_EXTENSIONS.UTILITY]: {
       updateAssetsUploadStatus: (updatedStatus: TFileHandler["assetsUploadStatus"]) => () => void;
       updateAssetsList: (
         args:
diff --git a/packages/editor/src/core/helpers/editor-ref.ts b/packages/editor/src/core/helpers/editor-ref.ts
index 49d20df9406..2e45e89633e 100644
--- a/packages/editor/src/core/helpers/editor-ref.ts
+++ b/packages/editor/src/core/helpers/editor-ref.ts
@@ -81,6 +81,11 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
       const markdownOutput = editor?.storage?.markdown?.getMarkdown?.();
       return markdownOutput;
     },
+    isAnyDropbarOpen: () => {
+      if (!editor) return false;
+      const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
+      return utilityStorage.activeDropbarExtensions.length > 0;
+    },
     scrollSummary: (marking) => {
       if (!editor) return;
       scrollSummary(editor, marking);
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index 6c725413772..a99870c05ad 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -119,6 +119,7 @@ export type EditorRefApi = {
   getMarkDown: () => string;
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
+  isAnyDropbarOpen: () => boolean;
   isEditorReadyToDiscard: () => boolean;
   isMenuItemActive: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => boolean;
   listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;

From a86183b1285aafb5c1baa3e97712f39ecbd0fb7b Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 23 Sep 2025 14:51:22 +0530
Subject: [PATCH 2/5] chore: remove redundant attributes

---
 .../table/plugins/drag-handles/column/drag-handle.tsx           | 2 --
 .../extensions/table/plugins/drag-handles/row/drag-handle.tsx   | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index ffeccedd17a..6b3180d7550 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -203,7 +203,6 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
               zIndex: 99,
             }}
             lockScroll
-            data-prevent-outside-click
           />
           <div
             className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
@@ -213,7 +212,6 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
               ...floatingStyles,
               zIndex: 100,
             }}
-            data-prevent-outside-click
           >
             <ColumnOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
           </div>
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index a9830d5553a..8b61b3f57b1 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -202,7 +202,6 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
               zIndex: 99,
             }}
             lockScroll
-            data-prevent-outside-click
           />
           <div
             className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
@@ -212,7 +211,6 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
               ...floatingStyles,
               zIndex: 100,
             }}
-            data-prevent-outside-click
           >
             <RowOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
           </div>

From ceec33b7ea7c02a67c5a183f9e4f33725d89ea57 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 23 Sep 2025 15:55:14 +0530
Subject: [PATCH 3/5] fix: wrong dropbar name

---
 packages/editor/src/core/extensions/slash-commands/root.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 49deffa631d..37ce2a7646a 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -105,7 +105,7 @@ const renderItems: SuggestionOptions["render"] = () => {
       // Remove from active dropdowns
       if (editor) {
         const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
-        const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.EMOJI);
+        const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.SLASH_COMMANDS);
         if (index > -1) {
           utilityStorage.activeDropbarExtensions.splice(index, 1);
         }

From ecebd9aa28ed87796df7a43a7c71ddf3374cf9f7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 23 Sep 2025 16:57:04 +0530
Subject: [PATCH 4/5] refactor: add commands to manipulate storage

---
 .../core/extensions/slash-commands/root.tsx   | 13 ++------
 .../drag-handles/column/drag-handle.tsx       | 30 +++++++------------
 .../plugins/drag-handles/row/drag-handle.tsx  | 30 +++++++------------
 .../editor/src/core/extensions/utility.ts     | 14 +++++++++
 4 files changed, 38 insertions(+), 49 deletions(-)

diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 37ce2a7646a..971c4da5659 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -5,7 +5,6 @@ import tippy, { Instance } from "tippy.js";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
-import { getExtensionStorage } from "@/helpers/get-extension-storage";
 import { CommandListInstance } from "@/helpers/tippy";
 // types
 import { IEditorProps, ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
@@ -62,9 +61,7 @@ const renderItems: SuggestionOptions["render"] = () => {
   return {
     onStart: (props) => {
       // Track active dropdown
-      getExtensionStorage(props.editor, CORE_EXTENSIONS.UTILITY).activeDropbarExtensions.push(
-        CORE_EXTENSIONS.SLASH_COMMANDS
-      );
+      props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
 
       component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
         props,
@@ -103,13 +100,7 @@ const renderItems: SuggestionOptions["render"] = () => {
     },
     onExit: ({ editor }) => {
       // Remove from active dropdowns
-      if (editor) {
-        const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
-        const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.SLASH_COMMANDS);
-        if (index > -1) {
-          utilityStorage.activeDropbarExtensions.splice(index, 1);
-        }
-      }
+      editor?.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
       popup?.[0].destroy();
       component?.destroy();
     },
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 6b3180d7550..2db76a5a206 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -12,7 +12,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -25,8 +25,6 @@ import {
   isCellSelection,
   selectColumn,
 } from "@/extensions/table/table/utilities/helpers";
-// helpers
-import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { moveSelectedColumns } from "../actions";
 import {
@@ -63,7 +61,16 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
       }),
     ],
     open: isDropdownOpen,
-    onOpenChange: setIsDropdownOpen,
+    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);
@@ -161,21 +168,6 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
     [col, editor]
   );
 
-  // toggle utility storage
-  useEffect(() => {
-    const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
-    const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.TABLE);
-    if (isDropdownOpen) {
-      if (index === -1) {
-        utilityStorage.activeDropbarExtensions.push(CORE_EXTENSIONS.TABLE);
-      }
-    } else {
-      if (index !== -1) {
-        utilityStorage.activeDropbarExtensions.splice(index, 1);
-      }
-    }
-  }, [editor, isDropdownOpen]);
-
   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">
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 8b61b3f57b1..3c82be22724 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -12,7 +12,7 @@ import {
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
 import { Ellipsis } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -25,8 +25,6 @@ import {
   isCellSelection,
   selectRow,
 } from "@/extensions/table/table/utilities/helpers";
-// helpers
-import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
 import { moveSelectedRows } from "../actions";
 import {
@@ -63,7 +61,16 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
       }),
     ],
     open: isDropdownOpen,
-    onOpenChange: setIsDropdownOpen,
+    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);
@@ -160,21 +167,6 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
     [editor, row]
   );
 
-  // toggle utility storage
-  useEffect(() => {
-    const utilityStorage = getExtensionStorage(editor, CORE_EXTENSIONS.UTILITY);
-    const index = utilityStorage.activeDropbarExtensions.indexOf(CORE_EXTENSIONS.TABLE);
-    if (isDropdownOpen) {
-      if (index === -1) {
-        utilityStorage.activeDropbarExtensions.push(CORE_EXTENSIONS.TABLE);
-      }
-    } else {
-      if (index !== -1) {
-        utilityStorage.activeDropbarExtensions.splice(index, 1);
-      }
-    }
-  }, [editor, isDropdownOpen]);
-
   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">
diff --git a/packages/editor/src/core/extensions/utility.ts b/packages/editor/src/core/extensions/utility.ts
index 593097b0605..77fdcc9125b 100644
--- a/packages/editor/src/core/extensions/utility.ts
+++ b/packages/editor/src/core/extensions/utility.ts
@@ -31,6 +31,8 @@ declare module "@tiptap/core" {
               idToRemove: string;
             }
       ) => () => void;
+      addActiveDropbarExtension: (extension: TActiveDropbarExtensions) => () => void;
+      removeActiveDropbarExtension: (extension: TActiveDropbarExtensions) => () => void;
     };
   }
 }
@@ -107,6 +109,18 @@ export const UtilityExtension = (props: Props) => {
           }
           this.storage.assetsList = Array.from(uniqueAssets);
         },
+        addActiveDropbarExtension: (extension) => () => {
+          const index = this.storage.activeDropbarExtensions.indexOf(extension);
+          if (index === -1) {
+            this.storage.activeDropbarExtensions.push(extension);
+          }
+        },
+        removeActiveDropbarExtension: (extension) => () => {
+          const index = this.storage.activeDropbarExtensions.indexOf(extension);
+          if (index !== -1) {
+            this.storage.activeDropbarExtensions.splice(index, 1);
+          }
+        },
       };
     },
   });

From 712030a0c24f251b8cee47964cf740e6632e1729 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 23 Sep 2025 17:57:50 +0530
Subject: [PATCH 5/5] fix: update custom onClose

---
 .../table/plugins/drag-handles/column/drag-handle.tsx           | 2 +-
 .../extensions/table/plugins/drag-handles/row/drag-handle.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 2db76a5a206..b4322b23892 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -205,7 +205,7 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
               zIndex: 100,
             }}
           >
-            <ColumnOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
+            <ColumnOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
           </div>
         </FloatingPortal>
       )}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 3c82be22724..d556e71bc44 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -204,7 +204,7 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
               zIndex: 100,
             }}
           >
-            <RowOptionsDropdown editor={editor} onClose={() => setIsDropdownOpen(false)} />
+            <RowOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
           </div>
         </FloatingPortal>
       )}