react-native-highlight-text-view 0.1.3 → 0.1.5

package/README.md

@@ -61,7 +61,7 @@ export default function App() {
 
 
 **Note:** Vertical alignment is currently supported on iOS only. On Android, text will use default vertical positioning.
-```
+
 
 
 ## Contributing
@@ -70,10 +70,7 @@ export default function App() {
 - [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
 - [Code of conduct](CODE_OF_CONDUCT.md)
 
-## License
-
-MIT
 
----
+## License MIT
 
 Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

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

@@ -1,15 +1,299 @@
 package com.highlighttext
 
 import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.text.Editable
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.TextWatcher
+import android.text.style.ReplacementSpan
 import android.util.AttributeSet
-import android.view.View
+import android.util.TypedValue
+import android.view.Gravity
+import androidx.appcompat.widget.AppCompatEditText
 
-class HighlightTextView : View {
-  constructor(context: Context?) : super(context)
-  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
+class RoundedBackgroundSpan(
+  private val backgroundColor: Int,
+  private val textColor: Int,
+  private val paddingLeft: Float,
+  private val paddingRight: Float,
+  private val paddingTop: Float,
+  private val paddingBottom: Float,
+  private val cornerRadius: Float,
+  private val isFirstInGroup: Boolean = false,
+  private val isLastInGroup: Boolean = false
+) : ReplacementSpan() {
+
+  override fun getSize(
+    paint: Paint,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    fm: Paint.FontMetricsInt?
+  ): Int {
+    val width = paint.measureText(text, start, end)
+    // Only add padding for first and last characters in a group
+    val leftPad = if (isFirstInGroup) paddingLeft else 0f
+    val rightPad = if (isLastInGroup) paddingRight else 0f
+    return (width + leftPad + rightPad).toInt()
+  }
+
+  override fun draw(
+    canvas: Canvas,
+    text: CharSequence?,
+    start: Int,
+    end: Int,
+    x: Float,
+    top: Int,
+    y: Int,
+    bottom: Int,
+    paint: Paint
+  ) {
+    // Draw background with padding
+    val bgPaint = Paint().apply {
+      color = backgroundColor
+      style = Paint.Style.FILL
+      isAntiAlias = true
+    }
+    
+    val width = paint.measureText(text, start, end)
+    
+    // Use font metrics for consistent height instead of character bounds
+    val fontMetrics = paint.fontMetrics
+    val textHeight = fontMetrics.descent - fontMetrics.ascent
+    val textTop = y + fontMetrics.ascent
+    
+    // Only add padding for first and last characters in a group
+    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
+    val leftExtension = if (!isFirstInGroup) overlapExtension else 0f
+    val rightExtension = if (!isLastInGroup) overlapExtension else 0f
+    
+    // Calculate proper bounds with padding using consistent font metrics
+    val rect = RectF(
+      x - leftExtension,
+      textTop - paddingTop,
+      x + width + leftPad + rightPad + rightExtension,
+      textTop + textHeight + paddingBottom
+    )
+    
+    // Draw background with selective corner rounding
+    when {
+      isFirstInGroup && isLastInGroup -> {
+        // Single character or isolated group - round all corners
+        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, bgPaint)
+      }
+      isFirstInGroup -> {
+        // First character - round left corners only
+        val path = android.graphics.Path()
+        path.addRoundRect(
+          rect,
+          floatArrayOf(
+            cornerRadius, cornerRadius, // top-left
+            0f, 0f,                      // top-right
+            0f, 0f,                      // bottom-right
+            cornerRadius, cornerRadius   // bottom-left
+          ),
+          android.graphics.Path.Direction.CW
+        )
+        canvas.drawPath(path, bgPaint)
+      }
+      isLastInGroup -> {
+        // Last character - round right corners only
+        val path = android.graphics.Path()
+        path.addRoundRect(
+          rect,
+          floatArrayOf(
+            0f, 0f,                      // top-left
+            cornerRadius, cornerRadius,  // top-right
+            cornerRadius, cornerRadius,  // bottom-right
+            0f, 0f                       // bottom-left
+          ),
+          android.graphics.Path.Direction.CW
+        )
+        canvas.drawPath(path, bgPaint)
+      }
+      else -> {
+        // Middle character - no rounded corners, just rectangle
+        canvas.drawRect(rect, bgPaint)
+      }
+    }
+    
+    // Draw text with left padding offset only if first in group
+    val textPaint = Paint(paint).apply {
+      color = textColor
+      isAntiAlias = true
+    }
+    canvas.drawText(text!!, start, end, x + leftPad, y.toFloat(), textPaint)
+  }
+}
+
+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 charPaddingTop: Float = 4f
+  private var charPaddingBottom: Float = 4f
+  private var isUpdatingText: Boolean = false
+  
+  var onTextChangeListener: ((String) -> Unit)? = null
+
+  constructor(context: Context?) : super(context!!) {
+    init()
+  }
+  
+  constructor(context: Context?, attrs: AttributeSet?) : super(context!!, attrs) {
+    init()
+  }
+  
   constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
-    context,
+    context!!,
     attrs,
     defStyleAttr
-  )
+  ) {
+    init()
+  }
+
+  private fun init() {
+    setBackgroundColor(Color.TRANSPARENT)
+    setTextSize(TypedValue.COMPLEX_UNIT_SP, 32f)
+    gravity = Gravity.CENTER
+    setPadding(20, 20, 20, 20)
+    textColorValue = currentTextColor
+    
+    // Enable text wrapping
+    maxLines = Int.MAX_VALUE
+    isSingleLine = false
+    setHorizontallyScrolling(false)
+    
+    addTextChangedListener(object : TextWatcher {
+      override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
+      override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}
+      override fun afterTextChanged(s: Editable?) {
+        if (!isUpdatingText) {
+          onTextChangeListener?.invoke(s?.toString() ?: "")
+          applyCharacterBackgrounds()
+        }
+      }
+    })
+  }
+
+  fun setCharacterBackgroundColor(color: Int) {
+    characterBackgroundColor = color
+    applyCharacterBackgrounds()
+  }
+  
+  override fun setTextColor(color: Int) {
+    super.setTextColor(color)
+    textColorValue = color
+    applyCharacterBackgrounds()
+  }
+
+  fun setCharPadding(left: Float, top: Float, right: Float, bottom: Float) {
+    charPaddingLeft = left
+    charPaddingTop = top
+    charPaddingRight = right
+    charPaddingBottom = bottom
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingLeft(padding: Float) {
+    charPaddingLeft = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingRight(padding: Float) {
+    charPaddingRight = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingTop(padding: Float) {
+    charPaddingTop = padding
+    applyCharacterBackgrounds()
+  }
+  
+  fun setCharPaddingBottom(padding: Float) {
+    charPaddingBottom = padding
+    applyCharacterBackgrounds()
+  }
+
+  fun setTextProp(text: String) {
+    if (this.text?.toString() != text) {
+      isUpdatingText = true
+      setText(text)
+      applyCharacterBackgrounds()
+      isUpdatingText = false
+    }
+  }
+  
+  private fun applyCharacterBackgrounds() {
+    val text = text?.toString() ?: return
+    if (text.isEmpty()) return
+    
+    val spannable = SpannableString(text)
+    
+    // Apply character-by-character for proper line wrapping
+    for (i in text.indices) {
+      val char = text[i]
+      
+      // Check if this is a space that should be highlighted
+      val shouldHighlight = when {
+        char == '\n' || char == '\t' -> false // Never highlight newlines or tabs
+        char == ' ' -> {
+          // Highlight space only if it's a single space (not multiple consecutive)
+          val hasSpaceBefore = i > 0 && text[i - 1] == ' '
+          val hasSpaceAfter = i < text.length - 1 && text[i + 1] == ' '
+          !hasSpaceBefore && !hasSpaceAfter
+        }
+        else -> true // Highlight all other characters
+      }
+      
+      if (shouldHighlight) {
+        // Determine if this is the first or last character in a word group
+        val isFirst = i == 0 || !shouldHighlightChar(text, i - 1)
+        val isLast = i == text.length - 1 || !shouldHighlightChar(text, i + 1)
+        
+        val span = RoundedBackgroundSpan(
+          characterBackgroundColor,
+          textColorValue,
+          charPaddingLeft,
+          charPaddingRight,
+          charPaddingTop,
+          charPaddingBottom,
+          cornerRadius,
+          isFirst,
+          isLast
+        )
+        spannable.setSpan(span, i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
+      }
+    }
+    
+    isUpdatingText = true
+    setText(spannable)
+    setSelection(text.length) // Keep cursor at end
+    isUpdatingText = false
+  }
+  
+  private fun shouldHighlightChar(text: String, index: Int): Boolean {
+    if (index < 0 || index >= text.length) return false
+    val char = text[index]
+    
+    return when {
+      char == '\n' || char == '\t' -> false
+      char == ' ' -> {
+        val hasSpaceBefore = index > 0 && text[index - 1] == ' '
+        val hasSpaceAfter = index < text.length - 1 && text[index + 1] == ' '
+        !hasSpaceBefore && !hasSpaceAfter
+      }
+      else -> true
+    }
+  }
 }

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

@@ -1,11 +1,17 @@
 package com.highlighttext
 
 import android.graphics.Color
+import android.text.InputType
+import android.view.Gravity
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
 import com.facebook.react.viewmanagers.HighlightTextViewManagerInterface
 import com.facebook.react.viewmanagers.HighlightTextViewManagerDelegate
 
@@ -27,12 +33,135 @@ class HighlightTextViewManager : SimpleViewManager<HighlightTextView>(),
   }
 
   public override fun createViewInstance(context: ThemedReactContext): HighlightTextView {
-    return HighlightTextView(context)
+    val view = HighlightTextView(context)
+    view.onTextChangeListener = { text ->
+      val event: WritableMap = Arguments.createMap()
+      event.putString("text", text)
+      
+      val reactContext = context as ReactContext
+      reactContext
+        .getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(view.id, "onChange", event)
+    }
+    return view
   }
 
   @ReactProp(name = "color")
   override fun setColor(view: HighlightTextView?, color: String?) {
-    view?.setBackgroundColor(Color.parseColor(color))
+    color?.let {
+      try {
+        view?.setCharacterBackgroundColor(Color.parseColor(it))
+      } catch (e: IllegalArgumentException) {
+        // Invalid color format, use default
+        view?.setCharacterBackgroundColor(Color.parseColor("#FFFF00"))
+      }
+    }
+  }
+
+  @ReactProp(name = "textColor")
+  override fun setTextColor(view: HighlightTextView?, value: String?) {
+    value?.let {
+      try {
+        view?.setTextColor(Color.parseColor(it))
+      } catch (e: IllegalArgumentException) {
+        // Invalid color format, use default
+        view?.setTextColor(Color.BLACK)
+      }
+    }
+  }
+
+  @ReactProp(name = "textAlign")
+  override fun setTextAlign(view: HighlightTextView?, value: String?) {
+    // Parse combined alignment (e.g., "top-left", "bottom-center")
+    val parts = value?.split("-") ?: emptyList()
+    var horizontalAlign = value
+    
+    if (parts.size == 2) {
+      // Combined format: use the second part for horizontal alignment
+      horizontalAlign = parts[1]
+    }
+    
+    // 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
+    }
+  }
+
+  @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
+  }
+
+  @ReactProp(name = "fontFamily")
+  override fun setFontFamily(view: HighlightTextView?, value: String?) {
+    // Font family handling can be added if needed
+  }
+
+  @ReactProp(name = "fontSize")
+  override fun setFontSize(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { size ->
+      view?.textSize = size
+    }
+  }
+
+  @ReactProp(name = "padding")
+  override fun setPadding(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPadding(padding, padding, padding, padding)
+    }
+  }
+
+  @ReactProp(name = "paddingLeft")
+  override fun setPaddingLeft(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingLeft(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingRight")
+  override fun setPaddingRight(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingRight(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingTop")
+  override fun setPaddingTop(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingTop(padding)
+    }
+  }
+
+  @ReactProp(name = "paddingBottom")
+  override fun setPaddingBottom(view: HighlightTextView?, value: String?) {
+    value?.toFloatOrNull()?.let { padding ->
+      view?.setCharPaddingBottom(padding)
+    }
+  }
+
+  @ReactProp(name = "text")
+  override fun setText(view: HighlightTextView?, value: String?) {
+    view?.setTextProp(value ?: "")
+  }
+
+  @ReactProp(name = "isEditable")
+  override fun setIsEditable(view: HighlightTextView?, value: Boolean) {
+    view?.apply {
+      isFocusable = value
+      isFocusableInTouchMode = value
+      isEnabled = value
+      inputType = if (value) {
+        InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_FLAG_MULTI_LINE
+      } else {
+        InputType.TYPE_NULL
+      }
+    }
   }
 
   companion object {

package/ios/HighlightTextView.mm

@@ -74,6 +74,8 @@ using namespace facebook::react;
     CGFloat _paddingBottom;
     CGFloat _cornerRadius;
     BOOL _isUpdatingText;
+    NSString * _currentVerticalAlignment;
+    NSTextAlignment _currentHorizontalAlignment;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -94,6 +96,8 @@ using namespace facebook::react;
     _paddingTop = 4.0;
     _paddingBottom = 4.0;
     _cornerRadius = 4.0;
+    _currentVerticalAlignment = nil;
+    _currentHorizontalAlignment = NSTextAlignmentCenter;
     
     // Create text storage, layout manager, and text container
     NSTextStorage *textStorage = [[NSTextStorage alloc] init];
@@ -128,6 +132,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 +219,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);
         }
         
@@ -269,6 +316,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 +332,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 +348,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)

package/package.json

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