react-native-highlight-text-view 0.1.27 → 0.1.29

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

@@ -206,35 +206,40 @@ class HighlightTextView : AppCompatEditText {
     charPaddingBottom = bottom
     updateViewPadding()
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setCharPaddingLeft(padding: Float) {
     charPaddingLeft = padding
     updateViewPadding()
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setCharPaddingRight(padding: Float) {
     charPaddingRight = padding
     updateViewPadding()
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setCharPaddingTop(padding: Float) {
     charPaddingTop = padding
     updateViewPadding()
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setCharPaddingBottom(padding: Float) {
     charPaddingBottom = padding
     updateViewPadding()
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   private fun updateViewPadding() {
@@ -315,7 +320,10 @@ class HighlightTextView : AppCompatEditText {
 
     this.typeface = typeface
     applyLineHeightAndSpacing()
-    invalidate()
+    // Request layout to ensure proper measurement with new font before redrawing
+    requestLayout()
+    // Post invalidate to ensure layout is complete before drawing
+    post { invalidate() }
   }
 
   fun setVerticalAlign(align: String?) {
@@ -359,7 +367,8 @@ class HighlightTextView : AppCompatEditText {
   fun setCustomLineHeight(lineHeight: Float) {
     customLineHeight = lineHeight
     applyLineHeightAndSpacing()
-    invalidate()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setLetterSpacingProp(points: Float) {
@@ -372,6 +381,8 @@ class HighlightTextView : AppCompatEditText {
     super.setTextSize(unit, size)
     applyLineHeightAndSpacing()
     applyLetterSpacing()
+    requestLayout()
+    post { invalidate() }
   }
 
   fun setTextProp(newText: String) {

package/ios/HighlightTextView.mm

@@ -34,12 +34,28 @@ using namespace facebook::react;
                         continue;
                     }
                     
-                    CGRect boundingRect = [self boundingRectForGlyphRange:glyphRange inTextContainer:textContainer];
+                    // Get the glyph's position and line metrics
+                    CGPoint glyphLocation = [self locationForGlyphAtIndex:glyphRange.location];
+                    NSUInteger lineIndex = [self lineFragmentRectForGlyphAtIndex:glyphRange.location effectiveRange:NULL].origin.y;
+                    CGRect lineRect = [self lineFragmentRectForGlyphAtIndex:glyphRange.location effectiveRange:NULL];
                     
-                    // Ensure the glyph has reasonable dimensions and isn't a line fragment artifact
-                    // Also check that it's not spanning the full container width (which indicates line wrapping issues)
-                    if (boundingRect.size.width > 1.0 && boundingRect.size.height > 1.0 && 
-                        boundingRect.size.width < (textContainer.size.width * 0.8)) {
+                    // Calculate precise character width using the font's attributes
+                    // This avoids the extra spacing that boundingRectForGlyphRange includes with lineHeight
+                    NSDictionary *attributes = [textStorage attributesAtIndex:i effectiveRange:NULL];
+                    UIFont *font = attributes[NSFontAttributeName];
+                    NSString *charString = [textStorage.string substringWithRange:NSMakeRange(i, 1)];
+                    CGSize charSize = [charString sizeWithAttributes:@{NSFontAttributeName: font}];
+                    
+                    // Build the character rect with precise width
+                    CGRect boundingRect = CGRectMake(
+                        glyphLocation.x,
+                        lineRect.origin.y,
+                        charSize.width,
+                        lineRect.size.height
+                    );
+                    
+                    // Ensure the glyph has reasonable dimensions
+                    if (boundingRect.size.width > 1.0 && boundingRect.size.height > 1.0) {
                         
                         // Apply background insets first (shrinks from line box)
                         boundingRect.origin.y += self.backgroundInsetTop;
@@ -439,7 +455,6 @@ using namespace facebook::react;
         if (newViewProps.autoFocus && _textView.isEditable) {
             dispatch_async(dispatch_get_main_queue(), ^{
                 [self->_textView becomeFirstResponder];
-                // Move cursor to the end of the text
                 NSUInteger textLength = self->_textView.text.length;
                 self->_textView.selectedRange = NSMakeRange(textLength, 0);
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-highlight-text-view",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "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",
@@ -18,7 +18,7 @@
     "android",
     "ios",
     "cpp",
-    "*.podspec",
+    "*.podspec",  
     "react-native.config.js",
     "!ios/build",
     "!android/build",