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

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

@@ -4,6 +4,7 @@ import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.RectF
 import android.graphics.Typeface
 import android.text.Editable
@@ -42,6 +43,7 @@ class HighlightTextView : AppCompatEditText {
 
   // Line height control
   private var customLineHeight: Float = 0f
+  private var customLineSpacing: Float = 0f
 
   // Font + alignment state
   private var currentFontFamily: String? = null
@@ -58,6 +60,8 @@ class HighlightTextView : AppCompatEditText {
     style = Paint.Style.FILL
   }
   private val backgroundRect = RectF()
+  private val backgroundPath = Path()
+  private val radii = FloatArray(8)
 
   var onTextChangeListener: ((String) -> Unit)? = null
 
@@ -88,6 +92,7 @@ class HighlightTextView : AppCompatEditText {
     maxLines = Int.MAX_VALUE
     isSingleLine = false
     setHorizontallyScrolling(false)
+    includeFontPadding = false
 
     applyLineHeightAndSpacing()
 
@@ -148,6 +153,37 @@ class HighlightTextView : AppCompatEditText {
       val lineStart = layout.getLineStart(line)
       val lineEnd = layout.getLineEnd(line)
 
+      // Determine adjacency for selective rounding
+      val hasLeftNeighbor = if (i > 0) {
+        val prevCh = text[i - 1]
+        val sameLine = layout.getLineForOffset(i - 1) == line
+        sameLine && prevCh != '\n' && prevCh != '\t'
+      } else false
+
+      val hasRightNeighbor = if (i < length - 1) {
+        val nextCh = text[i + 1]
+        val sameLine = layout.getLineForOffset(i + 1) == line
+        
+        if (!sameLine || nextCh == '\n' || nextCh == '\t') {
+          false
+        } else if (nextCh == ' ') {
+          // Lookahead: If next is space, check if any visible char follows on same line
+          var hasVisibleAfter = false
+          for (k in i + 2 until length) {
+            if (layout.getLineForOffset(k) != line) break
+            val c = text[k]
+            if (c == '\n' || c == '\t') break
+            if (c != ' ') {
+              hasVisibleAfter = true
+              break
+            }
+          }
+          hasVisibleAfter
+        } else {
+          true
+        }
+      } else false
+
       // Horizontal bounds based on layout positions
       val xStart = layout.getPrimaryHorizontal(i)
       val isLastCharInLine = i == lineEnd - 1
@@ -179,13 +215,97 @@ class HighlightTextView : AppCompatEditText {
       top -= charPaddingTop
       bottom += charPaddingBottom
 
+      if (customLineSpacing < 0f) {
+        val originalLineTop = layout.getLineTop(line).toFloat()
+        val originalLineBottom = layout.getLineBottom(line).toFloat()
+        
+        if (line > 0 && top < originalLineTop) {
+          val prevLineBottom = layout.getLineBottom(line - 1).toFloat()
+          if (top < prevLineBottom) {
+            top = prevLineBottom
+          }
+        }
+        
+        if (line < layout.lineCount - 1 && bottom > originalLineBottom) {
+          val nextLineTop = layout.getLineTop(line + 1).toFloat()
+          if (bottom > nextLineTop) {
+            bottom = nextLineTop
+          }
+        }
+      }
+
       if (right <= left || bottom <= top) continue
 
       backgroundRect.set(left, top, right, bottom)
-      canvas.drawRoundRect(backgroundRect, radius, radius, backgroundPaint)
+      
+      // Detect paragraph boundaries (empty lines above/below)
+      val isFirstLineOfParagraph = line == 0 || isLineEmpty(text, layout, line - 1)
+      val isLastLineOfParagraph = line == layout.lineCount - 1 || isLineEmpty(text, layout, line + 1)
+      
+      var tl = 0f
+      var tr = 0f
+      var br = 0f
+      var bl = 0f
+
+      // Left Edge Logic
+      if (!hasLeftNeighbor) {
+        // Top-Left: Round if first line of paragraph
+        tl = if (isFirstLineOfParagraph) radius else 0f
+        // Bottom-Left: Round if last line of paragraph
+        bl = if (isLastLineOfParagraph) radius else 0f
+      }
+
+      // Right Edge Logic
+      if (!hasRightNeighbor) {
+        val currentLineWidth = layout.getLineMax(line)
+
+        // Top-Right
+        if (isFirstLineOfParagraph) {
+          tr = radius
+        } else {
+          val prevLineWidth = layout.getLineMax(line - 1)
+          // Round Top-Right if we stick out further than the line above
+          tr = if (currentLineWidth > prevLineWidth) radius else 0f
+        }
+
+        // Bottom-Right
+        if (isLastLineOfParagraph) {
+          br = radius
+        } else {
+          val nextLineWidth = layout.getLineMax(line + 1)
+          // Round Bottom-Right if we overhang the line below
+          br = if (currentLineWidth > nextLineWidth) radius else 0f
+        }
+      }
+
+      // Arrays: Top-Left x,y; Top-Right x,y; Bottom-Right x,y; Bottom-Left x,y
+      radii[0] = tl; radii[1] = tl
+      radii[2] = tr; radii[3] = tr
+      radii[4] = br; radii[5] = br
+      radii[6] = bl; radii[7] = bl
+
+      backgroundPath.reset()
+      backgroundPath.addRoundRect(backgroundRect, radii, Path.Direction.CW)
+      canvas.drawPath(backgroundPath, backgroundPaint)
     }
   }
 
+  private fun isLineEmpty(text: CharSequence, layout: android.text.Layout, line: Int): Boolean {
+    if (line < 0 || line >= layout.lineCount) return false
+    
+    val lineStart = layout.getLineStart(line)
+    val lineEnd = layout.getLineEnd(line)
+    
+    // Check if line contains only whitespace/newlines
+    for (i in lineStart until lineEnd) {
+      val ch = text[i]
+      if (ch != '\n' && ch != '\t' && ch != ' ') {
+        return false
+      }
+    }
+    return true
+  }
+
   // --- Public API used from the ViewManager ------------------------------------
 
   fun setCharacterBackgroundColor(color: Int) {
@@ -371,6 +491,13 @@ class HighlightTextView : AppCompatEditText {
     post { invalidate() }
   }
 
+  fun setCustomLineSpacing(spacing: Float) {
+    customLineSpacing = spacing
+    applyLineHeightAndSpacing()
+    requestLayout()
+    post { invalidate() }
+  }
+
   fun setLetterSpacingProp(points: Float) {
     letterSpacingPoints = points
     applyLetterSpacing()
@@ -415,15 +542,24 @@ class HighlightTextView : AppCompatEditText {
   // --- Layout helpers ----------------------------------------------------------
 
   private fun applyLineHeightAndSpacing() {
+    val metrics = resources.displayMetrics
+    
     if (customLineHeight > 0f) {
       // customLineHeight comes from JS as "points"; convert to px using scaledDensity
-      val metrics = resources.displayMetrics
       val desiredLineHeightPx = customLineHeight * metrics.scaledDensity
       val textHeightPx = textSize
       if (textHeightPx > 0f) {
         val multiplier = desiredLineHeightPx / textHeightPx
-        setLineSpacing(0f, multiplier)
+        val extraSpacing = if (customLineSpacing != 0f) {
+          customLineSpacing * metrics.scaledDensity
+        } else {
+          0f
+        }
+        setLineSpacing(extraSpacing, multiplier)
       }
+    } else if (customLineSpacing != 0f) {
+      val extraSpacing = customLineSpacing * metrics.scaledDensity
+      setLineSpacing(extraSpacing, 1.0f)
     } else {
       // Default: add extra spacing equal to vertical padding so backgrounds don't collide
       val extraSpacing = charPaddingTop + charPaddingBottom

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

@@ -183,6 +183,13 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
     }
   }
 
+  @ReactProp(name = "lineSpacing")
+  override fun setLineSpacing(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { spacing ->
+      view?.setCustomLineSpacing(spacing)
+    }
+  }
+
   @ReactProp(name = "highlightBorderRadius")
   override fun setHighlightBorderRadius(view: HighlightTextView?, value: String?) {
     value?.toFloatOrNull()?.let { radius ->

package/ios/HighlightTextView.mm

@@ -28,25 +28,20 @@ using namespace facebook::react;
                 NSRange glyphRange = [self glyphRangeForCharacterRange:charRange actualCharacterRange:NULL];
                 
                 if (glyphRange.length > 0) {
-                    // Get the actual character to ensure it's not a whitespace or control character
                     unichar character = [textStorage.string characterAtIndex:i];
                     if (character == '\n' || character == '\r' || character == ' ' || character == '\t') {
                         continue;
                     }
                     
-                    // 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];
                     
-                    // 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,
@@ -54,10 +49,8 @@ using namespace facebook::react;
                         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;
                         boundingRect.size.height -= (self.backgroundInsetTop + self.backgroundInsetBottom);
                         boundingRect.origin.x += self.backgroundInsetLeft;
@@ -288,9 +281,13 @@ using namespace facebook::react;
             _currentVerticalAlignment = verticalPart;
             [self updateVerticalAlignment:verticalPart];
         } else if (!verticalPart && horizontalPart) {
-            // Default vertical centering for horizontal-only alignments
-            _currentVerticalAlignment = nil;
-            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
+            // Preserve existing vertical alignment when only horizontal alignment is specified
+            if (_currentVerticalAlignment) {
+                [self updateVerticalAlignment:_currentVerticalAlignment];
+            } else {
+                // Default vertical centering only if no vertical alignment was previously set
+                _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
+            }
         }
         
         [self applyCharacterBackgrounds]; // Reapply to update alignment

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -50,6 +50,7 @@ export interface HighlightTextViewProps extends ViewProps {
   /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
   letterSpacing?: string;
   lineHeight?: string;
+  lineSpacing?: string;
   highlightBorderRadius?: string;
   padding?: string;
   paddingLeft?: string;

package/lib/typescript/src/HighlightTextViewNativeComponent.d.ts

@@ -32,6 +32,7 @@ export interface HighlightTextViewProps extends ViewProps {
     /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
     letterSpacing?: string;
     lineHeight?: string;
+    lineSpacing?: string;
     highlightBorderRadius?: string;
     padding?: string;
     paddingLeft?: string;

package/lib/typescript/src/HighlightTextViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/HighlightTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEtF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,GACZ,UAAU,GACV,KAAK,GACL,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oGAAoG;IACpG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACpD;;AAED,wBAEE"}
+{"version":3,"file":"HighlightTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/HighlightTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAEtF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,SAAS,GACT,YAAY,GACZ,UAAU,GACV,KAAK,GACL,QAAQ,GACR,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oGAAoG;IACpG,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iFAAiF;IACjF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;CACpD;;AAED,wBAEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-highlight-text-view",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "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",

package/src/HighlightTextViewNativeComponent.ts

@@ -50,6 +50,7 @@ export interface HighlightTextViewProps extends ViewProps {
   /** Additional space between characters, in layout points (matches React Native's letterSpacing). */
   letterSpacing?: string;
   lineHeight?: string;
+  lineSpacing?: string;
   highlightBorderRadius?: string;
   padding?: string;
   paddingLeft?: string;