feat(rich-text): add focus and blur

Author: IslamRustamov

README.md

@@ -39,6 +39,14 @@ import RichTextInput,  { type RichTextRef, type RichTextChangeEvent } from 'reac
 
 const ref = useRef<RichTextRef>(null);
 
+const handleFocus = () => {
+    ref.current?.focus();
+};
+
+const handleBlur = () => {
+    ref.current?.blur();
+};
+
 const handleUnderlinePress = () => {
     ref.current?.toggleUnderline();
 };
@@ -85,6 +93,7 @@ const handleInsertText = () => {
 5. Return text without markdown (iOS, Android)
 6. Add method that returns rich text in HTML (iOS, Android)
 7. Add method to set default text (Android)
+8. Add focus and blur methods (iOS, Android)
 
 # TODO
 

android/src/main/java/com/richtextinput/RichTextInputViewManager.kt

@@ -1,11 +1,13 @@
 package com.richtextinput
 
 import android.R.attr.htmlDescription
+import android.app.Activity
 import android.graphics.Typeface
 import android.text.Spannable
 import android.text.style.StrikethroughSpan
 import android.text.style.StyleSpan
 import android.text.style.UnderlineSpan
+import android.view.inputmethod.InputMethodManager
 import android.widget.EditText
 import androidx.core.text.HtmlCompat
 import androidx.core.text.toHtml
@@ -68,6 +70,12 @@ class RichTextInputViewManager : SimpleViewManager<EditText>() {
     Assertions.assertNotNull(root)
 
     when (commandId) {
+      "focus" -> {
+        focus(root)
+      }
+      "blur" -> {
+        blur(root)
+      }
       "toggleBold" -> {
         toggleBold(root)
       }
@@ -92,6 +100,20 @@ class RichTextInputViewManager : SimpleViewManager<EditText>() {
     super.receiveCommand(root, commandId, args)
   }
 
+  fun focus(editText: EditText) {
+    editText.requestFocus()
+
+    val inputMethodManager = editText.context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
+    inputMethodManager.showSoftInput(editText, 0)
+  }
+
+  fun blur(editText: EditText) {
+    editText.clearFocus()
+
+    val inputMethodManager = editText.context.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
+    inputMethodManager.hideSoftInputFromWindow(editText.windowToken, 0)
+  }
+
   fun insertText(editText: EditText, text: String) {
     val spannedText = HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_LEGACY)
     val trimmedText = spannedText.toString().trim()

example/src/App.tsx

@@ -43,6 +43,14 @@ function App(): React.JSX.Element {
     ref.current?.insertText('<p dir="ltr"><u>some</u> <b>text</b></p>');
   };
 
+  const handleFocus = () => {
+    ref.current?.focus();
+  };
+
+  const handleBlur = () => {
+    ref.current?.blur();
+  };
+
   return (
     <SafeAreaView style={styles.container}>
       <RichTextInput
@@ -51,6 +59,8 @@ function App(): React.JSX.Element {
         placeholder="I HATE ASDASDSA"
         onChange={handleChange}
       />
+      <Button title="Focus" onPress={handleFocus} />
+      <Button title="Blur" onPress={handleBlur} />
       <Button title="Underline" onPress={handleUnderlinePress} />
       <Button title="Bold" onPress={handleBoldPress} />
       <Button title="Strike" onPress={handleStrikePress} />

ios/RichTextInput.swift

@@ -43,6 +43,14 @@ class RichTextInput: UITextView, UIEditMenuInteractionDelegate {
     actions.insert(customMenu, at: 0)
     return UIMenu(children: actions)
   }
+    
+    func focus() {
+        reactFocus()
+    }
+    
+    func blur() {
+        reactBlur()
+    }
 
   // TODO: styles are getting lost if you enable/reenable them, bug, needs fixing
   func toggleStyle(style: NSAttributedString.Key) {

ios/RichTextInputViewManager.m

@@ -14,6 +14,8 @@ @interface RCT_EXTERN_MODULE(RichTextInputViewManager, RCTViewManager)
 RCT_EXTERN_METHOD(toggleStrike:(nonnull NSNumber *)node)
 RCT_EXTERN_METHOD(toggleItalic:(nonnull NSNumber *)node)
 RCT_EXTERN_METHOD(setPlaceholder:(nonnull NSNumber *)node placeholder:(nonnull NSString *)placeholder)
+RCT_EXTERN_METHOD(focus:(nonnull NSNumber *)node)
+RCT_EXTERN_METHOD(blur:(nonnull NSNumber *)node)
 
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 

ios/RichTextInputViewManager.swift

@@ -48,6 +48,20 @@ public class RichTextInputViewManager: RCTViewManager, UITextViewDelegate  {
         richTextView.toggleStyle(style: NSAttributedString.Key.underlineStyle)
       }, onNode: node)
   }
+    
+    @objc
+    func focus(_ node: NSNumber) {
+        executeBlock({ (richTextView) in
+          richTextView.focus()
+        }, onNode: node)
+    }
+
+    @objc
+    func blur(_ node: NSNumber) {
+        executeBlock({ (richTextView) in
+          richTextView.blur()
+        }, onNode: node)
+    }
 
   @objc
   func toggleStrike(_ node: NSNumber) {

src/index.tsx

@@ -37,6 +37,8 @@ export interface RichTextRef {
   toggleUnderline: Function;
   getHTML: () => Promise<string>;
   insertText: (text: string) => void;
+  focus: Function;
+  blur: Function;
 }
 
 const ComponentName = 'RichTextInputView';
@@ -65,6 +67,20 @@ const RichTextInput = forwardRef<RichTextRef, RichTextProps>(
 
     useImperativeHandle(ref, () => {
       return {
+        focus: () => {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(inputRef.current as unknown as Component),
+            'focus',
+            []
+          );
+        },
+        blur: () => {
+          UIManager.dispatchViewManagerCommand(
+            findNodeHandle(inputRef.current as unknown as Component),
+            'blur',
+            []
+          );
+        },
         toggleBold: () => {
           UIManager.dispatchViewManagerCommand(
             findNodeHandle(inputRef.current as unknown as Component),