Customize line height for headings

WebExample/__tests__/styles.spec.ts

@@ -28,7 +28,7 @@ test.describe('markdown content styling', () => {
   });
 
   test('h1', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'header1', style: 'font-size: 25px; font-weight: bold;', page});
+    await testMarkdownContentStyle({testContent: 'header1', style: 'font-size: 25px; line-height: 50px; font-weight: bold;', page});
   });
 
   test('inline code', async ({page}) => {

android/src/main/java/com/expensify/livemarkdown/MarkdownFormatter.java

@@ -106,10 +106,10 @@ private void applyRange(@NonNull SpannableStringBuilder ssb, @NonNull MarkdownRa
         break;
       case "h1":
         setSpan(ssb, new MarkdownBoldSpan(), start, end);
-        CustomLineHeightSpan[] spans = ssb.getSpans(0, ssb.length(), CustomLineHeightSpan.class);
-        if (spans.length >= 1) {
-          int lineHeight = spans[0].getLineHeight();
-          setSpan(ssb, new MarkdownLineHeightSpan(lineHeight * 1.5f), start, end);
+        float lineHeight = markdownStyle.getH1LineHeight();
+        if (lineHeight != -1) {
+          // NOTE: actually, we should also include "# " but it also works this way
+          setSpan(ssb, new MarkdownLineHeightSpan(lineHeight), start, end);
         }
         // NOTE: size span must be set after line height span to avoid height jumps
         setSpan(ssb, new MarkdownFontSizeSpan(markdownStyle.getH1FontSize()), start, end);

android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java

@@ -21,6 +21,8 @@ public class MarkdownStyle {
 
   private final float mH1FontSize;
 
+  private final float mH1LineHeight;
+
   private final float mEmojiFontSize;
 
   @ColorInt
@@ -76,6 +78,7 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mSyntaxColor = parseColor(map, "syntax", "color", context);
     mLinkColor = parseColor(map, "link", "color", context);
     mH1FontSize = parseFloat(map, "h1", "fontSize");
+    mH1LineHeight = parseFloat(map, "h1", "lineHeight");
     mEmojiFontSize = parseFloat(map, "emoji", "fontSize");
     mBlockquoteBorderColor = parseColor(map, "blockquote", "borderColor", context);
     mBlockquoteBorderWidth = parseFloat(map, "blockquote", "borderWidth");
@@ -138,6 +141,10 @@ public float getH1FontSize() {
     return mH1FontSize;
   }
 
+  public float getH1LineHeight() {
+    return mH1LineHeight;
+  }
+
   public float getEmojiFontSize() {
     return mEmojiFontSize;
   }

android/src/main/java/com/expensify/livemarkdown/spans/MarkdownLineHeightSpan.java

@@ -3,16 +3,19 @@
 import android.graphics.Paint;
 import android.text.style.LineHeightSpan;
 
+import com.facebook.react.uimanager.PixelUtil;
+import com.facebook.react.views.text.internal.span.CustomLineHeightSpan;
+
 public class MarkdownLineHeightSpan implements MarkdownSpan, LineHeightSpan {
-  private final float mLineHeight;
+  private final CustomLineHeightSpan mCustomLineHeightSpan;
 
   public MarkdownLineHeightSpan(float lineHeight) {
-    mLineHeight = lineHeight;
+    mCustomLineHeightSpan = new CustomLineHeightSpan(PixelUtil.toPixelFromDIP(lineHeight));
   }
 
   @Override
   public void chooseHeight(CharSequence text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt fm) {
-    fm.top -= mLineHeight / 4;
-    fm.ascent -= mLineHeight / 4;
+    // CustomLineHeightSpan is marked as final, we can't extend it, but we can use it via this adapter
+    mCustomLineHeightSpan.chooseHeight(text, start, end, spanstartv, lineHeight, fm);
   }
 }

apple/MarkdownFormatter.mm

@@ -112,6 +112,28 @@ - (void)applyRangeToAttributedString:(NSMutableAttributedString *)attributedStri
     paragraphStyle.headIndent = indent;
     [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:range];
     [attributedString addAttribute:RCTLiveMarkdownBlockquoteDepthAttributeName value:@(depth) range:range];
+  } else if (type == "h1" && markdownStyle.h1LineHeight != -1) {
+    __block BOOL found = NO;
+    [attributedString enumerateAttribute:NSParagraphStyleAttributeName
+                                 inRange:range
+                                 options:0
+                              usingBlock:^(NSParagraphStyle *paragraphStyle, NSRange paragraphRange, BOOL *stop) {
+      if (paragraphStyle && paragraphStyle.headIndent && [paragraphStyle isKindOfClass:[NSMutableParagraphStyle class]]) {
+        NSMutableParagraphStyle *mutableParagraphStyle = (NSMutableParagraphStyle *)paragraphStyle;
+        mutableParagraphStyle.minimumLineHeight = markdownStyle.h1LineHeight;
+        mutableParagraphStyle.maximumLineHeight = markdownStyle.h1LineHeight;
+        found = YES;
+        *stop = YES;
+      }
+    }];
+    if (!found) {
+      NSParagraphStyle *defaultParagraphStyle = defaultTextAttributes[NSParagraphStyleAttributeName];
+      NSMutableParagraphStyle *paragraphStyle = defaultParagraphStyle != nil ? [defaultParagraphStyle mutableCopy] : [NSMutableParagraphStyle new];
+      paragraphStyle.minimumLineHeight = markdownStyle.h1LineHeight;
+      paragraphStyle.maximumLineHeight = markdownStyle.h1LineHeight;
+      NSRange rangeWithHashAndSpace = NSMakeRange(range.location - 2, range.length + 2);
+      [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:rangeWithHashAndSpace];
+    }
   } else if (type == "pre") {
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.preColor range:range];
     NSRange rangeForBackground = [[attributedString string] characterAtIndex:range.location] == '\n' ? NSMakeRange(range.location + 1, range.length - 1) : range;

apple/RCTMarkdownStyle.h

@@ -9,6 +9,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) UIColor *syntaxColor;
 @property (nonatomic) UIColor *linkColor;
 @property (nonatomic) CGFloat h1FontSize;
+@property (nonatomic) CGFloat h1LineHeight;
 @property (nonatomic) CGFloat emojiFontSize;
 @property (nonatomic) UIColor *blockquoteBorderColor;
 @property (nonatomic) CGFloat blockquoteBorderWidth;

apple/RCTMarkdownStyle.mm

@@ -12,6 +12,7 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
     _linkColor = RCTUIColorFromSharedColor(style.link.color);
 
     _h1FontSize = style.h1.fontSize;
+    _h1LineHeight = style.h1.lineHeight;
 
     _emojiFontSize = style.emoji.fontSize;
 

example/src/App.tsx

@@ -33,6 +33,9 @@ export default function App() {
       link: {
         color: linkColorState ? 'red' : 'blue',
       },
+      h1: {
+        lineHeight: 50,
+      },
     };
   }, [emojiFontSizeState, linkColorState]);
 

patches/react-native+0.77.0.patch

@@ -0,0 +1,57 @@
+diff --git a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h
+index 3427663..903344a 100644
+--- a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h
++++ b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.h
+@@ -41,6 +41,8 @@ NSString *RCTNSStringFromStringApplyingTextTransform(NSString *string, facebook:
+
+ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText);
+
++void RCTApplyBaselineOffsetForRange(NSMutableAttributedString *attributedText, NSRange attributedTextRange);
++
+ /*
+  * Whether two `NSAttributedString` lead to the same underlying displayed text, even if they are not strictly equal.
+  * I.e. is one string substitutable for the other when backing a control (which may have some ignorable attributes
+diff --git a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm
+index 1e551e4..04c9d3d 100644
+--- a/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm
++++ b/node_modules/react-native/ReactCommon/react/renderer/textlayoutmanager/platform/ios/react/renderer/textlayoutmanager/RCTAttributedTextUtils.mm
+@@ -325,11 +325,20 @@ NSMutableDictionary<NSAttributedStringKey, id> *RCTNSTextAttributesFromTextAttri
+ }
+
+ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
++{
++  [attributedText.string enumerateSubstringsInRange:NSMakeRange(0, attributedText.length)
++                                            options:NSStringEnumerationByLines | NSStringEnumerationSubstringNotRequired
++                                         usingBlock:^(NSString * _Nullable substring, NSRange substringRange, NSRange enclosingRange, BOOL * _Nonnull stop) {
++    RCTApplyBaselineOffsetForRange(attributedText, enclosingRange);
++  }];
++}
++
++void RCTApplyBaselineOffsetForRange(NSMutableAttributedString *attributedText, NSRange attributedTextRange)
+ {
+   __block CGFloat maximumLineHeight = 0;
+
+   [attributedText enumerateAttribute:NSParagraphStyleAttributeName
+-                             inRange:NSMakeRange(0, attributedText.length)
++                             inRange:attributedTextRange
+                              options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                           usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
+                             if (!paragraphStyle) {
+@@ -347,7 +356,7 @@ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
+   __block CGFloat maximumFontLineHeight = 0;
+
+   [attributedText enumerateAttribute:NSFontAttributeName
+-                             inRange:NSMakeRange(0, attributedText.length)
++                             inRange:attributedTextRange
+                              options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                           usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
+                             if (!font) {
+@@ -365,7 +374,7 @@ void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText)
+
+   [attributedText addAttribute:NSBaselineOffsetAttributeName
+                          value:@(baseLineOffset)
+-                         range:NSMakeRange(0, attributedText.length)];
++                         range:attributedTextRange];
+ }
+
+ static NSMutableAttributedString *RCTNSAttributedStringFragmentFromFragment(

src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -15,6 +15,7 @@ interface MarkdownStyle {
   };
   h1: {
     fontSize: Float;
+    lineHeight: Float;
   };
   blockquote: {
     borderColor: ColorValue;

src/styleUtils.ts

@@ -20,6 +20,7 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     },
     h1: {
       fontSize: 25,
+      lineHeight: -1,
     },
     emoji: {
       fontSize: 20,