Implement ReadOnlyText and ReadOnlyCharacterData

Summary:
This adds supports for text instances in React Native using a DOM-like interface (as defined in react-native-community/discussions-and-proposals#607).

This reuses the `getTextContent` method from Fabric that we added in D44464637, which is supported for this use case as well.

Changelog: [internal]

bypass-github-export-checks

Reviewed By: rshest

Differential Revision: D44632362

fbshipit-source-id: edea99ce61fb17d33853c72196ece7bb06a01e41

Author: rubennorte

packages/react-native/Libraries/DOM/Nodes/ReadOnlyCharacterData.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import type ReadOnlyElement from './ReadOnlyElement';
+
+import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
+import ReadOnlyNode, {getShadowNode} from './ReadOnlyNode';
+import {getElementSibling} from './Utilities/Traversal';
+import nullthrows from 'nullthrows';
+
+export default class ReadOnlyCharacterData extends ReadOnlyNode {
+  get nextElementSibling(): ReadOnlyElement | null {
+    return getElementSibling(this, 'next');
+  }
+
+  get previousElementSibling(): ReadOnlyElement | null {
+    return getElementSibling(this, 'previous');
+  }
+
+  get data(): string {
+    const shadowNode = getShadowNode(this);
+
+    if (shadowNode != null) {
+      return nullthrows(getFabricUIManager()).getTextContent(shadowNode);
+    }
+
+    return '';
+  }
+
+  get length(): number {
+    return this.data.length;
+  }
+
+  /**
+   * @override
+   */
+  get textContent(): string | null {
+    return this.data;
+  }
+
+  /**
+   * @override
+   */
+  get nodeValue(): string {
+    return this.data;
+  }
+
+  substringData(offset: number, count: number): string {
+    const data = this.data;
+    if (offset < 0) {
+      throw new TypeError(
+        `Failed to execute 'substringData' on 'CharacterData': The offset ${offset} is negative.`,
+      );
+    }
+    if (offset > data.length) {
+      throw new TypeError(
+        `Failed to execute 'substringData' on 'CharacterData': The offset ${offset} is greater than the node's length (${data.length}).`,
+      );
+    }
+    let adjustedCount = count < 0 || count > data.length ? data.length : count;
+    return data.substr(offset, adjustedCount);
+  }
+}

packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js

@@ -16,6 +16,7 @@ import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
 import DOMRect from '../Geometry/DOMRect';
 import {createHTMLCollection} from '../OldStyleCollections/HTMLCollection';
 import ReadOnlyNode, {getChildNodes, getShadowNode} from './ReadOnlyNode';
+import {getElementSibling} from './Utilities/Traversal';
 import nullthrows from 'nullthrows';
 
 export default class ReadOnlyElement extends ReadOnlyNode {
@@ -68,14 +69,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   }
 
   get nextElementSibling(): ReadOnlyElement | null {
-    const [siblings, position] = getElementSiblingsAndPosition(this);
-
-    if (position === siblings.length - 1) {
-      // this node is the last child of its parent, so there is no next sibling.
-      return null;
-    }
-
-    return siblings[position + 1];
+    return getElementSibling(this, 'next');
   }
 
   get nodeName(): string {
@@ -93,14 +87,7 @@ export default class ReadOnlyElement extends ReadOnlyNode {
   set nodeValue(value: string): void {}
 
   get previousElementSibling(): ReadOnlyElement | null {
-    const [siblings, position] = getElementSiblingsAndPosition(this);
-
-    if (position === 0) {
-      // this node is the last child of its parent, so there is no next sibling.
-      return null;
-    }
-
-    return siblings[position - 1];
+    return getElementSibling(this, 'previous');
   }
 
   get scrollHeight(): number {
@@ -161,22 +148,3 @@ function getChildElements(node: ReadOnlyNode): $ReadOnlyArray<ReadOnlyElement> {
     childNode => childNode instanceof ReadOnlyElement,
   );
 }
-
-export function getElementSiblingsAndPosition(
-  element: ReadOnlyElement,
-): [$ReadOnlyArray<ReadOnlyElement>, number] {
-  const parent = element.parentNode;
-  if (parent == null) {
-    // This node is the root or it's disconnected.
-    return [[element], 0];
-  }
-
-  const siblings = getChildElements(parent);
-  const position = siblings.indexOf(element);
-
-  if (position === -1) {
-    throw new TypeError("Missing node in parent's child node list");
-  }
-
-  return [siblings, position];
-}

packages/react-native/Libraries/DOM/Nodes/ReadOnlyText.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import ReadOnlyCharacterData from './ReadOnlyCharacterData';
+import ReadOnlyNode from './ReadOnlyNode';
+
+export default class ReadOnlyText extends ReadOnlyCharacterData {
+  /**
+   * @override
+   */
+  get nodeName(): string {
+    return '#text';
+  }
+
+  /**
+   * @override
+   */
+  get nodeType(): number {
+    return ReadOnlyNode.TEXT_NODE;
+  }
+}

packages/react-native/Libraries/DOM/Nodes/Utilities/Traversal.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type ReadOnlyElement from '../ReadOnlyElement';
+import type ReadOnlyNode from '../ReadOnlyNode';
+
+import {getChildNodes} from '../ReadOnlyNode';
+
+// We initialize this lazily to avoid a require cycle
+// (`ReadOnlyElement` also depends on `Traversal`).
+let ReadOnlyElementClass: Class<ReadOnlyElement>;
+
+export function getElementSibling(
+  node: ReadOnlyNode,
+  direction: 'next' | 'previous',
+): ReadOnlyElement | null {
+  const parent = node.parentNode;
+  if (parent == null) {
+    // This node is the root or it's disconnected.
+    return null;
+  }
+
+  const childNodes = getChildNodes(parent);
+
+  const startPosition = childNodes.indexOf(node);
+  if (startPosition === -1) {
+    return null;
+  }
+
+  const increment = direction === 'next' ? 1 : -1;
+
+  let position = startPosition + increment;
+
+  if (ReadOnlyElementClass == null) {
+    // We initialize this lazily to avoid a require cycle.
+    ReadOnlyElementClass = require('../ReadOnlyElement').default;
+  }
+
+  while (
+    childNodes[position] != null &&
+    !(childNodes[position] instanceof ReadOnlyElementClass)
+  ) {
+    position = position + increment;
+  }
+
+  return childNodes[position] ?? null;
+}