[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}) => {

apple/MarkdownFormatter.h

@@ -6,6 +6,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 const NSAttributedStringKey RCTLiveMarkdownTextAttributeName = @"RCTLiveMarkdownText";
 
+const NSAttributedStringKey RCTLiveMarkdownTextBackgroundAttributeName = @"RCTLiveMarkdownTextBackground";
+@interface RCTMarkdownTextBackground : NSObject
+  @property (nonatomic, strong) UIColor *color;
+  @property (nonatomic, assign) CGFloat cornerRadius;
+@end
+
 const NSAttributedStringKey RCTLiveMarkdownBlockquoteDepthAttributeName = @"RCTLiveMarkdownBlockquoteDepth";
 
 @interface MarkdownFormatter : NSObject

apple/MarkdownFormatter.mm

@@ -1,6 +1,9 @@
 #import "MarkdownFormatter.h"
 #import <React/RCTFont.h>
 
+@implementation RCTMarkdownTextBackground
+@end
+
 @implementation MarkdownFormatter
 
 - (void)formatAttributedString:(nonnull NSMutableAttributedString *)attributedString
@@ -91,14 +94,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/MarkdownTextLayoutFragment.h

@@ -0,0 +1,23 @@
+#import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <RNLiveMarkdown/MarkdownFormatter.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTMarkdownTextBackgroundWithRange : NSObject
+@property (nonnull, atomic) RCTMarkdownTextBackground *textBackground;
+@property NSRange range;
+@end
+
+API_AVAILABLE(ios(15.0))
+@interface MarkdownTextLayoutFragment : NSTextLayoutFragment
+
+@property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;
+
+@property NSUInteger depth;
+
+@property NSMutableArray<RCTMarkdownTextBackgroundWithRange *> *mentions;
+
+@end
+
+NS_ASSUME_NONNULL_END

apple/MarkdownTextLayoutFragment.mm

@@ -0,0 +1,127 @@
+#import <RNLiveMarkdown/MarkdownTextLayoutFragment.h>
+
+@implementation RCTMarkdownTextBackgroundWithRange
+@end
+
+@implementation MarkdownTextLayoutFragment
+
+#pragma mark - overriding class methods
+
+- (CGRect)renderingSurfaceBounds {
+  if (self.depth == 0) {
+    return [super renderingSurfaceBounds];
+  }
+  return CGRectUnion(self.boundingRect, [super renderingSurfaceBounds]);
+}
+
+- (void)drawAtPoint:(CGPoint)point inContext:(CGContextRef)ctx {
+  if (self.textLineFragments.count == 0) {
+    [super drawAtPoint:point inContext:ctx];
+    return;
+  }
+
+  [self drawBlockquoteRibbons];
+  [self drawMentions];
+
+  [super drawAtPoint:point inContext:ctx];
+}
+
+#pragma mark - drawing custom elements
+
+- (void)drawBlockquoteRibbons {
+  if (self.depth == 0) {
+    return;
+  }
+
+  CGFloat marginLeft = _markdownUtils.markdownStyle.blockquoteMarginLeft;
+  CGFloat borderWidth = _markdownUtils.markdownStyle.blockquoteBorderWidth;
+  CGFloat paddingLeft = _markdownUtils.markdownStyle.blockquotePaddingLeft;
+  CGFloat shift = marginLeft + borderWidth + paddingLeft;
+
+  [_markdownUtils.markdownStyle.blockquoteBorderColor setFill];
+
+  CGRect boundingRect = self.boundingRect;
+  for (NSUInteger level = 0; level < _depth; ++level) {
+    CGFloat x = boundingRect.origin.x + level * shift;
+    CGRect ribbonRect = CGRectMake(x, boundingRect.origin.y, borderWidth, boundingRect.size.height);
+    UIRectFill(ribbonRect);
+  }
+}
+
+- (void)drawMentions {
+  if (self.mentions.count == 0) {
+    return;
+  }
+
+  [self.textLineFragments enumerateObjectsUsingBlock:^(NSTextLineFragment * _Nonnull lineFragment, NSUInteger idx, BOOL * _Nonnull stop) {
+    if (lineFragment.characterRange.length == 0) {
+      return;
+    }
+
+    CGRect lineBounds = lineFragment.typographicBounds;
+    for (RCTMarkdownTextBackgroundWithRange *mention in self.mentions) {
+      NSRange intersection = NSIntersectionRange(lineFragment.characterRange, mention.range);
+      if (intersection.length == 0) {
+        continue;
+      }
+
+      CGPoint startLocation = [lineFragment locationForCharacterAtIndex:intersection.location];
+      CGPoint endLocation = [lineFragment locationForCharacterAtIndex:intersection.location + intersection.length];
+      CGFloat width = endLocation.x - startLocation.x;
+
+      CGRect backgroundRect = CGRectMake(startLocation.x,
+                                         lineBounds.origin.y,
+                                         width,
+                                         lineBounds.size.height);
+
+      BOOL isStart = (intersection.location == mention.range.location);
+      BOOL isEnd = (NSMaxRange(intersection) == NSMaxRange(mention.range));
+      UIRectCorner cornersToRound = 0;
+      if (isStart) {
+        cornersToRound |= UIRectCornerTopLeft | UIRectCornerBottomLeft;
+      }
+      if (isEnd) {
+        cornersToRound |= UIRectCornerTopRight | UIRectCornerBottomRight;
+      }
+
+      UIBezierPath *linePath = (cornersToRound == 0)
+      ? [UIBezierPath bezierPathWithRect:backgroundRect]
+      : [UIBezierPath bezierPathWithRoundedRect:backgroundRect
+                              byRoundingCorners:cornersToRound
+                                    cornerRadii:CGSizeMake(mention.textBackground.cornerRadius,
+                                                           mention.textBackground.cornerRadius)];
+
+      [mention.textBackground.color setFill];
+      [linePath fill];
+    }
+  }];
+}
+
+#pragma mark - helper functions
+
+- (CGRect)boundingRect {
+  CGRect fragmentTextBounds = CGRectNull;
+  for (NSTextLineFragment *lineFragment in self.textLineFragments) {
+    if (lineFragment.characterRange.length == 0) {
+      continue;
+    }
+    CGRect lineFragmentBounds = lineFragment.typographicBounds;
+    if (CGRectIsNull(fragmentTextBounds)) {
+      fragmentTextBounds = lineFragmentBounds;
+    } else {
+      fragmentTextBounds = CGRectUnion(fragmentTextBounds, lineFragmentBounds);
+    }
+  }
+
+  CGFloat marginLeft = _markdownUtils.markdownStyle.blockquoteMarginLeft;
+  CGFloat borderWidth = _markdownUtils.markdownStyle.blockquoteBorderWidth;
+  CGFloat paddingLeft = _markdownUtils.markdownStyle.blockquotePaddingLeft;
+  CGFloat shift = marginLeft + borderWidth + paddingLeft;
+
+  fragmentTextBounds.origin.x -= (paddingLeft + borderWidth) + shift * (_depth - 1);
+  fragmentTextBounds.size.width = borderWidth + shift * (_depth - 1);
+
+  return fragmentTextBounds;
+}
+
+@end

apple/MarkdownTextLayoutManagerDelegate.mm

@@ -1,5 +1,5 @@
 #import <RNLiveMarkdown/MarkdownTextLayoutManagerDelegate.h>
-#import <RNLiveMarkdown/BlockquoteTextLayoutFragment.h>
+#import <RNLiveMarkdown/MarkdownTextLayoutFragment.h>
 #import <RNLiveMarkdown/MarkdownFormatter.h>
 
 @implementation MarkdownTextLayoutManagerDelegate
@@ -9,10 +9,27 @@ - (NSTextLayoutFragment *)textLayoutManager:(NSTextLayoutManager *)textLayoutMan
   NSInteger index = [textLayoutManager offsetFromLocation:textLayoutManager.documentRange.location toLocation:location];
   if (index < self.textStorage.length) {
     NSNumber *depth = [self.textStorage attribute:RCTLiveMarkdownBlockquoteDepthAttributeName atIndex:index effectiveRange:nil];
-    if (depth != nil) {
-      BlockquoteTextLayoutFragment *textLayoutFragment = [[BlockquoteTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
+
+    NSAttributedString *attributedString = [(NSTextParagraph *)textElement attributedString];
+    NSMutableArray<RCTMarkdownTextBackgroundWithRange *> *mentions = [NSMutableArray array];
+    [attributedString enumerateAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                                 inRange:NSMakeRange(0, attributedString.length)
+                                 options:0
+                              usingBlock:^(id value, NSRange range, BOOL *stop) {
+      if (value) {
+        RCTMarkdownTextBackgroundWithRange *textBackgroundWithRange = [[RCTMarkdownTextBackgroundWithRange alloc] init];
+        textBackgroundWithRange.textBackground = value;
+        textBackgroundWithRange.range = range;
+
+        [mentions addObject:textBackgroundWithRange];
+      }
+    }];
+
+    if (depth != nil || mentions.count > 0) {
+      MarkdownTextLayoutFragment *textLayoutFragment = [[MarkdownTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
       textLayoutFragment.markdownUtils = _markdownUtils;
-      textLayoutFragment.depth = [depth unsignedIntValue];
+      textLayoutFragment.depth = depth != nil ? [depth unsignedIntValue] : 0;
+      textLayoutFragment.mentions = mentions;
       return textLayoutFragment;
     }
   }

apple/RCTMarkdownStyle.h

@@ -25,10 +25,13 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic) UIColor *preBackgroundColor;
 @property (nonatomic) UIColor *mentionHereColor;
 @property (nonatomic) UIColor *mentionHereBackgroundColor;
+@property (nonatomic) CGFloat mentionHereBorderRadius;
 @property (nonatomic) UIColor *mentionUserColor;
 @property (nonatomic) UIColor *mentionUserBackgroundColor;
+@property (nonatomic) CGFloat mentionUserBorderRadius;
 @property (nonatomic) UIColor *mentionReportColor;
 @property (nonatomic) UIColor *mentionReportBackgroundColor;
+@property (nonatomic) CGFloat mentionReportBorderRadius;
 
 - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecoratorViewMarkdownStyleStruct &)style;
 

apple/RCTMarkdownStyle.mm

@@ -33,12 +33,15 @@ - (instancetype)initWithStruct:(const facebook::react::MarkdownTextInputDecorato
 
     _mentionHereColor = RCTUIColorFromSharedColor(style.mentionHere.color);
     _mentionHereBackgroundColor = RCTUIColorFromSharedColor(style.mentionHere.backgroundColor);
+    _mentionHereBorderRadius = style.mentionHere.borderRadius;
 
     _mentionUserColor = RCTUIColorFromSharedColor(style.mentionUser.color);
     _mentionUserBackgroundColor = RCTUIColorFromSharedColor(style.mentionUser.backgroundColor);
+    _mentionUserBorderRadius = style.mentionUser.borderRadius;
 
     _mentionReportColor = RCTUIColorFromSharedColor(style.mentionReport.color);
     _mentionReportBackgroundColor = RCTUIColorFromSharedColor(style.mentionReport.backgroundColor);
+    _mentionReportBorderRadius = style.mentionReport.borderRadius;
   }
 
   return self;

src/styleUtils.ts

@@ -62,14 +62,17 @@ function makeDefaultMarkdownStyle(): MarkdownStyle {
     mentionHere: {
       color: 'green',
       backgroundColor: 'lime',
+      borderRadius: 5,
     },
     mentionUser: {
       color: 'blue',
       backgroundColor: 'cyan',
+      borderRadius: 5,
     },
     mentionReport: {
       color: 'red',
       backgroundColor: 'pink',
+      borderRadius: 5,
     },
     inlineImage: {
       minWidth: 50,