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

package/ios/HighlightTextView.h

@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign) CGFloat paddingTop;
 @property (nonatomic, assign) CGFloat paddingBottom;
 @property (nonatomic, assign) CGFloat cornerRadius;
+@property (nonatomic, assign) CGFloat highlightBorderRadius;
 @end
 
 @interface HighlightTextView : RCTViewComponentView

package/ios/HighlightTextView.mm

@@ -11,6 +11,8 @@ using namespace facebook::react;
 
 @implementation RoundedBackgroundLayoutManager
 
+@synthesize backgroundColor, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, cornerRadius, highlightBorderRadius;
+
 - (void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origin {
     NSTextStorage *textStorage = self.textStorage;
     NSTextContainer *textContainer = self.textContainers.firstObject;
@@ -45,7 +47,9 @@ using namespace facebook::react;
                         boundingRect.size.width += self.paddingLeft + self.paddingRight;
                         boundingRect.size.height += self.paddingTop + self.paddingBottom;
                         
-                        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:boundingRect cornerRadius:self.cornerRadius];
+                        // Use highlightBorderRadius if specified, otherwise use cornerRadius
+                        CGFloat radius = self.highlightBorderRadius > 0 ? self.highlightBorderRadius : self.cornerRadius;
+                        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:boundingRect cornerRadius:radius];
                         [self.backgroundColor setFill];
                         [path fill];
                     }
@@ -73,7 +77,11 @@ using namespace facebook::react;
     CGFloat _paddingTop;
     CGFloat _paddingBottom;
     CGFloat _cornerRadius;
+    CGFloat _highlightBorderRadius;
+    CGFloat _lineHeight;
     BOOL _isUpdatingText;
+    NSString * _currentVerticalAlignment;
+    NSTextAlignment _currentHorizontalAlignment;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -94,6 +102,10 @@ using namespace facebook::react;
     _paddingTop = 4.0;
     _paddingBottom = 4.0;
     _cornerRadius = 4.0;
+    _highlightBorderRadius = 0.0;
+    _lineHeight = 0.0; // 0 means use default line height
+    _currentVerticalAlignment = nil;
+    _currentHorizontalAlignment = NSTextAlignmentCenter;
     
     // Create text storage, layout manager, and text container
     NSTextStorage *textStorage = [[NSTextStorage alloc] init];
@@ -105,6 +117,7 @@ using namespace facebook::react;
     _layoutManager.paddingTop = _paddingTop;
     _layoutManager.paddingBottom = _paddingBottom;
     _layoutManager.cornerRadius = _cornerRadius;
+    _layoutManager.highlightBorderRadius = _highlightBorderRadius;
     
     [textStorage addLayoutManager:_layoutManager];
     
@@ -128,6 +141,52 @@ using namespace facebook::react;
   return self;
 }
 
+- (void)layoutSubviews
+{
+    [super layoutSubviews];
+    
+    // Recalculate vertical alignment after layout
+    if (_currentVerticalAlignment) {
+        [self updateVerticalAlignment:_currentVerticalAlignment];
+    }
+}
+
+- (void)updateVerticalAlignment:(NSString *)verticalAlign
+{
+    if ([verticalAlign isEqualToString:@"top"]) {
+        _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 0, 10);
+    } else if ([verticalAlign isEqualToString:@"bottom"]) {
+        // Force layout to get accurate content height
+        [_textView.layoutManager ensureLayoutForTextContainer:_textView.textContainer];
+        
+        CGFloat contentHeight = [_textView.layoutManager usedRectForTextContainer:_textView.textContainer].size.height;
+        CGFloat viewHeight = _textView.bounds.size.height;
+        
+        // Only apply bottom alignment if we have valid dimensions
+        if (viewHeight > 0 && contentHeight > 0) {
+            if (contentHeight + 20 <= viewHeight) {
+                // Content fits in view - align to bottom with inset
+                CGFloat topInset = MAX(10, viewHeight - contentHeight - 10);
+                _textView.textContainerInset = UIEdgeInsetsMake(topInset, 10, 10, 10);
+            } else {
+                // Content exceeds view - use minimal inset and scroll to bottom
+                _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
+                
+                // Scroll to bottom to show the latest text
+                dispatch_async(dispatch_get_main_queue(), ^{
+                    CGFloat bottomOffset = self->_textView.contentSize.height - self->_textView.bounds.size.height + self->_textView.contentInset.bottom;
+                    if (bottomOffset > 0) {
+                        [self->_textView setContentOffset:CGPointMake(0, bottomOffset) animated:NO];
+                    }
+                });
+            }
+        }
+    } else {
+        // Default or center
+        _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
+    }
+}
+
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
 {
     const auto &oldViewProps = *std::static_pointer_cast<HighlightTextViewProps const>(_props);
@@ -169,29 +228,26 @@ using namespace facebook::react;
         // Apply horizontal alignment
         if (horizontalPart) {
             if ([horizontalPart isEqualToString:@"center"]) {
-                _textView.textAlignment = NSTextAlignmentCenter;
+                _currentHorizontalAlignment = NSTextAlignmentCenter;
             } else if ([horizontalPart isEqualToString:@"right"] || [horizontalPart isEqualToString:@"flex-end"]) {
-                _textView.textAlignment = NSTextAlignmentRight;
+                _currentHorizontalAlignment = NSTextAlignmentRight;
             } else if ([horizontalPart isEqualToString:@"left"] || [horizontalPart isEqualToString:@"flex-start"]) {
-                _textView.textAlignment = NSTextAlignmentLeft;
+                _currentHorizontalAlignment = NSTextAlignmentLeft;
             } else if ([horizontalPart isEqualToString:@"justify"]) {
-                _textView.textAlignment = NSTextAlignmentJustified;
+                _currentHorizontalAlignment = NSTextAlignmentJustified;
             } else {
-                _textView.textAlignment = NSTextAlignmentLeft;
+                _currentHorizontalAlignment = NSTextAlignmentLeft;
             }
+            _textView.textAlignment = _currentHorizontalAlignment;
         }
         
-        // Apply vertical alignment via textContainerInset
-        if ([verticalPart isEqualToString:@"top"]) {
-            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 0, 10);
-        } else if ([verticalPart isEqualToString:@"bottom"]) {
-            // Calculate bottom alignment by adjusting top inset
-            CGFloat contentHeight = [_textView.layoutManager usedRectForTextContainer:_textView.textContainer].size.height;
-            CGFloat viewHeight = _textView.bounds.size.height;
-            CGFloat topInset = MAX(10, viewHeight - contentHeight - 10);
-            _textView.textContainerInset = UIEdgeInsetsMake(topInset, 10, 10, 10);
-        } else if (!verticalPart) {
+        // Store and apply vertical alignment
+        if (verticalPart) {
+            _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);
         }
         
