react-native-highlight-text-view 0.1.30 → 0.1.32

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
 
@@ -80,7 +84,7 @@ class HighlightTextView : AppCompatEditText {
   private fun init() {
     setBackgroundColor(Color.TRANSPARENT)
     setTextSize(TypedValue.COMPLEX_UNIT_SP, 32f)
-    gravity = Gravity.CENTER
+    gravity = Gravity.START or Gravity.CENTER_VERTICAL
     setPadding(20, 20, 20, 20)
     textColorValue = currentTextColor
 
@@ -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,189 @@ 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)
+      
+      // Detect text alignment from view's gravity
+      val horizontalGravity = gravity and Gravity.HORIZONTAL_GRAVITY_MASK
+      val isLeftAligned = horizontalGravity == Gravity.START || horizontalGravity == Gravity.LEFT
+      val isRightAligned = horizontalGravity == Gravity.END || horizontalGravity == Gravity.RIGHT
+      val isCenterAligned = horizontalGravity == Gravity.CENTER_HORIZONTAL
+      
+      var tl = 0f
+      var tr = 0f
+      var br = 0f
+      var bl = 0f
+
+      when {
+        isLeftAligned -> {
+          // LEFT ALIGNMENT (default behavior)
+          // 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
+            }
+          }
+        }
+        
+        isRightAligned -> {
+          // RIGHT ALIGNMENT (mirror of left alignment)
+          // Right Edge Logic
+          if (!hasRightNeighbor) {
+            // Top-Right: Round if first line of paragraph
+            tr = if (isFirstLineOfParagraph) radius else 0f
+            // Bottom-Right: Round if last line of paragraph
+            br = if (isLastLineOfParagraph) radius else 0f
+          }
+
+          // Left Edge Logic
+          if (!hasLeftNeighbor) {
+            val currentLineWidth = layout.getLineMax(line)
+
+            // Top-Left
+            if (isFirstLineOfParagraph) {
+              tl = radius
+            } else {
+              val prevLineWidth = layout.getLineMax(line - 1)
+              // Round Top-Left if we stick out further than the line above
+              tl = if (currentLineWidth > prevLineWidth) radius else 0f
+            }
+
+            // Bottom-Left
+            if (isLastLineOfParagraph) {
+              bl = radius
+            } else {
+              val nextLineWidth = layout.getLineMax(line + 1)
+              // Round Bottom-Left if we overhang the line below
+              bl = if (currentLineWidth > nextLineWidth) radius else 0f
+            }
+          }
+        }
+        
+        isCenterAligned -> {
+          // CENTER ALIGNMENT
+          val currentLineWidth = layout.getLineMax(line)
+          
+          // Left Edge Logic
+          if (!hasLeftNeighbor) {
+            // Top-Left
+            if (isFirstLineOfParagraph) {
+              tl = radius
+            } else {
+              val prevLineWidth = layout.getLineMax(line - 1)
+              // Round Top-Left if we stick out further than the line above
+              tl = if (currentLineWidth > prevLineWidth) radius else 0f
+            }
+
+            // Bottom-Left
+            if (isLastLineOfParagraph) {
+              bl = radius
+            } else {
+              val nextLineWidth = layout.getLineMax(line + 1)
+              // Round Bottom-Left if we overhang the line below
+              bl = if (currentLineWidth > nextLineWidth) radius else 0f
+            }
+          }
+
+          // Right Edge Logic
+          if (!hasRightNeighbor) {
+            // 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 +583,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 +634,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/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.30",
+  "version": "0.1.32",
   "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",

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;