diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx index 63bf288ac60..09b60d45729 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 da11d0f9953..212d849f63a 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
{ + e.stopPropagation(); + }} + onMouseDown={(e) => { + e.stopPropagation(); + }} > {isLoading ? (
Loading...
@@ -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 91f713fd7ca..32e2e283a10 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); },