feat: custom selection color

Author: xindixu

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.applyMarkdownSelectionColors
 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 propSelectionColor: Int? = null
+    private var propSelectionHandleColor: Int? = null
 
     private var onLinkPressCallback: ((String) -> Unit)? = null
     private var onLinkLongPressCallback: ((String) -> Unit)? = null
@@ -128,6 +131,22 @@ class EnrichedMarkdown
       }
     }
 
+    fun setSelectionColorFromProps(color: Int?) {
+      propSelectionColor = color
+      applySelectionColorsToSegments()
+    }
+
+    fun setSelectionHandleColorFromProps(color: Int?) {
+      propSelectionHandleColor = color
+      applySelectionColorsToSegments()
+    }
+
+    private fun applySelectionColorsToSegments() {
+      segmentViews.filterIsInstance<EnrichedMarkdownInternalText>().forEach {
+        it.applyMarkdownSelectionColors(propSelectionColor, propSelectionHandleColor)
+      }
+    }
+
     fun setOnLinkPressCallback(callback: (String) -> Unit) {
       onLinkPressCallback = callback
     }
@@ -234,6 +253,8 @@ class EnrichedMarkdown
         if (contextMenuItemTexts.isNotEmpty()) {
           setContextMenuItems(contextMenuItemTexts, ::forwardContextMenuItemPress)
         }
+
+        applyMarkdownSelectionColors(propSelectionColor, propSelectionHandleColor)
       }
 
     private fun createTableView(

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?.setSelectionColorFromProps(value)
+  }
+
+  override fun setSelectionHandleColor(
+    view: EnrichedMarkdown?,
+    value: Int?,
+  ) {
+    view?.setSelectionHandleColorFromProps(value)
+  }
+
   @ReactProp(name = "md4cFlags")
   override fun setMd4cFlags(
     view: EnrichedMarkdown?,

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

@@ -22,6 +22,7 @@ import com.swmansion.enriched.markdown.styles.StyleConfig
 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.applyMarkdownSelectionColors
 import com.swmansion.enriched.markdown.utils.text.view.applySelectableState
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForCheckboxTap
 import com.swmansion.enriched.markdown.utils.text.view.cancelJSTouchForLinkTap
@@ -81,6 +82,9 @@ class EnrichedMarkdownText
       private set
     var spoilerOverlay: SpoilerOverlay = SpoilerOverlay.PARTICLES
 
+    private var propSelectionColor: Int? = null
+    private var propSelectionHandleColor: Int? = null
+
     init {
       setupAsMarkdownTextView()
       customSelectionActionModeCallback =
@@ -248,6 +252,8 @@ class EnrichedMarkdownText
         fadeAnimator?.animate(tailStart, styledText.length)
         previousTextLength = styledText.length
       }
+
+      applyMarkdownSelectionColors(propSelectionColor, propSelectionHandleColor)
     }
 
     fun setContextMenuItems(items: List<String>) {
@@ -258,6 +264,16 @@ class EnrichedMarkdownText
       applySelectableState(selectable)
     }
 
