react-native-highlight-text-view 0.1.6 → 0.1.7

package/README.md

@@ -50,15 +50,42 @@ export default function App() {
 | `verticalAlign` | `'top' \| 'center' \| 'middle' \| 'bottom'` | - | Vertical alignment (iOS only). Alternative to using combined `textAlign` values |
 | `fontFamily` | `string` | - | Font family name |
 | `fontSize` | `string` | `32` | Font size in points |
-| `padding` | `string` | `4` | Padding around each character highlight |
+| `lineHeight` | `string` | - | Line height override |
+| `highlightBorderRadius` | `string` | `4` | Border radius for the highlight background |
+| `padding` | `string` | `4` | Padding around each character highlight (expands background outward) |
 | `paddingLeft` | `string` | - | Left padding for character highlight |
 | `paddingRight` | `string` | - | Right padding for character highlight |
 | `paddingTop` | `string` | - | Top padding for character highlight |
 | `paddingBottom` | `string` | - | Bottom padding for character highlight |
+| `backgroundInsetTop` | `string` | `0` | Shrinks background from top (useful for fonts with large vertical metrics) |
+| `backgroundInsetBottom` | `string` | `0` | Shrinks background from bottom (useful for fonts with large vertical metrics) |
+| `backgroundInsetLeft` | `string` | `0` | Shrinks background from left |
+| `backgroundInsetRight` | `string` | `0` | Shrinks background from right |
 | `text` | `string` | - | Controlled text value |
 | `isEditable` | `boolean` | `true` | Whether the text is editable |
 | `onChange` | `(event: { nativeEvent: { text: string } }) => void` | - | Callback fired when text changes |
 
+### Understanding Padding vs Background Insets
+
+- **Padding props** (`paddingTop`, `paddingBottom`, etc.): Expand the background **outward** from the text, adding extra colored area around glyphs.
+- **Background inset props** (`backgroundInsetTop`, `backgroundInsetBottom`, etc.): Shrink the background **inward** from the font's line box, creating tighter wrapping around actual glyphs.
+
+**Use case for background insets:** Some fonts (like Eczar, Georgia, etc.) have large built-in vertical metrics (ascender/descender), making highlights appear too tall. Use `backgroundInsetTop` and `backgroundInsetBottom` to create a tighter fit around the visible glyphs.
+
+**Example with large-metric font:**
+```jsx
+<HighlightTextView
+  fontFamily="Eczar"
+  fontSize="32"
+  paddingLeft="8"
+  paddingRight="8"
+  paddingTop="4"
+  paddingBottom="4"
+  backgroundInsetTop="6"     
+  backgroundInsetBottom="6"   
+  text="Tight Background"
+/>
+```
 
 **Note:** Vertical alignment is currently supported on iOS only. On Android, text will use default vertical positioning.
 

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

@@ -22,6 +22,10 @@ class RoundedBackgroundSpan(
   private val paddingRight: Float,
   private val paddingTop: Float,
   private val paddingBottom: Float,
+  private val backgroundInsetTop: Float,
+  private val backgroundInsetBottom: Float,
+  private val backgroundInsetLeft: Float,
+  private val backgroundInsetRight: Float,
   private val cornerRadius: Float,
   private val isFirstInGroup: Boolean = false,
   private val isLastInGroup: Boolean = false
@@ -61,7 +65,7 @@ class RoundedBackgroundSpan(
     
     val width = paint.measureText(text, start, end)
     
-    // Use font metrics for consistent height instead of character bounds
+    // Use font metrics for consistent height (matches iOS behavior)
     val fontMetrics = paint.fontMetrics
     val textHeight = fontMetrics.descent - fontMetrics.ascent
     val textTop = y + fontMetrics.ascent
@@ -70,17 +74,21 @@ class RoundedBackgroundSpan(
     val leftPad = if (isFirstInGroup) paddingLeft else 0f
     val rightPad = if (isLastInGroup) paddingRight else 0f
     
-    // Extend background slightly to overlap and eliminate gaps
-    val overlapExtension = 1f
+    // Extend background to overlap and eliminate gaps between characters
+    val overlapExtension = 2f
     val leftExtension = if (!isFirstInGroup) overlapExtension else 0f
     val rightExtension = if (!isLastInGroup) overlapExtension else 0f
     
-    // Calculate proper bounds with padding using consistent font metrics
+    // Apply background insets first (shrinks from line box)
+    val insetTop = textTop + backgroundInsetTop
+    val insetHeight = textHeight - (backgroundInsetTop + backgroundInsetBottom)
+    
+    // Calculate proper bounds with insets then padding
     val rect = RectF(
-      x - leftExtension,
-      textTop - paddingTop,
-      x + width + leftPad + rightPad + rightExtension,
-      textTop + textHeight + paddingBottom
+      x - leftExtension + backgroundInsetLeft,
+      insetTop - paddingTop,
+      x + width + leftPad + rightPad + rightExtension - backgroundInsetRight,
+      insetTop + insetHeight + paddingBottom
     )
     
     // Draw background with selective corner rounding
@@ -142,6 +150,10 @@ class HighlightTextView : AppCompatEditText {
   private var charPaddingRight: Float = 8f
   private var charPaddingTop: Float = 4f
   private var charPaddingBottom: Float = 4f
+  private var backgroundInsetTop: Float = 0f
+  private var backgroundInsetBottom: Float = 0f
+  private var backgroundInsetLeft: Float = 0f
+  private var backgroundInsetRight: Float = 0f
   private var isUpdatingText: Boolean = false
   
   var onTextChangeListener: ((String) -> Unit)? = null
@@ -224,6 +236,31 @@ class HighlightTextView : AppCompatEditText {
     charPaddingBottom = padding
     applyCharacterBackgrounds()
   }
+  
+  fun setCornerRadius(radius: Float) {
+    cornerRadius = radius
+    applyCharacterBackgrounds()
+  }
+  
+  fun setBackgroundInsetTop(inset: Float) {
+    backgroundInsetTop = inset
+    applyCharacterBackgrounds()
+  }
+  
+  fun setBackgroundInsetBottom(inset: Float) {
+    backgroundInsetBottom = inset
+    applyCharacterBackgrounds()
+  }
+  
+  fun setBackgroundInsetLeft(inset: Float) {
+    backgroundInsetLeft = inset
+    applyCharacterBackgrounds()
+  }
+  
+  fun setBackgroundInsetRight(inset: Float) {
+    backgroundInsetRight = inset
+    applyCharacterBackgrounds()
+  }
 
   fun setTextProp(text: String) {
     if (this.text?.toString() != text) {
@@ -268,6 +305,10 @@ class HighlightTextView : AppCompatEditText {
           charPaddingRight,
           charPaddingTop,
           charPaddingBottom,
+          backgroundInsetTop,
+          backgroundInsetBottom,
+          backgroundInsetLeft,
+          backgroundInsetRight,
           cornerRadius,
           isFirst,
           isLast

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

@@ -145,6 +145,47 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
     }
   }
 
+  @ReactProp(name = "lineHeight")
+  override fun setLineHeight(view: HighlightTextView?, value: String?) {
+    // Line height is handled differently on Android - this is a placeholder
+    // Android EditText doesn't directly support line height like iOS
+  }
+
+  @ReactProp(name = "highlightBorderRadius")
+  override fun setHighlightBorderRadius(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { radius ->
+      view?.setCornerRadius(radius)
+    }
+  }
+
+  @ReactProp(name = "backgroundInsetTop")
+  override fun setBackgroundInsetTop(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { inset ->
+      view?.setBackgroundInsetTop(inset)
+    }
+  }
+
+  @ReactProp(name = "backgroundInsetBottom")
+  override fun setBackgroundInsetBottom(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { inset ->
+      view?.setBackgroundInsetBottom(inset)
+    }
+  }
+
+  @ReactProp(name = "backgroundInsetLeft")
+  override fun setBackgroundInsetLeft(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { inset ->
+      view?.setBackgroundInsetLeft(inset)
+    }
+  }
+
+  @ReactProp(name = "backgroundInsetRight")
+  override fun setBackgroundInsetRight(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { inset ->
+      view?.setBackgroundInsetRight(inset)
+    }
+  }
+
   @ReactProp(name = "text")
   override fun setText(view: HighlightTextView?, value: String?) {
     view?.setTextProp(value ?: "")

package/ios/HighlightTextView.h

@@ -15,6 +15,10 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) CGFloat paddingBottom;
 @property (nonatomic, assign) CGFloat cornerRadius;
 @property (nonatomic, assign) CGFloat highlightBorderRadius;
+@property (nonatomic, assign) CGFloat backgroundInsetTop;
+@property (nonatomic, assign) CGFloat backgroundInsetBottom;
+@property (nonatomic, assign) CGFloat backgroundInsetLeft;
+@property (nonatomic, assign) CGFloat backgroundInsetRight;
 @end
 
 @interface HighlightTextView : RCTViewComponentView

package/ios/HighlightTextView.mm

@@ -11,7 +11,7 @@ using namespace facebook::react;
 
 @implementation RoundedBackgroundLayoutManager
 
-@synthesize backgroundColor, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, cornerRadius, highlightBorderRadius;
+@synthesize backgroundColor, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, cornerRadius, highlightBorderRadius, backgroundInsetTop, backgroundInsetBottom, backgroundInsetLeft, backgroundInsetRight;
 
 - (void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origin {
     NSTextStorage *textStorage = self.textStorage;
@@ -41,7 +41,13 @@ using namespace facebook::react;
                     if (boundingRect.size.width > 1.0 && boundingRect.size.height > 1.0 && 
                         boundingRect.size.width < (textContainer.size.width * 0.8)) {
                         
-                        // Apply individual padding values
+                        // 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;
+                        boundingRect.size.width -= (self.backgroundInsetLeft + self.backgroundInsetRight);
+                        
+                        // Then apply padding (expands outward)
                         boundingRect.origin.x += origin.x - self.paddingLeft;
                         boundingRect.origin.y += origin.y - self.paddingTop;
                         boundingRect.size.width += self.paddingLeft + self.paddingRight;
@@ -78,6 +84,10 @@ using namespace facebook::react;
     CGFloat _paddingBottom;
     CGFloat _cornerRadius;
     CGFloat _highlightBorderRadius;
+    CGFloat _backgroundInsetTop;
+    CGFloat _backgroundInsetBottom;
+    CGFloat _backgroundInsetLeft;
+    CGFloat _backgroundInsetRight;
     CGFloat _lineHeight;
     BOOL _isUpdatingText;
     NSString * _currentVerticalAlignment;
@@ -103,6 +113,10 @@ using namespace facebook::react;
     _paddingBottom = 4.0;
     _cornerRadius = 4.0;
     _highlightBorderRadius = 0.0;
+    _backgroundInsetTop = 0.0;
+    _backgroundInsetBottom = 0.0;
+    _backgroundInsetLeft = 0.0;
+    _backgroundInsetRight = 0.0;
     _lineHeight = 0.0; // 0 means use default line height
     _currentVerticalAlignment = nil;
     _currentHorizontalAlignment = NSTextAlignmentCenter;
@@ -118,6 +132,10 @@ using namespace facebook::react;
     _layoutManager.paddingBottom = _paddingBottom;
     _layoutManager.cornerRadius = _cornerRadius;
     _layoutManager.highlightBorderRadius = _highlightBorderRadius;
+    _layoutManager.backgroundInsetTop = _backgroundInsetTop;
+    _layoutManager.backgroundInsetBottom = _backgroundInsetBottom;
+    _layoutManager.backgroundInsetLeft = _backgroundInsetLeft;
+    _layoutManager.backgroundInsetRight = _backgroundInsetRight;
     
     [textStorage addLayoutManager:_layoutManager];
     
@@ -339,6 +357,46 @@ using namespace facebook::react;
         }
     }
     
+    if (oldViewProps.backgroundInsetTop != newViewProps.backgroundInsetTop) {
+        NSString *insetStr = [[NSString alloc] initWithUTF8String: newViewProps.backgroundInsetTop.c_str()];
+        CGFloat inset = [insetStr floatValue];
+        if (inset >= 0) {
+            _backgroundInsetTop = inset;
+            _layoutManager.backgroundInsetTop = _backgroundInsetTop;
+            [self applyCharacterBackgrounds];
+        }
+    }
+    
+    if (oldViewProps.backgroundInsetBottom != newViewProps.backgroundInsetBottom) {
+        NSString *insetStr = [[NSString alloc] initWithUTF8String: newViewProps.backgroundInsetBottom.c_str()];
+        CGFloat inset = [insetStr floatValue];
+        if (inset >= 0) {
+            _backgroundInsetBottom = inset;
+            _layoutManager.backgroundInsetBottom = _backgroundInsetBottom;
+            [self applyCharacterBackgrounds];
+        }
+    }
+    
+    if (oldViewProps.backgroundInsetLeft != newViewProps.backgroundInsetLeft) {
+        NSString *insetStr = [[NSString alloc] initWithUTF8String: newViewProps.backgroundInsetLeft.c_str()];
+        CGFloat inset = [insetStr floatValue];
+        if (inset >= 0) {
+            _backgroundInsetLeft = inset;
+            _layoutManager.backgroundInsetLeft = _backgroundInsetLeft;
+            [self applyCharacterBackgrounds];
+        }
+    }
+    
+    if (oldViewProps.backgroundInsetRight != newViewProps.backgroundInsetRight) {
+        NSString *insetStr = [[NSString alloc] initWithUTF8String: newViewProps.backgroundInsetRight.c_str()];
+        CGFloat inset = [insetStr floatValue];
+        if (inset >= 0) {
+            _backgroundInsetRight = inset;
+            _layoutManager.backgroundInsetRight = _backgroundInsetRight;
+            [self applyCharacterBackgrounds];
+        }
+    }
+    
     if (oldViewProps.text != newViewProps.text) {
         NSString *text = [[NSString alloc] initWithUTF8String: newViewProps.text.c_str()];
         if (![_textView.text isEqualToString:text]) {

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -53,6 +53,14 @@ export interface HighlightTextViewProps extends ViewProps {
   paddingRight?: string;
   paddingTop?: string;
   paddingBottom?: string;
+  /** Reduces background height from the top (shrinks inward from font line box) */
+  backgroundInsetTop?: string;
+  /** Reduces background height from the bottom (shrinks inward from font line box) */
+  backgroundInsetBottom?: string;
+  /** Reduces background width from the left (shrinks inward from glyph bounds) */
+  backgroundInsetLeft?: string;
+  /** Reduces background width from the right (shrinks inward from glyph bounds) */
+  backgroundInsetRight?: string;
   text?: string;
   isEditable?: boolean;
   onChange?: BubblingEventHandler<OnChangeEventData>;

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

@@ -35,6 +35,14 @@ export interface HighlightTextViewProps extends ViewProps {
     paddingRight?: string;
     paddingTop?: string;
     paddingBottom?: string;
+    /** Reduces background height from the top (shrinks inward from font line box) */
+    backgroundInsetTop?: string;
+    /** Reduces background height from the bottom (shrinks inward from font line box) */
+    backgroundInsetBottom?: string;
+    /** Reduces background width from the left (shrinks inward from glyph bounds) */
+    backgroundInsetLeft?: string;
+    /** Reduces background width from the right (shrinks inward from glyph bounds) */
+    backgroundInsetRight?: string;
     text?: string;
     isEditable?: boolean;
     onChange?: BubblingEventHandler<OnChangeEventData>;

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,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,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,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,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.6",
+  "version": "0.1.7",
   "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

@@ -53,6 +53,14 @@ export interface HighlightTextViewProps extends ViewProps {
   paddingRight?: string;
   paddingTop?: string;
   paddingBottom?: string;
+  /** Reduces background height from the top (shrinks inward from font line box) */
+  backgroundInsetTop?: string;
+  /** Reduces background height from the bottom (shrinks inward from font line box) */
+  backgroundInsetBottom?: string;
+  /** Reduces background width from the left (shrinks inward from glyph bounds) */
+  backgroundInsetLeft?: string;
+  /** Reduces background width from the right (shrinks inward from glyph bounds) */
+  backgroundInsetRight?: string;
   text?: string;
   isEditable?: boolean;
   onChange?: BubblingEventHandler<OnChangeEventData>;