@expensify/react-native-live-markdown 0.1.316 → 0.1.318

package/android/src/main/cpp/CMakeLists.txt

@@ -3,6 +3,7 @@ project("livemarkdown")
 cmake_minimum_required(VERSION 3.13)
 
 set(CMAKE_VERBOSE_MAKEFILE on)
+set(CMAKE_CXX_STANDARD 20)
 
 include("${REACT_NATIVE_ROOT_DIR}/ReactAndroid/cmake-utils/folly-flags.cmake")
 add_compile_options(${folly_FLAGS})

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

@@ -75,16 +75,16 @@ public class MarkdownFormatter {
         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);

package/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 class MarkdownStyle {
     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 class MarkdownStyle {
     return mMentionHereBackgroundColor;
   }
 
+  public float getMentionHereBorderRadius() {
+    return mMentionHereBorderRadius;
+  }
+
   @ColorInt
   public int getMentionUserColor() {
     return mMentionUserColor;
@@ -223,6 +238,10 @@ public class MarkdownStyle {
     return mMentionUserBackgroundColor;
   }
 
+  public float getMentionUserBorderRadius() {
+    return mMentionUserBorderRadius;
+  }
+
   @ColorInt
   public int getMentionReportColor() {
     return mMentionReportColor;
@@ -232,4 +251,8 @@ public class MarkdownStyle {
   public int getMentionReportBackgroundColor() {
     return mMentionReportBackgroundColor;
   }
+
+  public float getMentionReportBorderRadius() {
+    return mMentionReportBorderRadius;
+  }
 }

package/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
+  ) {
+    CharSequence lineText = text.subSequence(start, end);
+    if (layout == null || layout.getText() != lineText || layout.getWidth() != right || layout.getLineEnd(0) != lineText.length()) {
+      int currentLineStart = 0;
+      int currentLineEnd = lineText.length();
+      // Create layout for the current line only
+      layout = StaticLayout.Builder.obtain(lineText, currentLineStart, currentLineEnd, (TextPaint) paint, right).build();
+
+      int relativeMentionStart = mentionStart - start;
+      int relativeMentionEnd = mentionEnd - start;
+
+      boolean mentionStartsInCurrentLine = currentLineStart <= relativeMentionStart;
+      boolean mentionEndsInCurrentLine = currentLineEnd >= relativeMentionEnd;
+
+      float startX = layout.getPrimaryHorizontal(mentionStartsInCurrentLine ? relativeMentionStart: currentLineStart);
+      float endX = layout.getPrimaryHorizontal(mentionEndsInCurrentLine ? relativeMentionEnd : currentLineEnd);
+
+      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(mentionStartsInCurrentLine, mentionEndsInCurrentLine), 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;
+  }
+}

package/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

package/apple/MarkdownFormatter.mm

@@ -1,5 +1,6 @@
 #import "MarkdownFormatter.h"
 #import <React/RCTFont.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundWithRange.h>
 
 @implementation MarkdownFormatter
 
@@ -90,15 +91,24 @@
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.codeColor range:range];
     [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];
+    [self applyMentionFormatting:attributedString
+                           range:range
+                 mentionColor:markdownStyle.mentionHereColor
+                 backgroundColor:markdownStyle.mentionHereBackgroundColor
+                    borderRadius:markdownStyle.mentionHereBorderRadius];
   } 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];
+    [self applyMentionFormatting:attributedString
+                           range:range
+                 mentionColor:markdownStyle.mentionUserColor
+                 backgroundColor:markdownStyle.mentionUserBackgroundColor
+                    borderRadius:markdownStyle.mentionUserBorderRadius];
   } else if (type == "mention-report") {
-    [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.mentionReportColor range:range];
-    [attributedString addAttribute:NSBackgroundColorAttributeName value:markdownStyle.mentionReportBackgroundColor range:range];
+    [self applyMentionFormatting:attributedString
+                           range:range
+                 mentionColor:markdownStyle.mentionReportColor
+                 backgroundColor:markdownStyle.mentionReportBackgroundColor
+                    borderRadius:markdownStyle.mentionReportBorderRadius];
   } else if (type == "link") {
     [attributedString addAttribute:NSUnderlineStyleAttributeName value:[NSNumber numberWithInteger:NSUnderlineStyleSingle] range:range];
     [attributedString addAttribute:NSForegroundColorAttributeName value:markdownStyle.linkColor range:range];
@@ -118,6 +128,26 @@
   }
 }
 
