From 0cca31ef2e0230b2ad8b03365bc5e993afea323f Mon Sep 17 00:00:00 2001
From: Vipin Chaudhary <VipinChaudhary1809@gmail.com>
Date: Mon, 6 Oct 2025 16:30:47 +0530
Subject: [PATCH] [WIKI-707] [WIKI-708] fix: editor floating ui modal (#7909)

---
 packages/editor/src/core/components/menus/block-menu.tsx   | 3 ++-
 .../core/extensions/mentions/mentions-list-dropdown.tsx    | 7 +++++++
 packages/editor/src/core/extensions/mentions/utils.ts      | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index 63bf288ac..09b60d457 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -206,9 +206,10 @@ export const BlockMenu = (props: Props) => {
           ...floatingStyles,
           animationFillMode: "forwards",
           transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", // Expo ease out
+          zIndex: 100,
         }}
         className={cn(
-          "z-20 max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-custom-border-200 bg-custom-background-100 p-1.5 shadow-custom-shadow-rg",
+          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-custom-border-200 bg-custom-background-100 p-1.5 shadow-custom-shadow-rg",
           "transition-all duration-300 transform origin-top-right",
           isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
         )}
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
index da11d0f99..212d849f6 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -115,6 +115,12 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
     <div
       ref={commandListContainer}
       className="z-10 max-h-[90vh] w-[14rem] 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 space-y-2"
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+      }}
     >
       {isLoading ? (
         <div className="text-center text-sm text-custom-text-400">Loading...</div>
@@ -138,6 +144,7 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
                   )}
                   onClick={(e) => {
                     e.preventDefault();
+                    e.stopPropagation();
                     selectItem(sectionIndex, itemIndex);
                   }}
                   onMouseEnter={() =>
diff --git a/packages/editor/src/core/extensions/mentions/utils.ts b/packages/editor/src/core/extensions/mentions/utils.ts
index 91f713fd7..32e2e283a 100644
--- a/packages/editor/src/core/extensions/mentions/utils.ts
+++ b/packages/editor/src/core/extensions/mentions/utils.ts
@@ -31,6 +31,7 @@ export const renderMentionsDropdown =
         const element = component.element as HTMLElement;
         element.style.position = "absolute";
         element.style.zIndex = "100";
+
         document.body.appendChild(element);
         updateFloatingUIFloaterPosition(props.editor, element);
       },