Add getClientRects JS API and native module binding

Summary:
Adds the JavaScript API `getClientRects()` to the Element interface, matching
the Web DOM API (https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects).

For most elements, this returns an array with a single rect matching
`getBoundingClientRect()`. For text elements (TextShadowNode), this returns
an array of rects representing each line/fragment of the text.

This is useful for getting the visual boundaries of nested `<Text>`
components within a text paragraph, where text may span multiple lines.

Changes:
- ReadOnlyElement.js: Add getClientRects() method
- NativeDOM.js: Add getClientRects spec
- NativeDOM.cpp/h: Add native module binding that calls dom::getClientRects

Differential Revision: D91087227

Author: andrewdacenko

packages/react-native/ReactCommon/react/nativemodule/dom/NativeDOM.cpp

@@ -274,6 +274,30 @@ NativeDOM::getBoundingClientRect(
   return std::tuple{domRect.x, domRect.y, domRect.width, domRect.height};
 }
 
+std::vector<std::tuple<
+    /* x: */ double,
+    /* y: */ double,
+    /* width: */ double,
+    /* height: */ double>>
+NativeDOM::getClientRects(
+    jsi::Runtime& rt,
+    std::shared_ptr<const ShadowNode> shadowNode) {
+  auto currentRevision =
+      getCurrentShadowTreeRevision(rt, shadowNode->getSurfaceId());
+  if (currentRevision == nullptr) {
+    return {};
+  }
+
+  auto domRects = dom::getClientRects(currentRevision, *shadowNode);
+
+  std::vector<std::tuple<double, double, double, double>> result;
+  result.reserve(domRects.size());
+  for (const auto& rect : domRects) {
+    result.emplace_back(rect.x, rect.y, rect.width, rect.height);
+  }
+  return result;
+}
+
 std::tuple</* width: */ int, /* height: */ int> NativeDOM::getInnerSize(
     jsi::Runtime& rt,
     std::shared_ptr<const ShadowNode> shadowNode) {

packages/react-native/ReactCommon/react/nativemodule/dom/NativeDOM.h

@@ -58,6 +58,13 @@ class NativeDOM : public NativeDOMCxxSpec<NativeDOM> {
       /* height: */ double>
   getBoundingClientRect(jsi::Runtime &rt, std::shared_ptr<const ShadowNode> shadowNode, bool includeTransform);
 
+  std::vector<std::tuple<
+      /* x: */ double,
+      /* y: */ double,
+      /* width: */ double,
+      /* height: */ double>>
+  getClientRects(jsi::Runtime &rt, std::shared_ptr<const ShadowNode> shadowNode);
+
   std::tuple</* width: */ int, /* height: */ int> getInnerSize(
       jsi::Runtime &rt,
       std::shared_ptr<const ShadowNode> shadowNode);

packages/react-native/src/private/webapis/dom/nodes/ReadOnlyElement.js

@@ -193,6 +193,18 @@ export default class ReadOnlyElement extends ReadOnlyNode {
     return getBoundingClientRect(this, {includeTransform: true});
   }
 
+  getClientRects(): $ReadOnlyArray<DOMRect> {
+    const node = getNativeElementReference(this);
+
+    if (node != null) {
+      const rects = NativeDOM.getClientRects(node);
+      return rects.map(rect => new DOMRect(rect[0], rect[1], rect[2], rect[3]));
+    }
+
+    // Empty array if any of the above failed
+    return [];
+  }
+
   /**
    * Pointer Capture APIs
    */

packages/react-native/src/private/webapis/dom/nodes/specs/NativeDOM.js

@@ -86,6 +86,12 @@ export interface Spec extends TurboModule {
     includeTransform: boolean,
   ) => ReadonlyArray<number> /* [x: number, y: number, width: number, height: number] */;
 
+  +getClientRects: (
+    nativeElementReference: unknown /* NativeElementReference */,
+  ) => ReadonlyArray<
+    ReadonlyArray<number>,
+  > /* Array<[x: number, y: number, width: number, height: number]> */;
+
   +getInnerSize: (
     nativeElementReference: unknown /* NativeElementReference */,
   ) => ReadonlyArray<number> /* [width: number, height: number] */;
@@ -279,6 +285,30 @@ export interface RefinedSpec {
     ],
   >;
 
+  /**
+   * This is a React Native implementation of `Element.prototype.getClientRects`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects).
+   *
+   * For most elements, this returns an array with a single rect matching
+   * getBoundingClientRect. For text elements (TextShadowNode), this returns
+   * an array of rects representing each line/fragment of the text.
+   *
+   * This is useful for getting the visual boundaries of nested <Text>
+   * components within a text paragraph, where text may span multiple lines.
+   */
+  +getClientRects: (
+    nativeElementReference: NativeElementReference,
+  ) => ReadonlyArray<
+    Readonly<
+      [
+        /* x: */ number,
+        /* y: */ number,
+        /* width: */ number,
+        /* height: */ number,
+      ],
+    >,
+  >;
+
   /**
    * This is a method to access the inner size of a shadow node, to implement
    * these methods: