Fix New Arch handling of inline views when text truncated

Summary:
Fixes  #49106

RN legacy arch, and web, will clip inline content which appears after elipsized text. This is the correct behavior, compared to new arch, which will put it in a random place depending on the platform.

`line-clamp`: https://jsfiddle.net/7xgdke1b/
`text-overflow`: https://jsfiddle.net/7xgdke1b/2/

Fabric renderer does not, funnily enough, having an `isClipped` field on `TextMeasurement::Attachment` that is never used.

This change propagates state for whether an attachment is beyond elipsized area to this measurement, then when we see it, we set empty layout results with `DisplayType::None` so that we don't create native views. We don't layout child views either, but this seems to work out okay, even when removing and re-adding `numberOfLines`.

Changelog:
[General][Fixed] - Fix New Arch handling of inline views when text truncated

Reviewed By: mdvacca

Differential Revision: D70922174

Author: NickGerleman

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java

@@ -746,12 +746,16 @@ public static long measureText(
         int start = text.getSpanStart(placeholder);
         int line = layout.getLineForOffset(start);
         boolean isLineTruncated = layout.getEllipsisCount(line) > 0;
-        // This truncation check works well on recent versions of Android (tested on 5.1.1 and
-        // 6.0.1) but not on Android 4.4.4. The reason is that getEllipsisCount is buggy on
-        // Android 4.4.4. Specifically, it incorrectly returns 0 if an inline view is the
-        // first thing to be truncated.
-        if (!(isLineTruncated && start >= layout.getLineStart(line) + layout.getEllipsisStart(line))
-            || start >= layout.getLineEnd(line)) {
+        boolean isAttachmentTruncated =
+            line > calculatedLineCount
+                || (isLineTruncated
+                    && start >= layout.getLineStart(line) + layout.getEllipsisStart(line));
+        int attachmentPosition = attachmentIndex * 2;
+        if (isAttachmentTruncated) {
+          attachmentsPositions[attachmentPosition] = Float.NaN;
+          attachmentsPositions[attachmentPosition + 1] = Float.NaN;
+          attachmentIndex++;
+        } else {
           float placeholderWidth = placeholder.getWidth();
           float placeholderHeight = placeholder.getHeight();
           // Calculate if the direction of the placeholder character is Right-To-Left.
@@ -804,7 +808,6 @@ public static long measureText(
           }
           // Vertically align the inline view to the baseline of the line of text.
           float placeholderTopPosition = layout.getLineBaseline(line) - placeholderHeight;
-          int attachmentPosition = attachmentIndex * 2;
 
           // The attachment array returns the positions of each of the attachments as
           attachmentsPositions[attachmentPosition] =

packages/react-native/ReactCommon/react/renderer/components/text/ParagraphShadowNode.cpp

@@ -260,8 +260,14 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
 
     auto& layoutableShadowNode =
         dynamic_cast<LayoutableShadowNode&>(*clonedShadowNode);
+    const auto& attachmentMeasurement = measurement.attachments[i];
+    if (attachmentMeasurement.isClipped) {
+      layoutableShadowNode.setLayoutMetrics(
+          LayoutMetrics{.displayType = DisplayType::None});
+      continue;
+    }
 
-    auto attachmentFrame = measurement.attachments[i].frame;
+    auto attachmentFrame = attachmentMeasurement.frame;
     attachmentFrame.origin.x += layoutMetrics.contentInsets.left;
     attachmentFrame.origin.y += layoutMetrics.contentInsets.top;
 

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/android/react/renderer/textlayoutmanager/TextLayoutManager.cpp

@@ -7,6 +7,8 @@
 
 #include "TextLayoutManager.h"
 
+#include <span>
+
 #include <react/common/mapbuffer/JReadableMapBuffer.h>
 #include <react/jni/ReadableNativeMap.h>
 #include <react/renderer/attributedstring/conversions.h>
@@ -117,33 +119,39 @@ TextMeasurement doMeasure(
       maximumSize.height,
       attachmentPositions);
 
-  jfloat* attachmentData =
-      env->GetFloatArrayElements(attachmentPositions, nullptr);
+  jfloat* attachmentDataElements =
+      env->GetFloatArrayElements(attachmentPositions, nullptr /*isCopy*/);
+  std::span<float> attachmentData{
+      attachmentDataElements, static_cast<size_t>(attachmentCount * 2)};
 
   auto attachments = TextMeasurement::Attachments{};
   if (attachmentCount > 0) {
-    int attachmentIndex = 0;
     for (const auto& fragment : attributedString.getFragments()) {
       if (fragment.isAttachment()) {
-        float top = attachmentData[attachmentIndex * 2];
-        float left = attachmentData[attachmentIndex * 2 + 1];
-        float width = fragment.parentShadowView.layoutMetrics.frame.size.width;
-        float height =
-            fragment.parentShadowView.layoutMetrics.frame.size.height;
-
-        auto rect = facebook::react::Rect{
-            .origin = {.x = left, .y = top},
-            .size = facebook::react::Size{.width = width, .height = height}};
-        attachments.push_back(
-            TextMeasurement::Attachment{.frame = rect, .isClipped = false});
-        attachmentIndex++;
+        float top = attachmentData[attachments.size() * 2];
+        float left = attachmentData[attachments.size() * 2 + 1];
+        if (std::isnan(top) || std::isnan(left)) {
+          attachments.push_back(
+              TextMeasurement::Attachment{.frame = Rect{}, .isClipped = true});
+        } else {
+          float width =
+              fragment.parentShadowView.layoutMetrics.frame.size.width;
+          float height =
+              fragment.parentShadowView.layoutMetrics.frame.size.height;
+
+          auto rect = facebook::react::Rect{
+              .origin = {.x = left, .y = top},
+              .size = facebook::react::Size{.width = width, .height = height}};
+          attachments.push_back(
+              TextMeasurement::Attachment{.frame = rect, .isClipped = false});
+        }
       }
     }
   }
 
   // Clean up allocated ref
   env->ReleaseFloatArrayElements(
-      attachmentPositions, attachmentData, JNI_ABORT);
+      attachmentPositions, attachmentDataElements, JNI_ABORT);
   env->DeleteLocalRef(attachmentPositions);
 
   return TextMeasurement{.size = size, .attachments = attachments};

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTTextLayoutManager.mm

@@ -386,19 +386,27 @@ - (TextMeasurement)_measureTextStorage:(NSTextStorage *)textStorage
                   return;
                 }
 
-                CGSize attachmentSize = attachment.bounds.size;
-                CGRect glyphRect = [layoutManager boundingRectForGlyphRange:range inTextContainer:textContainer];
-
-                CGRect frame;
-                CGFloat baseline = [layoutManager locationForGlyphAtIndex:range.location].y;
-
-                frame = {{glyphRect.origin.x, glyphRect.origin.y + baseline - attachmentSize.height}, attachmentSize};
-
-                auto rect = facebook::react::Rect{
-                    facebook::react::Point{frame.origin.x, frame.origin.y},
-                    facebook::react::Size{frame.size.width, frame.size.height}};
-
-                attachments.push_back(TextMeasurement::Attachment{rect, false});
+                NSRange attachmentGlyphRange = [layoutManager glyphRangeForCharacterRange:range
+                                                                     actualCharacterRange:NULL];
+                NSRange truncatedRange =
+                    [layoutManager truncatedGlyphRangeInLineFragmentForGlyphAtIndex:attachmentGlyphRange.location];
+                if (truncatedRange.location != NSNotFound && attachmentGlyphRange.location >= truncatedRange.location) {
+                  attachments.push_back(TextMeasurement::Attachment{.isClipped = true});
+                } else {
+                  CGSize attachmentSize = attachment.bounds.size;
+                  CGRect glyphRect = [layoutManager boundingRectForGlyphRange:range inTextContainer:textContainer];
+
+                  CGRect frame;
+                  CGFloat baseline = [layoutManager locationForGlyphAtIndex:range.location].y;
+
+                  frame = {{glyphRect.origin.x, glyphRect.origin.y + baseline - attachmentSize.height}, attachmentSize};
+
+                  auto rect = facebook::react::Rect{
+                      facebook::react::Point{frame.origin.x, frame.origin.y},
+                      facebook::react::Size{frame.size.width, frame.size.height}};
+
+                  attachments.push_back(TextMeasurement::Attachment{.frame = rect, .isClipped = false});
+                }
               }];
 
   return TextMeasurement{{size.width, size.height}, attachments};

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -12,6 +12,7 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
+import hotdog from '../../assets/hotdog.jpg';
 import RNTesterText from '../../components/RNTesterText';
 import TextLegend from '../../components/TextLegend';
 import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
