react-native-highlight-text-view 0.1.18 → 0.1.20

package/README.md

@@ -128,6 +128,46 @@ To automatically open the keyboard when the component mounts, use the `autoFocus
 
 This eliminates the need for double-tapping to open the keyboard - it will open on first render.
 
+### Dynamic Font Family Changes
+
+**IMPORTANT**: When changing `fontFamily` dynamically at runtime (especially to fonts with different ascender/descender values like Eczar, Georgia, etc.), you must use the `key` prop to force React to remount the component. This ensures the native layout recalculates with the new font metrics.
+
+**Why this is needed**: Fonts like Eczar have significantly larger vertical metrics than system fonts. Without remounting, the highlight background may appear cut off at the bottom or lose corner radius.
+
+**Solution**: Pass the `fontFamily` as the `key` prop:
+
+```jsx
+const [fontFamily, setFontFamily] = useState('system');
+
+return (
+  <HighlightTextView
+    key={fontFamily} 
+    fontFamily={fontFamily}
+    fontSize="32"
+    color="#00A4A3"
+    textColor="#FFFFFF"
+    paddingLeft="8"
+    paddingRight="8"
+    paddingTop="4"
+    paddingBottom="4"
+    backgroundInsetTop="6" 
+    backgroundInsetBottom="6"
+    highlightBorderRadius="8"
+    text="Beautiful Eczar Font"
+    style={{ width: '100%', height: 150 }}
+  />
+);
+```
+
+**What happens**:
+
+- Font changes → `key` changes → React unmounts old component and mounts new one
+- New mount → Native component calculates fresh layout with correct font metrics
+- Perfect rendering → Background highlights render correctly without cutting
+
+**Without key prop**: Background may cut off, corner radius may disappear  
+**With key prop**: Perfect rendering every time ✅
+
 ## Contributing
 
 - [Development workflow](CONTRIBUTING.md#development-workflow)

package/android/src/main/java/com/highlighttext/HighlightTextView.kt

@@ -96,10 +96,11 @@ class RoundedBackgroundSpan(
       insetTop + insetHeight + paddingBottom
     )
     
-    // Draw background with selective corner rounding (respects line wraps)
+    // Draw background with selective corner rounding (matches iOS behavior)
+    // iOS draws per-character backgrounds with full corner radius, so we do the same
     when {
       isReallyFirst && isReallyLast -> {
-        // Single character or isolated group - round all corners
+        // Single character or isolated group - round all corners (matches iOS)
         canvas.drawRoundRect(rect, cornerRadius, cornerRadius, bgPaint)
       }
       isReallyFirst -> {
@@ -109,8 +110,8 @@ class RoundedBackgroundSpan(
           rect,
           floatArrayOf(
             cornerRadius, cornerRadius, // top-left
-            0f, 0f,                      // top-right
-            0f, 0f,                      // bottom-right
+            0f, 0f,                      // top-right (flat for connection)
+            0f, 0f,                      // bottom-right (flat for connection)
             cornerRadius, cornerRadius   // bottom-left
           ),
           android.graphics.Path.Direction.CW
@@ -123,17 +124,17 @@ class RoundedBackgroundSpan(
         path.addRoundRect(
           rect,
           floatArrayOf(
-            0f, 0f,                      // top-left
+            0f, 0f,                      // top-left (flat for connection)
             cornerRadius, cornerRadius,  // top-right
             cornerRadius, cornerRadius,  // bottom-right
-            0f, 0f                       // bottom-left
+            0f, 0f                       // bottom-left (flat for connection)
           ),
           android.graphics.Path.Direction.CW
         )
         canvas.drawPath(path, bgPaint)
       }
       else -> {
-        // Middle character - no rounded corners, just rectangle
+        // Middle character - no rounded corners for seamless connection
         canvas.drawRect(rect, bgPaint)
       }
     }
@@ -206,13 +207,6 @@ class HighlightTextView : AppCompatEditText {
         }
       }
     })
-    
-    // Set cursor at end when view gains focus
-    setOnFocusChangeListener { _, hasFocus ->
-      if (hasFocus) {
-        text?.length?.let { setSelection(it) }
-      }
-    }
   }
 
   fun setCharacterBackgroundColor(color: Int) {
@@ -315,41 +309,8 @@ class HighlightTextView : AppCompatEditText {
       Typeface.create(baseTypeface, style)
     }
     
-    // Save current text to force complete rebuild
-    val currentText = text?.toString() ?: ""
-    val currentSelection = selectionStart
-    
     this.typeface = typeface
-    
-    // Force complete text rebuild with new font metrics
-    // This is crucial for fonts with different ascender/descender values like Eczar
-    post {
-      // Clear text first to force layout recalculation
-      isUpdatingText = true
-      setText("")
-      
-      // Force measure and layout with empty text
-      measure(
-        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
-      )
-      
-      // Restore text - this triggers complete rebuild with new font metrics
-      setText(currentText)
-      
-      // Reapply all character backgrounds with new font metrics
-      applyCharacterBackgrounds()
-      
-      // Restore cursor position
-      val safePosition = currentSelection.coerceIn(0, currentText.length)
-      setSelection(safePosition)
-      
-      isUpdatingText = false
-      
-      // Force complete layout recalculation
-      requestLayout()
-      invalidate()
-    }
+    applyCharacterBackgrounds()
   }
   
   fun setVerticalAlign(align: String?) {
@@ -407,8 +368,6 @@ class HighlightTextView : AppCompatEditText {
     if (autoFocus && isFocusable && isFocusableInTouchMode) {
       post {
         requestFocus()
-        // Set cursor at the end of text
-        text?.length?.let { setSelection(it) }
         val imm = context.getSystemService(android.content.Context.INPUT_METHOD_SERVICE) as? android.view.inputmethod.InputMethodManager
         imm?.showSoftInput(this, android.view.inputmethod.InputMethodManager.SHOW_IMPLICIT)
       }
@@ -419,9 +378,6 @@ class HighlightTextView : AppCompatEditText {
     val text = text?.toString() ?: return
     if (text.isEmpty()) return
     
-    // Save current cursor position
-    val currentSelection = selectionStart
-    
     val spannable = SpannableString(text)
     
     // Apply line height if specified
@@ -473,11 +429,16 @@ class HighlightTextView : AppCompatEditText {
       }
     }
     
+    // Save current selection to prevent cursor jumping (smooth editing)
+    val currentSelection = selectionStart
+    
     isUpdatingText = true
     setText(spannable)
-    // Restore cursor position, or set to end if position is invalid
-    val safePosition = currentSelection.coerceIn(0, text.length)
-    setSelection(safePosition)
+    
+    // Restore cursor position if valid (prevents jerking during editing)
+    if (currentSelection >= 0 && currentSelection <= text.length) {
+      setSelection(currentSelection)
+    }
     isUpdatingText = false
     
     // Detect line wraps after layout is ready
@@ -501,13 +462,19 @@ class HighlightTextView : AppCompatEditText {
         
         // Check for manual line break (\n) before this character
         val hasNewlineBefore = spanStart > 0 && textStr[spanStart - 1] == '\n'
-        // Check for manual line break (\n) after this character
+        // Check for manual line break (\n) after this character  
         val hasNewlineAfter = spanEnd < textStr.length && textStr[spanEnd] == '\n'
         
+        // Check if this is the last line of text
+        val isLastLine = line == layout.lineCount - 1
+        
         // Check if this char is at start of visual line (wrapped OR after \n)
         val isAtLineStart = (spanStart == lineStart && !span.isFirstInGroup) || hasNewlineBefore
-        // Check if this char is at end of visual line (wrapped OR before \n)
-        val isAtLineEnd = (spanEnd == lineEnd && !span.isLastInGroup) || hasNewlineAfter
+        
+        // Check if this char is at end of visual line (wrapped OR before \n OR end of last line)
+        // CRITICAL: Ensure last character of entire text gets rounded corners
+        val isAtLineEnd = (spanEnd == lineEnd && !span.isLastInGroup) || hasNewlineAfter || 
+                          (isLastLine && spanEnd == lineEnd)
         
         if (isAtLineStart || isAtLineEnd) {
           // Create new span with line boundary flags

package/ios/HighlightTextView.mm

@@ -430,9 +430,6 @@ using namespace facebook::react;
         if (newViewProps.autoFocus && _textView.isEditable) {
             dispatch_async(dispatch_get_main_queue(), ^{
                 [self->_textView becomeFirstResponder];
-                // Set cursor at the end of text
-                NSUInteger textLength = self->_textView.text.length;
-                self->_textView.selectedRange = NSMakeRange(textLength, 0);
             });
         }
     }
@@ -471,13 +468,6 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     }
 }
 
-- (void)textViewDidBeginEditing:(UITextView *)textView
-{
-    // Set cursor at the end when editing begins
-    NSUInteger textLength = textView.text.length;
-    textView.selectedRange = NSMakeRange(textLength, 0);
-}
-
 - (void)updateFont
 {
     CGFloat fontSize = _fontSize > 0 ? _fontSize : 32.0;
@@ -529,32 +519,7 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     }
     
     _textView.font = newFont;
-    
-    // Save current text to force complete rebuild
-    NSString *currentText = [_textView.text copy];
-    
-    // Clear text storage to force complete recalculation
-    [_textView.textStorage beginEditing];
-    [_textView.textStorage replaceCharactersInRange:NSMakeRange(0, _textView.textStorage.length) withString:@""];
-    [_textView.textStorage endEditing];
-    
-    // Force layout manager to invalidate everything
-    [_layoutManager invalidateLayoutForCharacterRange:NSMakeRange(0, 0) actualCharacterRange:NULL];
-    [_layoutManager invalidateDisplayForCharacterRange:NSMakeRange(0, 0)];
-    
-    // Restore text and rebuild with new font
-    _textView.text = currentText;
-    
-    // Reapply character backgrounds with new font metrics - this rebuilds attributed text
     [self applyCharacterBackgrounds];
-    
-    // Force complete layout recalculation
-    [_textView.layoutManager ensureLayoutForTextContainer:_textView.textContainer];
-    
-    // Force the text view to redraw
-    [_textView setNeedsDisplay];
-    [_textView setNeedsLayout];
-    [_textView layoutIfNeeded];
 }
 
 - (void)applyCharacterBackgrounds
@@ -564,9 +529,6 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
         return;
     }
     
-    // Save current cursor position
-    NSRange currentSelection = _textView.selectedRange;
-    
     NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:text];
     UIColor *bgColor = [self hexStringToColor:_characterBackgroundColor];
     
@@ -615,12 +577,6 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     }
     
     _textView.attributedText = attributedString;
-    
-    // Restore cursor position if valid
-    if (currentSelection.location <= text.length) {
-        _textView.selectedRange = currentSelection;
-    }
-    
     [_textView setNeedsDisplay];
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-highlight-text-view",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "A native text input for React Native that supports inline text highlighting",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",