diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css index 6be2f318ee8..4692830e56a 100644 --- a/packages/lexical-playground/src/index.css +++ b/packages/lexical-playground/src/index.css @@ -262,7 +262,7 @@ pre::-webkit-scrollbar-thumb { background: #fff; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); border-radius: 8px; - margin-top: 25px; + position: fixed; } .typeahead-popover ul { diff --git a/packages/lexical-react/src/shared/LexicalMenu.ts b/packages/lexical-react/src/shared/LexicalMenu.ts index 1aa16d42793..44d7d734436 100644 --- a/packages/lexical-react/src/shared/LexicalMenu.ts +++ b/packages/lexical-react/src/shared/LexicalMenu.ts @@ -483,17 +483,22 @@ export function useMenuAnchorRef( const [editor] = useLexicalComposerContext(); const anchorElementRef = useRef(document.createElement('div')); const positionMenu = useCallback(() => { + anchorElementRef.current.style.top = anchorElementRef.current.style.bottom; const rootElement = editor.getRootElement(); const containerDiv = anchorElementRef.current; - const menuEle = containerDiv.firstChild as Element; + const menuEle = containerDiv.firstChild as HTMLElement; if (rootElement !== null && resolution !== null) { const {left, top, width, height} = resolution.getRect(); - containerDiv.style.top = `${top + window.pageYOffset}px`; + const anchorHeight = anchorElementRef.current.offsetHeight; // use to position under anchor + containerDiv.style.top = `${ + top + window.pageYOffset + anchorHeight + 3 + }px`; containerDiv.style.left = `${left + window.pageXOffset}px`; containerDiv.style.height = `${height}px`; containerDiv.style.width = `${width}px`; if (menuEle !== null) { + menuEle.style.top = `${top}`; const menuRect = menuEle.getBoundingClientRect(); const menuHeight = menuRect.height; const menuWidth = menuRect.width; @@ -505,14 +510,13 @@ export function useMenuAnchorRef( rootElementRect.right - menuWidth + window.pageXOffset }px`; } - const margin = 10; if ( (top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight ) { containerDiv.style.top = `${ - top - menuHeight + window.pageYOffset - (height + margin) + top - menuHeight + window.pageYOffset - height }px`; } }