react-native-enriched-markdown 0.5.0 → 0.6.0-nightly-20260424-4080a3393

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownManagerDelegate.java

@@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.BaseViewManager;
@@ -37,6 +38,12 @@ public class EnrichedMarkdownManagerDelegate<T extends View, U extends BaseViewM
       case "selectable":
         mViewManager.setSelectable(view, value == null ? false : (boolean) value);
         break;
+      case "selectionColor":
+        mViewManager.setSelectionColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
+      case "selectionHandleColor":
+        mViewManager.setSelectionHandleColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
       case "md4cFlags":
         mViewManager.setMd4cFlags(view, (ReadableMap) value);
         break;

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownManagerInterface.java

@@ -20,6 +20,8 @@ public interface EnrichedMarkdownManagerInterface<T extends View> extends ViewMa
   void setMarkdownStyle(T view, @Nullable ReadableMap value);
   void setEnableLinkPreview(T view, boolean value);
   void setSelectable(T view, boolean value);
+  void setSelectionColor(T view, @Nullable Integer value);
+  void setSelectionHandleColor(T view, @Nullable Integer value);
   void setMd4cFlags(T view, @Nullable ReadableMap value);
   void setAllowFontScaling(T view, boolean value);
   void setMaxFontSizeMultiplier(T view, float value);

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownTextManagerDelegate.java

@@ -11,6 +11,7 @@ package com.facebook.react.viewmanagers;
 
 import android.view.View;
 import androidx.annotation.Nullable;
+import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.BaseViewManager;
@@ -37,6 +38,12 @@ public class EnrichedMarkdownTextManagerDelegate<T extends View, U extends BaseV
       case "selectable":
         mViewManager.setSelectable(view, value == null ? false : (boolean) value);
         break;
+      case "selectionColor":
+        mViewManager.setSelectionColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
+      case "selectionHandleColor":
+        mViewManager.setSelectionHandleColor(view, ColorPropConverter.getColor(value, view.getContext()));
+        break;
       case "md4cFlags":
         mViewManager.setMd4cFlags(view, (ReadableMap) value);
         break;

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedMarkdownTextManagerInterface.java

@@ -20,6 +20,8 @@ public interface EnrichedMarkdownTextManagerInterface<T extends View> extends Vi
   void setMarkdownStyle(T view, @Nullable ReadableMap value);
   void setEnableLinkPreview(T view, boolean value);
   void setSelectable(T view, boolean value);
+  void setSelectionColor(T view, @Nullable Integer value);
+  void setSelectionHandleColor(T view, @Nullable Integer value);
   void setMd4cFlags(T view, @Nullable ReadableMap value);
   void setAllowFontScaling(T view, boolean value);
   void setMaxFontSizeMultiplier(T view, float value);

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/Props.cpp

