[iOS & Android] Enable borderRadius in all mention types

WebExample/__tests__/styles.spec.ts

@@ -40,15 +40,15 @@ test.describe('markdown content styling', () => {
   });
 
   test('mention-here', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'here', style: 'color: green; background-color: lime;', page});
+    await testMarkdownContentStyle({testContent: 'here', style: 'color: green; background-color: lime; border-radius: 5px;', page});
   });
 
   test('mention-user', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'someone@swmansion.com', style: 'color: blue; background-color: cyan;', page});
+    await testMarkdownContentStyle({testContent: 'someone@swmansion.com', style: 'color: blue; background-color: cyan; border-radius: 5px;', page});
   });
 
   test('mention-report', async ({page}) => {
-    await testMarkdownContentStyle({testContent: 'mention-report', style: 'color: red; background-color: pink;', page});
+    await testMarkdownContentStyle({testContent: 'mention-report', style: 'color: red; background-color: pink; border-radius: 5px;', page});
   });
 
   test('blockquote', async ({page, browserName}) => {

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

@@ -75,16 +75,16 @@ private void applyRange(@NonNull SpannableStringBuilder ssb, @NonNull MarkdownRa
         break;
       case "mention-here":
         setSpan(ssb, new MarkdownForegroundColorSpan(markdownStyle.getMentionHereColor()), start, end);
-        setSpan(ssb, new MarkdownBackgroundColorSpan(markdownStyle.getMentionHereBackgroundColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundSpan(markdownStyle.getMentionHereBackgroundColor(), markdownStyle.getMentionHereBorderRadius(), start, end), start, end);
         break;
       case "mention-user":
         // TODO: change mention color when it mentions current user
         setSpan(ssb, new MarkdownForegroundColorSpan(markdownStyle.getMentionUserColor()), start, end);
-        setSpan(ssb, new MarkdownBackgroundColorSpan(markdownStyle.getMentionUserBackgroundColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundSpan(markdownStyle.getMentionUserBackgroundColor(), markdownStyle.getMentionUserBorderRadius(), start, end), start, end);
         break;
       case "mention-report":
         setSpan(ssb, new MarkdownForegroundColorSpan(markdownStyle.getMentionReportColor()), start, end);
-        setSpan(ssb, new MarkdownBackgroundColorSpan(markdownStyle.getMentionReportBackgroundColor()), start, end);
+        setSpan(ssb, new MarkdownBackgroundSpan(markdownStyle.getMentionReportBackgroundColor(), markdownStyle.getMentionReportBorderRadius(), start, end), start, end);
         break;
       case "syntax":
         setSpan(ssb, new MarkdownForegroundColorSpan(markdownStyle.getSyntaxColor()), start, end);

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

@@ -63,18 +63,24 @@ public class MarkdownStyle {
   @ColorInt
   private final int mMentionHereBackgroundColor;
 
+  private final float mMentionHereBorderRadius;
+
   @ColorInt
   private final int mMentionUserColor;
 
   @ColorInt
   private final int mMentionUserBackgroundColor;
 
+  private final float mMentionUserBorderRadius;
+
   @ColorInt
   private final int mMentionReportColor;
 
   @ColorInt
   private final int mMentionReportBackgroundColor;
 
+  private final float mMentionReportBorderRadius;
+
   public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mSyntaxColor = parseColor(map, "syntax", "color", context);
     mLinkColor = parseColor(map, "link", "color", context);
@@ -95,10 +101,13 @@ public MarkdownStyle(@NonNull ReadableMap map, @NonNull Context context) {
     mPreBackgroundColor = parseColor(map, "pre", "backgroundColor", context);
     mMentionHereColor = parseColor(map, "mentionHere", "color", context);
     mMentionHereBackgroundColor = parseColor(map, "mentionHere", "backgroundColor", context);
+    mMentionHereBorderRadius = parseFloat(map, "mentionHere", "borderRadius");
     mMentionUserColor = parseColor(map, "mentionUser", "color", context);
     mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
+    mMentionUserBorderRadius = parseFloat(map, "mentionUser", "borderRadius");
     mMentionReportColor = parseColor(map, "mentionReport", "color", context);
     mMentionReportBackgroundColor = parseColor(map, "mentionReport", "backgroundColor", context);
+    mMentionReportBorderRadius = parseFloat(map, "mentionReport", "borderRadius");
   }
 
   private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop, @NonNull Context context) {
@@ -213,6 +222,10 @@ public int getMentionHereBackgroundColor() {
     return mMentionHereBackgroundColor;
   }
 
+  public float getMentionHereBorderRadius() {
+    return mMentionHereBorderRadius;
+  }
+
   @ColorInt
   public int getMentionUserColor() {
     return mMentionUserColor;
@@ -223,6 +236,10 @@ public int getMentionUserBackgroundColor() {
     return mMentionUserBackgroundColor;
   }
 
+  public float getMentionUserBorderRadius() {
+    return mMentionUserBorderRadius;
+  }
+
   @ColorInt
   public int getMentionReportColor() {
     return mMentionReportColor;
@@ -232,4 +249,8 @@ public int getMentionReportColor() {
   public int getMentionReportBackgroundColor() {
     return mMentionReportBackgroundColor;
   }
+
+  public float getMentionReportBorderRadius() {
+    return mMentionReportBorderRadius;
+  }
 }

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

@@ -0,0 +1,87 @@
+package com.expensify.livemarkdown.spans;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.RectF;
+import android.text.Spanned;
+import android.text.style.LeadingMarginSpan;
+import android.text.style.LineBackgroundSpan;
+
+import androidx.annotation.ColorInt;
+import androidx.annotation.NonNull;
+
+public class MarkdownBackgroundSpan implements MarkdownSpan, LineBackgroundSpan {
+
+  private final int backgroundColor;
+  private final int mentionStart;
+  private final int mentionEnd;
+  private final float cornerRadius;
+
+  public MarkdownBackgroundSpan(@ColorInt int backgroundColor, float borderRadius, int mentionStart, int mentionEnd) {
+    this.backgroundColor = backgroundColor;
+    this.cornerRadius = borderRadius;
+    this.mentionStart = mentionStart;
+    this.mentionEnd = mentionEnd;
+  }
+
+  @Override
+  public void drawBackground(
+    @NonNull Canvas canvas,
+    @NonNull Paint paint,
+    int left,
+    int right,
+    int top,
+    int baseline,
+    int bottom,
+    @NonNull CharSequence text,
+    int start,
+    int end,
+    int lnum
+  ) {
+    int leadingMargin = getLeadingMargin(text, start, end);
+
+    boolean mentionStarts = start <= mentionStart;
+    boolean mentionEnds = end >= mentionEnd;
+
+    float startX = leadingMargin + (mentionStarts ? paint.measureText(text, start, mentionStart) : 0);
+    float endX = leadingMargin + paint.measureText(text, start, mentionEnds ? mentionEnd : end);
+
+    int originalColor = paint.getColor();
+    paint.setColor(backgroundColor);
+
+    RectF lineRect = new RectF(startX, top, endX, bottom);
+    Path backgroundPath = new Path();
+    backgroundPath.addRoundRect(lineRect, createRadii(mentionStarts, mentionEnds), Path.Direction.CW);
+    canvas.drawPath(backgroundPath, paint);
+
+    paint.setColor(originalColor);
+  }
+
+  private int getLeadingMargin(@NonNull CharSequence text, int start, int end) {
+    int leadingMargin = 0;
+    if (text instanceof Spanned spanned) {
+      LeadingMarginSpan[] marginSpans = spanned.getSpans(start, end, LeadingMarginSpan.class);
+      for (LeadingMarginSpan marginSpan : marginSpans) {
+        leadingMargin += marginSpan.getLeadingMargin(true);
+      }
+    }
+    return leadingMargin;
+  }
+
+  private float[] createRadii(boolean roundedLeft, boolean roundedRight) {
+    float[] radii = new float[8];
+
+    if (roundedLeft) {
+      radii[0] = radii[1] = cornerRadius; // top-left
+      radii[6] = radii[7] = cornerRadius; // bottom-left
+    }
+
+    if (roundedRight) {
+      radii[2] = radii[3] = cornerRadius; // top-right
+      radii[4] = radii[5] = cornerRadius; // bottom-right
+    }
+
+    return radii;
+  }
+}

apple/MarkdownFormatter.h

@@ -6,6 +6,8 @@ NS_ASSUME_NONNULL_BEGIN
 
 const NSAttributedStringKey RCTLiveMarkdownTextAttributeName = @"RCTLiveMarkdownText";
 
+const NSAttributedStringKey RCTLiveMarkdownTextBackgroundAttributeName = @"RCTLiveMarkdownTextBackground";
+
 const NSAttributedStringKey RCTLiveMarkdownBlockquoteDepthAttributeName = @"RCTLiveMarkdownBlockquoteDepth";
 
 @interface MarkdownFormatter : NSObject

apple/MarkdownFormatter.mm

@@ -1,5 +1,6 @@
 #import "MarkdownFormatter.h"
 #import <React/RCTFont.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundUtils.h>
 
 @implementation MarkdownFormatter
 
@@ -91,14 +92,44 @@ - (void)applyRangeToAttributedString:(NSMutableAttributedString *)attributedStri
     [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.codeBackgroundColor range:range];
   } else if (type == "mention-here") {
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.mentionHereColor range:range];
-    [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionHereBackgroundColor range:range];
+    if (@available(iOS 16.0, *)) {
+      RCTMarkdownTextBackground *textBackground = [[RCTMarkdownTextBackground alloc] init];
+      textBackground.color = markdownStyle.mentionHereBackgroundColor;
+      textBackground.cornerRadius = markdownStyle.mentionHereBorderRadius;
+
+      [attributedString addAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                               value:textBackground
+                               range:range];
+    } else {
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionHereBackgroundColor range:range];
+    }
   } else if (type == "mention-user") {
     // 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];
+    if (@available(iOS 16.0, *)) {
+      RCTMarkdownTextBackground *textBackground = [[RCTMarkdownTextBackground alloc] init];
+      textBackground.color = markdownStyle.mentionUserBackgroundColor;
+      textBackground.cornerRadius = markdownStyle.mentionUserBorderRadius;
+
+      [attributedString addAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                               value:textBackground
+                               range:range];
+    } else {
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionUserBackgroundColor range:range];
+    }
   } else if (type == "mention-report") {
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.mentionReportColor range:range];
-    [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionReportBackgroundColor range:range];
+    if (@available(iOS 16.0, *)) {
+      RCTMarkdownTextBackground *textBackground = [[RCTMarkdownTextBackground alloc] init];
+      textBackground.color = markdownStyle.mentionReportBackgroundColor;
+      textBackground.cornerRadius = markdownStyle.mentionReportBorderRadius;
+
+      [attributedString addAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                               value:textBackground
+                               range:range];
+    } else {
+      [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionReportBackgroundColor range:range];
+    }
   } else if (type == "link") {
     [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.linkColor range:range];

apple/BlockquoteTextLayoutFragment.h → apple/MarkdownTextLayoutFragment.h

@@ -1,15 +1,18 @@
 #import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundUtils.h>
 #import <UIKit/UIKit.h>
 
 NS_ASSUME_NONNULL_BEGIN
 
 API_AVAILABLE(ios(15.0))
-@interface BlockquoteTextLayoutFragment : NSTextLayoutFragment
+@interface MarkdownTextLayoutFragment : NSTextLayoutFragment
 
 @property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;
 
 @property NSUInteger depth;
 
+@property NSMutableArray<RCTMarkdownTextBackgroundWithRange *> *mentions;
+
 @end
 
 NS_ASSUME_NONNULL_END