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,12 @@ - (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) {
+    NSParagraphStyle *defaultParagraphStyle = defaultTextAttributes[NSParagraphStyleAttributeName];
+    NSMutableParagraphStyle *paragraphStyle = defaultParagraphStyle != nil ? [defaultParagraphStyle mutableCopy] : [NSMutableParagraphStyle new];
+    paragraphStyle.lineHeightMultiple = markdownStyle.h1LineHeight / markdownStyle.h1FontSize;
+    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

@@ -11,6 +11,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

@@ -18,6 +18,7 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
     _linkColor = RCTUIColorFromSharedColor(style.link.color);
 
     _h1FontSize = style.h1.fontSize;
+    _h1LineHeight = style.h1.lineHeight;
 
     _emojiFontSize = style.emoji.fontSize;
 
@@ -59,6 +60,7 @@ - (instancetype)initWithDictionary:(NSDictionary *)json
     _linkColor = [RCTConvert UIColor:json[@"link"][@"color"]];
 
     _h1FontSize = [RCTConvert CGFloat:json[@"h1"][@"fontSize"]];
+    _h1LineHeight = [RCTConvert CGFloat:json[@"h1"][@"lineHeight"]];
 
     _emojiFontSize = [RCTConvert CGFloat:json[@"emoji"][@"fontSize"]];
 

example/ios/Podfile.lock

@@ -1509,7 +1509,7 @@ PODS:
     - React-logger (= 0.76.3)
     - React-perflogger (= 0.76.3)
     - React-utils (= 0.76.3)
-  - RNLiveMarkdown (0.1.216):
+  - RNLiveMarkdown (0.1.218):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1529,10 +1529,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/newarch (= 0.1.216)
+    - RNLiveMarkdown/newarch (= 0.1.218)
     - RNReanimated/worklets
     - Yoga
-  - RNLiveMarkdown/newarch (0.1.216):
+  - RNLiveMarkdown/newarch (0.1.218):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1913,7 +1913,7 @@ SPEC CHECKSUMS:
   React-utils: 2bcaf4f4dfe361344bce2fae428603d518488630
   ReactCodegen: 3a85e3cb68c92f16b2ffcf192e30364d78f8ccb9
   ReactCommon: 89c87b343deacc8610b099ac764848f0ce937e3e
-  RNLiveMarkdown: 832e5ce7d3896c8352a859497a2465336105ea32
+  RNLiveMarkdown: cc674559a93c1f503ed6aac341a66346f05ef153
   RNReanimated: 97d6090ccdf33859f28cc6d394fb4fd799e75d29
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: f6dc1b6029519815d5516a1241821c6a9074af6d

example/src/App.tsx

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

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,