@@ -20,6 +21,7 @@ import TextInlineViewsExample from './TextInlineViewsExample';
 const TextInlineView = require('../../components/TextInlineView');
 const React = require('react');
 const {
+  Image,
   LayoutAnimation,
   StyleSheet,
   Text,
@@ -515,7 +517,7 @@ function MaxFontSizeMultiplierExample(props: {}): React.Node {
 
 function NumberOfLinesExample(props: {}): React.Node {
   return (
-    <>
+    <View testID="number-of-lines">
       <RNTesterText numberOfLines={1} style={styles.wrappedText}>
         Maximum of one line no matter now much I write here. If I keep writing
         it{"'"}ll just truncate after one line
@@ -532,11 +534,19 @@ function NumberOfLinesExample(props: {}): React.Node {
         RNTesterText of two lines no matter now much I write here. If I keep
         writing it{"'"}ll just truncate after two lines
       </RNTesterText>
+      <Text numberOfLines={1} style={{marginTop: 20}}>
+        The hotdog should be truncated. The hotdog should be truncated. The
+        hotdog should be truncated. The hotdog should be truncated. The hotdog
+        should be truncated. The hotdog should be truncated. The hotdog should
+        be truncated. The hotdog should be truncated. The hotdog should be
+        truncated. The hotdog should be truncated.
+        <Image source={hotdog} style={{height: 12}} />
+      </Text>
       <RNTesterText style={[{marginTop: 20}, styles.wrappedText]}>
         No maximum lines specified no matter now much I write here. If I keep
         writing it{"'"}ll just keep going and going
       </RNTesterText>
-    </>
+    </View>
   );
 }
 

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -12,6 +12,7 @@
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
+import hotdog from '../../assets/hotdog.jpg';
 import RNTesterText from '../../components/RNTesterText';
 import TextLegend from '../../components/TextLegend';
 import TextInlineViewsExample from './TextInlineViewsExample';
@@ -20,6 +21,7 @@ const TextInlineView = require('../../components/TextInlineView');
 const React = require('react');
 const {
   Button,
+  Image,
   LayoutAnimation,
   Platform,
   Text,
@@ -1103,9 +1105,10 @@ const examples = [
   },
   {
     title: 'numberOfLines attribute',
+    name: 'numberOfLines',
     render: function (): React.Node {
       return (
-        <View>
+        <View testID="number-of-lines">
           <Text numberOfLines={1}>
             Maximum of one line, no matter how much I write here. If I keep
             writing, it{"'"}ll just truncate after one line.
@@ -1114,6 +1117,14 @@ const examples = [
             Maximum of two lines, no matter how much I write here. If I keep
             writing, it{"'"}ll just truncate after two lines.
           </Text>
+          <Text numberOfLines={1} style={{marginTop: 20}}>
+            The hotdog should be truncated. The hotdog should be truncated. The
+            hotdog should be truncated. The hotdog should be truncated. The
+            hotdog should be truncated. The hotdog should be truncated. The
+            hotdog should be truncated. The hotdog should be truncated. The
+            hotdog should be truncated. The hotdog should be truncated.
+            <Image source={hotdog} style={{height: 12}} />
+          </Text>
           <Text style={{marginTop: 20}}>
             No maximum lines specified, no matter how much I write here. If I
             keep writing, it{"'"}ll just keep going and going.