react-native-advanced-text 0.2.12 → 0.2.14

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

@@ -12,9 +12,11 @@ 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
+import android.view.Gravity
 import android.view.Menu
 import android.view.MenuItem
 import android.view.View
@@ -40,7 +42,8 @@ class AdvancedTextView : TextView {
     private var textColor: String = "#000000"
     private var fontSize: Float = 16f
     private var fontWeight: String = "normal"
-    private var textAlign: String = "left"
+    // "" = unset: natural alignment (start of the text's own direction).
+    private var textAlign: String = ""
     private var fontFamily: String = "sans-serif"
     private var lineHeightMultiplier: Float = 1.0f
     // Value from JS, in dp/points (0 = unset). Converted to em for TextView.
@@ -51,6 +54,9 @@ 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()
 
     constructor(context: Context?) : super(context) { init() }
     constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { init() }
@@ -131,8 +137,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) {
@@ -150,10 +158,24 @@ class AdvancedTextView : TextView {
     fun setAdvancedTextAlign(align: String) {
         if (textAlign == align) return
         textAlign = align
-        when (align) {
-            "left" -> textAlignment = View.TEXT_ALIGNMENT_TEXT_START
+        applyTextAlign()
+    }
+
+    // "left"/"right" are absolute edges, as on iOS. TEXT_START/TEXT_END follow
+    // the paragraph's direction, so RTL text (Arabic) with "right" would land
+    // on the left. Only TEXT_ALIGNMENT_GRAVITY with Gravity.LEFT/RIGHT is absolute.
+    private fun applyTextAlign() {
+        val vertical = gravity and Gravity.VERTICAL_GRAVITY_MASK
+        when (textAlign) {
+            "left" -> {
+                gravity = vertical or Gravity.LEFT
+                textAlignment = View.TEXT_ALIGNMENT_GRAVITY
+            }
+            "right" -> {
+                gravity = vertical or Gravity.RIGHT
+                textAlignment = View.TEXT_ALIGNMENT_GRAVITY
+            }
             "center" -> textAlignment = View.TEXT_ALIGNMENT_CENTER
-            "right" -> textAlignment = View.TEXT_ALIGNMENT_TEXT_END
             else -> textAlignment = View.TEXT_ALIGNMENT_TEXT_START
         }
     }
@@ -186,7 +208,7 @@ class AdvancedTextView : TextView {
         if (indicatorWordIndex == index) return
         indicatorWordIndex = index
         if (indicatorMode == "fill") {
-            updateTextWithHighlights()
+            updateWordColors()
         } else {
             invalidate()
         }
@@ -196,7 +218,7 @@ class AdvancedTextView : TextView {
         if (indicatorColor == color) return
         indicatorColor = color
         if (indicatorMode == "fill") {
-            updateTextWithHighlights()
+            updateWordColors()
         } else {
             invalidate()
         }
@@ -205,7 +227,7 @@ class AdvancedTextView : TextView {
     fun setIndicatorMode(mode: String) {
         if (indicatorMode == mode) return
         indicatorMode = mode
-        updateTextWithHighlights()
+        updateWordColors()
         invalidate()
     }
 
@@ -252,32 +274,20 @@ 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)
 
-         textAlignment = when (textAlign) {
-            "left" -> View.TEXT_ALIGNMENT_TEXT_START
-            "center" -> View.TEXT_ALIGNMENT_CENTER
-            "right" -> View.TEXT_ALIGNMENT_TEXT_END
-            else -> View.TEXT_ALIGNMENT_TEXT_START
-        }
+        applyTextAlign()
 
         setTextSize(fontSize)
 
@@ -311,6 +321,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
@@ -437,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) {
@@ -446,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.12",
+  "version": "0.2.14",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",