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

This commit is contained in:
Vipin Chaudhary 2025-10-06 16:30:47 +05:30 committed by GitHub
parent 4c8f51568a
commit 0cca31ef2e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 1 deletions

View file

@ -206,9 +206,10 @@ export const BlockMenu = (props: Props) => {
...floatingStyles, ...floatingStyles,
animationFillMode: "forwards", animationFillMode: "forwards",
transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", // Expo ease out transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", // Expo ease out
zIndex: 100,
}} }}
className={cn( 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", "transition-all duration-300 transform origin-top-right",
isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75" isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
)} )}

View file

@ -115,6 +115,12 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
<div <div
ref={commandListContainer} 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" 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 ? ( {isLoading ? (
<div className="text-center text-sm text-custom-text-400">Loading...</div> <div className="text-center text-sm text-custom-text-400">Loading...</div>
@ -138,6 +144,7 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
)} )}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation();
selectItem(sectionIndex, itemIndex); selectItem(sectionIndex, itemIndex);
}} }}
onMouseEnter={() => onMouseEnter={() =>

View file

@ -31,6 +31,7 @@ export const renderMentionsDropdown =
const element = component.element as HTMLElement; const element = component.element as HTMLElement;
element.style.position = "absolute"; element.style.position = "absolute";
element.style.zIndex = "100"; element.style.zIndex = "100";
document.body.appendChild(element); document.body.appendChild(element);
updateFloatingUIFloaterPosition(props.editor, element); updateFloatingUIFloaterPosition(props.editor, element);
}, },