From 58f5b1d5f824cbf92f9c053e1d4278c05972c59d Mon Sep 17 00:00:00 2001 From: Tomek Zawadzki Date: Wed, 3 Apr 2024 13:53:02 +0200 Subject: [PATCH] Customize codeblock and inline code font size (#259) --- .../com/expensify/livemarkdown/MarkdownStyle.java | 14 ++++++++++++++ .../com/expensify/livemarkdown/MarkdownUtils.java | 2 ++ ios/RCTMarkdownStyle.h | 2 ++ ios/RCTMarkdownStyle.mm | 4 ++++ ios/RCTMarkdownUtils.mm | 14 ++++++++++++-- ...arkdownTextInputDecoratorViewNativeComponent.ts | 2 ++ src/styleUtils.ts | 2 ++ 7 files changed, 38 insertions(+), 2 deletions(-) diff --git a/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java b/android/src/main/java/com/expensify/livemarkdown/MarkdownStyle.java index 0416849f..e52c2c76 100644 --- 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 index e5ce7ef7..971f8691 100644 --- 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 index 63d82a83..0cb24933 100644 --- 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 index 9a6f6caa..c81b6ec3 100644 --- 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 index 084f8009..5870671b 100644 --- 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 index 66353c75..90ce575a 100644 --- 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 index df6a8a90..2b76bded 100644 --- 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', },