[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

@@ -8,6 +8,8 @@ const NSAttributedStringKey RCTLiveMarkdownTextAttributeName = @"RCTLiveMarkdown
 
 const NSAttributedStringKey RCTLiveMarkdownBlockquoteDepthAttributeName = @"RCTLiveMarkdownBlockquoteDepth";
 
+const NSAttributedStringKey RCTLiveMarkdownMentionAttributeName = @"RCTLiveMarkdownMention";
+
 @interface MarkdownFormatter : NSObject
 
 - (void)formatAttributedString:(nonnull NSMutableAttributedString *)attributedString

apple/MarkdownFormatter.mm

@@ -91,14 +91,35 @@ - (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, *)) {
+      [attributedString addAttribute:RCTLiveMarkdownMentionAttributeName
+                               value:@{@"backgroundColor": markdownStyle.mentionHereBackgroundColor,
+                                       @"cornerRadius": @(markdownStyle.mentionHereBorderRadius)}
+                               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, *)) {
+      [attributedString addAttribute:RCTLiveMarkdownMentionAttributeName
+                               value:@{@"backgroundColor": markdownStyle.mentionUserBackgroundColor,
+                                       @"cornerRadius": @(markdownStyle.mentionUserBorderRadius)}
+                               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, *)) {
+      [attributedString addAttribute:RCTLiveMarkdownMentionAttributeName
+                               value:@{@"backgroundColor": markdownStyle.mentionReportBackgroundColor,
+                                       @"cornerRadius": @(markdownStyle.mentionReportBorderRadius)}
+                               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

@@ -4,11 +4,10 @@
 NS_ASSUME_NONNULL_BEGIN
 
 API_AVAILABLE(ios(15.0))
-@interface BlockquoteTextLayoutFragment : NSTextLayoutFragment
+@interface MarkdownTextLayoutFragment : NSTextLayoutFragment
 
 @property (nonnull, atomic) RCTMarkdownUtils *markdownUtils;
-
-@property NSUInteger depth;
+@property (nonnull, atomic) NSNumber* depth;
 
 @end
 

apple/MarkdownTextLayoutFragment.mm

@@ -0,0 +1,145 @@
+#import <RNLiveMarkdown/MarkdownTextLayoutFragment.h>
+#import <RNLiveMarkdown/MarkdownFormatter.h>
+
+@implementation MarkdownTextLayoutFragment
+
+#pragma mark - overriding class methods
+
+- (CGRect)renderingSurfaceBounds {
+  if (self.depth == nil) {
+    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 drawRibbon];
+  [self drawMentions];
+
+  [super drawAtPoint:point inContext:ctx];
+}
+
+#pragma mark - drawing custom elements
+
+- (void)drawRibbon {
+  if (self.depth == nil) {
+    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 i = 0; i < [_depth unsignedIntValue]; ++i) {
+    CGRect ribbonRect = CGRectMake(boundingRect.origin.x + i * shift, boundingRect.origin.y, borderWidth, boundingRect.size.height);
+    UIRectFill(ribbonRect);
+  }
+}
+
+- (void)drawMentions {
+  NSMutableArray<NSDictionary *> *mentions = [self getMentions];
+
+  [self.textLineFragments enumerateObjectsUsingBlock:^(NSTextLineFragment * _Nonnull lineFragment, NSUInteger idx, BOOL * _Nonnull stop) {
+    if (lineFragment.characterRange.length == 0) {
+      return;
+    }
+
+    CGRect lineBounds = lineFragment.typographicBounds;
+    for (NSDictionary *mention in mentions) {
+      NSRange mentionRange = [mention[@"range"] rangeValue];
+      UIColor *backgroundColor = mention[@"value"][@"backgroundColor"];
+      CGFloat cornerRadius = [mention[@"value"][@"cornerRadius"] floatValue];
+
+      NSRange intersection = NSIntersectionRange(lineFragment.characterRange, mentionRange);
+      if (intersection.length == 0) {
+        continue;
+      }
+
+      BOOL isStart = (intersection.location == mentionRange.location);
+      BOOL isEnd = (NSMaxRange(intersection) == NSMaxRange(mentionRange));
+
+      CGPoint startLocation = [lineFragment locationForCharacterAtIndex:intersection.location];
+      CGPoint endLocation = [lineFragment locationForCharacterAtIndex:intersection.location + intersection.length];
+
+      CGRect paddedRect = CGRectMake(startLocation.x,
+                                     lineBounds.origin.y,
+                                     endLocation.x - startLocation.x,
+                                     lineBounds.size.height);
+
+      UIRectCorner cornersToRound = 0;
+      if (isStart && isEnd) {
+        cornersToRound = UIRectCornerAllCorners;
+      } else if (isStart) {
+        cornersToRound = (UIRectCornerTopLeft | UIRectCornerBottomLeft);
+      } else if (isEnd) {
+        cornersToRound = (UIRectCornerTopRight | UIRectCornerBottomRight);
+      }
+
+      UIBezierPath *linePath;
+      linePath = [UIBezierPath bezierPathWithRoundedRect:paddedRect
+                                       byRoundingCorners:cornersToRound
+                                             cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
+
+      [backgroundColor 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 unsignedIntValue] - 1);
+  fragmentTextBounds.size.width = borderWidth + shift * ([_depth unsignedIntValue] - 1);
+
+  return fragmentTextBounds;
+}
+
+- (NSMutableArray<NSDictionary *>*)getMentions {
+  NSTextParagraph *paragraph = (NSTextParagraph *)self.textElement;
+  NSAttributedString *attributedString = [paragraph attributedString];
+
+  NSMutableArray<NSDictionary *> *mentions = [NSMutableArray array];
+  [attributedString enumerateAttribute:RCTLiveMarkdownMentionAttributeName
+                               inRange:NSMakeRange(0, attributedString.length)
+                               options:0
+                            usingBlock:^(id value, NSRange range, BOOL *stop) {
+    if (value) {
+      [mentions addObject:@{
+        @"range": [NSValue valueWithRange:range],
+        @"value": value
+      }];
+    }
+  }];
+
+  return mentions;
+}
+
+@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,14 +9,34 @@ - (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];
+    BOOL hasMention = [self hasMention:textElement];
+
+    if (depth != nil || hasMention) {
+      MarkdownTextLayoutFragment *textLayoutFragment = [[MarkdownTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
       textLayoutFragment.markdownUtils = _markdownUtils;
-      textLayoutFragment.depth = [depth unsignedIntValue];
+      textLayoutFragment.depth = depth;
       return textLayoutFragment;
     }
   }
   return [[NSTextLayoutFragment alloc] initWithTextElement:textElement range:textElement.elementRange];
 }
 
+- (BOOL)hasMention:(NSTextElement *)textElement {
+  NSTextParagraph *paragraph = (NSTextParagraph *)textElement;
+  NSAttributedString *attributedString = [paragraph attributedString];
+
+  __block BOOL hasMention = NO;
+  [attributedString enumerateAttribute:RCTLiveMarkdownMentionAttributeName
+                               inRange:NSMakeRange(0, attributedString.length)
+                               options:0
+                            usingBlock:^(id value, NSRange range, BOOL *stop) {
+    if (value) {
+      hasMention = YES;
+      *stop = YES;
+    }
+  }];
+
+  return hasMention;
+}
+
 @end

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.0,
     },
     mentionUser: {
       color: 'blue',
       backgroundColor: 'cyan',
+      borderRadius: 5.0,
     },
     mentionReport: {
       color: 'red',
       backgroundColor: 'pink',
+      borderRadius: 5.0,
     },
     inlineImage: {
       minWidth: 50,