Customize codeblock and inline code font size (#259)

Expensify · Apr 3, 2024 · 58f5b1d · 58f5b1d
1 parent d8205aa
commit 58f5b1d
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 2 deletions.
diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java
@@ -34,6 +34,8 @@ public class MarkdownStyle {
 
   private final String mCodeFontFamily;
 
+  private final float mCodeFontSize;
+
   @ColorInt
   private final int mCodeColor;
 
@@ -42,6 +44,8 @@ public class MarkdownStyle {
 
   private final String mPreFontFamily;
 
+  private final float mPreFontSize;
+
   @ColorInt
   private final int mPreColor;
 
@@ -70,9 +74,11 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mBlockquoteMarginLeft = parseFloat(map, "blockquote", "marginLeft");
     mBlockquotePaddingLeft = parseFloat(map, "blockquote", "paddingLeft");
     mCodeFontFamily = parseString(map, "code", "fontFamily");
+    mCodeFontSize = parseFloat(map, "code", "fontSize");
     mCodeColor = parseColor(map, "code", "color", context);
     mCodeBackgroundColor = parseColor(map, "code", "backgroundColor", context);
     mPreFontFamily = parseString(map, "pre", "fontFamily");
+    mPreFontSize = parseFloat(map, "pre", "fontSize");
     mPreColor = parseColor(map, "pre", "color", context);
     mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
     mMentionHereColor = parseColor(map, "mentionHere", "color", context);
@@ -147,6 +153,10 @@ public String getCodeFontFamily() {
     return mCodeFontFamily;
   }
 
+  public float getCodeFontSize() {
+    return mCodeFontSize;
+  }
+
   @ColorInt
   public int getCodeColor() {
     return mCodeColor;
@@ -161,6 +171,10 @@ public String getPreFontFamily() {
     return mPreFontFamily;
   }
 
+  public float getPreFontSize() {
+    return mPreFontSize;
+  }
+
   @ColorInt
   public int getPreColor() {
     return mPreColor;

diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownUtils.java
@@ -137,11 +137,13 @@ private void applyRange(SpannableStringBuilder ssb, String type, int start, int
         break;
       case "code":
         setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getCodeFontFamily(), mAssetManager), start, end);
+        setSpan(ssb, new MarkdownFontSizeSpan(mMarkdownStyle.getCodeFontSize()), start, end);
         setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getCodeColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getCodeBackgroundColor()), start, end);
         break;
       case "pre":
         setSpan(ssb, new MarkdownFontFamilySpan(mMarkdownStyle.getPreFontFamily(), mAssetManager), start, end);
+        setSpan(ssb, new MarkdownFontSizeSpan(mMarkdownStyle.getPreFontSize()), start, end);
         setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getPreColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getPreBackgroundColor()), start, end);
         break;

diff --git a/ios/RCTMarkdownStyle.h b/ios/RCTMarkdownStyle.h
@@ -15,9 +15,11 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) CGFloat blockquoteMarginLeft;
 @property (nonatomic) CGFloat blockquotePaddingLeft;
 @property (nonatomic) NSString *codeFontFamily;
+@property (nonatomic) CGFloat codeFontSize;
 @property (nonatomic) UIColor *codeColor;
 @property (nonatomic) UIColor *codeBackgroundColor;
 @property (nonatomic) NSString *preFontFamily;
+@property (nonatomic) CGFloat preFontSize;
 @property (nonatomic) UIColor *preColor;
 @property (nonatomic) UIColor *preBackgroundColor;
 @property (nonatomic) UIColor *mentionHereColor;

diff --git a/ios/RCTMarkdownStyle.mm b/ios/RCTMarkdownStyle.mm
@@ -27,10 +27,12 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
     _blockquotePaddingLeft = style.blockquote.paddingLeft;
 
     _codeFontFamily = RCTNSStringFromString(style.code.fontFamily);
