feat: focus events (#44)

Author: exploIF

android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorView.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.graphics.BlendMode
 import android.graphics.BlendModeColorFilter
 import android.graphics.Color
+import android.graphics.Rect
 import android.os.Build
 import android.text.Spannable
 import android.text.StaticLayout
@@ -15,14 +16,18 @@ import android.view.MotionEvent
 import android.view.inputmethod.InputMethodManager
 import androidx.appcompat.widget.AppCompatEditText
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
 import com.facebook.react.common.ReactConstants
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.views.text.ReactTypefaceUtils.applyStyles
 import com.facebook.react.views.text.ReactTypefaceUtils.parseFontStyle
 import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
 import com.swmansion.reactnativerichtexteditor.events.LinkHandler
 import com.swmansion.reactnativerichtexteditor.events.MentionHandler
+import com.swmansion.reactnativerichtexteditor.events.OnBlurEvent
+import com.swmansion.reactnativerichtexteditor.events.OnFocusEvent
 import com.swmansion.reactnativerichtexteditor.spans.EditorSpans
 import com.swmansion.reactnativerichtexteditor.styles.InlineStyles
 import com.swmansion.reactnativerichtexteditor.styles.ListStyles
@@ -129,15 +134,28 @@ class ReactNativeRichTextEditorView : AppCompatEditText {
     selection?.onSelection(selStart, selEnd)
   }
 
-  fun setStateWrapper(sw: StateWrapper?) {
-    stateWrapper = sw
-  }
-
   override fun clearFocus() {
     super.clearFocus()
     inputMethodManager?.hideSoftInputFromWindow(windowToken, 0)
   }
 
+  override fun onFocusChanged(focused: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
+    super.onFocusChanged(focused, direction, previouslyFocusedRect)
+    val context = context as ReactContext
+    val surfaceId = UIManagerHelper.getSurfaceId(context)
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(context, id)
+
+    if (focused) {
+      dispatcher?.dispatchEvent(OnFocusEvent(surfaceId, id))
+    } else {
+      dispatcher?.dispatchEvent(OnBlurEvent(surfaceId, id))
+    }
+  }
+
+  fun setStateWrapper(sw: StateWrapper?) {
+    stateWrapper = sw
+  }
+
   fun requestFocusProgrammatically() {
     requestFocus()
     inputMethodManager?.showSoftInput(this, 0)

android/src/main/java/com/swmansion/reactnativerichtexteditor/ReactNativeRichTextEditorViewManager.kt

@@ -16,9 +16,11 @@ import com.facebook.react.viewmanagers.ReactNativeRichTextEditorViewManagerInter
 import com.facebook.react.viewmanagers.ReactNativeRichTextEditorViewManagerDelegate
 import com.facebook.yoga.YogaMeasureMode
 import com.facebook.yoga.YogaMeasureOutput
+import com.swmansion.reactnativerichtexteditor.events.OnBlurEvent
 import com.swmansion.reactnativerichtexteditor.events.OnChangeHtmlEvent
 import com.swmansion.reactnativerichtexteditor.events.OnChangeStateEvent
 import com.swmansion.reactnativerichtexteditor.events.OnChangeTextEvent
+import com.swmansion.reactnativerichtexteditor.events.OnFocusEvent
 import com.swmansion.reactnativerichtexteditor.events.OnLinkDetectedEvent
 import com.swmansion.reactnativerichtexteditor.events.OnMentionEvent
 import com.swmansion.reactnativerichtexteditor.events.OnPressLinkEvent
@@ -61,6 +63,8 @@ class ReactNativeRichTextEditorViewManager : SimpleViewManager<ReactNativeRichTe
 
    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
      val map = mutableMapOf<String, Any>()
+     map.put(OnFocusEvent.EVENT_NAME, mapOf("registrationName" to OnFocusEvent.EVENT_NAME))
+     map.put(OnBlurEvent.EVENT_NAME, mapOf("registrationName" to OnBlurEvent.EVENT_NAME))
      map.put(OnChangeTextEvent.EVENT_NAME, mapOf("registrationName" to OnChangeTextEvent.EVENT_NAME))
      map.put(OnChangeHtmlEvent.EVENT_NAME, mapOf("registrationName" to OnChangeHtmlEvent.EVENT_NAME))
      map.put(OnChangeStateEvent.EVENT_NAME, mapOf("registrationName" to OnChangeStateEvent.EVENT_NAME))

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

@@ -0,0 +1,23 @@
+package com.swmansion.reactnativerichtexteditor.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnBlurEvent(surfaceId: Int, viewId: Int) :
+  Event<OnBlurEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun getEventData(): WritableMap {
+    val eventData: WritableMap = Arguments.createMap()
+
+    return eventData
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onBlur"
+  }
+}

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

@@ -0,0 +1,23 @@
+package com.swmansion.reactnativerichtexteditor.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+
+class OnFocusEvent(surfaceId: Int, viewId: Int) :
+  Event<OnFocusEvent>(surfaceId, viewId) {
+
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun getEventData(): WritableMap {
+    val eventData: WritableMap = Arguments.createMap()
+
+    return eventData
+  }
+
+  companion object {
+    const val EVENT_NAME: String = "onFocus"
+  }
+}

example/src/App.tsx

@@ -158,6 +158,14 @@ export default function App() {
     );
   };
 
+  const handleFocusEvent = () => {
+    console.log('Input focused');
+  };
+
+  const handleBlurEvent = () => {
+    console.log('Input blurred');
+  };
+
   return (
     <>
       <ScrollView
@@ -185,6 +193,8 @@ export default function App() {
             onChangeMention={handleChangeMention}
             onEndMention={closeMentionPopup}
             onPressMention={handleMentionPress}
+            onFocus={handleFocusEvent}
+            onBlur={handleBlurEvent}
           />
           <Toolbar
             stylesState={stylesState}

src/ReactNativeRichTextEditorViewNativeComponent.ts

@@ -64,6 +64,8 @@ export interface NativeProps extends ViewProps {
   selectionColor?: ColorValue;
 
   // event callbacks
+  onFocus?: DirectEventHandler<null>;
+  onBlur?: DirectEventHandler<null>;
   onChangeText?: DirectEventHandler<OnChangeTextEvent>;
   onChangeHtml?: DirectEventHandler<OnChangeHtmlEvent>;
   onChangeState?: DirectEventHandler<OnChangeStateEvent>;

src/RichTextInput.tsx

@@ -69,6 +69,8 @@ export interface RichTextInputProps extends Omit<ViewProps, 'children'> {
   cursorColor?: ColorValue;
   selectionColor?: ColorValue;
   style?: ViewStyle | TextStyle;
+  onFocus?: () => void;
+  onBlur?: () => void;
   onChangeText?: (e: NativeSyntheticEvent<OnChangeTextEvent>) => void;
   onChangeHtml?: (e: NativeSyntheticEvent<OnChangeHtmlEvent>) => void;
   onChangeState?: (e: NativeSyntheticEvent<OnChangeStateEvent>) => void;
@@ -107,6 +109,8 @@ export const RichTextInput = ({
   cursorColor,
   selectionColor,
   style,
+  onFocus,
+  onBlur,
   onChangeText,
   onChangeHtml,
   onChangeState,
@@ -242,6 +246,8 @@ export const RichTextInput = ({
       cursorColor={cursorColor}
       selectionColor={selectionColor}
       style={style}
+      onFocus={onFocus}
+      onBlur={onBlur}
       onChangeText={onChangeText}
       onChangeHtml={onChangeHtml}
       onChangeState={onChangeState}