@@ -23,6 +23,8 @@ EnrichedMarkdownProps::EnrichedMarkdownProps(
     markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
     enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
     selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
+    selectionHandleColor(convertRawProp(context, rawProps, "selectionHandleColor", sourceProps.selectionHandleColor, {})),
     md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
     allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
     maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
@@ -63,6 +65,14 @@ folly::dynamic EnrichedMarkdownProps::getDiffProps(
     result["selectable"] = selectable;
   }
     
+  if (selectionColor != oldProps->selectionColor) {
+    result["selectionColor"] = *selectionColor;
+  }
+    
+  if (selectionHandleColor != oldProps->selectionHandleColor) {
+    result["selectionHandleColor"] = *selectionHandleColor;
+  }
+    
   if (md4cFlags != oldProps->md4cFlags) {
     result["md4cFlags"] = toDynamic(md4cFlags);
   }
@@ -221,6 +231,8 @@ EnrichedMarkdownTextProps::EnrichedMarkdownTextProps(
     markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
     enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
     selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
+    selectionHandleColor(convertRawProp(context, rawProps, "selectionHandleColor", sourceProps.selectionHandleColor, {})),
     md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
     allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
     maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
@@ -261,6 +273,14 @@ folly::dynamic EnrichedMarkdownTextProps::getDiffProps(
     result["selectable"] = selectable;
   }
     
+  if (selectionColor != oldProps->selectionColor) {
+    result["selectionColor"] = *selectionColor;
+  }
+    
+  if (selectionHandleColor != oldProps->selectionHandleColor) {
+    result["selectionHandleColor"] = *selectionHandleColor;
+  }
+    
   if (md4cFlags != oldProps->md4cFlags) {
     result["md4cFlags"] = toDynamic(md4cFlags);
   }

package/android/generated/jni/react/renderer/components/EnrichedMarkdownTextSpec/Props.h

@@ -1954,6 +1954,8 @@ class EnrichedMarkdownProps final : public ViewProps {
   EnrichedMarkdownMarkdownStyleStruct markdownStyle{};
   bool enableLinkPreview{true};
   bool selectable{false};
+  SharedColor selectionColor{};
+  SharedColor selectionHandleColor{};
   EnrichedMarkdownMd4cFlagsStruct md4cFlags{};
   bool allowFontScaling{true};
   Float maxFontSizeMultiplier{0.0};
@@ -4250,6 +4252,8 @@ class EnrichedMarkdownTextProps final : public ViewProps {
   EnrichedMarkdownTextMarkdownStyleStruct markdownStyle{};
   bool enableLinkPreview{true};
   bool selectable{false};
+  SharedColor selectionColor{};
+  SharedColor selectionHandleColor{};
   EnrichedMarkdownTextMd4cFlagsStruct md4cFlags{};
   bool allowFontScaling{true};
   Float maxFontSizeMultiplier{0.0};

package/android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdown.kt

@@ -18,6 +18,7 @@ import com.swmansion.enriched.markdown.utils.common.FeatureFlags
 import com.swmansion.enriched.markdown.utils.common.MarkdownSegmentRenderer
 import com.swmansion.enriched.markdown.utils.common.RenderedSegment
 import com.swmansion.enriched.markdown.utils.common.splitASTIntoSegments
+import com.swmansion.enriched.markdown.utils.text.view.applySelectionColors
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkLongPressEvent
 import com.swmansion.enriched.markdown.utils.text.view.emitLinkPressEvent
 import com.swmansion.enriched.markdown.views.BlockSegmentView
@@ -54,6 +55,8 @@ class EnrichedMarkdown
     private var maxFontSizeMultiplier: Float = 0f
     private var allowTrailingMargin: Boolean = false
     private var selectable: Boolean = true
+    private var selectionColor: Int? = null
+    private var selectionHandleColor: Int? = null
 
     private var onLinkPressCallback: ((String) -> Unit)? = null
     private var onLinkLongPressCallback: ((String) -> Unit)? = null
@@ -128,6 +131,22 @@ class EnrichedMarkdown
       }
     }
 
+    fun setSelectionColor(color: Int?) {
+      selectionColor = color
+      applySelectionColorsToSegments()
+    }
+
+    fun setSelectionHandleColor(color: Int?) {
+      selectionHandleColor = color
+      applySelectionColorsToSegments()
+    }
+
+    private fun applySelectionColorsToSegments() {
+      segmentViews.filterIsInstance<EnrichedMarkdownInternalText>().forEach {
+        it.applySelectionColors(selectionColor, selectionHandleColor)
+      }
+    }
+
     fun setOnLinkPressCallback(callback: (String) -> Unit) {
       onLinkPressCallback = callback
     }
@@ -234,6 +253,8 @@ class EnrichedMarkdown
         if (contextMenuItemTexts.isNotEmpty()) {
           setContextMenuItems(contextMenuItemTexts, ::forwardContextMenuItemPress)
         }
+
+        applySelectionColors(selectionColor, selectionHandleColor)
       }
 
     private fun createTableView(

package/android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownManager.kt

@@ -80,6 +80,20 @@ class EnrichedMarkdownManager :
     view?.setIsSelectable(selectable)
   }
 
+  override fun setSelectionColor(
+    view: EnrichedMarkdown?,
+    value: Int?,
+  ) {
+    view?.setSelectionColor(value)
+  }
+
+  override fun setSelectionHandleColor(
+    view: EnrichedMarkdown?,
+    value: Int?,
+  ) {
+    view?.setSelectionHandleColor(value)
+  }
+
   @ReactProp(name = "md4cFlags")
   override fun setMd4cFlags(
     view: EnrichedMarkdown?,

package/android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownText.kt

@@ -23,6 +23,7 @@ import com.swmansion.enriched.markdown.utils.text.TailFadeInAnimator
 import com.swmansion.enriched.markdown.utils.text.interaction.CheckboxTouchHelper
 import com.swmansion.enriched.markdown.utils.text.view.LinkLongPressMovementMethod
 import com.swmansion.enriched.markdown.utils.text.view.applySelectableState
+import com.swmansion.enriched.markdown.utils.text.view.applySelectionColors
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForCheckboxTap
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForLinkTap
 import com.swmansion.enriched.markdown.utils.text.view.createSelectionActionModeCallback
@@ -81,6 +82,9 @@ class EnrichedMarkdownText
       private set
     var spoilerOverlay: SpoilerOverlay = SpoilerOverlay.PARTICLES
 
+    private var selectionColor: Int? = null
+    private var selectionHandleColor: Int? = null
+
     init {
       setupAsMarkdownTextView()
       customSelectionActionModeCallback =
@@ -248,6 +252,8 @@ class EnrichedMarkdownText
         fadeAnimator?.animate(tailStart, styledText.length)
         previousTextLength = styledText.length
       }
+
+      applySelectionColors(selectionColor, selectionHandleColor)
     }
 
     fun setContextMenuItems(items: List<String>) {
@@ -258,6 +264,16 @@ class EnrichedMarkdownText
       applySelectableState(selectable)
     }
 
+    fun setSelectionColor(color: Int?) {
+      selectionColor = color
+      applySelectionColors(selectionColor, selectionHandleColor)
+    }
+
+    fun setSelectionHandleColor(color: Int?) {
+      selectionHandleColor = color
+      applySelectionColors(selectionColor, selectionHandleColor)
+    }
+
     fun emitOnLinkPress(url: String) {
       emitLinkPressEvent(url)
     }

package/android/src/main/java/com/swmansion/enriched/markdown/EnrichedMarkdownTextManager.kt

@@ -100,6 +100,20 @@ class EnrichedMarkdownTextManager :
     view?.setIsSelectable(selectable)
   }
 