+- (void)applyMentionFormatting:(NSMutableAttributedString *)attributedString
+                         range:(const NSRange)range
+               mentionColor:(UIColor *)mentionColor
+               backgroundColor:(UIColor *)backgroundColor
+                  borderRadius:(CGFloat)borderRadius
+{
+  [attributedString addAttribute:NSForegroundColorAttributeName value:mentionColor range:range];
+  if (@available(iOS 16.0, *)) {
+    RCTMarkdownTextBackground *textBackground = [[RCTMarkdownTextBackground alloc] init];
+    textBackground.color = backgroundColor;
+    textBackground.borderRadius = borderRadius;
+    
+    [attributedString addAttribute:RCTLiveMarkdownTextBackgroundAttributeName
+                             value:textBackground
+                             range:range];
+  } else {
+    [attributedString addAttribute:NSBackgroundColorAttributeName value:backgroundColor range:range];
+  }
+}
+
 static void RCTApplyBaselineOffset(NSMutableAttributedString *attributedText, NSRange attributedTextRange)
 {
   __block CGFloat maximumLineHeight = 0;

package/apple/MarkdownTextInputDecoratorComponentView.mm

@@ -77,7 +77,7 @@ using namespace facebook::react;
   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,21 @@ using namespace facebook::react;
     // format initial value
     [_markdownTextFieldObserver textFieldDidChange:_textField];
 
+    if (@available(iOS 16.0, *)) {
+      auto key = [](std::string s) {
+        std::reverse(s.begin(), s.end());
+        return @(s.c_str());
+      };
+      
+      NSTextContainer *textContainer = [_textField valueForKey:key("reniatnoCtxet_")];
+      NSTextLayoutManager *textLayoutManager = [textContainer valueForKey:key("reganaMtuoyaLtxet_")];
+      
+      _markdownTextLayoutManagerDelegate = [[MarkdownTextLayoutManagerDelegate alloc] init];
+      _markdownTextLayoutManagerDelegate.textStorage = [_textField valueForKey:key("egarotStxet_")];
+      _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 +244,7 @@ using namespace facebook::react;
 {
   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];

package/apple/{BlockquoteTextLayoutFragment.h → MarkdownTextLayoutFragment.h}

@@ -1,15 +1,18 @@
 #import <RNLiveMarkdown/RCTMarkdownUtils.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundWithRange.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

package/apple/MarkdownTextLayoutFragment.mm

@@ -0,0 +1,160 @@
+#import <RNLiveMarkdown/MarkdownTextLayoutFragment.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundWithRange.h>
+
+@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;
+  }
+
+  bool isSingleline = [self.textLineFragments count] == 1;
+  __block NSUInteger mentionIndex = 0;
+  [self.textLineFragments enumerateObjectsUsingBlock:^(NSTextLineFragment * _Nonnull lineFragment, NSUInteger idx, BOOL * _Nonnull stop) {
+    if (lineFragment.characterRange.length == 0) {
+      return;
+    }
+
+    CGRect lineBounds = lineFragment.typographicBounds;
+    NSRange lineRange = lineFragment.characterRange;
+    CGPoint lineEndLocation = [lineFragment locationForCharacterAtIndex: lineFragment.characterRange.length];
+    
+    while (mentionIndex < self.mentions.count &&
+           NSMaxRange(self.mentions[mentionIndex].range) <= lineRange.location) {
+        mentionIndex++;
+    }
+    
+    for (NSUInteger i = mentionIndex; i < self.mentions.count; i++) {
+      RCTMarkdownTextBackgroundWithRange *mention = self.mentions[i];
+      NSRange mentionRange = mention.range;
+      
+      if (mentionRange.location >= NSMaxRange(lineRange)) {
+          break;
+      }
+      
+      NSRange intersection = NSIntersectionRange(lineRange, mentionRange);
+      CGPoint startLocation = [lineFragment locationForCharacterAtIndex:intersection.location];
+      if (isSingleline && startLocation.x == 0 && intersection.location > 0) {
+        // singleline: mention starts off screen, no need to draw background
+        // it only happens when the text input isn't focused
+        continue;
+      }
+
+      CGPoint endLocation = [lineFragment locationForCharacterAtIndex:intersection.location + intersection.length];
+      if (isSingleline && (startLocation.x > endLocation.x || (startLocation.x == endLocation.x && intersection.location == 0))) {
+        // singleline: mention is partially visible
+        // 1. starts in the middle, or
+        // 2. starts at the beginning of the line
+        endLocation = lineEndLocation;
+      }
+
+      CGFloat width = endLocation.x - startLocation.x;
+      CGFloat x = lineBounds.origin.x + startLocation.x;
+
+      UIFont *font = [lineFragment.attributedString attribute:NSFontAttributeName
+                                                      atIndex:intersection.location
+                                               effectiveRange:NULL];
+      CGFloat ascent = font.ascender;
+      CGFloat textHeight = font.lineHeight;
+      CGFloat y = lineBounds.origin.y + startLocation.y - ascent;
+
+
+      CGRect backgroundRect = CGRectMake(x,
+                                         y,
+                                         width,
+                                         textHeight);
+
+      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.borderRadius,
+                                                           mention.textBackground.borderRadius)];
+
+      [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

package/apple/MarkdownTextLayoutManagerDelegate.mm

@@ -1,6 +1,7 @@
 #import <RNLiveMarkdown/MarkdownTextLayoutManagerDelegate.h>
-#import <RNLiveMarkdown/BlockquoteTextLayoutFragment.h>
+#import <RNLiveMarkdown/MarkdownTextLayoutFragment.h>
 #import <RNLiveMarkdown/MarkdownFormatter.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundWithRange.h>
 
 @implementation MarkdownTextLayoutManagerDelegate
 
@@ -9,10 +10,27 @@ API_AVAILABLE(ios(15.0)){
   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;
     }
   }

package/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;
 

package/apple/RCTMarkdownStyle.mm

@@ -33,12 +33,15 @@
 
     _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;

package/apple/RCTMarkdownTextBackground.h

@@ -0,0 +1,9 @@
+#import <Foundation/Foundation.h>
+
+@interface RCTMarkdownTextBackground : NSObject
+
+@property (nonatomic, strong) UIColor *color;
+
+@property (nonatomic, assign) CGFloat borderRadius;
+
+@end

package/apple/RCTMarkdownTextBackground.mm

@@ -0,0 +1,4 @@
+#import <RNLiveMarkdown/RCTMarkdownTextBackground.h>
+
+@implementation RCTMarkdownTextBackground
+@end

package/apple/RCTMarkdownTextBackgroundWithRange.h

@@ -0,0 +1,10 @@
+#import <Foundation/Foundation.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackground.h>
+
+@interface RCTMarkdownTextBackgroundWithRange : NSObject
+
+@property (nonnull, atomic) RCTMarkdownTextBackground *textBackground;
+
+@property NSRange range;
+
+@end

package/apple/RCTMarkdownTextBackgroundWithRange.mm

@@ -0,0 +1,5 @@
+#import <RNLiveMarkdown/RCTMarkdownTextBackground.h>
+#import <RNLiveMarkdown/RCTMarkdownTextBackgroundWithRange.h>
+
+@implementation RCTMarkdownTextBackgroundWithRange
+@end

package/lib/commonjs/styleUtils.js

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

package/lib/commonjs/styleUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","FONT_FAMILY_MONOSPACE","Platform","select","ios","default","FONT_FAMILY_EMOJI","android","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","fontFamily","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","backgroundColor","borderRadius","borderStyle","padding","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","FONT_FAMILY_MONOSPACE","Platform","select","ios","default","FONT_FAMILY_EMOJI","android","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","fontFamily","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","backgroundColor","borderRadius","borderStyle","padding","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/styleUtils.js

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

package/lib/module/styleUtils.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","FONT_FAMILY_MONOSPACE","select","ios","default","FONT_FAMILY_EMOJI","android","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","fontFamily","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","backgroundColor","borderRadius","borderStyle","padding","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Platform","FONT_FAMILY_MONOSPACE","select","ios","default","FONT_FAMILY_EMOJI","android","makeDefaultMarkdownStyle","syntax","color","link","h1","fontSize","emoji","fontFamily","blockquote","borderColor","borderWidth","marginLeft","paddingLeft","code","backgroundColor","borderRadius","borderStyle","padding","pre","mentionHere","mentionUser","mentionReport","inlineImage","minWidth","minHeight","maxWidth","maxHeight","marginTop","marginBottom","loadingIndicator","primaryColor","secondaryColor","mergeMarkdownStyleWithDefault","input","output","undefined","Object","keys","forEach","key","outputValue","assign","parseStringWithUnitToNumber","value","parseInt","replace"],"sourceRoot":"../../src","sources":["styleUtils.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/styleUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../src/styleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iDAAiD,CAAC;AAEnF,KAAK,oBAAoB,GAAG,OAAO,CAAC;KACjC,CAAC,IAAI,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CACtD,CAAC,CAAC;AAoFH,iBAAS,6BAA6B,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,GAAG,aAAa,CAiB7F;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAK1E;AAED,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAEnC,OAAO,EAAC,6BAA6B,EAAE,2BAA2B,EAAC,CAAC"}
+{"version":3,"file":"styleUtils.d.ts","sourceRoot":"","sources":["../../../src/styleUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iDAAiD,CAAC;AAEnF,KAAK,oBAAoB,GAAG,OAAO,CAAC;KACjC,CAAC,IAAI,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CACtD,CAAC,CAAC;AAuFH,iBAAS,6BAA6B,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,GAAG,aAAa,CAiB7F;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAK1E;AAED,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAEnC,OAAO,EAAC,6BAA6B,EAAE,2BAA2B,EAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expensify/react-native-live-markdown",
-  "version": "0.1.316",
+  "version": "0.1.318",
   "description": "Drop-in replacement for React Native's TextInput component with Markdown formatting.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/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,

package/apple/BlockquoteTextLayoutFragment.mm

@@ -1,51 +0,0 @@
-#import <RNLiveMarkdown/BlockquoteTextLayoutFragment.h>
-
-@implementation BlockquoteTextLayoutFragment
-
-- (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;
-}
-
-- (void)drawAtPoint:(CGPoint)point inContext:(CGContextRef)ctx {
-  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; ++i) {
-    CGRect ribbonRect = CGRectMake(boundingRect.origin.x + i * shift, boundingRect.origin.y, borderWidth, boundingRect.size.height);
-    UIRectFill(ribbonRect);
-  }
-
-  [super drawAtPoint:point inContext:ctx];
-}
-
-- (CGRect)renderingSurfaceBounds {
-  return CGRectUnion(self.boundingRect, [super renderingSurfaceBounds]);
-}
-
-@end