@expensify/react-native-live-markdown 0.1.315 → 0.1.317

package/README.md

@@ -15,12 +15,12 @@
 First, install the library from npm with the package manager of your choice:
 
 ```sh
-yarn add @expensify/react-native-live-markdown react-native-reanimated expensify-common html-entities@2.5.3
-npm install @expensify/react-native-live-markdown react-native-reanimated expensify-common html-entities@2.5.3 --save
-npx expo install @expensify/react-native-live-markdown react-native-reanimated expensify-common html-entities@2.5.3
+yarn add @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3
+npm install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3 --save
+npx expo install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3
 ```
 
-React Native Live Markdown requires [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) 3.17.0 or newer as well as [expensify-common](https://github.com/Expensify/expensify-common) 2.0.115 and [html-entities](https://github.com/mdevils/html-entities) 2.5.3 exactly if using the default built-in ExpensiMark parser.
+React Native Live Markdown requires [react-native-worklets](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets) 0.6.0 or newer as well as [expensify-common](https://github.com/Expensify/expensify-common) 2.0.115 and [html-entities](https://github.com/mdevils/html-entities) 2.5.3 exactly if using the default built-in ExpensiMark parser.
 
 Then, install the iOS dependencies with CocoaPods:
 
@@ -148,7 +148,7 @@ Currently, only the following types are supported:
 type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
 ```
 
-Parser needs to be marked as a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/guides/worklets/) because it's executed on the UI thread as the user types.
+Parser needs to be marked as a [worklet](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#worklet) because it's executed on the UI thread as the user types.
 
 Here's a sample function that parses all substrings located between two asterisks as bold text:
 

package/RNLiveMarkdown.podspec

@@ -5,14 +5,9 @@ react_native_json = JSON.parse(File.read(File.join(react_native_node_modules_dir
 react_native_minor_version = react_native_json['version'].split('.')[1].to_i
 
 pods_root = Pod::Config.instance.project_pods_root
-
-react_native_worklets_path = `cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native-worklets/package.json')"`
-worklets_installed = react_native_worklets_path != ""
-worklets_package_name = worklets_installed ? 'react-native-worklets' : 'react-native-reanimated'
-
-react_native_worklets_or_reanimated_node_modules_dir = ENV['REACT_NATIVE_WORKLETS_NODE_MODULES_DIR'] || ENV['REACT_NATIVE_REANIMATED_NODE_MODULES_DIR'] ||
- File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('#{worklets_package_name}/package.json')"`)
-react_native_worklets_or_reanimated_node_modules_dir_from_pods_root = Pathname.new(react_native_worklets_or_reanimated_node_modules_dir).relative_path_from(pods_root).to_s
+react_native_worklets_node_modules_dir = ENV['REACT_NATIVE_WORKLETS_NODE_MODULES_DIR'] ||
+ File.dirname(`cd "#{Pod::Config.instance.installation_root.to_s}" && node --print "require.resolve('react-native-worklets/package.json')"`)
+react_native_worklets_node_modules_dir_from_pods_root = Pathname.new(react_native_worklets_node_modules_dir).relative_path_from(pods_root).to_s
 
 react_native_react_common_dir = File.join(react_native_node_modules_dir, 'react-native/ReactCommon')
 react_native_react_common_dir_from_pods_root = Pathname.new(react_native_react_common_dir).relative_path_from(pods_root).to_s
@@ -33,24 +28,16 @@ Pod::Spec.new do |s|
 
   s.source_files = "apple/**/*.{h,m,mm}", "cpp/**/*.{h,cpp}"
 
-  if worklets_installed
-    s.dependency "RNWorklets"
-  else
-    s.dependency "RNReanimated/worklets"
-  end
+  s.dependency "RNWorklets"
 
-  xcconfig = {
+  s.xcconfig = {
     "OTHER_CFLAGS" => "$(inherited) -DREACT_NATIVE_MINOR_VERSION=#{react_native_minor_version}",
     "HEADER_SEARCH_PATHS" => [
-      "\"$(PODS_ROOT)/#{react_native_worklets_or_reanimated_node_modules_dir_from_pods_root}/apple\"",
-      "\"$(PODS_ROOT)/#{react_native_worklets_or_reanimated_node_modules_dir_from_pods_root}/Common/cpp\"",
+      "\"$(PODS_ROOT)/#{react_native_worklets_node_modules_dir_from_pods_root}/apple\"",
+      "\"$(PODS_ROOT)/#{react_native_worklets_node_modules_dir_from_pods_root}/Common/cpp\"",
       "\"$(PODS_ROOT)/#{react_native_react_common_dir_from_pods_root}\"",
     ].join(' '),
   }
-  if worklets_installed
-    xcconfig["OTHER_CFLAGS"] << " -DWORKLETS_INSTALLED=1"
-  end
-  s.xcconfig = xcconfig
 
   s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/cpp\"" }
 

package/android/build.gradle

@@ -67,7 +67,6 @@ def getReactNativeMinorVersion() {
 }
 
 def REACT_NATIVE_MINOR_VERSION = getReactNativeMinorVersion()
-def workletsInstalled = rootProject.findProject(':react-native-worklets') != null
 
 android {
   if (supportsNamespace()) {
@@ -96,8 +95,7 @@ android {
           "-DANDROID_TOOLCHAIN=clang",
           "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
           "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON",
-          "-DREACT_NATIVE_ROOT_DIR=${resolveReactNativeDirectory().path}",
-          "-DWORKLETS_INSTALLED=${workletsInstalled}"
+          "-DREACT_NATIVE_ROOT_DIR=${resolveReactNativeDirectory().path}"
         abiFilters (*reactNativeArchitectures())
       }
     }
@@ -180,12 +178,7 @@ repositories {
 dependencies {
   implementation "com.facebook.react:react-android" // version substituted by RNGP
   implementation "com.facebook.react:hermes-android" // version substituted by RNGP
-
-  if (workletsInstalled) {
-    implementation project(":react-native-worklets")
-  } else {
-    implementation project(":react-native-reanimated")
-  }
+  implementation project(":react-native-worklets")
 }
 
 // This fixes linking errors due to undefined symbols from libworklets.so.
@@ -193,11 +186,6 @@ dependencies {
 // like a header-only library. During build, config files are not regenerated
 // because the cache key does not change and AGP thinks that they are up-to-date.
 afterEvaluate {
-  if (workletsInstalled) {
-    prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabDebugPackage")
-    prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabReleasePackage")
-  } else {
-    prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabDebugPackage")
-    prepareKotlinBuildScriptModel.dependsOn(":react-native-reanimated:prefabReleasePackage")
-  }
+  prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabDebugPackage")
+  prepareKotlinBuildScriptModel.dependsOn(":react-native-worklets:prefabReleasePackage")
 }

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

@@ -4,10 +4,8 @@ cmake_minimum_required(VERSION 3.13)
 
 set(CMAKE_VERBOSE_MAKEFILE on)
 
-if(WORKLETS_INSTALLED)
-  include("${REACT_NATIVE_ROOT_DIR}/ReactAndroid/cmake-utils/folly-flags.cmake")
-  add_compile_options(${folly_FLAGS})
-endif()
+include("${REACT_NATIVE_ROOT_DIR}/ReactAndroid/cmake-utils/folly-flags.cmake")
+add_compile_options(${folly_FLAGS})
 
 add_compile_options(-fvisibility=hidden -fexceptions -frtti)
 
@@ -20,32 +18,16 @@ file(GLOB CPP_SRC CONFIGURE_DEPENDS "${CPP_DIR}/*.cpp")
 
 add_library(${CMAKE_PROJECT_NAME} SHARED ${ANDROID_SRC} ${CPP_SRC})
 
-if(WORKLETS_INSTALLED)
-  target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR} "${REACT_NATIVE_ROOT_DIR}/ReactCommon/jsiexecutor")
-else()
-  target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR})
-endif()
+target_include_directories(${CMAKE_PROJECT_NAME} PRIVATE ${CMAKE_CURRENT_SOURCE_DIR} ${CPP_DIR} "${REACT_NATIVE_ROOT_DIR}/ReactCommon/jsiexecutor")
 
 find_package(fbjni REQUIRED CONFIG)
 find_package(ReactAndroid REQUIRED CONFIG)
-
-if(WORKLETS_INSTALLED)
-  find_package(react-native-worklets REQUIRED CONFIG)
-  add_definitions(-DWORKLETS_INSTALLED)
-else()
-  find_package(react-native-reanimated REQUIRED CONFIG)
-endif()
-
+find_package(react-native-worklets REQUIRED CONFIG)
 
 target_link_libraries(
         ${CMAKE_PROJECT_NAME}
         fbjni::fbjni
         ReactAndroid::jsi
         ReactAndroid::reactnative
+        react-native-worklets::worklets
 )
-
-if(WORKLETS_INSTALLED)
-  target_link_libraries(${CMAKE_PROJECT_NAME} react-native-worklets::worklets)
-else()
-  target_link_libraries(${CMAKE_PROJECT_NAME} react-native-reanimated::worklets)
-endif()

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/MarkdownParser.mm

@@ -19,11 +19,7 @@
     const auto &markdownRuntime = expensify::livemarkdown::getMarkdownRuntime();
     jsi::Runtime &rt = markdownRuntime->getJSIRuntime();
 
-#ifdef WORKLETS_INSTALLED
     std::shared_ptr<SerializableWorklet> markdownWorklet;
-#else
-    std::shared_ptr<ShareableWorklet> markdownWorklet;
-#endif
     try {
       markdownWorklet = expensify::livemarkdown::getMarkdownWorklet([parserId intValue]);
     } catch (const std::out_of_range &error) {

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