[WIKI-707] [WIKI-708] fix: editor floating ui modal (#7909)

Author: iam-vipin

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"
         )}

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={() =>

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);
       },