Customize mentions foreground color (#141)

README.md

@@ -84,9 +84,11 @@ const markdownStyle: MarkdownStyle = {
     backgroundColor: 'lightgray',
   },
   mentionHere: {
-    backgroundColor: 'yellow',
+    color: 'green',
+    backgroundColor: 'lime',
   },
   mentionUser: {
+    color: 'blue',
     backgroundColor: 'cyan',
   },
 };

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

@@ -46,9 +46,15 @@ public class MarkdownStyle {
   @ColorInt
   private final int mPreBackgroundColor;
 
+  @ColorInt
+  private final int mMentionHereColor;
+
   @ColorInt
   private final int mMentionHereBackgroundColor;
 
+  @ColorInt
+  private final int mMentionUserColor;
+
   @ColorInt
   private final int mMentionUserBackgroundColor;
 
@@ -66,7 +72,9 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mPreFontFamily = parseString(map, "pre", "fontFamily");
     mPreColor = parseColor(map, "pre", "color", context);
     mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
+    mMentionHereColor = parseColor(map, "mentionHere", "color", context);
     mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
+    mMentionUserColor = parseColor(map, "mentionUser", "color", context);
     mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
   }
 
@@ -156,11 +164,21 @@ public int getPreBackgroundColor() {
     return mPreBackgroundColor;
   }
 
+  @ColorInt
+  public int getMentionHereColor() {
+    return mMentionHereColor;
+  }
+
   @ColorInt
   public int getMentionHereBackgroundColor() {
     return mMentionHereBackgroundColor;
   }
 
+  @ColorInt
+  public int getMentionUserColor() {
+    return mMentionUserColor;
+  }
+
   @ColorInt
   public int getMentionUserBackgroundColor() {
     return mMentionUserBackgroundColor;

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

@@ -114,12 +114,12 @@ private void applyRange(SpannableStringBuilder ssb, String type, int start, int
         setSpan(ssb, new MarkdownStrikethroughSpan(), start, end);
         break;
       case "mention-here":
-        setSpan(ssb, new MarkdownBoldSpan(), start, end);
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionHereColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionHereBackgroundColor()), start, end);
         break;
       case "mention-user":
-        setSpan(ssb, new MarkdownBoldSpan(), start, end);
         // TODO: change mention color when it mentions current user
+        setSpan(ssb, new MarkdownForegroundColorSpan(mMarkdownStyle.getMentionUserColor()), start, end);
         setSpan(ssb, new MarkdownBackgroundColorSpan(mMarkdownStyle.getMentionUserBackgroundColor()), start, end);
         break;
       case "syntax":

ios/RCTMarkdownStyle.h

@@ -19,7 +19,9 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) NSString *preFontFamily;
 @property (nonatomic) UIColor *preColor;
 @property (nonatomic) UIColor *preBackgroundColor;
+@property (nonatomic) UIColor *mentionHereColor;
 @property (nonatomic) UIColor *mentionHereBackgroundColor;
+@property (nonatomic) UIColor *mentionUserColor;
 @property (nonatomic) UIColor *mentionUserBackgroundColor;
 
 #ifdef RCT_NEW_ARCH_ENABLED

ios/RCTMarkdownStyle.mm

@@ -32,8 +32,10 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
     _preColor = RCTUIColorFromSharedColor(style.pre.color);
     _preBackgroundColor = RCTUIColorFromSharedColor(style.pre.backgroundColor);
 
+    _mentionHereColor = RCTUIColorFromSharedColor(style.mentionHere.color);
     _mentionHereBackgroundColor = RCTUIColorFromSharedColor(style.mentionHere.backgroundColor);
 
+    _mentionUserColor = RCTUIColorFromSharedColor(style.mentionUser.color);
     _mentionUserBackgroundColor = RCTUIColorFromSharedColor(style.mentionUser.backgroundColor);
   }
 
@@ -64,8 +66,10 @@ - (instancetype)initWithDictionary:(NSDictionary *)json
     _preColor = [RCTConvert UIColor:json[@"pre"][@"color"]];
     _preBackgroundColor = [RCTConvert UIColor:json[@"pre"][@"backgroundColor"]];
 
+    _mentionHereColor = [RCTConvert UIColor:json[@"mentionHere"][@"color"]];
     _mentionHereBackgroundColor = [RCTConvert UIColor:json[@"mentionHere"][@"backgroundColor"]];
 
+    _mentionUserColor = [RCTConvert UIColor:json[@"mentionUser"][@"color"]];
     _mentionUserBackgroundColor = [RCTConvert UIColor:json[@"mentionUser"][@"backgroundColor"]];
   }
 

ios/RCTMarkdownUtils.mm

@@ -64,9 +64,9 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
     NSUInteger length = [item[2] unsignedIntegerValue];
     NSRange range = NSMakeRange(location, length);
 
-    if ([type isEqualToString:@"bold"] || [type isEqualToString:@"mention-here"] || [type isEqualToString:@"mention-user"] || [type isEqualToString:@"syntax"] || [type isEqualToString:@"italic"] || [type isEqualToString:@"code"] || [type isEqualToString:@"pre"] || [type isEqualToString:@"h1"]) {
+    if ([type isEqualToString:@"bold"] || [type isEqualToString:@"syntax"] || [type isEqualToString:@"italic"] || [type isEqualToString:@"code"] || [type isEqualToString:@"pre"] || [type isEqualToString:@"h1"]) {
       UIFont *font = [attributedString attribute:NSFontAttributeName atIndex:location effectiveRange:NULL];
-      if ([type isEqualToString:@"bold"] || [type isEqualToString:@"mention-here"] || [type isEqualToString:@"mention-user"] || [type isEqualToString:@"syntax"]) {
+      if ([type isEqualToString:@"bold"] || [type isEqualToString:@"syntax"]) {
         font = [RCTFont updateFont:font withWeight:@"bold"];
       } else if ([type isEqualToString:@"italic"]) {
         font = [RCTFont updateFont:font withStyle:@"italic"];
@@ -93,10 +93,12 @@ - (NSAttributedString *)parseMarkdown:(nullable NSAttributedString *)input
       [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.codeColor range:range];
       [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.codeBackgroundColor range:range];
     } else if ([type isEqualToString:@"mention-here"]) {
-        [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionHereBackgroundColor range:range];
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionHereColor range:range];
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionHereBackgroundColor range:range];
     } else if ([type isEqualToString:@"mention-user"]) {
-        // TODO: change mention color when it mentions current user
-        [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionUserBackgroundColor range:range];
+      // TODO: change mention color when it mentions current user
+      [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.mentionUserColor range:range];
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:_markdownStyle.mentionUserBackgroundColor range:range];
     } else if ([type isEqualToString:@"link"]) {
       [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
       [attributedString addAttribute:NSForegroundColorAttributeName value:_markdownStyle.linkColor range:range];

src/MarkdownTextInput.tsx

@@ -40,9 +40,11 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
       backgroundColor: 'lightgray',
     },
     mentionHere: {
-      backgroundColor: 'yellow',
+      color: 'green',
+      backgroundColor: 'lime',
     },
     mentionUser: {
+      color: 'blue',
       backgroundColor: 'cyan',
     },
   };

src/MarkdownTextInputDecoratorViewNativeComponent.ts

@@ -30,9 +30,11 @@ interface MarkdownStyle {
     backgroundColor: ColorValue;
   };
   mentionHere: {
+    color: ColorValue;
     backgroundColor: ColorValue;
   };
   mentionUser: {
+    color: ColorValue;
     backgroundColor: ColorValue;
   };
 }