Improved LexicalMenu positioning relative to text (#5187)

facebook · Nov 2, 2023 · dc2da3a · dc2da3a · vercel · Nov 2, 2023
1 parent 53f55ae
commit dc2da3a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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`;
         }
       }