[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,19 +63,27 @@ 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) {
+    float screenDensity = context.getResources().getDisplayMetrics().density;
+
     mSyntaxColor = parseColor(map, "syntax", "color", context);
     mLinkColor = parseColor(map, "link", "color", context);
     mH1FontSize = parseFloat(map, "h1", "fontSize");
@@ -95,10 +103,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") * screenDensity;
     mMentionUserColor = parseColor(map, "mentionUser", "color", context);
     mMentionUserBackgroundColor = parseColor(map, "mentionUser", "backgroundColor", context);
+    mMentionUserBorderRadius = parseFloat(map, "mentionUser", "borderRadius") * screenDensity;
     mMentionReportColor = parseColor(map, "mentionReport", "color", context);
     mMentionReportBackgroundColor = parseColor(map, "mentionReport", "backgroundColor", context);
+    mMentionReportBorderRadius = parseFloat(map, "mentionReport", "borderRadius") * screenDensity;
   }
 
   private static int parseColor(@NonNull ReadableMap map, @NonNull String key, @NonNull String prop, @NonNull Context context) {
@@ -213,6 +224,10 @@ public int getMentionHereBackgroundColor() {
     return mMentionHereBackgroundColor;
   }
 
+  public float getMentionHereBorderRadius() {
+    return mMentionHereBorderRadius;
+  }
+
   @ColorInt
   public int getMentionUserColor() {
     return mMentionUserColor;
@@ -223,6 +238,10 @@ public int getMentionUserBackgroundColor() {
     return mMentionUserBackgroundColor;
   }
 
+  public float getMentionUserBorderRadius() {
+    return mMentionUserBorderRadius;
+  }
+
   @ColorInt
   public int getMentionReportColor() {
     return mMentionReportColor;
@@ -232,4 +251,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,94 @@
+package com.expensify.livemarkdown.spans;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.RectF;
+import android.text.StaticLayout;
+import android.text.TextPaint;
+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 borderRadius;
+
+  private StaticLayout layout;
+  private Path backgroundPath;
+
+  public MarkdownBackgroundSpan(@ColorInt int backgroundColor, float borderRadius, int mentionStart, int mentionEnd) {
+    this.backgroundColor = backgroundColor;
+    this.borderRadius = borderRadius;
+    this.mentionStart = mentionStart;
+    this.mentionEnd = mentionEnd;
+    this.backgroundPath = new Path();
+  }
+
+  @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 lineStart = 0;
+    int lineEnd = end - start;
+    CharSequence lineText = text.subSequence(start, end);
+    if (layout == null || layout.getText() != lineText || layout.getWidth() != right || layout.getLineEnd(0) != lineEnd) {
+      // Create layout for the current line only
+      layout = StaticLayout.Builder.obtain(lineText, lineStart, lineEnd, (TextPaint) paint, right).build();
+
+      int relativeMentionStart = mentionStart - start;
+      int relativeMentionEnd = mentionEnd - start;
+
+      boolean mentionStarts = lineStart <= relativeMentionStart;
+      boolean mentionEnds = lineEnd >= relativeMentionEnd;
+
+      float startX = layout.getPrimaryHorizontal(mentionStarts ? relativeMentionStart: lineStart);
+      float endX = layout.getPrimaryHorizontal(mentionEnds ? relativeMentionEnd : lineEnd);
+
+      Paint.FontMetrics fm = paint.getFontMetrics();
+      float startY = baseline + fm.ascent;
+      float endY = baseline + fm.descent;
+
+      RectF lineRect = new RectF(startX, startY, endX, endY);
+      backgroundPath.reset();
+      backgroundPath.addRoundRect(lineRect, createRadii(mentionStarts, mentionEnds), Path.Direction.CW);
+    }
+
+    int originalColor = paint.getColor();
+    paint.setColor(backgroundColor);
+
+    canvas.drawPath(backgroundPath, paint);
+
+    paint.setColor(originalColor);
+  }
+
+  private float[] createRadii(boolean roundedLeft, boolean roundedRight) {
+    float[] radii = new float[8];
+
+    if (roundedLeft) {
+      radii[0] = radii[1] = borderRadius; // top-left
+      radii[6] = radii[7] = borderRadius; // bottom-left
+    }
+
+    if (roundedRight) {
+      radii[2] = radii[3] = borderRadius; // top-right
+      radii[4] = radii[5] = borderRadius; // 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.borderRadius = 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.borderRadius = 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.borderRadius = 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/MarkdownTextInputDecoratorComponentView.mm

@@ -77,7 +77,7 @@ - (void)addTextInputObservers
   react_native_assert([childView isKindOfClass:[RCTTextInputComponentView class]] && "Child component of MarkdownTextInputDecoratorComponentView is not an instance of RCTTextInputComponentView.");
   RCTTextInputComponentView *textInputComponentView = (RCTTextInputComponentView *)childView;
   UIView<RCTBackedTextInputViewProtocol> *backedTextInputView = [textInputComponentView valueForKey:@"_backedTextInputView"];
- 
+
   _observersAdded = true;
 
   if ([backedTextInputView isKindOfClass:[RCTUITextField class]]) {
@@ -100,6 +100,17 @@ - (void)addTextInputObservers
     // format initial value
     [_markdownTextFieldObserver textFieldDidChange:_textField];
 
+    if (@available(iOS 16.0, *)) {
+      NSTextStorage *textStorage = [_textField valueForKey:@"_textStorage"];
+      NSTextContainer *textContainer = [_textField valueForKey:@"_textContainer"];
+      NSTextLayoutManager *textLayoutManager = [textContainer valueForKey:@"_textLayoutManager"];
+
+      _markdownTextLayoutManagerDelegate = [[MarkdownTextLayoutManagerDelegate alloc] init];
+      _markdownTextLayoutManagerDelegate.textStorage = textStorage;
+      _markdownTextLayoutManagerDelegate.markdownUtils = _markdownUtils;
+      textLayoutManager.delegate = _markdownTextLayoutManagerDelegate;
+    }
+
     // TODO: register blockquotes layout manager
     // https://github.com/Expensify/react-native-live-markdown/issues/87
   } else if ([backedTextInputView isKindOfClass:[RCTUITextView class]]) {
@@ -229,7 +240,7 @@ - (void)prepareForRecycle
 {
   react_native_assert(!_observersAdded && "MarkdownTextInputDecoratorComponentView was being recycled with TextInput observers still attached");
   [super prepareForRecycle];
-  
+
   static const auto defaultProps = std::make_shared<const MarkdownTextInputDecoratorViewProps>();
   _props = defaultProps;
   _markdownUtils = [[RCTMarkdownUtils alloc] init];

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