Incorporate maxLines and ellipsization into text layout (#51007)

Summary:
Pull Request resolved: #51007

Right now, we fully layout text, then use max lines to determine  a metric to use when calculating size.

Android API 23+ which we fully target allows incorporating ellipsization and maxlines directly into the layout. This will let us directly draw the layout when using maxLines later. This may also let Android optimize line-breaking a bit, when we hit truncation.

Special care is taken not to set this when we are in `adjustsFontSizeToFit` path, so that line count will flow over, signifing overflow.

I think the main user-facing change is that `onTextLayout` events will have measures post-ellipsization.

Changelog:
[Android][Changed] - Incorporate maxLines and ellipsization into text layout

Reviewed By: joevilches

Differential Revision: D73811573

fbshipit-source-id: df83295d0902ae8b043ce57b06cbb9c8f0c194fc

Author: NickGerleman

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -6533,6 +6533,7 @@ public class com/facebook/react/views/text/TextAttributeProps {
 	public fun getEffectiveFontSize ()I
 	public fun getEffectiveLetterSpacing ()F
 	public fun getEffectiveLineHeight ()F
+	public static fun getEllipsizeMode (Ljava/lang/String;)Landroid/text/TextUtils$TruncateAt;
 	public fun getFontFamily ()Ljava/lang/String;
 	public fun getFontFeatureSettings ()Ljava/lang/String;
 	public fun getFontStyle ()I

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<519e6095d6c91fbbb4225a066c9cbe26>>
+ * @generated SignedSource<<1172f5f2fda3a7d7835f619376f65b3a>>
  */
 
 /**
@@ -222,6 +222,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun fuseboxNetworkInspectionEnabled(): Boolean = accessor.fuseboxNetworkInspectionEnabled()
 
+  /**
+   * Set maxLines and ellipsization during Android layout creation
+   */
+  @JvmStatic
+  public fun incorporateMaxLinesDuringAndroidLayout(): Boolean = accessor.incorporateMaxLinesDuringAndroidLayout()
+
   /**
    * Enables storing js caller stack when creating promise in native module. This is useful in case of Promise rejection and tracing the cause.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<a70b3ffda510a41144b061036d4f1d48>>
+ * @generated SignedSource<<b045498e0c54e6c12cdf6a6dc25fd109>>
  */
 
 /**
@@ -52,6 +52,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var fixMappingOfEventPrioritiesBetweenFabricAndReactCache: Boolean? = null
   private var fuseboxEnabledReleaseCache: Boolean? = null
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
+  private var incorporateMaxLinesDuringAndroidLayoutCache: Boolean? = null
   private var traceTurboModulePromiseRejectionsOnAndroidCache: Boolean? = null
   private var updateRuntimeShadowNodeReferencesOnCommitCache: Boolean? = null
   private var useAlwaysAvailableJSErrorHandlingCache: Boolean? = null
@@ -352,6 +353,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun incorporateMaxLinesDuringAndroidLayout(): Boolean {
+    var cached = incorporateMaxLinesDuringAndroidLayoutCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.incorporateMaxLinesDuringAndroidLayout()
+      incorporateMaxLinesDuringAndroidLayoutCache = cached
+    }
+    return cached
+  }
+
   override fun traceTurboModulePromiseRejectionsOnAndroid(): Boolean {
     var cached = traceTurboModulePromiseRejectionsOnAndroidCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6107b2e4611a6cd6ad67420eee468601>>
+ * @generated SignedSource<<007721988dfdf572f8ac218744341e60>>
  */
 
 /**
@@ -92,6 +92,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun fuseboxNetworkInspectionEnabled(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun incorporateMaxLinesDuringAndroidLayout(): Boolean
+
   @DoNotStrip @JvmStatic public external fun traceTurboModulePromiseRejectionsOnAndroid(): Boolean
 
   @DoNotStrip @JvmStatic public external fun updateRuntimeShadowNodeReferencesOnCommit(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ad976c46e40f6d8a945041388865ec60>>
+ * @generated SignedSource<<6b10c147b3f1753448f599ae4fb43387>>
  */
 
 /**
@@ -87,6 +87,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun fuseboxNetworkInspectionEnabled(): Boolean = false
 
+  override fun incorporateMaxLinesDuringAndroidLayout(): Boolean = true
+
   override fun traceTurboModulePromiseRejectionsOnAndroid(): Boolean = false
 
   override fun updateRuntimeShadowNodeReferencesOnCommit(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<580a0bc36f98e9680387089a9740bba8>>
+ * @generated SignedSource<<b64966fc245f53645726747ec93a15d1>>
  */
 
 /**
@@ -56,6 +56,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var fixMappingOfEventPrioritiesBetweenFabricAndReactCache: Boolean? = null
   private var fuseboxEnabledReleaseCache: Boolean? = null
   private var fuseboxNetworkInspectionEnabledCache: Boolean? = null
+  private var incorporateMaxLinesDuringAndroidLayoutCache: Boolean? = null
   private var traceTurboModulePromiseRejectionsOnAndroidCache: Boolean? = null
   private var updateRuntimeShadowNodeReferencesOnCommitCache: Boolean? = null
   private var useAlwaysAvailableJSErrorHandlingCache: Boolean? = null
@@ -388,6 +389,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun incorporateMaxLinesDuringAndroidLayout(): Boolean {
+    var cached = incorporateMaxLinesDuringAndroidLayoutCache
+    if (cached == null) {
+      cached = currentProvider.incorporateMaxLinesDuringAndroidLayout()
+      accessedFeatureFlags.add("incorporateMaxLinesDuringAndroidLayout")
+      incorporateMaxLinesDuringAndroidLayoutCache = cached
+    }
+    return cached
+  }
+
   override fun traceTurboModulePromiseRejectionsOnAndroid(): Boolean {
     var cached = traceTurboModulePromiseRejectionsOnAndroidCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b4a944a07650cf46f90d86419b11bbee>>
+ * @generated SignedSource<<1e9beb93c98a0a82d030b7a3ea1cf7e4>>
  */
 
 /**
@@ -87,6 +87,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun fuseboxNetworkInspectionEnabled(): Boolean
 
+  @DoNotStrip public fun incorporateMaxLinesDuringAndroidLayout(): Boolean
+
   @DoNotStrip public fun traceTurboModulePromiseRejectionsOnAndroid(): Boolean
 
   @DoNotStrip public fun updateRuntimeShadowNodeReferencesOnCommit(): Boolean

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

@@ -788,4 +788,24 @@ public static int getHyphenationFrequency(@Nullable String hyphenationFrequency)
     }
     return androidHyphenationFrequency;
   }
+
+  public static @Nullable TextUtils.TruncateAt getEllipsizeMode(@Nullable String ellipsizeMode) {
+    @Nullable TextUtils.TruncateAt truncateAt = TextUtils.TruncateAt.START;
+    if (ellipsizeMode != null) {
+      switch (ellipsizeMode) {
+        case "head":
+          truncateAt = TextUtils.TruncateAt.START;
+          break;
+        case "middle":
+          truncateAt = TextUtils.TruncateAt.MIDDLE;
+          break;
+        case "tail":
+          truncateAt = TextUtils.TruncateAt.END;
+          break;
+        case "clip":
+          truncateAt = null;
+      }
+    }
+    return truncateAt;
+  }
 }

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

@@ -19,6 +19,7 @@
 import android.text.StaticLayout;
 import android.text.TextDirectionHeuristics;
 import android.text.TextPaint;
+import android.text.TextUtils;
 import android.util.LayoutDirection;
 import android.view.Gravity;
 import android.view.View;
@@ -32,6 +33,7 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.common.mapbuffer.MapBuffer;
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ReactAccessibilityDelegate.AccessibilityRole;
 import com.facebook.react.uimanager.ReactAccessibilityDelegate.Role;
@@ -385,6 +387,8 @@ private static Layout createLayout(
       int hyphenationFrequency,
       Layout.Alignment alignment,
       int justificationMode,
+      @Nullable TextUtils.TruncateAt ellipsizeMode,
+      int maxNumberOfLines,
       TextPaint paint) {
     Layout layout;
 
@@ -414,6 +418,11 @@ private static Layout createLayout(
               .setTextDirection(
                   isScriptRTL ? TextDirectionHeuristics.RTL : TextDirectionHeuristics.LTR);
 
+      if (ReactNativeFeatureFlags.incorporateMaxLinesDuringAndroidLayout()
+          && maxNumberOfLines != ReactConstants.UNSET) {
+        builder.setEllipsize(ellipsizeMode).setMaxLines(maxNumberOfLines);
+      }
+
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
         builder.setUseLineSpacingFromFallbacks(true);
       }
@@ -447,6 +456,11 @@ private static Layout createLayout(
               .setTextDirection(
                   isScriptRTL ? TextDirectionHeuristics.RTL : TextDirectionHeuristics.LTR);
 
+      if (ReactNativeFeatureFlags.incorporateMaxLinesDuringAndroidLayout()
+          && maxNumberOfLines != ReactConstants.UNSET) {
+        builder.setEllipsize(ellipsizeMode).setMaxLines(maxNumberOfLines);
+      }
+
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
         builder.setJustificationMode(justificationMode);
       }
@@ -536,6 +550,12 @@ private static Layout createLayout(
         paragraphAttributes.contains(PA_KEY_MAX_NUMBER_OF_LINES)
             ? paragraphAttributes.getInt(PA_KEY_MAX_NUMBER_OF_LINES)
             : ReactConstants.UNSET;
+    @Nullable
+    TextUtils.TruncateAt ellipsizeMode =
+        paragraphAttributes.contains(PA_KEY_ELLIPSIZE_MODE)
+            ? TextAttributeProps.getEllipsizeMode(
+                paragraphAttributes.getString(PA_KEY_ELLIPSIZE_MODE))
+            : null;
 
     @Nullable String alignmentAttr = getTextAlignmentAttr(attributedString);
     Layout.Alignment alignment = getTextAlignment(attributedString, text, alignmentAttr);
@@ -573,6 +593,8 @@ private static Layout createLayout(
         hyphenationFrequency,
         alignment,
         justificationMode,
+        ellipsizeMode,
+        maximumNumberOfLines,
         paint);
   }
 
@@ -602,6 +624,8 @@ private static Layout createLayout(
             hyphenationFrequency,
             alignment,
             justificationMode,
+            null,
+            ReactConstants.UNSET,
             paint);
 
     // Minimum font size is 4pts to match the iOS implementation.
@@ -654,6 +678,8 @@ private static Layout createLayout(
               hyphenationFrequency,
               alignment,
               justificationMode,
+              null,
+              ReactConstants.UNSET,
               paint);
     }
   }
@@ -677,7 +703,7 @@ public static long measureText(
             width,
             height,
             reactTextViewManagerCallback);
-    Spannable text = (Spannable) layout.getText();
+    Spanned text = (Spanned) layout.getText();
 
     if (text == null) {
       return 0;
@@ -726,6 +752,8 @@ public static long measureText(
 
     float calculatedHeight = height;
     if (heightYogaMeasureMode != YogaMeasureMode.EXACTLY) {
+      // StaticLayout only seems to change its height in response to maxLines when ellipsizing, so
+      // we must truncate
       calculatedHeight = layout.getLineBottom(calculatedLineCount - 1);
       if (heightYogaMeasureMode == YogaMeasureMode.AT_MOST && calculatedHeight > height) {
         calculatedHeight = height;

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b07fb300852699f3066090549af0b994>>
+ * @generated SignedSource<<ac6b60d9d2062eda500e291fb2167076>>
  */
 
 /**
@@ -231,6 +231,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool incorporateMaxLinesDuringAndroidLayout() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("incorporateMaxLinesDuringAndroidLayout");
+    return method(javaProvider_);
+  }
+
   bool traceTurboModulePromiseRejectionsOnAndroid() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("traceTurboModulePromiseRejectionsOnAndroid");
@@ -461,6 +467,11 @@ bool JReactNativeFeatureFlagsCxxInterop::fuseboxNetworkInspectionEnabled(
   return ReactNativeFeatureFlags::fuseboxNetworkInspectionEnabled();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::incorporateMaxLinesDuringAndroidLayout(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::incorporateMaxLinesDuringAndroidLayout();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::traceTurboModulePromiseRejectionsOnAndroid(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::traceTurboModulePromiseRejectionsOnAndroid();
@@ -643,6 +654,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "fuseboxNetworkInspectionEnabled",
         JReactNativeFeatureFlagsCxxInterop::fuseboxNetworkInspectionEnabled),
+      makeNativeMethod(
+        "incorporateMaxLinesDuringAndroidLayout",
+        JReactNativeFeatureFlagsCxxInterop::incorporateMaxLinesDuringAndroidLayout),
       makeNativeMethod(
         "traceTurboModulePromiseRejectionsOnAndroid",
         JReactNativeFeatureFlagsCxxInterop::traceTurboModulePromiseRejectionsOnAndroid),