feat: add start and end props to onLinkDetected payload (#120)

Author: szydlovsky

android/src/main/java/com/swmansion/reactnativerichtexteditor/events/OnLinkDetectedEvent.kt

@@ -4,7 +4,7 @@ import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.uimanager.events.Event
 
-class OnLinkDetectedEvent(surfaceId: Int, viewId: Int, private val text: String, private val url: String) :
+class OnLinkDetectedEvent(surfaceId: Int, viewId: Int, private val text: String, private val url: String, private val start: Int, private val end: Int) :
   Event<OnLinkDetectedEvent>(surfaceId, viewId) {
 
   override fun getEventName(): String {
@@ -15,6 +15,8 @@ class OnLinkDetectedEvent(surfaceId: Int, viewId: Int, private val text: String,
     val eventData: WritableMap = Arguments.createMap()
     eventData.putString("text", text)
     eventData.putString("url", url)
+    eventData.putInt("start", start);
+    eventData.putInt("end", end);
     return eventData
   }
 

android/src/main/java/com/swmansion/reactnativerichtexteditor/utils/EditorSelection.kt

@@ -236,7 +236,7 @@ class EditorSelection(private val editorView: ReactNativeRichTextEditorView) {
     val context = editorView.context as ReactContext
     val surfaceId = UIManagerHelper.getSurfaceId(context)
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, editorView.id)
-    dispatcher?.dispatchEvent(OnLinkDetectedEvent(surfaceId, editorView.id, text, url))
+    dispatcher?.dispatchEvent(OnLinkDetectedEvent(surfaceId, editorView.id, text, url, start, end))
   }
 
   private fun emitMentionDetectedEvent(spannable: Spannable, span: EditorMentionSpan?, start: Int, end: Int) {

example/src/App.tsx

@@ -57,6 +57,8 @@ const DEFAULT_STYLE: StylesState = {
 const DEFAULT_LINK_STATE = {
   text: '',
   url: '',
+  start: 0,
+  end: 0,
 };
 
 const DEBUG_SCROLLABLE = false;
@@ -196,6 +198,11 @@ export default function App() {
     console.log('Input blurred');
   };
 
+  const handleLinkDetected = (state: CurrentLinkState) => {
+    console.log(state);
+    setCurrentLink(state);
+  };
+
   const handleSelectionChangeEvent = (
     e: NativeSyntheticEvent<OnChangeSelectionEvent>
   ) => {
@@ -225,7 +232,7 @@ export default function App() {
             onChangeText={handleChangeText}
             onChangeHtml={handleChangeHtml}
             onChangeState={handleChangeState}
-            onLinkDetected={setCurrentLink}
+            onLinkDetected={handleLinkDetected}
             onMentionDetected={console.log}
             onStartMention={handleStartMention}
             onChangeMention={handleChangeMention}

ios/ReactNativeRichTextEditorView.h

@@ -21,7 +21,7 @@ NS_ASSUME_NONNULL_BEGIN
   @public BOOL emitHtml;
 }
 - (CGSize)measureSize:(CGFloat)maxWidth;
-- (void)emitOnLinkDetectedEvent:(NSString *)text url:(NSString *)url;
+- (void)emitOnLinkDetectedEvent:(NSString *)text url:(NSString *)url range:(NSRange)range;
 - (void)emitOnMentionEvent:(NSString *)indicator text:(nullable NSString *)text;
 - (void)anyTextMayHaveBeenModified;
 - (BOOL)handleStyleBlocksAndConflicts:(StyleType)type range:(NSRange)range;

ios/ReactNativeRichTextEditorView.mm

@@ -654,7 +654,7 @@ - (void)tryUpdatingActiveStyles {
 
   if(detectedLinkData != nullptr) {
     // emit onLinkeDetected event
-    [self emitOnLinkDetectedEvent:detectedLinkData.text url:detectedLinkData.url];
+    [self emitOnLinkDetectedEvent:detectedLinkData.text url:detectedLinkData.url range:detectedLinkRange];
 
     _recentlyActiveLinkData = detectedLinkData;
     _recentlyActiveLinkRange = detectedLinkRange;
@@ -753,12 +753,14 @@ - (void)setValue:(NSString *)value {
   [self anyTextMayHaveBeenModified];
 }
 
-- (void)emitOnLinkDetectedEvent:(NSString *)text url:(NSString *)url {
+- (void)emitOnLinkDetectedEvent:(NSString *)text url:(NSString *)url range:(NSRange)range {
   auto emitter = [self getEventEmitter];
   if(emitter != nullptr) {
     emitter->onLinkDetected({
       .text = [text toCppString],
-      .url = [url toCppString]
+      .url = [url toCppString],
+      .start = static_cast<int>(range.location),
+      .end = static_cast<int>(range.location + range.length),
     });
   }
 }

ios/styles/LinkStyle.mm

@@ -354,7 +354,7 @@ - (void)handleAutomaticLinks:(NSString *)word inRange:(NSRange)wordRange {
     }
 
     // emit onLinkDetected
-    [_editor emitOnLinkDetectedEvent:word url:regexPassedUrl];
+    [_editor emitOnLinkDetectedEvent:word url:regexPassedUrl range:wordRange];
   }
 }
 

src/ReactNativeRichTextEditorViewNativeComponent.ts

@@ -38,6 +38,8 @@ export interface OnChangeStateEvent {
 export interface OnLinkDetected {
   text: string;
   url: string;
+  start: Int32;
+  end: Int32;
 }
 
 export interface OnMentionDetectedInternal {

src/RichTextInput.tsx

@@ -298,8 +298,8 @@ export const RichTextInput = ({
   };
 
   const handleLinkDetected = (e: NativeSyntheticEvent<OnLinkDetected>) => {
-    const { text, url } = e.nativeEvent;
-    onLinkDetected?.({ text, url });
+    const { text, url, start, end } = e.nativeEvent;
+    onLinkDetected?.({ text, url, start, end });
   };
 
   const handleMentionDetected = (