Resize Observers

facebook · Oct 12, 2024 · b89f8a8 · b89f8a8
1 parent d273333
commit b89f8a8
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
@@ -183,7 +183,6 @@ export default function Editor(): JSX.Element {
               hasCellBackgroundColor={tableCellBackgroundColor}
             />
             <TableCellResizer />
-            <TableHoverActionsPlugin />
             <ImagesPlugin />
             <InlineImagePlugin />
             <LinkPlugin />
@@ -213,6 +212,7 @@ export default function Editor(): JSX.Element {
                   anchorElem={floatingAnchorElem}
                   cellMerge={true}
                 />
+                <TableHoverActionsPlugin anchorElem={floatingAnchorElem} />
                 <FloatingTextFormatToolbarPlugin
                   anchorElem={floatingAnchorElem}
                   setIsLinkEditMode={setIsLinkEditMode}

diff --git a/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableHoverActionsPlugin/index.tsx
@@ -39,8 +39,8 @@ function TableHoverActionsContainer({
   const [shouldListenMouseMove, setShouldListenMouseMove] =
     useState<boolean>(false);
   const [position, setPosition] = useState({});
-  const codeSetRef = useRef<Set<NodeKey>>(new Set());
-  const tableDOMNodeRef = useRef<HTMLElement | null>(null);
+  const tableSetRef = useRef<Set<NodeKey>>(new Set());
+  const tableCellDOMNodeRef = useRef<HTMLElement | null>(null);
 
   const debouncedOnMouseMove = useDebounce(
     (event: MouseEvent) => {
@@ -56,7 +56,7 @@ function TableHoverActionsContainer({
         return;
       }
 
-      tableDOMNodeRef.current = tableDOMNode;
+      tableCellDOMNodeRef.current = tableDOMNode;
 
       let hoveredRowNode: TableCellNode | null = null;
       let hoveredColumnNode: TableCellNode | null = null;
@@ -98,20 +98,21 @@ function TableHoverActionsContainer({
         const {
           width: tableElemWidth,
           y: tableElemY,
-          x: tableElemX,
           right: tableElemRight,
+          left: tableElemLeft,
           bottom: tableElemBottom,
           height: tableElemHeight,
         } = (tableDOMElement as HTMLTableElement).getBoundingClientRect();
 
-        const {y: editorElemY} = anchorElem.getBoundingClientRect();
+        const {y: editorElemY, left: editorElemLeft} =
+          anchorElem.getBoundingClientRect();
 
         if (hoveredRowNode) {
           setShownColumn(false);
           setShownRow(true);
           setPosition({
             height: BUTTON_WIDTH_PX,
-            left: tableElemX,
+            left: tableElemLeft - editorElemLeft,
             top: tableElemBottom - editorElemY + 5,
             width: tableElemWidth,
           });
@@ -120,7 +121,7 @@ function TableHoverActionsContainer({
           setShownRow(false);
           setPosition({
             height: tableElemHeight,
-            left: tableElemRight + 5,
+            left: tableElemRight - editorElemLeft + 5,
             top: tableElemY - editorElemY,
             width: BUTTON_WIDTH_PX,
           });
@@ -131,6 +132,13 @@ function TableHoverActionsContainer({
     250,
   );
 
+  // Hide the buttons on any table dimensions change to prevent last row cells
+  // overlap behind the 'Add Row' button when text entry changes cell height
+  const tableResizeObserver = new ResizeObserver((entries) => {
+    setShownRow(false);
+    setShownColumn(false);
+  });
+
   useEffect(() => {
     if (!shouldListenMouseMove) {
       return;
@@ -153,15 +161,27 @@ function TableHoverActionsContainer({
         (mutations) => {
           editor.getEditorState().read(() => {
             for (const [key, type] of mutations) {
+              const tableDOMElement = editor.getElementByKey(key);
               switch (type) {
                 case 'created':
-                  codeSetRef.current.add(key);
-                  setShouldListenMouseMove(codeSetRef.current.size > 0);
+                  tableSetRef.current.add(key);
+                  setShouldListenMouseMove(tableSetRef.current.size > 0);
+                  if (tableDOMElement) {
+                    tableResizeObserver.observe(tableDOMElement);
+                  }
                   break;
 
                 case 'destroyed':
-                  codeSetRef.current.delete(key);
-                  setShouldListenMouseMove(codeSetRef.current.size > 0);
+                  tableSetRef.current.delete(key);
+                  setShouldListenMouseMove(tableSetRef.current.size > 0);
+                  // Reset resize observers
+                  tableResizeObserver.disconnect();
+                  tableSetRef.current.forEach((tableKey: NodeKey) => {
+                    const tableDOMEl = editor.getElementByKey(tableKey);
+                    if (tableDOMEl) {
+                      tableResizeObserver.observe(tableDOMEl);
+                    }
+                  });
                   break;
 
                 default:
@@ -177,9 +197,9 @@ function TableHoverActionsContainer({
 
   const insertAction = (insertRow: boolean) => {
     editor.update(() => {
-      if (tableDOMNodeRef.current) {
+      if (tableCellDOMNodeRef.current) {
         const maybeTableNode = $getNearestNodeFromDOMNode(
-          tableDOMNodeRef.current,
+          tableCellDOMNodeRef.current,
         );
         maybeTableNode?.selectEnd();
         if (insertRow) {