fix(richtext-lexical): fixed the positioning of the button to add col…

…umns or rows in tables (#11050) Fixes #11042 https://github.com/user-attachments/assets/7b51930f-2861-4661-9551-f1952b7a972b
payloadcms · Feb 7, 2025 · 886bd94 · 886bd94
1 parent a80c6b5
commit 886bd94
Showing 1 changed file with 40 additions and 29 deletions.
diff --git a/...-lexical/src/features/experimental_table/client/plugins/TableHoverActionsPlugin/index.tsx b/...-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 }}