[lexical-playground] Fix table hover actions button position (faceboo…

…k#7011)
GermanJablo · Jan 4, 2025 · 8100d6d · 8100d6d
1 parent bd1ef2a
commit 8100d6d
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -115,6 +115,19 @@ function TableHoverActionsContainer({
           height: tableElemHeight,
         } = (tableDOMElement as HTMLTableElement).getBoundingClientRect();
 
+        // Adjust for using the scrollable table container
+        const parentElement = (tableDOMElement as HTMLTableElement)
+          .parentElement;
+        let tableHasScroll = false;
+        if (
+          parentElement &&
+          parentElement.classList.contains(
+            'PlaygroundEditorTheme__tableScrollableWrapper',
+          )
+        ) {
+          tableHasScroll =
+            parentElement.scrollWidth > parentElement.clientWidth;
+        }
         const {y: editorElemY, left: editorElemLeft} =
           anchorElem.getBoundingClientRect();
 
@@ -123,9 +136,15 @@ function TableHoverActionsContainer({
           setShownRow(true);
           setPosition({
             height: BUTTON_WIDTH_PX,
-            left: tableElemLeft - editorElemLeft,
+            left:
+              tableHasScroll && parentElement
+                ? parentElement.offsetLeft
+                : tableElemLeft - editorElemLeft,
             top: tableElemBottom - editorElemY + 5,
-            width: tableElemWidth,
+            width:
+              tableHasScroll && parentElement
+                ? parentElement.offsetWidth
+                : tableElemWidth,
           });
         } else if (hoveredColumnNode) {
           setShownColumn(true);