react-native-advanced-text 0.1.5 → 0.1.7

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

@@ -1,94 +1,263 @@
+// File: AdvancedTextView.kt
 package com.advancedtext
 
+import android.content.Context
 import android.graphics.Color
-import android.view.ViewGroup
-import com.facebook.react.bridge.ReadableArray
-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.viewmanagers.AdvancedTextViewManagerInterface
-import com.facebook.react.viewmanagers.AdvancedTextViewManagerDelegate
-
-@ReactModule(name = AdvancedTextViewManager.NAME)
-class AdvancedTextViewManager : SimpleViewManager<AdvancedTextView>(),
-    AdvancedTextViewManagerInterface<AdvancedTextView> {
-    private val mDelegate: ViewManagerDelegate<AdvancedTextView>
-
-    init {
-        mDelegate = AdvancedTextViewManagerDelegate(this)
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.TextPaint
+import android.text.method.LinkMovementMethod
+import android.text.style.ClickableSpan
+import android.text.style.BackgroundColorSpan
+import android.util.AttributeSet
+import android.util.Log
+import android.view.ContextMenu
+import android.view.MenuItem
+import android.view.View
+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
+
+class AdvancedTextView : TextView, View.OnCreateContextMenuListener {
+
+    private val TAG = "AdvancedTextView"
+
+    private var highlightedWords: List<HighlightedWord> = emptyList()
+    private var menuOptions: List<String> = emptyList()
+    private var indicatorWordIndex: Int = -1
+    private var lastSelectedText: String = ""
+    private var isSelectionEnabled: Boolean = true
+
+    constructor(context: Context?) : super(context) { init() }
+    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { init() }
+    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { init() }
+
+    private fun init() {
+        Log.d(TAG, "AdvancedTextView initialized")
+
+        // Set default text appearance
+        setTextColor(Color.BLACK)
+        textSize = 16f
+        setPadding(16, 16, 16, 16)
+
+        movementMethod = LinkMovementMethod.getInstance()
+        setTextIsSelectable(true)
+        setOnCreateContextMenuListener(this)
+
+        // Ensure minimum height for visibility during debugging
+        minHeight = 100
     }
 
-    override fun getDelegate(): ViewManagerDelegate<AdvancedTextView>? {
-        return mDelegate
+    fun setAdvancedText(text: String) {
+        Log.d(TAG, "setAdvancedText: $text (length=${text.length})")
+        this.text = text
+        updateTextWithHighlights()
+        // Force layout update
+        requestLayout()
+        invalidate()
     }
 
-    override fun getName(): String {
-        return NAME
+    fun setMenuOptions(menuOptions: List<String>) {
+        Log.d(TAG, "setMenuOptions received from RN: $menuOptions")
+        this.menuOptions = menuOptions
     }
 
-    public override fun createViewInstance(context: ThemedReactContext): AdvancedTextView {
-        val view = AdvancedTextView(context)
-        // Set default layout params to ensure the view is visible
-        view.layoutParams = ViewGroup.LayoutParams(
-            ViewGroup.LayoutParams.MATCH_PARENT,
-            ViewGroup.LayoutParams.WRAP_CONTENT
-        )
-        return view
+    fun setHighlightedWords(highlightedWords: List<HighlightedWord>) {
+        Log.d(TAG, "setHighlightedWords received from RN: $highlightedWords")
+        this.highlightedWords = highlightedWords
+        updateTextWithHighlights()
     }
 
-    @ReactProp(name = "text")
-    override fun setText(view: AdvancedTextView?, text: String?) {
-        view?.setAdvancedText(text ?: "")
+    fun setIndicatorWordIndex(index: Int) {
+        Log.d(TAG, "setIndicatorWordIndex received: $index")
+        this.indicatorWordIndex = index
+        updateTextWithHighlights()
     }
 
-    @ReactProp(name = "highlightedWords")
-    override fun setHighlightedWords(view: AdvancedTextView?, highlightedWords: ReadableArray?) {
-        val words = mutableListOf<HighlightedWord>()
-        highlightedWords?.let {
-            for (i in 0 until it.size()) {
-                val map = it.getMap(i)
-                map?.let { wordMap ->
-                    words.add(
-                        HighlightedWord(
-                            index = wordMap.getInt("index"),
-                            highlightColor = wordMap.getString("highlightColor") ?: "#FFFF00"
+    private fun updateTextWithHighlights() {
+        val textValue = this.text?.toString() ?: ""
+        Log.d(TAG, "updateTextWithHighlights called")
+        Log.d(TAG, "Current text: $textValue")
+        Log.d(TAG, "Highlighted words: $highlightedWords")
+        Log.d(TAG, "Indicator index: $indicatorWordIndex")
+
+        if (textValue.isEmpty()) {
+            Log.d(TAG, "No text available, skipping")
+            return
+        }
+
+        val spannableString = SpannableString(textValue)
+        val words = textValue.split("\\s+".toRegex())
+
+        var currentIndex = 0
+        words.forEachIndexed { wordIndex, word ->
+
+            if (word.isNotEmpty()) {
+                val wordStart = textValue.indexOf(word, currentIndex)
+                if (wordStart >= 0) {
+                    val wordEnd = wordStart + word.length
+
+                    highlightedWords.find { it.index == wordIndex }?.let { highlightedWord ->
+                        val color = try {
+                            Color.parseColor(highlightedWord.highlightColor)
+                        } catch (e: IllegalArgumentException) {
+                            Log.e(TAG, "Invalid color: ${highlightedWord.highlightColor}, using yellow")
+                            Color.YELLOW
+                        }
+                        Log.d(TAG, "Applying highlight to word '$word' at index $wordIndex with color ${highlightedWord.highlightColor}")
+
+                        spannableString.setSpan(
+                            BackgroundColorSpan(color),
+                            wordStart,
+                            wordEnd,
+                            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
+                        )
+                    }
+
+                    if (wordIndex == indicatorWordIndex) {
+                        Log.d(TAG, "Applying indicator span to word '$word' at index $wordIndex")
+
+                        spannableString.setSpan(
+                            IndicatorSpan(),
+                            wordStart,
+                            wordEnd,
+                            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
                         )
+                    }
+
+                    // clickable span
+                    spannableString.setSpan(
+                        WordClickableSpan(wordIndex, word),
+                        wordStart,
+                        wordEnd,
+                        Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
                     )
+
+                    currentIndex = wordEnd
                 }
             }
         }
-        view?.setHighlightedWords(words)
+
+        setText(spannableString, BufferType.SPANNABLE)
+        Log.d(TAG, "Text updated with spans")
     }
 
-    @ReactProp(name = "menuOptions")
-    override fun setMenuOptions(view: AdvancedTextView?, menuOptions: ReadableArray?) {
-        val options = mutableListOf<String>()
-        menuOptions?.let {
-            for (i in 0 until it.size()) {
-                it.getString(i)?.let { option ->
-                    options.add(option)
+    override fun onCreateContextMenu(menu: ContextMenu?, v: View?, menuInfo: ContextMenu.ContextMenuInfo?) {
+        val selectionStart = selectionStart
+        val selectionEnd = selectionEnd
+
+        Log.d(TAG, "onCreateContextMenu triggered. selectionStart=$selectionStart selectionEnd=$selectionEnd")
+
+        if (selectionStart >= 0 && selectionEnd >= 0 && selectionStart != selectionEnd) {
+            lastSelectedText = text.subSequence(selectionStart, selectionEnd).toString()
+
+            Log.d(TAG, "User selected text: '$lastSelectedText'")
+            Log.d(TAG, "Menu options available: $menuOptions")
+
+            menu?.clear()
+
+            menuOptions.forEachIndexed { index, option ->
+                menu?.add(0, index, index, option)?.setOnMenuItemClickListener {
+                    Log.d(TAG, "Menu item clicked: $option")
+                    onMenuItemClick(it, lastSelectedText)
+                    true
                 }
             }
+
+            sendSelectionEvent(lastSelectedText, "selection")
         }
-        view?.setMenuOptions(options)
     }
 
-    @ReactProp(name = "indicatorWordIndex")
-    override fun setIndicatorWordIndex(view: AdvancedTextView?, index: Int) {
-        view?.setIndicatorWordIndex(index)
+    private fun onMenuItemClick(item: MenuItem, selectedText: String): Boolean {
+        val menuItemText = menuOptions[item.itemId]
+        Log.d(TAG, "onMenuItemClick: menuOption='$menuItemText', selectedText='$selectedText'")
+        sendSelectionEvent(selectedText, menuItemText)
+        return true
     }
 
-    // Add this method to register custom events
-    override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
-        return mapOf(
-            "onWordPress" to mapOf("registrationName" to "onWordPress"),
-            "onSelection" to mapOf("registrationName" to "onSelection")
-        )
+    private fun sendSelectionEvent(selectedText: String, eventType: String) {
+        Log.d(TAG, "sendSelectionEvent -> eventType='$eventType' selectedText='$selectedText'")
+
+        try {
+            val reactContext = context as? ReactContext ?: return
+            val event = Arguments.createMap().apply {
+                putString("selectedText", selectedText)
+                putString("event", eventType)
+            }
+
+            reactContext.getJSModule(RCTEventEmitter::class.java)
+                .receiveEvent(id, "onSelection", event)
+        } catch (e: Exception) {
+            Log.e(TAG, "Error sending selection event", e)
+        }
+    }
+
+    private inner class WordClickableSpan(
+        private val wordIndex: Int,
+        private val word: String
+    ) : ClickableSpan() {
+
+        override fun onClick(widget: View) {
+            Log.d(TAG, "Word clicked: '$word' (index=$wordIndex)")
+            sendWordPressEvent(word, wordIndex)
+        }
+
+        override fun updateDrawState(ds: TextPaint) {
+            super.updateDrawState(ds)
+            ds.color = currentTextColor
+            ds.isUnderlineText = false
+        }
+    }
+
+    private inner class IndicatorSpan : ClickableSpan() {
+        override fun onClick(widget: View) {
+            Log.d(TAG, "IndicatorSpan clicked (shouldn't trigger action)")
+        }
+
+        override fun updateDrawState(ds: TextPaint) {
+            ds.color = Color.RED
+            ds.isFakeBoldText = true
+            ds.isUnderlineText = false
+        }
     }
 
-    companion object {
-        const val NAME = "AdvancedTextView"
+    private fun sendWordPressEvent(word: String, index: Int) {
+        Log.d(TAG, "sendWordPressEvent -> word='$word', index=$index")
+
+        try {
+            val reactContext = context as? ReactContext ?: return
+            val event = Arguments.createMap().apply {
+                putString("word", word)
+                putInt("index", index)
+            }
+
+            reactContext.getJSModule(RCTEventEmitter::class.java)
+                .receiveEvent(id, "onWordPress", event)
+        } catch (e: Exception) {
+            Log.e(TAG, "Error sending word press event", e)
+        }
+    }
+
+    fun clearSelection() {
+        Log.d(TAG, "clearSelection called")
+        val spannable = this.text as? android.text.Spannable ?: return
+        Selection.removeSelection(spannable)
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+        Log.d(TAG, "onMeasure: width=${measuredWidth}, height=${measuredHeight}")
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        Log.d(TAG, "onLayout: changed=$changed, bounds=[$left,$top,$right,$bottom]")
     }
 }
+
+data class HighlightedWord(
+    val index: Int,
+    val highlightColor: String
+)

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

@@ -1,6 +1,7 @@
+// File: AdvancedTextViewManager.kt
+// This should be the ONLY content in this file
 package com.advancedtext
 
-import android.graphics.Color
 import android.view.ViewGroup
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.module.annotations.ReactModule

package/lib/module/AdvancedTextViewNativeComponent.ts

@@ -1,6 +1,7 @@
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { TextProps } from 'react-native';
 // @ts-ignore
+// eslint-disable-next-line prettier/prettier
 import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
 interface HighlightedWord {
@@ -8,7 +9,7 @@ interface HighlightedWord {
   highlightColor: string;
 }
 
-interface NativeProps extends ViewProps {
+interface NativeProps extends TextProps {
   text: string;
   highlightedWords?: ReadonlyArray<HighlightedWord>;
   menuOptions?: ReadonlyArray<string>;

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

@@ -1,9 +1,9 @@
-import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { NativeSyntheticEvent, TextProps } from 'react-native';
 interface HighlightedWord {
     index: number;
     highlightColor: string;
 }
-interface NativeProps extends ViewProps {
+interface NativeProps extends TextProps {
     text: string;
     highlightedWords?: ReadonlyArray<HighlightedWord>;
     menuOptions?: ReadonlyArray<string>;

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

@@ -1,10 +1,10 @@
-import type { ViewProps } from 'react-native';
+import type { TextProps } from 'react-native';
 import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 interface HighlightedWord {
     index: Int32;
     highlightColor: string;
 }
-interface NativeProps extends ViewProps {
+interface NativeProps extends TextProps {
     text: string;
     highlightedWords?: ReadonlyArray<HighlightedWord>;
     menuOptions?: ReadonlyArray<string>;

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;AAE9C,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,UAAU,WAAY,SAAQ,SAAS;IACrC,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,CAAA;KAAE,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9E,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;;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,UAAU,WAAY,SAAQ,SAAS;IACrC,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,CAAA;KAAE,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,kBAAkB,CAAC;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9E,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;;AAED,wBAAuE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-advanced-text",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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/AdvancedText.tsx

@@ -1,4 +1,4 @@
-import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { NativeSyntheticEvent, TextProps } from 'react-native';
 import AdvancedTextViewNativeComponent from './AdvancedTextViewNativeComponent';
 
 interface HighlightedWord {
@@ -6,7 +6,7 @@ interface HighlightedWord {
   highlightColor: string;
 }
 
-interface NativeProps extends ViewProps {
+interface NativeProps extends TextProps {
   text: string;
   highlightedWords?: ReadonlyArray<HighlightedWord>;
   menuOptions?: ReadonlyArray<string>;

package/src/AdvancedTextViewNativeComponent.ts

@@ -1,6 +1,7 @@
 import { codegenNativeComponent } from 'react-native';
-import type { ViewProps } from 'react-native';
+import type { TextProps } from 'react-native';
 // @ts-ignore
+// eslint-disable-next-line prettier/prettier
 import type { DirectEventHandler, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
 interface HighlightedWord {
@@ -8,7 +9,7 @@ interface HighlightedWord {
   highlightColor: string;
 }
 
-interface NativeProps extends ViewProps {
+interface NativeProps extends TextProps {
   text: string;
   highlightedWords?: ReadonlyArray<HighlightedWord>;
   menuOptions?: ReadonlyArray<string>;