react-native-advanced-text 0.2.15 → 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

@@ -66,6 +66,7 @@ class AdvancedTextView : TextView {
     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() }
@@ -394,14 +395,25 @@ class AdvancedTextView : TextView {
 
         highlightedWords.forEach { highlightedWord ->
             val wordPos = wordPositions.find { it.index == highlightedWord.index } ?: return@forEach
-            drawRangeBackground(
-                canvas,
-                currentLayout,
-                wordPos.start,
-                wordPos.extendedEnd.coerceAtMost(currentText.length),
-                parseColor(highlightedWord.highlightColor),
-                highlightedWord.borderRadius * density
-            )
+            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
+                )
+            }
         }
 
         // Draw indicator background only in Highlight mode
@@ -420,10 +432,7 @@ class AdvancedTextView : TextView {
         }
     }
 
-    // Fills the background of text[start, end), one box per line. 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 drew boxes in the wrong place.
+    // Fills the background of text[start, end), one box per line.
     private fun drawRangeBackground(
         canvas: Canvas,
         layout: Layout,
@@ -432,8 +441,44 @@ class AdvancedTextView : TextView {
         color: Int,
         radius: Float
     ) {
-        if (start >= end) return
         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)
@@ -461,7 +506,7 @@ class AdvancedTextView : TextView {
             if (rangeBounds.isEmpty) continue
 
             rangeBounds.offset(totalPaddingLeft.toFloat(), totalPaddingTop.toFloat())
-            canvas.drawRoundRect(rangeBounds, radius, radius, highlightPaint)
+            draw(line)
         }
     }
 
@@ -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.15",
+  "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 {