Correctly resize full width images when table of contents is opened/closed (#5826)

* stash

* restore

* Self review

shared/editor/components/useComponentSize.ts

@@ -1,32 +1,63 @@
 import { useState, useEffect } from "react";
 
-export default function useComponentSize(ref: React.RefObject<HTMLElement>): {
-  width: number;
-  height: number;
-} {
-  const [size, setSize] = useState({
-    width: ref.current?.clientWidth || 0,
-    height: ref.current?.clientHeight || 0,
-  });
+const defaultRect = {
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+export default function useComponentSize(
+  element: HTMLElement | null
+): DOMRect | typeof defaultRect {
+  const [size, setSize] = useState(element?.getBoundingClientRect());
 
   useEffect(() => {
     const sizeObserver = new ResizeObserver((entries) => {
       entries.forEach(({ target }) => {
-        if (
-          size.width !== target.clientWidth ||
-          size.height !== target.clientHeight
-        ) {
-          setSize({ width: target.clientWidth, height: target.clientHeight });
-        }
+        const rect = target?.getBoundingClientRect();
+        setSize((state) =>
+          state?.width === rect?.width &&
+          state?.height === rect?.height &&
+          state?.x === rect?.x &&
+          state?.y === rect?.y
+            ? state
+            : rect
+        );
       });
     });
 
-    if (ref.current) {
-      sizeObserver.observe(ref.current);
+    if (element) {
+      sizeObserver.observe(element);
     }
 
     return () => sizeObserver.disconnect();
-  }, [ref]);
+  }, [element]);
 
-  return size;
+  useEffect(() => {
+    const handleResize = () => {
+      const rect = element?.getBoundingClientRect();
+      setSize((state) =>
+        state?.width === rect?.width &&
+        state?.height === rect?.height &&
+        state?.x === rect?.x &&
+        state?.y === rect?.y
+          ? state
+          : rect
+      );
+    };
+    window.addEventListener("click", handleResize);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("click", handleResize);
+      window.removeEventListener("resize", handleResize);
+    };
+  });
+
+  return size ?? defaultRect;
 }