react-native-advanced-text 0.1.28 → 0.1.30

package/README.md

@@ -1,37 +1,56 @@
-# react-native-advanced-text
-
- Advanced text component for React Native with custom select options.
-
-## Installation
-
-
-```sh
-npm install react-native-advanced-text
-```
-
-
-## Usage
-
-
-```js
-import { AdvancedTextView } from "react-native-advanced-text";
-
-// ...
-
-<AdvancedTextView color="tomato" />
-```
-
-
-## Contributing
-
-- [Development workflow](CONTRIBUTING.md#development-workflow)
-- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
-- [Code of conduct](CODE_OF_CONDUCT.md)
-
-## License
-
-MIT
-
----
-
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+# react-native-advanced-text
+
+ react-native-advanced-text is a powerful cross-platform text component for React Native that enables word-level interaction, dynamic highlighting, and custom selection actions.
+
+## Installation
+
+
+```sh
+npm install react-native-advanced-text
+```
+
+
+## Usage
+
+
+```js
+import { AdvancedTextView } from "react-native-advanced-text";
+
+<AdvancedText
+  text={'This is an example of AdvancedText component. Tap on any word to see the event in action.'}
+  style={[styles.AdvancedText, { minHeight }]}
+  indicatorWordIndex={2}
+  onWordPress={(event) => {
+    console.log({event})
+  }}
+  menuOptions={['Highlight', 'Copy', 'Translate']}
+  onSelection={(event) => {
+    console.log({event})
+  }}
+  highlightedWords={[
+    {
+      index: 4,
+      highlightColor: '#6baeffb5',
+    },
+  ]}
+  fontSize={24}
+  color={'#FFFFFF'}
+  fontWeight="normal"
+  fontFamily={'monospace'}
+/>
+```
+
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/src/main/java/com/advancedtext/AdvancedTextView.kt

@@ -2,10 +2,12 @@ package com.advancedtext
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Point
 import android.text.SpannableString
+import android.text.Spannable
 import android.text.Spanned
 import android.text.TextPaint
-import android.text.method.LinkMovementMethod
+import android.text.method.ArrowKeyMovementMethod
 import android.text.style.ClickableSpan
 import android.text.style.BackgroundColorSpan
 import android.text.style.ForegroundColorSpan
@@ -15,12 +17,14 @@ import android.view.ActionMode
 import android.view.Menu
 import android.view.MenuItem
 import android.view.View
+import android.view.MotionEvent
 import android.widget.TextView
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.events.RCTEventEmitter
 import android.text.Selection
 import android.graphics.Typeface
+import androidx.core.text.getSpans
 
 class AdvancedTextView : TextView {
 
@@ -49,9 +53,9 @@ class AdvancedTextView : TextView {
 
         textSize = 16f
         setPadding(16, 16, 16, 16)
-        movementMethod = LinkMovementMethod.getInstance()
         setTextIsSelectable(true)
 
+        movementMethod = SmartMovementMethod
 
         customSelectionActionModeCallback = object : ActionMode.Callback {
             override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
@@ -94,8 +98,6 @@ class AdvancedTextView : TextView {
         }
     }
 
-
-
     fun setAdvancedText(text: String) {
         if (currentText == text) {
             Log.d(TAG, "Text unchanged, skipping update")
@@ -113,7 +115,6 @@ class AdvancedTextView : TextView {
           updateTextWithHighlights()
     }
 
-
     fun setAdvancedTextSize(size: Float) {
         if (fontSize == size) return
         fontSize = size
@@ -137,6 +138,13 @@ class AdvancedTextView : TextView {
         }
     }
 
+    fun setAdvancedLineHeight(multiplier: Float) {
+        if (lineHeightMultiplier == multiplier) return
+        lineHeightMultiplier = multiplier
+        updateTextWithHighlights()
+    }
+
+
     fun setAdvancedFontFamily(family: String) {
         if (fontFamily == family) return
         fontFamily = family
@@ -210,6 +218,7 @@ class AdvancedTextView : TextView {
                 )
             }
 
+            // Add clickable span for word clicks
             spannableString.setSpan(
                 WordClickableSpan(wordPos.index, wordPos.word),
                 wordPos.start,
@@ -233,6 +242,11 @@ class AdvancedTextView : TextView {
             else -> Typeface.create(fontFamily, Typeface.NORMAL)
         }
 
+
+        lineSpacingMultiplier = lineHeightMultiplier
+        setLineSpacing(0f, lineHeightMultiplier)
+
+
         post {
             setText(spannableString, BufferType.SPANNABLE)
             Log.d(TAG, "Text updated with ${wordPositions.size} spans")
@@ -264,16 +278,13 @@ class AdvancedTextView : TextView {
     }
 
     private inner class WordClickableSpan(
-    private val wordIndex: Int,
-    private val word: String
+        private val wordIndex: Int,
+        private val word: String
     ) : ClickableSpan() {
 
         override fun onClick(widget: View) {
-            Log.d(TAG, "WordClickableSpan onClick triggered: '$word' (index=$wordIndex)")
-
-            widget.post {
-                sendWordPressEvent(word, wordIndex)
-            }
+            Log.d(TAG, "Word clicked: '$word' (index=$wordIndex)")
+            sendWordPressEvent(word, wordIndex)
         }
 
         override fun updateDrawState(ds: TextPaint) {
@@ -304,6 +315,56 @@ class AdvancedTextView : TextView {
         }
     }
 
+
+    private object SmartMovementMethod : ArrowKeyMovementMethod() {
+
+        override fun onTouchEvent(widget: TextView?, buffer: Spannable?, event: MotionEvent?): Boolean {
+            if (event != null && widget != null && buffer != null) {
+                if (handleMotion(event, widget, buffer)) {
+                    return true
+                }
+            }
+            return super.onTouchEvent(widget, buffer, event)
+        }
+
+        private fun handleMotion(event: MotionEvent, widget: TextView, buffer: Spannable): Boolean {
+            var handled = false
+
+            if (event.action == MotionEvent.ACTION_DOWN || event.action == MotionEvent.ACTION_UP) {
+                val target = Point().apply {
+                    x = event.x.toInt() - widget.totalPaddingLeft + widget.scrollX
+                    y = event.y.toInt() - widget.totalPaddingTop + widget.scrollY
+                }
+
+                val line = widget.layout.getLineForVertical(target.y)
+                val offset = widget.layout.getOffsetForHorizontal(line, target.x.toFloat())
+
+                if (event.action == MotionEvent.ACTION_DOWN) {
+                    handled = handled || buffer.execute<ClickableSpan>(offset) {
+                        Selection.setSelection(buffer, buffer.getSpanStart(it), buffer.getSpanEnd(it))
+                    }
+                }
+
+                if (event.action == MotionEvent.ACTION_UP) {
+                    handled = handled || buffer.execute<ClickableSpan>(offset) {
+                        it.onClick(widget)
+                    }
+                }
+            }
+
+            return handled
+        }
+
+        private inline fun <reified T : Any> Spannable.execute(offset: Int, fn: (T) -> Unit): Boolean {
+            val spans = this.getSpans<T>(offset, offset)
+            if (spans.isNotEmpty()) {
+                spans.forEach(fn)
+                return true
+            }
+            return false
+        }
+    }
+
     data class WordPosition(
         val index: Int,
         val start: Int,

package/android/src/main/java/com/advancedtext/AdvancedTextViewManager.kt

@@ -123,6 +123,15 @@ class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>() {
         }
     }
 
+
+    @ReactProp(name = "lineHeight")
+    fun setLineHeight(view: AdvancedTextView?, lineHeight: Float) {
+        android.util.Log.d(NAME, "setLineHeight called with: $lineHeight")
+        if (lineHeight > 0) {
+            view?.setAdvancedLineHeight(lineHeight)
+        }
+    }
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
         return mapOf(
             "onWordPress" to mapOf("registrationName" to "onWordPress"),

package/ios/AdvancedTextView.mm

@@ -23,6 +23,7 @@ using namespace facebook::react;
 @property (nonatomic, strong) UIColor *textColor;
 @property (nonatomic, strong) NSString *textAlign;
 @property (nonatomic, strong) NSString *fontFamily;
+@property (nonatomic, assign) CGFloat lineHeight;
 
 - (void)handleCustomMenuAction:(UIMenuItem *)sender;
 
@@ -89,6 +90,7 @@ using namespace facebook::react;
             _textColor = [UIColor labelColor];
             _textAlign = @"left";
             _fontFamily = @"System";
+            _lineHeight = 0.0;
 
             [self setupTextView];
             [self setupGestureRecognizers];
@@ -220,6 +222,12 @@ using namespace facebook::react;
             indicatorChanged = YES;
         }
 
+        if (oldViewProps.lineHeight != newViewProps.lineHeight) {
+            NSLog(@"[AdvancedTextView] Updating lineHeight to: %f", newViewProps.lineHeight);
+            _lineHeight = static_cast<CGFloat>(newViewProps.lineHeight);
+            styleChanged = YES;
+        }
+
         if (textChanged) {
             NSString *text = [NSString stringWithUTF8String:newViewProps.text.c_str()];
             [self updateTextContent:text];
@@ -356,7 +364,25 @@ using namespace facebook::react;
         NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]
                                                         initWithString:_textView.text];
 
+        if (_lineHeight > 0) {
+            NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
 
+            UIFont *font = nil;
+            if (_fontFamily && _fontFamily.length > 0) {
+                font = [UIFont fontWithName:_fontFamily size:_fontSize > 0 ? _fontSize : 16.0];
+            }
+            if (!font) {
+                font = [UIFont systemFontOfSize:_fontSize > 0 ? _fontSize : 16.0];
+            }
+
+            CGFloat lineSpacing = (_lineHeight * font.lineHeight) - font.lineHeight;
+            paragraphStyle.lineSpacing = lineSpacing;
+
+            [attributedString addAttribute:NSParagraphStyleAttributeName
+                                     value:paragraphStyle
+                                     range:NSMakeRange(0, attributedString.length)];
+        }
+        
         UIFont *font = nil;
 
         if (_fontFamily && _fontFamily.length > 0) {

package/lib/module/AdvancedTextViewNativeComponent.ts

@@ -1,26 +1,27 @@
-/* eslint-disable prettier/prettier */
-import type { ViewProps } from 'react-native';
-import { codegenNativeComponent } from 'react-native';
-// @ts-ignore
-import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-
-interface HighlightedWord {
-  index: Int32;
-  highlightColor: string;
-}
-
-export interface NativeProps extends ViewProps {
-  text: string;
-  highlightedWords?: ReadonlyArray<HighlightedWord>;
-  menuOptions?: ReadonlyArray<string>;
-  onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
-  onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
-  indicatorWordIndex?: Int32;
-  fontSize?: Int32;
-  fontWeight?: string;
-  color?: string;
-  textAlign?: string;
-  fontFamily?: string;
-}
-
-export default codegenNativeComponent<NativeProps>('AdvancedTextView');
+/* eslint-disable prettier/prettier */
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+// @ts-ignore
+import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface HighlightedWord {
+  index: Int32;
+  highlightColor: string;
+}
+
+export interface NativeProps extends ViewProps {
+  text: string;
+  highlightedWords?: ReadonlyArray<HighlightedWord>;
+  menuOptions?: ReadonlyArray<string>;
+  onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
+  onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
+  indicatorWordIndex?: Int32;
+  fontSize?: Int32;
+  fontWeight?: string;
+  color?: string;
+  textAlign?: string;
+  fontFamily?: string;
+  lineHeight?: number;
+}
+
+export default codegenNativeComponent<NativeProps>('AdvancedTextView');

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

@@ -22,6 +22,7 @@ export interface NativeProps extends ViewProps {
     color?: string;
     textAlign?: string;
     fontFamily?: string;
+    lineHeight?: number;
 }
 declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

package/lib/typescript/src/AdvancedTextViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE3F,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;AAED,wBAAuE"}
+{"version":3,"file":"AdvancedTextViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/AdvancedTextViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE3F,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAClD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACjE,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;;AAED,wBAAuE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": " Advanced text component for React Native with custom select options.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/AdvancedTextViewNativeComponent.ts

@@ -1,26 +1,27 @@
-/* eslint-disable prettier/prettier */
-import type { ViewProps } from 'react-native';
-import { codegenNativeComponent } from 'react-native';
-// @ts-ignore
-import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
-
-interface HighlightedWord {
-  index: Int32;
-  highlightColor: string;
-}
-
-export interface NativeProps extends ViewProps {
-  text: string;
-  highlightedWords?: ReadonlyArray<HighlightedWord>;
-  menuOptions?: ReadonlyArray<string>;
-  onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
-  onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
-  indicatorWordIndex?: Int32;
-  fontSize?: Int32;
-  fontWeight?: string;
-  color?: string;
-  textAlign?: string;
-  fontFamily?: string;
-}
-
-export default codegenNativeComponent<NativeProps>('AdvancedTextView');
+/* eslint-disable prettier/prettier */
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+// @ts-ignore
+import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface HighlightedWord {
+  index: Int32;
+  highlightColor: string;
+}
+
+export interface NativeProps extends ViewProps {
+  text: string;
+  highlightedWords?: ReadonlyArray<HighlightedWord>;
+  menuOptions?: ReadonlyArray<string>;
+  onWordPress?: DirectEventHandler<{ word: string; index: Int32 }>;
+  onSelection?: DirectEventHandler<{ selectedText: string; event: string }>;
+  indicatorWordIndex?: Int32;
+  fontSize?: Int32;
+  fontWeight?: string;
+  color?: string;
+  textAlign?: string;
+  fontFamily?: string;
+  lineHeight?: number;
+}
+
+export default codegenNativeComponent<NativeProps>('AdvancedTextView');