Minimize EditText Spans 8/9: CustomStyleSpan

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

@@ -37,6 +37,10 @@ public void updateMeasureState(TextPaint paint) {
     apply(paint);
   }
 
+  public float getSpacing() {
+    return mLetterSpacing;
+  }
+
   private void apply(TextPaint paint) {
     if (!Float.isNaN(mLetterSpacing)) {
       paint.setLetterSpacing(mLetterSpacing);

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

@@ -71,6 +71,10 @@ public int getWeight() {
     return mFontFamily;
   }
 
+  public @Nullable String getFontFeatureSettings() {
+    return mFeatureSettings;
+  }
+
   private static void apply(
       Paint paint,
       int style,

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -12,6 +12,7 @@
 
 import android.content.Context;
 import android.graphics.Color;
+import android.graphics.Paint;
 import android.graphics.Rect;
 import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
@@ -54,14 +55,17 @@
 import com.facebook.react.views.text.ReactBackgroundColorSpan;
 import com.facebook.react.views.text.ReactForegroundColorSpan;
 import com.facebook.react.views.text.ReactSpan;
+import com.facebook.react.views.text.ReactStrikethroughSpan;
 import com.facebook.react.views.text.ReactTextUpdate;
 import com.facebook.react.views.text.ReactTypefaceUtils;
+import com.facebook.react.views.text.ReactUnderlineSpan;
 import com.facebook.react.views.text.TextAttributes;
 import com.facebook.react.views.text.TextInlineImageSpan;
 import com.facebook.react.views.text.TextLayoutManager;
 import com.facebook.react.views.view.ReactViewBackgroundManager;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Objects;
 
 /**
  * A wrapper around the EditText that lets us better control what happens when an EditText gets
@@ -515,6 +519,14 @@ public void setFontStyle(String fontStyleString) {
     }
   }
 
+  @Override
+  public void setFontFeatureSettings(String fontFeatureSettings) {
+    if (!Objects.equals(fontFeatureSettings, getFontFeatureSettings())) {
+      super.setFontFeatureSettings(fontFeatureSettings);
+      mTypefaceDirty = true;
+    }
+  }
+
   public void maybeUpdateTypeface() {
     if (!mTypefaceDirty) {
       return;
@@ -526,6 +538,17 @@ public void maybeUpdateTypeface() {
         ReactTypefaceUtils.applyStyles(
             getTypeface(), mFontStyle, mFontWeight, mFontFamily, getContext().getAssets());
     setTypeface(newTypeface);
+
+    // Match behavior of CustomStyleSpan and enable SUBPIXEL_TEXT_FLAG when setting anything
+    // nonstandard
+    if (mFontStyle != UNSET
+        || mFontWeight != UNSET
+        || mFontFamily != null
+        || getFontFeatureSettings() != null) {
+      setPaintFlags(getPaintFlags() | Paint.SUBPIXEL_TEXT_FLAG);
+    } else {
+      setPaintFlags(getPaintFlags() & (~Paint.SUBPIXEL_TEXT_FLAG));
+    }
   }
 
   // VisibleForTesting from {@link TextInputEventsTestCase}.
@@ -703,6 +726,51 @@ public boolean test(ReactForegroundColorSpan span) {
             return span.getForegroundColor() == getCurrentTextColor();
           }
         });
+
+    stripSpansOfKind(
+        sb,
+        ReactStrikethroughSpan.class,
+        new SpanPredicate<ReactStrikethroughSpan>() {
+          @Override
+          public boolean test(ReactStrikethroughSpan span) {
+            return (getPaintFlags() & Paint.STRIKE_THRU_TEXT_FLAG) != 0;
+          }
+        });
+
+    stripSpansOfKind(
+        sb,
+        ReactUnderlineSpan.class,
+        new SpanPredicate<ReactUnderlineSpan>() {
+          @Override
+          public boolean test(ReactUnderlineSpan span) {
+            return (getPaintFlags() & Paint.UNDERLINE_TEXT_FLAG) != 0;
+          }
+        });
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      stripSpansOfKind(
+          sb,
+          CustomLetterSpacingSpan.class,
+          new SpanPredicate<CustomLetterSpacingSpan>() {
+            @Override
+            public boolean test(CustomLetterSpacingSpan span) {
+              return span.getSpacing() == mTextAttributes.getEffectiveLetterSpacing();
+            }
+          });
+    }
+
+    stripSpansOfKind(
+        sb,
+        CustomStyleSpan.class,
+        new SpanPredicate<CustomStyleSpan>() {
+          @Override
+          public boolean test(CustomStyleSpan span) {
+            return span.getStyle() == mFontStyle
+                && Objects.equals(span.getFontFamily(), mFontFamily)
+                && span.getWeight() == mFontWeight
+                && Objects.equals(span.getFontFeatureSettings(), getFontFeatureSettings());
+          }
+        });
   }
 
   private <T> void stripSpansOfKind(
@@ -727,17 +795,54 @@ private void restoreStyleEquivalentSpans(SpannableStringBuilder workingText) {
     // (least precedence). This ensures the span is behind any overlapping spans.
     spanFlags |= Spannable.SPAN_PRIORITY;
 
-    List<Object> spans = new ArrayList<>();
-    spans.add(new ReactAbsoluteSizeSpan(mTextAttributes.getEffectiveFontSize()));
-    spans.add(new ReactForegroundColorSpan(getCurrentTextColor()));
+    workingText.setSpan(
+        new ReactAbsoluteSizeSpan(mTextAttributes.getEffectiveFontSize()),
+        0,
+        workingText.length(),
+        spanFlags);
+
+    workingText.setSpan(
+        new ReactForegroundColorSpan(getCurrentTextColor()), 0, workingText.length(), spanFlags);
 
     int backgroundColor = mReactBackgroundManager.getBackgroundColor();
     if (backgroundColor != Color.TRANSPARENT) {
-      spans.add(new ReactBackgroundColorSpan(backgroundColor));
+      workingText.setSpan(
+          new ReactBackgroundColorSpan(backgroundColor), 0, workingText.length(), spanFlags);
     }
 
-    for (Object span : spans) {
-      workingText.setSpan(span, 0, workingText.length(), spanFlags);
+    if ((getPaintFlags() & Paint.STRIKE_THRU_TEXT_FLAG) != 0) {
+      workingText.setSpan(new ReactStrikethroughSpan(), 0, workingText.length(), spanFlags);
+    }
+
+    if ((getPaintFlags() & Paint.UNDERLINE_TEXT_FLAG) != 0) {
+      workingText.setSpan(new ReactUnderlineSpan(), 0, workingText.length(), spanFlags);
+    }
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      float effectiveLetterSpacing = mTextAttributes.getEffectiveLetterSpacing();
+      if (!Float.isNaN(effectiveLetterSpacing)) {
+        workingText.setSpan(
+            new CustomLetterSpacingSpan(effectiveLetterSpacing),
+            0,
+            workingText.length(),
+            spanFlags);
+      }
+    }
+
+    if (mFontStyle != UNSET
+        || mFontWeight != UNSET
+        || mFontFamily != null
+        || getFontFeatureSettings() != null) {
+      workingText.setSpan(
+          new CustomStyleSpan(
+              mFontStyle,
+              mFontWeight,
+              getFontFeatureSettings(),
+              mFontFamily,
+              getContext().getAssets()),
+          0,
+          workingText.length(),
+          spanFlags);
     }
   }
 
@@ -1093,7 +1198,9 @@ protected void applyTextAttributes() {
 
     float effectiveLetterSpacing = mTextAttributes.getEffectiveLetterSpacing();
     if (!Float.isNaN(effectiveLetterSpacing)) {
-      setLetterSpacing(effectiveLetterSpacing);
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+        setLetterSpacing(effectiveLetterSpacing);
+      }
     }
   }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java

@@ -13,6 +13,7 @@
 import android.content.res.ColorStateList;
 import android.graphics.BlendMode;
 import android.graphics.BlendModeColorFilter;
+import android.graphics.Paint;
 import android.graphics.PorterDuff;
 import android.graphics.drawable.Drawable;
 import android.os.Build;
@@ -68,6 +69,7 @@
 import com.facebook.react.views.text.ReactBaseTextShadowNode;
 import com.facebook.react.views.text.ReactTextUpdate;
 import com.facebook.react.views.text.ReactTextViewManagerCallback;
+import com.facebook.react.views.text.ReactTypefaceUtils;
 import com.facebook.react.views.text.TextAttributeProps;
 import com.facebook.react.views.text.TextInlineImageSpan;
 import com.facebook.react.views.text.TextLayoutManager;
@@ -412,6 +414,11 @@ public void setFontStyle(ReactEditText view, @Nullable String fontStyle) {
     view.setFontStyle(fontStyle);
   }
 
+  @ReactProp(name = ViewProps.FONT_VARIANT)
+  public void setFontVariant(ReactEditText view, @Nullable ReadableArray fontVariant) {
+    view.setFontFeatureSettings(ReactTypefaceUtils.parseFontVariant(fontVariant));
+  }
+
   @ReactProp(name = ViewProps.INCLUDE_FONT_PADDING, defaultBoolean = true)
   public void setIncludeFontPadding(ReactEditText view, boolean includepad) {
     view.setIncludeFontPadding(includepad);
@@ -935,6 +942,20 @@ public void setAutoFocus(ReactEditText view, boolean autoFocus) {
     view.setAutoFocus(autoFocus);
   }
 
+  @ReactProp(name = ViewProps.TEXT_DECORATION_LINE)
+  public void setTextDecorationLine(ReactEditText view, @Nullable String textDecorationLineString) {
+    view.setPaintFlags(
+        view.getPaintFlags() & ~(Paint.STRIKE_THRU_TEXT_FLAG | Paint.UNDERLINE_TEXT_FLAG));
+
+    for (String token : textDecorationLineString.split(" ")) {
+      if (token.equals("underline")) {
+        view.setPaintFlags(view.getPaintFlags() | Paint.UNDERLINE_TEXT_FLAG);
+      } else if (token.equals("line-through")) {
+        view.setPaintFlags(view.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
+      }
+    }
+  }
+
   @ReactPropGroup(
       names = {
         ViewProps.BORDER_WIDTH,