@@ -204,6 +260,26 @@ using namespace facebook::react;
         if (fontSize > 0) {
             NSString *fontFamily = _textView.font.familyName;
             _textView.font = [UIFont fontWithName:fontFamily size:fontSize] ?: [UIFont systemFontOfSize:fontSize];
+            [self applyCharacterBackgrounds]; // Reapply to update font
+        }
+    }
+    
+    if (oldViewProps.lineHeight != newViewProps.lineHeight) {
+        NSString *lineHeightStr = [[NSString alloc] initWithUTF8String: newViewProps.lineHeight.c_str()];
+        CGFloat lineHeight = [lineHeightStr floatValue];
+        if (lineHeight >= 0) {
+            _lineHeight = lineHeight;
+            [self applyCharacterBackgrounds]; // Reapply to update line height
+        }
+    }
+    
+    if (oldViewProps.highlightBorderRadius != newViewProps.highlightBorderRadius) {
+        NSString *radiusStr = [[NSString alloc] initWithUTF8String: newViewProps.highlightBorderRadius.c_str()];
+        CGFloat radius = [radiusStr floatValue];
+        if (radius >= 0) {
+            _highlightBorderRadius = radius;
+            _layoutManager.highlightBorderRadius = _highlightBorderRadius;
+            [self applyCharacterBackgrounds]; // Reapply to update highlight border radius
         }
     }
     
@@ -269,6 +345,12 @@ using namespace facebook::react;
             _isUpdatingText = YES;
             _textView.text = text;
             [self applyCharacterBackgrounds];
+            
+            // Recalculate vertical alignment when text changes
+            if (_currentVerticalAlignment) {
+                [self updateVerticalAlignment:_currentVerticalAlignment];
+            }
+            
             _isUpdatingText = NO;
         }
     }
@@ -279,18 +361,8 @@ using namespace facebook::react;
     
     if (oldViewProps.verticalAlign != newViewProps.verticalAlign) {
         NSString *verticalAlign = [[NSString alloc] initWithUTF8String: newViewProps.verticalAlign.c_str()];
-        
-        if ([verticalAlign isEqualToString:@"top"]) {
-            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 0, 10);
-        } else if ([verticalAlign isEqualToString:@"bottom"]) {
-            CGFloat contentHeight = [_textView.layoutManager usedRectForTextContainer:_textView.textContainer].size.height;
-            CGFloat viewHeight = _textView.bounds.size.height;
-            CGFloat topInset = MAX(10, viewHeight - contentHeight - 10);
-            _textView.textContainerInset = UIEdgeInsetsMake(topInset, 10, 10, 10);
-        } else if ([verticalAlign isEqualToString:@"center"] || [verticalAlign isEqualToString:@"middle"]) {
-            _textView.textContainerInset = UIEdgeInsetsMake(10, 10, 10, 10);
-        }
-        
+        _currentVerticalAlignment = verticalAlign;
+        [self updateVerticalAlignment:verticalAlign];
         [self applyCharacterBackgrounds];
     }
 
@@ -305,6 +377,12 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
 - (void)textViewDidChange:(UITextView *)textView
 {
     [self applyCharacterBackgrounds];
+    
+    // Recalculate vertical alignment when text changes
+    if (_currentVerticalAlignment) {
+        [self updateVerticalAlignment:_currentVerticalAlignment];
+    }
+    
     if (!_isUpdatingText) {
         if (_eventEmitter != nullptr) {
             std::dynamic_pointer_cast<const HighlightTextViewEventEmitter>(_eventEmitter)
@@ -339,6 +417,24 @@ Class<RCTComponentViewProtocol> HighlightTextViewCls(void)
     
     NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
     paragraphStyle.alignment = _textView.textAlignment;
+    
+    // Apply line height if specified
+    if (_lineHeight > 0) {
+        CGFloat fontSize = _textView.font.pointSize;
+        
+        // If lineHeight is smaller than fontSize, use lineHeightMultiple for better centering
+        if (_lineHeight < fontSize) {
+            paragraphStyle.lineHeightMultiple = _lineHeight / fontSize;
+            paragraphStyle.minimumLineHeight = 0;
+            paragraphStyle.maximumLineHeight = 0;
+        } else {
+            // For larger line heights, use absolute values
+            paragraphStyle.minimumLineHeight = _lineHeight;
+            paragraphStyle.maximumLineHeight = _lineHeight;
+            paragraphStyle.lineHeightMultiple = 0;
+        }
+    }
+    
     [attributedString addAttribute:NSParagraphStyleAttributeName 
                              value:paragraphStyle 
                              range:NSMakeRange(0, text.length)];

package/lib/module/HighlightTextViewNativeComponent.ts

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

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

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