+    _codeFontSize = style.code.fontSize;
     _codeColor = RCTUIColorFromSharedColor(style.code.color);
     _codeBackgroundColor = RCTUIColorFromSharedColor(style.code.backgroundColor);
 
     _preFontFamily = RCTNSStringFromString(style.pre.fontFamily);
+    _preFontSize = style.pre.fontSize;
     _preColor = RCTUIColorFromSharedColor(style.pre.color);
     _preBackgroundColor = RCTUIColorFromSharedColor(style.pre.backgroundColor);
 
@@ -63,10 +65,12 @@ - (instancetype)initWithDictionary:(NSDictionary *)json
     _blockquotePaddingLeft = [RCTConvert CGFloat:json[@"blockquote"][@"paddingLeft"]];
 
     _codeFontFamily = [RCTConvert NSString:json[@"code"][@"fontFamily"]];
+    _codeFontSize = [RCTConvert CGFloat:json[@"code"][@"fontSize"]];
     _codeColor = [RCTConvert UIColor:json[@"code"][@"color"]];
     _codeBackgroundColor = [RCTConvert UIColor:json[@"code"][@"backgroundColor"]];
 
     _preFontFamily = [RCTConvert NSString:json[@"pre"][@"fontFamily"]];
+    _preFontSize = [RCTConvert CGFloat:json[@"pre"][@"fontSize"]];
     _preColor = [RCTConvert UIColor:json[@"pre"][@"color"]];
     _preBackgroundColor = [RCTConvert UIColor:json[@"pre"][@"backgroundColor"]];
 

diff --git a/ios/RCTMarkdownUtils.mm b/ios/RCTMarkdownUtils.mm
@@ -72,9 +72,19 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
       } else if ([type isEqualToString:@"italic"]) {
         font = [RCTFont updateFont:font withStyle:@"italic"];
       } else if ([type isEqualToString:@"code"]) {
-        font = [RCTFont updateFont:font withFamily:_markdownStyle.codeFontFamily];
+        font = [RCTFont updateFont:font withFamily:_markdownStyle.codeFontFamily
+                                              size:[NSNumber numberWithFloat:_markdownStyle.codeFontSize]
+                                            weight:nil
+                                             style:nil
+                                           variant:nil
+                                   scaleMultiplier:0];
       } else if ([type isEqualToString:@"pre"]) {
-        font = [RCTFont updateFont:font withFamily:_markdownStyle.preFontFamily];
+        font = [RCTFont updateFont:font withFamily:_markdownStyle.preFontFamily
+                                              size:[NSNumber numberWithFloat:_markdownStyle.preFontSize]
+                                            weight:nil
+                                             style:nil
+                                           variant:nil
+                                   scaleMultiplier:0];
       } else if ([type isEqualToString:@"h1"]) {
         font = [RCTFont updateFont:font withFamily:nil
                                               size:[NSNumber numberWithFloat:_markdownStyle.h1FontSize]

diff --git a/src/MarkdownTextInputDecoratorViewNativeComponent.ts b/src/MarkdownTextInputDecoratorViewNativeComponent.ts
@@ -24,11 +24,13 @@ interface MarkdownStyle {
   };
   code: {
     fontFamily: string;
+    fontSize: Float;
     color: ColorValue;
     backgroundColor: ColorValue;
   };
   pre: {
     fontFamily: string;
+    fontSize: Float;
     color: ColorValue;
     backgroundColor: ColorValue;
   };

diff --git a/src/styleUtils.ts b/src/styleUtils.ts
@@ -34,11 +34,13 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     },
     code: {
       fontFamily: FONT_FAMILY_MONOSPACE,
+      fontSize: 20,
       color: 'black',
       backgroundColor: 'lightgray',
     },
     pre: {
       fontFamily: FONT_FAMILY_MONOSPACE,
+      fontSize: 20,
       color: 'black',
       backgroundColor: 'lightgray',
     },