react-native-advanced-text 0.2.14 → 0.2.16

package/README.md

@@ -38,6 +38,11 @@ import { AdvancedText } from "react-native-advanced-text";
       highlightColor: '#6baeffb5',
       borderRadius: 6,
     },
+    {
+      index: 7,
+      highlightColor: '#818CF8',
+      underline: true, // a line under the word instead of a background
+    },
   ]}
   fontSize={24}
   color={'#FFFFFF'}
@@ -47,6 +52,13 @@ import { AdvancedText } from "react-native-advanced-text";
 />
 ```
 
+## Underlined words
+
+An entry in `highlightedWords` with `underline: true` draws a line under the
+word in `highlightColor` instead of filling its background (`borderRadius` is
+ignored). A word can be both highlighted and underlined: list it twice, once
+with `underline: true` and once without.
+
 ## Sizing
 
 `AdvancedText` measures its own height, like React Native's built‑in `<Text>`.

package/android/src/main/java/com/advancedtext/AdvancedTextView.kt

@@ -3,9 +3,12 @@ package com.advancedtext
 import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.Point
 import android.graphics.RectF
 import android.os.Build
+import android.text.Layout
 import android.text.SpannableString
 import android.text.Spannable
 import android.text.Spanned
@@ -58,6 +61,13 @@ class AdvancedTextView : TextView {
     // text. setText() would clear any selection the user is making.
     private var wordColorSpans: Array<ForegroundColorSpan?> = emptyArray()
 
+    // Reused on every draw for the highlight backgrounds.
+    private val highlightPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+    private val rangePath = Path()
+    private val lineClipPath = Path()
+    private val rangeBounds = RectF()
+    private val underlineBounds = RectF()
+
     constructor(context: Context?) : super(context) { init() }
     constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { init() }
     constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { init() }
@@ -382,43 +392,27 @@ class AdvancedTextView : TextView {
     private fun drawHighlightedWordBackgrounds(canvas: Canvas) {
         val currentLayout = layout ?: return
         val density = resources.displayMetrics.density
-        val originalColor = paint.color
 
         highlightedWords.forEach { highlightedWord ->
             val wordPos = wordPositions.find { it.index == highlightedWord.index } ?: return@forEach
-            val start = wordPos.start
-            val end = wordPos.extendedEnd.coerceAtMost(currentText.length)
-
-            if (start >= end) return@forEach
-
-            val startLine = currentLayout.getLineForOffset(start)
-            val safeEndOffset = (end - 1).coerceAtLeast(start)
-            val endLine = currentLayout.getLineForOffset(safeEndOffset)
-
-            paint.color = parseColor(highlightedWord.highlightColor)
-
-            for (line in startLine..endLine) {
-                val lineStartOffset = maxOf(start, currentLayout.getLineStart(line))
-                val lineEndOffset = minOf(end, currentLayout.getLineEnd(line))
-                if (lineStartOffset >= lineEndOffset) continue
-
-                val left = currentLayout.getPrimaryHorizontal(lineStartOffset)
-                val isLastWordOnLine = lineEndOffset >= currentLayout.getLineEnd(line)
-                val right = if (isLastWordOnLine) {
-                    currentLayout.getLineRight(line)
-                } else {
-                    currentLayout.getPrimaryHorizontal(lineEndOffset)
-                }
-                val top = currentLayout.getLineTop(line).toFloat()
-                val bottom = currentLayout.getLineBottom(line).toFloat()
-                val rect = RectF(
-                    totalPaddingLeft + left,
-                    totalPaddingTop + top,
-                    totalPaddingLeft + right,
-                    totalPaddingTop + bottom
+            if (highlightedWord.underline) {
+                // The word, but not the space after it.
+                drawRangeUnderline(
+                    canvas,
+                    currentLayout,
+                    wordPos.start,
+                    wordPos.end.coerceAtMost(currentText.length),
+                    parseColor(highlightedWord.highlightColor)
+                )
+            } else {
+                drawRangeBackground(
+                    canvas,
+                    currentLayout,
+                    wordPos.start,
+                    wordPos.extendedEnd.coerceAtMost(currentText.length),
+                    parseColor(highlightedWord.highlightColor),
+                    highlightedWord.borderRadius * density
                 )
-                val radius = highlightedWord.borderRadius * density
-                canvas.drawRoundRect(rect, radius, radius, paint)
             }
         }
 
@@ -426,43 +420,94 @@ class AdvancedTextView : TextView {
         if (indicatorMode != "fill" && indicatorWordIndex >= 0 && indicatorColor.isNotEmpty()) {
             val wordPos = wordPositions.find { it.index == indicatorWordIndex }
             if (wordPos != null) {
-                val start = wordPos.start
-                val end = wordPos.end.coerceAtMost(currentText.length)
-
-                if (start < end) {
-                    val startLine = currentLayout.getLineForOffset(start)
-                    val safeEndOffset = (end - 1).coerceAtLeast(start)
-                    val endLine = currentLayout.getLineForOffset(safeEndOffset)
-
-                    paint.color = parseColor(indicatorColor)
-
-                    for (line in startLine..endLine) {
-                        val lineStartOffset = maxOf(start, currentLayout.getLineStart(line))
-                        val lineEndOffset = minOf(end, currentLayout.getLineEnd(line))
-                        if (lineStartOffset >= lineEndOffset) continue
-
-                        val left = currentLayout.getPrimaryHorizontal(lineStartOffset)
-                        val isLastWordOnLine = lineEndOffset >= currentLayout.getLineEnd(line)
-                        val right = if (isLastWordOnLine) {
-                            currentLayout.getLineRight(line)
-                        } else {
-                            currentLayout.getPrimaryHorizontal(lineEndOffset)
-                        }
-                        val top = currentLayout.getLineTop(line).toFloat()
-                        val bottom = currentLayout.getLineBottom(line).toFloat()
-                        val rect = RectF(
-                            totalPaddingLeft + left,
-                            totalPaddingTop + top,
-                            totalPaddingLeft + right,
-                            totalPaddingTop + bottom
-                        )
-                        canvas.drawRoundRect(rect, 0f, 0f, paint)
-                    }
-                }
+                drawRangeBackground(
+                    canvas,
+                    currentLayout,
+                    wordPos.start,
+                    wordPos.end.coerceAtMost(currentText.length),
+                    parseColor(indicatorColor),
+                    0f
+                )
             }
         }
+    }
+
+    // Fills the background of text[start, end), one box per line.
+    private fun drawRangeBackground(
+        canvas: Canvas,
+        layout: Layout,
+        start: Int,
+        end: Int,
+        color: Int,
+        radius: Float
+    ) {
+        highlightPaint.color = color
+        forEachLineOfRange(layout, start, end) {
+            canvas.drawRoundRect(rangeBounds, radius, radius, highlightPaint)
+        }
+    }
+
+    // Draws a line under text[start, end), one per line it spans, just below
+    // the baseline like a text underline.
+    private fun drawRangeUnderline(
+        canvas: Canvas,
+        layout: Layout,
+        start: Int,
+        end: Int,
+        color: Int
+    ) {
+        val density = resources.displayMetrics.density
+        val thickness = UNDERLINE_THICKNESS_DP * density
+        val gap = UNDERLINE_GAP_DP * density
+        highlightPaint.color = color
+        forEachLineOfRange(layout, start, end) { line ->
+            val top = layout.getLineBaseline(line) + totalPaddingTop + gap
+            underlineBounds.set(rangeBounds.left, top, rangeBounds.right, top + thickness)
+            canvas.drawRoundRect(underlineBounds, thickness / 2, thickness / 2, highlightPaint)
+        }
+    }
+
+    // Calls draw for each line text[start, end) spans, with rangeBounds set to
+    // that line's part of the range in view coordinates. The edges come from
+    // Layout.getSelectionPath, which follows the text's direction: a
+    // right-to-left word (Arabic) starts at its right edge, so treating
+    // getPrimaryHorizontal(start) as the left edge put boxes in the wrong place.
+    private inline fun forEachLineOfRange(
+        layout: Layout,
+        start: Int,
+        end: Int,
+        draw: (line: Int) -> Unit
+    ) {
+        if (start >= end) return
+
+        val startLine = layout.getLineForOffset(start)
+        val endLine = layout.getLineForOffset(end - 1)
+        for (line in startLine..endLine) {
+            val segmentStart = maxOf(start, layout.getLineStart(line))
+            val segmentEnd = minOf(end, layout.getLineEnd(line))
+            if (segmentStart >= segmentEnd) continue
+
+            rangePath.reset()
+            layout.getSelectionPath(segmentStart, segmentEnd, rangePath)
+
+            // A range reaching the end of a line counts as running onto the
+            // next one, so the selection path fills out to the view's edge.
+            // Clip to this line's text to stop the box at the last word.
+            lineClipPath.reset()
+            lineClipPath.addRect(
+                layout.getLineLeft(line),
+                layout.getLineTop(line).toFloat(),
+                layout.getLineRight(line),
+                layout.getLineBottom(line).toFloat(),
+                Path.Direction.CW
+            )
+            rangePath.op(lineClipPath, Path.Op.INTERSECT)
+            rangePath.computeBounds(rangeBounds, true)
+            if (rangeBounds.isEmpty) continue
 
-        paint.color = originalColor
+            rangeBounds.offset(totalPaddingLeft.toFloat(), totalPaddingTop.toFloat())
+            draw(line)
+        }
     }
 
     private fun parseColor(colorString: String): Int {
@@ -589,5 +634,10 @@ class AdvancedTextView : TextView {
 data class HighlightedWord(
     val index: Int,
     val highlightColor: String,
-    val borderRadius: Float = 0f
+    val borderRadius: Float = 0f,
+    // Draws a line under the word instead of filling its background.
+    val underline: Boolean = false
 )
+
+private const val UNDERLINE_THICKNESS_DP = 1.5f
+private const val UNDERLINE_GAP_DP = 2.5f

package/android/src/main/java/com/advancedtext/AdvancedTextViewManager.kt

@@ -54,7 +54,10 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
                                 wordMap.getDouble("borderRadius").toFloat()
                             } else {
                                 0f
-                            }
+                            },
+                            underline = wordMap.hasKey("underline") &&
+                                !wordMap.isNull("underline") &&
+                                wordMap.getBoolean("underline")
                         )
                     )
                 }

package/ios/AdvancedTextView.mm

@@ -31,6 +31,9 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
 
 @property (nonatomic, strong) NSMutableArray<NSDictionary *> *wordRanges;
 @property (nonatomic, strong) NSMutableDictionary<NSNumber *, NSDictionary *> *highlightStyles;
+// Underline colors by word index, kept apart from highlightStyles so a word
+// can be both highlighted and underlined.
+@property (nonatomic, strong) NSMutableDictionary<NSNumber *, UIColor *> *underlineStyles;
 @property (nonatomic, strong) NSArray<NSString *> *menuOptions;
 @property (nonatomic, assign) CGFloat fontSize;
 @property (nonatomic, strong) NSString *fontWeight;
@@ -109,6 +112,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
 
             _wordRanges = [NSMutableArray array];
             _highlightStyles = [NSMutableDictionary dictionary];
+            _underlineStyles = [NSMutableDictionary dictionary];
             _fontSize = 16.0;
             _fontWeight = @"normal";
             _textColor = [UIColor labelColor];
@@ -237,7 +241,8 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
                 const auto &newHW = newViewProps.highlightedWords[i];
                 if (oldHW.index != newHW.index ||
                     oldHW.highlightColor != newHW.highlightColor ||
-                    oldHW.borderRadius != newHW.borderRadius) {
+                    oldHW.borderRadius != newHW.borderRadius ||
+                    oldHW.underline != newHW.underline) {
                     highlightsChanged = YES;
                     break;
                 }
@@ -410,6 +415,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
           highlightedWords.size());
     @try {
         [_highlightStyles removeAllObjects];
+        [_underlineStyles removeAllObjects];
 
         for (const auto &hw : highlightedWords) {
             NSInteger index = hw.index;
@@ -417,7 +423,9 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
             UIColor *color = [self hexStringToColor:colorString];
             CGFloat borderRadius = static_cast<CGFloat>(hw.borderRadius);
 
-            if (color) {
+            if (color && hw.underline) {
+                _underlineStyles[@(index)] = color;
+            } else if (color) {
                 _highlightStyles[@(index)] = @{
                     @"color": color,
                     @"borderRadius": @(MAX(borderRadius, 0.0))
@@ -499,6 +507,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
 
 
         [self applyWordColorsToString:attributedString];
+        [self applyUnderlinesToString:attributedString];
 
         _textView.attributedText = attributedString;
         [_textView setNeedsDisplay];
@@ -545,6 +554,29 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
     }
 }
 
+// A text underline under each underlined word, but not the space after it.
+- (void)applyUnderlinesToString:(NSMutableAttributedString *)string
+{
+    if (_underlineStyles.count == 0) {
+        return;
+    }
+
+    for (NSDictionary *wordInfo in _wordRanges) {
+        UIColor *color = _underlineStyles[wordInfo[@"index"]];
+        if (!color) {
+            continue;
+        }
+        NSRange wordRange = [wordInfo[@"range"] rangeValue];
+        if (NSMaxRange(wordRange) > string.length) {
+            break;
+        }
+        [string addAttributes:@{
+            NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle),
+            NSUnderlineColorAttributeName: color
+        } range:wordRange];
+    }
+}
+
 // Recolors the live textStorage instead of reassigning attributedText, so the
 // indicator can advance while the user is selecting text: attribute-only
 // edits keep selectedRange and the edit menu, assigning attributedText resets them.

package/lib/module/AdvancedTextViewNativeComponent.ts

@@ -8,6 +8,9 @@ interface HighlightedWord {
   index: Int32;
   highlightColor: string;
   borderRadius?: Float;
+  // Underlines the word in highlightColor instead of filling its background.
+  // A word can have both: list it once with and once without.
+  underline?: boolean;
 }
 
 export interface NativeProps extends ViewProps {

package/lib/typescript/src/AdvancedTextViewNativeComponent.d.ts

@@ -4,6 +4,7 @@ interface HighlightedWord {
     index: Int32;
     highlightColor: string;
     borderRadius?: Float;
+    underline?: boolean;
 }
 export interface NativeProps extends ViewProps {
     text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAG,KAAK,EAAG,MAAM,2CAA2C,CAAC;AAEpG,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;;AAED,wBAAuE"}
+{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAG,KAAK,EAAG,MAAM,2CAA2C,CAAC;AAEpG,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC;IAGrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;;AAED,wBAAuE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/AdvancedTextViewNativeComponent.ts

@@ -8,6 +8,9 @@ interface HighlightedWord {
   index: Int32;
   highlightColor: string;
   borderRadius?: Float;
+  // Underlines the word in highlightColor instead of filling its background.
+  // A word can have both: list it once with and once without.
+  underline?: boolean;
 }
 
 export interface NativeProps extends ViewProps {