From 886bd94fc3436432d4d9425d70e4d52e9a12e9c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?=
 <43938777+GermanJablo@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:30:06 -0300
Subject: [PATCH] fix(richtext-lexical): fixed the positioning of the button to
 add columns or rows in tables (#11050)

Fixes #11042



https://github.com/user-attachments/assets/7b51930f-2861-4661-9551-f1952b7a972b
---
 .../plugins/TableHoverActionsPlugin/index.tsx | 69 +++++++++++--------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx
index 67e26a319d6..ca93bdce0aa 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx
@@ -91,37 +91,46 @@ function TableHoverActionsContainer({
         { editor },
       )
 
-      if (tableDOMElement) {
-        const {
-          bottom: tableElemBottom,
-          height: tableElemHeight,
-          left: tableElemLeft,
-          right: tableElemRight,
-          width: tableElemWidth,
-          y: tableElemY,
-        } = (tableDOMElement as HTMLTableElement).getBoundingClientRect()
+      if (!tableDOMElement) {
+        return
+      }
 
-        const { left: editorElemLeft, y: editorElemY } = anchorElem.getBoundingClientRect()
+      // this is the scrollable div container of the table (in case of overflow)
+      const tableContainerElement = (tableDOMElement as HTMLTableElement).parentElement
 
-        if (hoveredRowNode) {
-          setShownColumn(false)
-          setShownRow(true)
-          setPosition({
-            height: BUTTON_WIDTH_PX,
-            left: tableElemLeft - editorElemLeft,
-            top: tableElemBottom - editorElemY + 5,
-            width: tableElemWidth,
-          })
-        } else if (hoveredColumnNode) {
-          setShownColumn(true)
-          setShownRow(false)
-          setPosition({
-            height: tableElemHeight,
-            left: tableElemRight - editorElemLeft + 5,
-            top: tableElemY - editorElemY,
-            width: BUTTON_WIDTH_PX,
-          })
-        }
+      if (!tableContainerElement) {
+        return
+      }
+
+      const {
+        bottom: tableElemBottom,
+        height: tableElemHeight,
+        left: tableElemLeft,
+        right: tableElemRight,
+        width: tableElemWidth,
+        y: tableElemY,
+      } = tableContainerElement.getBoundingClientRect()
+
+      const { left: editorElemLeft, y: editorElemY } = anchorElem.getBoundingClientRect()
+
+      if (hoveredRowNode) {
+        setShownColumn(false)
+        setShownRow(true)
+        setPosition({
+          height: BUTTON_WIDTH_PX,
+          left: tableElemLeft - editorElemLeft,
+          top: tableElemBottom - editorElemY + 5,
+          width: tableElemWidth,
+        })
+      } else if (hoveredColumnNode) {
+        setShownColumn(true)
+        setShownRow(false)
+        setPosition({
+          height: tableElemHeight,
+          left: tableElemRight - editorElemLeft + 5,
+          top: tableElemY - editorElemY,
+          width: BUTTON_WIDTH_PX,
+        })
       }
     },
     50,
@@ -218,6 +227,7 @@ function TableHoverActionsContainer({
     <>
       {isShownRow && (
         <button
+          aria-label="Add Row"
           className={editorConfig.editorConfig.lexical.theme.tableAddRows}
           onClick={() => insertAction(true)}
           style={{ ...position }}
@@ -226,6 +236,7 @@ function TableHoverActionsContainer({
       )}
       {isShownColumn && (
         <button
+          aria-label="Add Column"
           className={editorConfig.editorConfig.lexical.theme.tableAddColumns}
           onClick={() => insertAction(false)}
           style={{ ...position }}