+  override fun setSelectionColor(
+    view: EnrichedMarkdownText?,
+    value: Int?,
+  ) {
+    view?.setSelectionColor(value)
+  }
+
+  override fun setSelectionHandleColor(
+    view: EnrichedMarkdownText?,
+    value: Int?,
+  ) {
+    view?.setSelectionHandleColor(value)
+  }
+
   @ReactProp(name = "md4cFlags")
   override fun setMd4cFlags(
     view: EnrichedMarkdownText?,

package/android/src/main/java/com/swmansion/enriched/markdown/renderer/BlockquoteRenderer.kt

@@ -3,6 +3,7 @@ package com.swmansion.enriched.markdown.renderer
 import android.text.SpannableStringBuilder
 import com.swmansion.enriched.markdown.parser.MarkdownASTNode
 import com.swmansion.enriched.markdown.spans.BlockquoteSpan
+import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_CONTAINER_BACKGROUND
 import com.swmansion.enriched.markdown.utils.text.span.SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE
 import com.swmansion.enriched.markdown.utils.text.span.applyMarginBottom
 import com.swmansion.enriched.markdown.utils.text.span.applyMarginTop
@@ -45,12 +46,14 @@ class BlockquoteRenderer(
         .map { builder.getSpanStart(it) to builder.getSpanEnd(it) }
         .sortedBy { it.first }
 
-    // The Accent Bar Span covers the full range for visual continuity
+    // The accent bar span covers the full range for visual continuity.
+    // SPAN_FLAGS_CONTAINER_BACKGROUND keeps the blockquote fill under any
+    // inline chip/pill backgrounds on the same line.
     builder.setSpan(
       BlockquoteSpan(style, depth, factory.context, factory.styleCache),
       start,
       end,
-      SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE,
+      SPAN_FLAGS_CONTAINER_BACKGROUND,
     )
 
     // Apply styling only to segments that are NOT nested quotes

package/android/src/main/java/com/swmansion/enriched/markdown/spans/BlockquoteSpan.kt

@@ -10,6 +10,7 @@ import android.text.Layout
 import android.text.Spanned
 import android.text.TextPaint
 import android.text.style.LeadingMarginSpan
+import android.text.style.LineBackgroundSpan
 import android.text.style.MetricAffectingSpan
 import com.swmansion.enriched.markdown.renderer.BlockStyle
 import com.swmansion.enriched.markdown.renderer.SpanStyleCache
@@ -23,7 +24,8 @@ class BlockquoteSpan(
   private val context: Context,
   private val styleCache: SpanStyleCache,
 ) : MetricAffectingSpan(),
-  LeadingMarginSpan {
+  LeadingMarginSpan,
+  LineBackgroundSpan {
   private val levelSpacing: Float = blockquoteStyle.borderWidth + blockquoteStyle.gapWidth
   private val blockStyle =
     BlockStyle(
@@ -60,8 +62,6 @@ class BlockquoteSpan(
     // Essential check from original: only the deepest span draws to prevent over-rendering background
     if (shouldSkipDrawing(text, start)) return
 
-    drawBackground(c, top, bottom, layout)
-
     val borderPaint = configureBorderPaint()
     val borderTop = top.toFloat()
     val borderBottom = bottom.toFloat()
@@ -73,6 +73,23 @@ class BlockquoteSpan(
     }
   }
 
+  override fun drawBackground(
+    canvas: Canvas,
+    paint: Paint,
+    left: Int,
+    right: Int,
+    top: Int,
+    baseline: Int,
+    bottom: Int,
+    text: CharSequence,
+    start: Int,
+    end: Int,
+    lineNum: Int,
+  ) {
+    if (shouldSkipDrawing(text, start)) return
+    drawBackground(canvas, left, top, bottom, right)
+  }
+
   @SuppressLint("WrongConstant") // Result of mask is always valid: 0, 1, 2, or 3
   private fun applyTextStyle(tp: TextPaint) {
     tp.textSize = blockStyle.fontSize
@@ -123,12 +140,13 @@ class BlockquoteSpan(
 
   private fun drawBackground(
     c: Canvas,
+    left: Int,
     top: Int,
     bottom: Int,
-    layout: Layout?,
+    right: Int,
   ) {
     val bgColor = blockquoteStyle.backgroundColor?.takeIf { it != Color.TRANSPARENT } ?: return
     val backgroundPaint = configureBackgroundPaint(bgColor)
-    c.drawRect(0f, top.toFloat(), layout?.width?.toFloat() ?: 0f, bottom.toFloat(), backgroundPaint)
+    c.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), backgroundPaint)
   }
 }

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/span/SpanFlags.kt

@@ -1,5 +1,17 @@
 package com.swmansion.enriched.markdown.utils.text.span
 
 import android.text.SpannableString
+import android.text.Spanned
 
 const val SPAN_FLAGS_EXCLUSIVE_EXCLUSIVE = SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE
+
+/**
+ * `SPAN_EXCLUSIVE_EXCLUSIVE` with the maximum span priority.
+ *
+ * Higher-priority spans are iterated — and therefore drawn — first, so any
+ * lower-priority span on the same line ends up painted *on top* visually.
+ * Use this for full-width container backgrounds (e.g. blockquote fill in
+ * [BlockquoteSpan]) that must sit under inline pill/chip backgrounds.
+ */
+const val SPAN_FLAGS_CONTAINER_BACKGROUND =
+  Spanned.SPAN_EXCLUSIVE_EXCLUSIVE or Spanned.SPAN_PRIORITY

package/android/src/main/java/com/swmansion/enriched/markdown/utils/text/view/TextSelectionColors.kt

@@ -0,0 +1,48 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.graphics.drawable.Drawable
+import android.os.Build
+import android.util.Log
+import android.widget.TextView
+import androidx.annotation.ColorInt
+import androidx.core.graphics.drawable.DrawableCompat
+
+private const val TAG = "TextSelectionColors"
+
+private typealias HandleGetter = (TextView) -> Drawable?
+private typealias HandleSetter = (TextView, Drawable) -> Unit
+
+/**
+ * Applies selection highlight and (where supported) handle tinting to a [TextView].
+ *
+ * Handle drawables are only tinted on API 29+ where the framework exposes getters;
+ * on older versions the handle theme defaults remain unchanged.
+ */
+fun TextView.applySelectionColors(
+  selectionColor: Int?,
+  selectionHandleColor: Int?,
+) {
+  selectionColor?.let { highlightColor = it }
+  selectionHandleColor?.let { applySelectionHandleTint(it) }
+}
+
+private fun TextView.applySelectionHandleTint(
+  @ColorInt color: Int,
+) {
+  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) return
+
+  val handles: List<Pair<HandleGetter, HandleSetter>> =
+    listOf(
+      TextView::getTextSelectHandleLeft to { tv, d -> tv.setTextSelectHandleLeft(d) },
+      TextView::getTextSelectHandle to { tv, d -> tv.setTextSelectHandle(d) },
+      TextView::getTextSelectHandleRight to { tv, d -> tv.setTextSelectHandleRight(d) },
+    )
+
+  handles.forEach { (getter, setter) ->
+    try {
+      getter(this)?.mutate()?.also { DrawableCompat.setTint(it, color) }?.let { setter(this, it) }
+    } catch (e: LinkageError) {
+      Log.w(TAG, "Selection handle tint skipped: ${e.message}")
+    }
+  }
+}

package/ios/EnrichedMarkdown.mm

@@ -7,6 +7,7 @@
 #import "EditMenuUtils.h"
 
 #import "ENRMFeatureFlags.h"
+#import "ENRMUIKit.h"
 
 #if ENRICHED_MARKDOWN_MATH
 #import "ENRMMathContainerView.h"
@@ -25,6 +26,7 @@
 #import "MarkdownExtractor.h"
 #import "ParagraphStyleUtils.h"
 #import "RuntimeKeys.h"
+#import "SelectionColorUtils.h"
 #import "StyleConfig.h"
 #import "StylePropsUtils.h"
 #import "TableContainerView.h"
@@ -493,6 +495,9 @@ using namespace facebook::react;
   view.textView.selectable = _selectable;
   [view applyAttributedText:segment.attributedText context:segment.context];
 
+  const auto &selectionProps = *std::static_pointer_cast<EnrichedMarkdownProps const>(self->_props);
+  ENRMApplySelectionColor(view.textView, selectionProps.selectionColor);
+
   ENRMTapRecognizer *tapRecognizer = [[ENRMTapRecognizer alloc] initWithTarget:self action:@selector(textTapped:)];
   [view.textView addGestureRecognizer:tapRecognizer];
 
@@ -657,6 +662,15 @@ using namespace facebook::react;
     }
   }
 
+  if (newViewProps.selectionColor != oldViewProps.selectionColor) {
+    for (RCTUIView *segment in _segmentViews) {
+      if ([segment isKindOfClass:[EnrichedMarkdownInternalText class]]) {
+        ENRMPlatformTextView *tv = ((EnrichedMarkdownInternalText *)segment).textView;
+        ENRMApplySelectionColor(tv, newViewProps.selectionColor);
+      }
+    }
+  }
+
   if (markdownChanged || stylePropChanged || md4cFlagsChanged || allowTrailingMarginChanged) {
     NSString *markdownString = [[NSString alloc] initWithUTF8String:newViewProps.markdown.c_str()];
     [self renderMarkdownContent:markdownString];

package/ios/EnrichedMarkdownText.mm

@@ -9,6 +9,7 @@
 #import "ENRMTailFadeInAnimator.h"
 #import "ENRMTextRenderer.h"
 #import "ENRMTextViewSetup.h"
+#import "ENRMUIKit.h"
 #import "EditMenuUtils.h"
 #import "FontScaleObserver.h"
 #import "FontUtils.h"
@@ -19,6 +20,7 @@
 #import "MarkdownExtractor.h"
 #import "ParagraphStyleUtils.h"
 #import "RuntimeKeys.h"
+#import "SelectionColorUtils.h"
 #import "StylePropsUtils.h"
 #import "TaskListTapUtils.h"
 
@@ -411,6 +413,10 @@ using namespace facebook::react;
     _textView.selectable = newViewProps.selectable;
   }
 
+  if (newViewProps.selectionColor != oldViewProps.selectionColor) {
+    ENRMApplySelectionColor(_textView, newViewProps.selectionColor);
+  }
+
   if (newViewProps.allowFontScaling != oldViewProps.allowFontScaling) {
     _fontScaleObserver.allowFontScaling = newViewProps.allowFontScaling;
 

package/ios/generated/ReactCodegen/EnrichedMarkdownTextSpec/Props.cpp

@@ -23,6 +23,8 @@ EnrichedMarkdownProps::EnrichedMarkdownProps(
     markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
     enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
     selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
+    selectionHandleColor(convertRawProp(context, rawProps, "selectionHandleColor", sourceProps.selectionHandleColor, {})),
     md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
     allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
     maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
@@ -63,6 +65,14 @@ folly::dynamic EnrichedMarkdownProps::getDiffProps(
     result["selectable"] = selectable;
   }
     
+  if (selectionColor != oldProps->selectionColor) {
+    result["selectionColor"] = *selectionColor;
+  }
+    
+  if (selectionHandleColor != oldProps->selectionHandleColor) {
+    result["selectionHandleColor"] = *selectionHandleColor;
+  }
+    
   if (md4cFlags != oldProps->md4cFlags) {
     result["md4cFlags"] = toDynamic(md4cFlags);
   }
@@ -221,6 +231,8 @@ EnrichedMarkdownTextProps::EnrichedMarkdownTextProps(
     markdownStyle(convertRawProp(context, rawProps, "markdownStyle", sourceProps.markdownStyle, {})),
     enableLinkPreview(convertRawProp(context, rawProps, "enableLinkPreview", sourceProps.enableLinkPreview, {true})),
     selectable(convertRawProp(context, rawProps, "selectable", sourceProps.selectable, {false})),
+    selectionColor(convertRawProp(context, rawProps, "selectionColor", sourceProps.selectionColor, {})),
+    selectionHandleColor(convertRawProp(context, rawProps, "selectionHandleColor", sourceProps.selectionHandleColor, {})),
     md4cFlags(convertRawProp(context, rawProps, "md4cFlags", sourceProps.md4cFlags, {})),
     allowFontScaling(convertRawProp(context, rawProps, "allowFontScaling", sourceProps.allowFontScaling, {true})),
     maxFontSizeMultiplier(convertRawProp(context, rawProps, "maxFontSizeMultiplier", sourceProps.maxFontSizeMultiplier, {0.0})),
@@ -261,6 +273,14 @@ folly::dynamic EnrichedMarkdownTextProps::getDiffProps(
     result["selectable"] = selectable;
   }
     
+  if (selectionColor != oldProps->selectionColor) {
+    result["selectionColor"] = *selectionColor;
+  }
+    
+  if (selectionHandleColor != oldProps->selectionHandleColor) {
+    result["selectionHandleColor"] = *selectionHandleColor;
+  }
+    
   if (md4cFlags != oldProps->md4cFlags) {
     result["md4cFlags"] = toDynamic(md4cFlags);
   }

package/ios/generated/ReactCodegen/EnrichedMarkdownTextSpec/Props.h

@@ -1954,6 +1954,8 @@ class EnrichedMarkdownProps final : public ViewProps {
   EnrichedMarkdownMarkdownStyleStruct markdownStyle{};
   bool enableLinkPreview{true};
   bool selectable{false};
+  SharedColor selectionColor{};
+  SharedColor selectionHandleColor{};
   EnrichedMarkdownMd4cFlagsStruct md4cFlags{};
   bool allowFontScaling{true};
   Float maxFontSizeMultiplier{0.0};
@@ -4250,6 +4252,8 @@ class EnrichedMarkdownTextProps final : public ViewProps {
   EnrichedMarkdownTextMarkdownStyleStruct markdownStyle{};
   bool enableLinkPreview{true};
   bool selectable{false};
+  SharedColor selectionColor{};
+  SharedColor selectionHandleColor{};
   EnrichedMarkdownTextMd4cFlagsStruct md4cFlags{};
   bool allowFontScaling{true};
   Float maxFontSizeMultiplier{0.0};

package/ios/input/EnrichedMarkdownTextInput.mm

@@ -15,6 +15,7 @@
 #import "ENRMStyleMergingConfig.h"
 #import "ENRMUIKit.h"
 #import "InputStylePropsUtils.h"
+#import "SelectionColorUtils.h"
 #if TARGET_OS_OSX
 #import <React/RCTBackedTextInputDelegate.h>
 #endif
@@ -290,9 +291,7 @@ using namespace facebook::react;
   }
 
   if (newViewProps.selectionColor != oldViewProps.selectionColor) {
-    if (isColorMeaningful(newViewProps.selectionColor)) {
-      ENRMSetSelectionColor(_textView, RCTUIColorFromSharedColor(newViewProps.selectionColor));
-    }
+    ENRMApplySelectionColor(_textView, newViewProps.selectionColor);
   }
 
   _emitMarkdown = newViewProps.isOnChangeMarkdownSet;

package/ios/utils/ENRMUIKit.h

@@ -203,12 +203,16 @@ static inline void ENRMSetCursorColor(ENRMPlatformTextView *textView, RCTUIColor
 #endif
 }
 
-/// Cross-platform selection color: iOS uses tintColor (affects both cursor and selection);
-/// macOS selection highlight is managed by the system and not directly settable.
+/// Cross-platform selection color: iOS uses tintColor (also affects the caret
+/// and selection handles); macOS sets the selection background via
+/// `selectedTextAttributes`. Pass `nil` to restore the system default.
 static inline void ENRMSetSelectionColor(ENRMPlatformTextView *textView, RCTUIColor *color)
 {
 #if !TARGET_OS_OSX
   textView.tintColor = color;
+#else
+  RCTUIColor *resolved = color ?: [NSColor selectedTextBackgroundColor];
+  textView.selectedTextAttributes = @{NSBackgroundColorAttributeName : resolved};
 #endif
 }
 

package/ios/utils/SelectionColorUtils.h

@@ -0,0 +1,14 @@
+#pragma once
+
+#import "ENRMUIKit.h"
+#import <React/RCTConversions.h>
+
+/// Applies a codegen `selectionColor` to `textView`, falling back to the
+/// system tint when the color is unset. Obj-C++ only — `.mm` consumers only.
+static inline void ENRMApplySelectionColor(ENRMPlatformTextView *textView, const facebook::react::SharedColor &color) {
+  if (isColorMeaningful(color)) {
+    ENRMSetSelectionColor(textView, RCTUIColorFromSharedColor(color));
+  } else {
+    ENRMSetSelectionColor(textView, nil);
+  }
+}

package/lib/module/EnrichedMarkdownNativeComponent.ts

@@ -273,6 +273,23 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   selectable?: boolean;
+  /**
+   * Color of the text selection highlight.
+   *
+   * On iOS, this also affects the caret and selection handle colors
+   * (they share a single tint). On macOS, only the selection background
+   * is affected.
+   *
+   * @platform ios, android, macos, web
+   */
+  selectionColor?: ColorValue;
+  /**
+   * Color of the selection handles (drag anchors).
+   * No-op on API levels below 29.
+   *
+   * @platform android
+   */
+  selectionHandleColor?: ColorValue;
   /**
    * MD4C parser flags configuration.
    * Controls how the markdown parser interprets certain syntax.

package/lib/module/EnrichedMarkdownTextNativeComponent.ts

@@ -273,6 +273,23 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   selectable?: boolean;
+  /**
+   * Color of the text selection highlight.
+   *
+   * On iOS, this also affects the caret and selection handle colors
+   * (they share a single tint). On macOS, only the selection background
+   * is affected.
+   *
+   * @platform ios, android, macos, web
+   */
+  selectionColor?: ColorValue;
+  /**
+   * Color of the selection handles (drag anchors).
+   * No-op on API levels below 29.
+   *
+   * @platform android
+   */
+  selectionHandleColor?: ColorValue;
   /**
    * MD4C parser flags configuration.
    * Controls how the markdown parser interprets certain syntax.