react-native-highlight-text-view 0.1.8 → 0.1.10

package/README.md

@@ -47,11 +47,11 @@ export default function App() {
 | `color` | `string` | `#FFFF00` | Background highlight color (hex format) |
 | `textColor` | `string` | - | Text color (hex format) |
 | `textAlign` | `string` | `left` | Text alignment. Supports: `'left'`, `'center'`, `'right'`, `'justify'`, `'flex-start'`, `'flex-end'`, `'top'`, `'bottom'`, `'top-left'`, `'top-center'`, `'top-right'`, `'bottom-left'`, `'bottom-center'`, `'bottom-right'` |
-| `verticalAlign` | `'top' \| 'center' \| 'middle' \| 'bottom'` | - | Vertical alignment (iOS only). Alternative to using combined `textAlign` values |
+| `verticalAlign` | `'top' \| 'center' \| 'middle' \| 'bottom'` | - | Vertical alignment (iOS only). Alternative to using combined `textAlign` values. **Note:** Android does not support vertical alignment and will use default vertical positioning. |
 | `fontFamily` | `string` | - | Font family name |
 | `fontSize` | `string` | `32` | Font size in points |
-| `lineHeight` | `string` | - | Line height override |
-| `highlightBorderRadius` | `string` | `4` | Border radius for the highlight background |
+| `lineHeight` | `string` | `0` | Line height override (0 means use default line height) |
+| `highlightBorderRadius` | `string` | `0` | 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 |

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

@@ -5,6 +5,7 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.RectF
+import android.graphics.Typeface
 import android.text.Editable
 import android.text.Spannable
 import android.text.SpannableString
@@ -146,8 +147,9 @@ class HighlightTextView : AppCompatEditText {
   private var characterBackgroundColor: Int = Color.parseColor("#FFFF00")
   private var textColorValue: Int = Color.BLACK
   private var cornerRadius: Float = 4f
-  private var charPaddingLeft: Float = 8f
-  private var charPaddingRight: Float = 8f
+  private var highlightBorderRadius: Float = 0f
+  private var charPaddingLeft: Float = 4f
+  private var charPaddingRight: Float = 4f
   private var charPaddingTop: Float = 4f
   private var charPaddingBottom: Float = 4f
   private var backgroundInsetTop: Float = 0f
@@ -155,6 +157,9 @@ class HighlightTextView : AppCompatEditText {
   private var backgroundInsetLeft: Float = 0f
   private var backgroundInsetRight: Float = 0f
   private var customLineHeight: Float = 0f
+  private var currentFontFamily: String? = null
+  private var currentFontWeight: String = "normal"
+  private var currentVerticalAlign: String? = null
   private var isUpdatingText: Boolean = false
   
   var onTextChangeListener: ((String) -> Unit)? = null
@@ -243,6 +248,61 @@ class HighlightTextView : AppCompatEditText {
     applyCharacterBackgrounds()
   }
   
+  fun setHighlightBorderRadius(radius: Float) {
+    highlightBorderRadius = radius
+    applyCharacterBackgrounds()
+  }
+  
+  fun setFontWeight(weight: String) {
+    currentFontWeight = weight
+    updateFont()
+  }
+  
+  fun setFontFamilyProp(family: String?) {
+    currentFontFamily = family
+    updateFont()
+  }
+  
+  private fun updateFont() {
+    val style = when (currentFontWeight) {
+      "bold", "700", "800", "900" -> Typeface.BOLD
+      "100", "200", "300" -> Typeface.NORMAL // Android doesn't have lighter than normal
+      else -> Typeface.NORMAL
+    }
+    
+    val typeface = if (currentFontFamily != null) {
+      when (currentFontFamily?.lowercase()) {
+        "system" -> Typeface.create(Typeface.DEFAULT, style)
+        "sans-serif" -> Typeface.create(Typeface.SANS_SERIF, style)
+        "serif" -> Typeface.create(Typeface.SERIF, style)
+        "monospace" -> Typeface.create(Typeface.MONOSPACE, style)
+        else -> Typeface.create(currentFontFamily, style)
+      }
+    } else {
+      Typeface.create(Typeface.DEFAULT, style)
+    }
+    
+    this.typeface = typeface
+    applyCharacterBackgrounds()
+  }
+  
+  fun setVerticalAlign(align: String?) {
+    currentVerticalAlign = align
+    updateVerticalAlignment()
+  }
+  
+  private fun updateVerticalAlignment() {
+    // Preserve horizontal alignment when updating vertical
+    val horizontalGravity = gravity and Gravity.HORIZONTAL_GRAVITY_MASK
+    val verticalGravity = when (currentVerticalAlign) {
+      "top" -> Gravity.TOP
+      "bottom" -> Gravity.BOTTOM
+      else -> Gravity.CENTER_VERTICAL
+    }
+    
+    gravity = horizontalGravity or verticalGravity
+  }
+  
   fun setBackgroundInsetTop(inset: Float) {
     backgroundInsetTop = inset
     applyCharacterBackgrounds()
@@ -310,6 +370,9 @@ class HighlightTextView : AppCompatEditText {
         val isFirst = i == 0 || !shouldHighlightChar(text, i - 1)
         val isLast = i == text.length - 1 || !shouldHighlightChar(text, i + 1)
         
+        // Use highlightBorderRadius if specified, otherwise use cornerRadius (matches iOS)
+        val radius = if (highlightBorderRadius > 0) highlightBorderRadius else cornerRadius
+        
         val span = RoundedBackgroundSpan(
           characterBackgroundColor,
           textColorValue,
@@ -321,7 +384,7 @@ class HighlightTextView : AppCompatEditText {
           backgroundInsetBottom,
           backgroundInsetLeft,
           backgroundInsetRight,
-          cornerRadius,
+          radius,
           isFirst,
           isLast
         )

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

@@ -1,6 +1,7 @@
 package com.highlighttext
 
 import android.graphics.Color
+import android.graphics.Typeface
 import android.text.InputType
 import android.view.Gravity
 import com.facebook.react.bridge.Arguments
@@ -74,33 +75,54 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
   override fun setTextAlign(view: HighlightTextView?, value: String?) {
     // Parse combined alignment (e.g., "top-left", "bottom-center")
     val parts = value?.split("-") ?: emptyList()
+    var verticalAlign: String? = null
     var horizontalAlign = value
     
     if (parts.size == 2) {
-      // Combined format: use the second part for horizontal alignment
+      // Combined format: "top-left", "bottom-center", etc.
+      verticalAlign = parts[0]
       horizontalAlign = parts[1]
+    } else if (value == "top" || value == "bottom") {
+      // Pure vertical alignment
+      verticalAlign = value
+      horizontalAlign = null
     }
     
-    // Apply horizontal alignment
-    view?.gravity = when (horizontalAlign) {
-      "left", "flex-start" -> Gravity.START or Gravity.CENTER_VERTICAL
-      "right", "flex-end" -> Gravity.END or Gravity.CENTER_VERTICAL
-      "center" -> Gravity.CENTER
-      "justify" -> Gravity.START or Gravity.CENTER_VERTICAL // Android doesn't support justify natively
-      else -> Gravity.CENTER
+    // Determine vertical gravity
+    val vGravity = when (verticalAlign) {
+      "top" -> Gravity.TOP
+      "bottom" -> Gravity.BOTTOM
+      else -> Gravity.CENTER_VERTICAL
     }
+    
+    // Determine horizontal gravity
+    val hGravity = when (horizontalAlign) {
+      "left", "flex-start" -> Gravity.START
+      "right", "flex-end" -> Gravity.END
+      "center" -> Gravity.CENTER_HORIZONTAL
+      "justify" -> Gravity.START // Android doesn't support justify natively
+      else -> Gravity.CENTER_HORIZONTAL
+    }
+    
+    // Apply combined gravity
+    view?.gravity = vGravity or hGravity
   }
 
   @ReactProp(name = "verticalAlign")
   override fun setVerticalAlign(view: HighlightTextView?, value: String?) {
-    // Android EditText doesn't support vertical alignment as easily as iOS
-    // This would require custom implementation with layout adjustments
-    // For now, we'll keep the default behavior
+    view?.setVerticalAlign(value)
   }
 
   @ReactProp(name = "fontFamily")
   override fun setFontFamily(view: HighlightTextView?, value: String?) {
-    // Font family handling can be added if needed
+    view?.setFontFamilyProp(value)
+  }
+  
+  @ReactProp(name = "fontWeight")
+  override fun setFontWeight(view: HighlightTextView?, value: String?) {
+    value?.let { weight ->
+      view?.setFontWeight(weight)
+    }
   }
 
   @ReactProp(name = "fontSize")
@@ -155,7 +177,7 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
   @ReactProp(name = "highlightBorderRadius")
   override fun setHighlightBorderRadius(view: HighlightTextView?, value: String?) {
     value?.toFloatOrNull()?.let { radius ->
-      view?.setCornerRadius(radius)
+      view?.setHighlightBorderRadius(radius)
     }
   }
 

package/ios/HighlightTextView.mm

@@ -89,6 +89,8 @@ using namespace facebook::react;
     CGFloat _backgroundInsetLeft;
     CGFloat _backgroundInsetRight;
     CGFloat _lineHeight;
+    NSString * _fontFamily;
+    NSString * _fontWeight;
     BOOL _isUpdatingText;
     NSString * _currentVerticalAlignment;
     NSTextAlignment _currentHorizontalAlignment;
@@ -118,6 +120,8 @@ using namespace facebook::react;
     _backgroundInsetLeft = 0.0;
     _backgroundInsetRight = 0.0;
     _lineHeight = 0.0; // 0 means use default line height
+    _fontFamily = nil;
+    _fontWeight = @"normal";
     _currentVerticalAlignment = nil;
     _currentHorizontalAlignment = NSTextAlignmentCenter;
     
@@ -276,9 +280,7 @@ using namespace facebook::react;
         NSString *fontSizeStr = [[NSString alloc] initWithUTF8String: newViewProps.fontSize.c_str()];
         CGFloat fontSize = [fontSizeStr floatValue];
         if (fontSize > 0) {
-            NSString *fontFamily = _textView.font.familyName;
-            _textView.font = [UIFont fontWithName:fontFamily size:fontSize] ?: [UIFont systemFontOfSize:fontSize];
-            [self applyCharacterBackgrounds]; // Reapply to update font
+            [self updateFont];
         }
     }
     
@@ -302,9 +304,13 @@ using namespace facebook::react;
     }
     
     if (oldViewProps.fontFamily != newViewProps.fontFamily) {
-        NSString *fontFamily = [[NSString alloc] initWithUTF8String: newViewProps.fontFamily.c_str()];
-        CGFloat fontSize = _textView.font.pointSize;
-        _textView.font = [UIFont fontWithName:fontFamily size:fontSize] ?: [UIFont systemFontOfSize:fontSize];
+        _fontFamily = [[NSString alloc] initWithUTF8String: newViewProps.fontFamily.c_str()];
+        [self updateFont];
+    }
+    
+    if (oldViewProps.fontWeight != newViewProps.fontWeight) {
+        _fontWeight = [[NSString alloc] initWithUTF8String: newViewProps.fontWeight.c_str()];
+        [self updateFont];
     }
     
     if (oldViewProps.padding != newViewProps.padding) {
@@ -451,6 +457,60 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     }
 }
 
+- (void)updateFont
+{
+    CGFloat fontSize = _textView.font.pointSize;
+    UIFont *newFont = nil;
+    
+    // Parse font weight
+    UIFontWeight fontWeight = UIFontWeightRegular;
+    if (_fontWeight) {
+        if ([_fontWeight isEqualToString:@"bold"] || [_fontWeight isEqualToString:@"700"]) {
+            fontWeight = UIFontWeightBold;
+        } else if ([_fontWeight isEqualToString:@"100"]) {
+            fontWeight = UIFontWeightUltraLight;
+        } else if ([_fontWeight isEqualToString:@"200"]) {
+            fontWeight = UIFontWeightThin;
+        } else if ([_fontWeight isEqualToString:@"300"]) {
+            fontWeight = UIFontWeightLight;
+        } else if ([_fontWeight isEqualToString:@"400"] || [_fontWeight isEqualToString:@"normal"]) {
+            fontWeight = UIFontWeightRegular;
+        } else if ([_fontWeight isEqualToString:@"500"]) {
+            fontWeight = UIFontWeightMedium;
+        } else if ([_fontWeight isEqualToString:@"600"]) {
+            fontWeight = UIFontWeightSemibold;
+        } else if ([_fontWeight isEqualToString:@"700"]) {
+            fontWeight = UIFontWeightBold;
+        } else if ([_fontWeight isEqualToString:@"800"]) {
+            fontWeight = UIFontWeightHeavy;
+        } else if ([_fontWeight isEqualToString:@"900"]) {
+            fontWeight = UIFontWeightBlack;
+        }
+    }
+    
+    if (_fontFamily && _fontFamily.length > 0) {
+        // Try to get custom font with weight
+        UIFontDescriptor *fontDescriptor = [UIFontDescriptor fontDescriptorWithName:_fontFamily size:fontSize];
+        UIFontDescriptor *weightedDescriptor = [fontDescriptor fontDescriptorByAddingAttributes:@{
+            UIFontDescriptorTraitsAttribute: @{
+                UIFontWeightTrait: @(fontWeight)
+            }
+        }];
+        newFont = [UIFont fontWithDescriptor:weightedDescriptor size:fontSize];
+        
+        // Fallback if custom font not found
+        if (!newFont) {
+            newFont = [UIFont systemFontOfSize:fontSize weight:fontWeight];
+        }
+    } else {
+        // Use system font with weight
+        newFont = [UIFont systemFontOfSize:fontSize weight:fontWeight];
+    }
+    
+    _textView.font = newFont;
+    [self applyCharacterBackgrounds];
+}
+
 - (void)applyCharacterBackgrounds
 {
     NSString *text = _textView.text;

package/lib/module/HighlightTextViewNativeComponent.ts

@@ -46,6 +46,7 @@ export interface HighlightTextViewProps extends ViewProps {
   verticalAlign?: string;
   fontFamily?: string;
   fontSize?: string;
+  fontWeight?: string;
   lineHeight?: string;
   highlightBorderRadius?: string;
   padding?: string;

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

@@ -28,6 +28,7 @@ export interface HighlightTextViewProps extends ViewProps {
     verticalAlign?: string;
     fontFamily?: string;
     fontSize?: string;
+    fontWeight?: string;
     lineHeight?: string;
     highlightBorderRadius?: string;
     padding?: 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,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"}
+{"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,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.8",
+  "version": "0.1.10",
   "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

@@ -46,6 +46,7 @@ export interface HighlightTextViewProps extends ViewProps {
   verticalAlign?: string;
   fontFamily?: string;
   fontSize?: string;
+  fontWeight?: string;
   lineHeight?: string;
   highlightBorderRadius?: string;
   padding?: string;