react-native-advanced-text 0.2.13 → 0.2.15

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

@@ -3,15 +3,19 @@ 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
 import android.text.TextPaint
 import android.text.method.ArrowKeyMovementMethod
 import android.text.style.ClickableSpan
+import android.text.style.ForegroundColorSpan
 import android.util.AttributeSet
 import android.util.Log
 import android.view.ActionMode
@@ -53,6 +57,15 @@ class AdvancedTextView : TextView {
     private var indicatorMode: String = "Highlight"
 
     private var wordPositions: List<WordPosition> = emptyList()
+    // Each word's color span, kept so color changes can be applied to the live
+    // 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()
 
     constructor(context: Context?) : super(context) { init() }
     constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { init() }
@@ -133,8 +146,10 @@ class AdvancedTextView : TextView {
     }
 
     fun setAdvancedTextColor(colorInt: Int) {
-          textColor = String.format("#%06X", 0xFFFFFF and colorInt)
-          updateTextWithHighlights()
+        val color = String.format("#%06X", 0xFFFFFF and colorInt)
+        if (textColor == color) return
+        textColor = color
+        updateWordColors()
     }
 
     fun setAdvancedTextSize(size: Float) {
@@ -202,7 +217,7 @@ class AdvancedTextView : TextView {
         if (indicatorWordIndex == index) return
         indicatorWordIndex = index
         if (indicatorMode == "fill") {
-            updateTextWithHighlights()
+            updateWordColors()
         } else {
             invalidate()
         }
@@ -212,7 +227,7 @@ class AdvancedTextView : TextView {
         if (indicatorColor == color) return
         indicatorColor = color
         if (indicatorMode == "fill") {
-            updateTextWithHighlights()
+            updateWordColors()
         } else {
             invalidate()
         }
@@ -221,7 +236,7 @@ class AdvancedTextView : TextView {
     fun setIndicatorMode(mode: String) {
         if (indicatorMode == mode) return
         indicatorMode = mode
-        updateTextWithHighlights()
+        updateWordColors()
         invalidate()
     }
 
@@ -268,25 +283,18 @@ class AdvancedTextView : TextView {
         val spannableString = SpannableString(currentText)
 
         wordPositions.forEach { wordPos ->
-            val wordColor = if (indicatorMode == "fill" &&
-                               indicatorWordIndex >= 0 &&
-                               wordPos.index <= indicatorWordIndex &&
-                               indicatorColor.isNotEmpty()) {
-                parseColor(indicatorColor)
-            } else {
-                parseColor(textColor)
-            }
             spannableString.setSpan(
                 WordClickableSpan(
                     wordIndex = wordPos.index,
-                    word = wordPos.word,
-                    wordColor = wordColor
+                    word = wordPos.word
                 ),
                 wordPos.start,
                 wordPos.end,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
             )
         }
+        wordColorSpans = arrayOfNulls(wordPositions.size)
+        applyWordColors(spannableString)
 
         applyTextAlign()
 
@@ -322,6 +330,50 @@ class AdvancedTextView : TextView {
         Log.d(TAG, "Text updated with ${wordPositions.size} spans")
     }
 
+    // Recolors words on the live text instead of rebuilding it, so the
+    // indicator can advance while the user is selecting text. Span changes go
+    // through TextView's ChangeWatcher, which redraws just the changed region
+    // and keeps the selection and its action mode.
+    private fun updateWordColors() {
+        if (currentText.isEmpty()) return
+        val spannable = text as? Spannable
+        if (spannable == null ||
+            spannable.length != currentText.length ||
+            wordColorSpans.size != wordPositions.size) {
+            updateTextWithHighlights()
+            return
+        }
+        applyWordColors(spannable)
+    }
+
+    // Only words whose color changed get a new span, so an indicator step
+    // touches one or two words rather than the whole paragraph.
+    private fun applyWordColors(spannable: Spannable) {
+        val baseColor = parseColor(textColor)
+        val fillColor = if (indicatorMode == "fill" &&
+                            indicatorWordIndex >= 0 &&
+                            indicatorColor.isNotEmpty()) {
+            parseColor(indicatorColor)
+        } else {
+            null
+        }
+
+        wordPositions.forEach { wordPos ->
+            val color = if (fillColor != null && wordPos.index <= indicatorWordIndex) {
+                fillColor
+            } else {
+                baseColor
+            }
+            val current = wordColorSpans[wordPos.index]
+            if (current?.foregroundColor == color) return@forEach
+
+            current?.let { spannable.removeSpan(it) }
+            val span = ForegroundColorSpan(color)
+            spannable.setSpan(span, wordPos.start, wordPos.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+            wordColorSpans[wordPos.index] = span
+        }
+    }
+
     // Every word is a ClickableSpan so a tap can report it, but TalkBack treats
     // each span as a link: it reads the text one word at a time and lists every
     // word under Actions. Plain text keeps it reading as prose; granularity
@@ -339,87 +391,78 @@ 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
-                )
-                val radius = highlightedWord.borderRadius * density
-                canvas.drawRoundRect(rect, radius, radius, paint)
-            }
+            drawRangeBackground(
+                canvas,
+                currentLayout,
+                wordPos.start,
+                wordPos.extendedEnd.coerceAtMost(currentText.length),
+                parseColor(highlightedWord.highlightColor),
+                highlightedWord.borderRadius * density
+            )
         }
 
         // Draw indicator background only in Highlight mode
         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. 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.
+    private fun drawRangeBackground(
+        canvas: Canvas,
+        layout: Layout,
+        start: Int,
+        end: Int,
+        color: Int,
+        radius: Float
+    ) {
+        if (start >= end) return
+        highlightPaint.color = color
+
+        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())
+            canvas.drawRoundRect(rangeBounds, radius, radius, highlightPaint)
+        }
     }
 
     private fun parseColor(colorString: String): Int {
@@ -448,8 +491,7 @@ class AdvancedTextView : TextView {
 
     private inner class WordClickableSpan(
         private val wordIndex: Int,
-        private val word: String,
-        private val wordColor: Int
+        private val word: String
     ) : ClickableSpan() {
 
         override fun onClick(widget: View) {
@@ -457,10 +499,10 @@ class AdvancedTextView : TextView {
             sendWordPressEvent(word, wordIndex)
         }
 
+        // Skips super, which would paint the word in the link color and
+        // underline it. The word's color comes from its ForegroundColorSpan.
         override fun updateDrawState(ds: TextPaint) {
-            super.updateDrawState(ds)
             ds.isUnderlineText = false
-            ds.color = wordColor
         }
     }
 

package/ios/AdvancedTextView.mm

@@ -268,6 +268,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
         }
 
         BOOL indicatorChanged = NO;
+        BOOL indicatorModeChanged = NO;
 
         if (oldViewProps.indicatorMode != newViewProps.indicatorMode) {
             NSLog(@"[AdvancedTextView] Updating indicatorMode to: %s", newViewProps.indicatorMode.c_str());
@@ -275,6 +276,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
                 ? @"Highlight"
                 : [NSString stringWithUTF8String:newViewProps.indicatorMode.c_str()];
             indicatorChanged = YES;
+            indicatorModeChanged = YES;
         }
 
         if (oldViewProps.indicatorWordIndex != newViewProps.indicatorWordIndex) {
@@ -295,11 +297,10 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
         }
 
         if (indicatorChanged) {
-            if ([_indicatorMode isEqualToString:@"fill"]) {
-                [self updateTextAppearance]; // rebuilds attributed text with fill colors; calls setNeedsDisplay
-            } else {
-                [_textView setNeedsDisplay];
+            if ([_indicatorMode isEqualToString:@"fill"] || indicatorModeChanged) {
+                [self updateWordColors];
             }
+            [_textView setNeedsDisplay];
         }
 
         if (textChanged) {
@@ -497,22 +498,7 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
         }
 
 
-        UIColor *color = _textColor ?: [UIColor labelColor];
-        [attributedString addAttribute:NSForegroundColorAttributeName
-                                 value:color
-                                 range:NSMakeRange(0, attributedString.length)];
-
-        if ([_indicatorMode isEqualToString:@"fill"] && _indicatorWordIndex >= 0 && _indicatorColor) {
-            for (NSDictionary *wordInfo in _wordRanges) {
-                NSInteger idx = [wordInfo[@"index"] integerValue];
-                if (idx <= _indicatorWordIndex) {
-                    NSRange wordRange = [wordInfo[@"range"] rangeValue];
-                    [attributedString addAttribute:NSForegroundColorAttributeName
-                                             value:_indicatorColor
-                                             range:wordRange];
-                }
-            }
-        }
+        [self applyWordColorsToString:attributedString];
 
         _textView.attributedText = attributedString;
         [_textView setNeedsDisplay];
@@ -534,6 +520,50 @@ static UIFont *ATResolveFont(NSString *family, CGFloat size)
     }
 }
 
+- (void)applyWordColorsToString:(NSMutableAttributedString *)string
+{
+    UIColor *color = _textColor ?: [UIColor labelColor];
+    [string addAttribute:NSForegroundColorAttributeName
+                   value:color
+                   range:NSMakeRange(0, string.length)];
+
+    if (![_indicatorMode isEqualToString:@"fill"] || _indicatorWordIndex < 0 || !_indicatorColor) {
+        return;
+    }
+
+    for (NSDictionary *wordInfo in _wordRanges) {
+        if ([wordInfo[@"index"] integerValue] > _indicatorWordIndex) {
+            break;
+        }
+        NSRange wordRange = [wordInfo[@"range"] rangeValue];
+        if (NSMaxRange(wordRange) > string.length) {
+            break;
+        }
+        [string addAttribute:NSForegroundColorAttributeName
+                       value:_indicatorColor
+                       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.
+- (void)updateWordColors
+{
+    @try {
+        NSTextStorage *storage = _textView.textStorage;
+        if (storage.length == 0) {
+            return;
+        }
+
+        [storage beginEditing];
+        [self applyWordColorsToString:storage];
+        [storage endEditing];
+    } @catch (NSException *exception) {
+        NSLog(@"[AdvancedTextView] Exception in updateWordColors: %@", exception.reason);
+    }
+}
+
 - (void)drawHighlightedBackgroundsInTextView:(UITextView *)textView
 {
     if (!textView.layoutManager || !textView.textContainer) {

package/package.json

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