From dc2da3a29aa085bcd71ef9e5bc6ed17a4c572d4a Mon Sep 17 00:00:00 2001
From: Steve Larson <9larsons@gmail.com>
Date: Wed, 1 Nov 2023 19:20:41 -0500
Subject: [PATCH] Improved LexicalMenu positioning relative to text (#5187)

---
 packages/lexical-playground/src/index.css        |  2 +-
 packages/lexical-react/src/shared/LexicalMenu.ts | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

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<HTMLElement>(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`;
         }
       }