+    fun setSelectionColorFromProps(color: Int?) {
+      propSelectionColor = color
+      applyMarkdownSelectionColors(propSelectionColor, propSelectionHandleColor)
+    }
+
+    fun setSelectionHandleColorFromProps(color: Int?) {
+      propSelectionHandleColor = color
+      applyMarkdownSelectionColors(propSelectionColor, propSelectionHandleColor)
+    }
+
     fun emitOnLinkPress(url: String) {
       emitLinkPressEvent(url)
     }

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?.setSelectionColorFromProps(value)
+  }
+
+  override fun setSelectionHandleColor(
+    view: EnrichedMarkdownText?,
+    value: Int?,
+  ) {
+    view?.setSelectionHandleColorFromProps(value)
+  }
+
   @ReactProp(name = "md4cFlags")
   override fun setMd4cFlags(
     view: EnrichedMarkdownText?,

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

@@ -0,0 +1,47 @@
+package com.swmansion.enriched.markdown.utils.text.view
+
+import android.os.Build
+import android.widget.TextView
+import androidx.annotation.ColorInt
+import androidx.core.graphics.drawable.DrawableCompat
+
+/**
+ * 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.applyMarkdownSelectionColors(
+  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
+  }
+  try {
+    tintHandle(textSelectHandleLeft, color)?.let { setTextSelectHandleLeft(it) }
+    tintHandle(textSelectHandle, color)?.let { setTextSelectHandle(it) }
+    tintHandle(textSelectHandleRight, color)?.let { setTextSelectHandleRight(it) }
+  } catch (_: Exception) {
+    // Defensive: OEM TextView variants may not support all handle accessors.
+  }
+}
+
+private fun tintHandle(
+  drawable: android.graphics.drawable.Drawable?,
+  @ColorInt color: Int,
+): android.graphics.drawable.Drawable? {
+  if (drawable == null) {
+    return null
+  }
+  val mutated = drawable.mutate()
+  DrawableCompat.setTint(mutated, color)
+  return mutated
+}

apps/example/src/App.tsx

@@ -93,6 +93,8 @@ export default function App() {
             onLinkPress={handleLinkPress}
             markdownStyle={markdownStyle}
             contextMenuItems={contextMenuItems}
+            selectionColor={Platform.OS === 'ios' ? '#5A52FA' : '#DCDDFE'}
+            selectionHandleColor="#5A52FA"
           />
         </ScrollView>
       )}

ios/EnrichedMarkdown.mm

@@ -7,6 +7,7 @@
 #import "EditMenuUtils.h"
 
 #import "ENRMFeatureFlags.h"
+#import "ENRMUIKit.h"
 
 #if ENRICHED_MARKDOWN_MATH
 #import "ENRMMathContainerView.h"
@@ -90,6 +91,7 @@ + (instancetype)segmentWithLatex:(NSString *)latex
 #endif
 
 @interface EnrichedMarkdown () <RCTEnrichedMarkdownViewProtocol, UITextViewDelegate>
+- (void)applySelectionTintFromProps:(const EnrichedMarkdownProps &)props toTextView:(ENRMPlatformTextView *)textView;
 @end
 
 @implementation EnrichedMarkdown {
@@ -493,6 +495,9 @@ - (EnrichedMarkdownInternalText *)createTextViewForRenderedSegment:(ENRMRenderRe
   view.textView.selectable = _selectable;
   [view applyAttributedText:segment.attributedText context:segment.context];
 
+  const auto &selectionProps = *std::static_pointer_cast<EnrichedMarkdownProps const>(self->_props);
+  [self applySelectionTintFromProps:selectionProps toTextView:view.textView];
+
   ENRMTapRecognizer *tapRecognizer = [[ENRMTapRecognizer alloc] initWithTarget:self action:@selector(textTapped:)];
   [view.textView addGestureRecognizer:tapRecognizer];
 
@@ -657,6 +662,18 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     }
   }
 
+  if (newViewProps.selectionHandleColor != oldViewProps.selectionHandleColor ||
+      newViewProps.selectionColor != oldViewProps.selectionColor) {
+#if !TARGET_OS_OSX
+    for (RCTUIView *segment in _segmentViews) {
+      if ([segment isKindOfClass:[EnrichedMarkdownInternalText class]]) {
+        ENRMPlatformTextView *tv = ((EnrichedMarkdownInternalText *)segment).textView;
+        [self applySelectionTintFromProps:newViewProps toTextView:tv];
+      }
+    }
+#endif
+  }
+
   if (markdownChanged || stylePropChanged || md4cFlagsChanged || allowTrailingMarginChanged) {
     NSString *markdownString = [[NSString alloc] initWithUTF8String:newViewProps.markdown.c_str()];
     [self renderMarkdownContent:markdownString];
@@ -880,4 +897,15 @@ - (NSInteger)indexOfAccessibilityElement:(id)element
 }
 #endif
 
+- (void)applySelectionTintFromProps:(const EnrichedMarkdownProps &)props toTextView:(ENRMPlatformTextView *)textView
+{
+#if !TARGET_OS_OSX
+  if (isColorMeaningful(props.selectionHandleColor)) {
+    ENRMSetSelectionColor(textView, RCTUIColorFromSharedColor(props.selectionHandleColor));
+  } else if (isColorMeaningful(props.selectionColor)) {
+    ENRMSetSelectionColor(textView, RCTUIColorFromSharedColor(props.selectionColor));
+  }
+#endif
+}
+
 @end

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"
@@ -411,6 +412,17 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _textView.selectable = newViewProps.selectable;
   }
 
+  if (newViewProps.selectionHandleColor != oldViewProps.selectionHandleColor ||
+      newViewProps.selectionColor != oldViewProps.selectionColor) {
+#if !TARGET_OS_OSX
+    if (isColorMeaningful(newViewProps.selectionHandleColor)) {
+      ENRMSetSelectionColor(_textView, RCTUIColorFromSharedColor(newViewProps.selectionHandleColor));
+    } else if (isColorMeaningful(newViewProps.selectionColor)) {
+      ENRMSetSelectionColor(_textView, RCTUIColorFromSharedColor(newViewProps.selectionColor));
+    }
+#endif
+  }
+
   if (newViewProps.allowFontScaling != oldViewProps.allowFontScaling) {
     _fontScaleObserver.allowFontScaling = newViewProps.allowFontScaling;
 

src/EnrichedMarkdownNativeComponent.ts

@@ -272,6 +272,30 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   selectable?: boolean;
+  /**
+   * Color of the text selection highlight (selected text background).
+   *
+   * - **Android**: maps to `TextView.highlightColor`.
+   * - **iOS**: `UITextView.tintColor` drives the selection highlight, caret, and
+   *   selection handles together. When `selectionHandleColor` is also set, it
+   *   takes precedence for `tintColor` (see that prop).
+   * - **Web**: maps to `::selection` background via a CSS variable on the root.
+   *
+   * @platform ios, android, web
+   */
+  selectionColor?: ColorValue;
+  /**
+   * Color of the selection handles (drag anchors).
+   *
+   * - **Android**: tints the left, mid, and right handle drawables (API 29+;
+   *   older API levels leave handles at the default theme color).
+   * - **iOS**: merged with selection via `tintColor` — when set, it overrides
+   *   `selectionColor` for the shared `tintColor` (highlight + handles + caret).
+   * - **Web**: best-effort via `accent-color` on the root; browser support varies.
+   *
+   * @platform ios, android, web
+   */
+  selectionHandleColor?: ColorValue;
   /**
    * MD4C parser flags configuration.
    * Controls how the markdown parser interprets certain syntax.

src/EnrichedMarkdownTextNativeComponent.ts

@@ -272,6 +272,30 @@ export interface NativeProps extends ViewProps {
    * @default true
    */
   selectable?: boolean;
+  /**
+   * Color of the text selection highlight (selected text background).
+   *
+   * - **Android**: maps to `TextView.highlightColor`.
+   * - **iOS**: `UITextView.tintColor` drives the selection highlight, caret, and
+   *   selection handles together. When `selectionHandleColor` is also set, it
+   *   takes precedence for `tintColor` (see that prop).
+   * - **Web**: maps to `::selection` background via a CSS variable on the root.
+   *
+   * @platform ios, android, web
+   */
+  selectionColor?: ColorValue;
+  /**
+   * Color of the selection handles (drag anchors).
+   *
+   * - **Android**: tints the left, mid, and right handle drawables (API 29+;
+   *   older API levels leave handles at the default theme color).
+   * - **iOS**: merged with selection via `tintColor` — when set, it overrides
+   *   `selectionColor` for the shared `tintColor` (highlight + handles + caret).
+   * - **Web**: best-effort via `accent-color` on the root; browser support varies.
+   *
+   * @platform ios, android, web
+   */
+  selectionHandleColor?: ColorValue;
   /**
    * MD4C parser flags configuration.
    * Controls how the markdown parser interprets certain syntax.