react-native-typerich 1.0.0 → 2.2.0

package/README.md

@@ -8,39 +8,271 @@ currently available only for android
 ```sh
 npm install react-native-typerich
 ```
+> [!NOTE]
+> you will need to prebuild app in expo
 
 ## Usage
 
-```js
+```jsx
 import { TypeRichTextInput } from 'react-native-typerich';
 
 // ...
-
 <TypeRichTextInput
-  ref={ref}
+  ref={inputRef}
+  value={value}
   style={styles.typeRichTextInput}
   placeholder="Type here..."
   placeholderTextColor="rgb(0, 26, 114)"
-  selectionColor="red"
-  cursorColor="green"
+  editable={true}
+  selectionColor="deepskyblue"
+  cursorColor="dodgerblue"
   autoCapitalize="words"
+  autoFocus
   onChangeText={(text: string) => console.log(text)}
   onFocus={() => console.log('focused')}
   onBlur={() => console.log('blurred')}
   onChangeSelection={(e: { start: number, end: number, text: string }) =>
     console.log(e)
   }
-  androidExperimentalSynchronousEvents={true}
-  multiline
-  numberOfLines={5}
   onPasteImageData={(e) => {
+    setImage(e);
     console.log(e);
   }}
-  defaultValue="TypeRichTextInput"
-  keyboardAppearance="dark" // ios only
+  androidExperimentalSynchronousEvents={true} // not tested very well
+  multiline
+  numberOfLines={5}
+  lineHeight={22}
+  fontFamily="serif"
+  fontStyle="italic"
+  fontWeight={'700'}
+  fontSize={26}
+  color="darkgreen"
 />;
 ```
 
+## Props
+
+- **Props that works Same as React Native's Default `TextInput`:**
+
+```ts
+value?: string;
+autoFocus?: boolean;
+editable?: boolean;
+defaultValue?: string;
+placeholder?: string;
+placeholderTextColor?: ColorValue;
+cursorColor?: ColorValue;
+selectionColor?: ColorValue;
+autoCapitalize?: string;
+scrollEnabled?: boolean;
+secureTextEntry?: boolean;
+```
+
+- **Styling Props you need to pass externally:**
+
+```ts
+color?: ColorValue;
+fontSize?: Float;
+fontFamily?: string;
+fontWeight?: string;
+fontStyle?: string;
+lineHeight?: Float;
+```
+
+- **props that have some bugs:**
+
+```ts
+multiline?: boolean;
+numberOfLines?: Int32;
+```
+
+> using this togather adds some extra height sometimes.
+> use multline without numberOfLines and it works fine
+> use `maxHeight` instead of number of lines
+
+> [!NOTE]
+> This is not a Major bug and the change is unnoticable
+
+## Events
+
+### 1. onFocus
+
+callback signature
+
+```ts
+onFocus?: () => void;
+```
+
+### 2. onBlur
+
+callback signature
+
+```ts
+onBlur?: () => void;
+```
+
+### 3. onChangeText
+
+callback signature
+
+```ts
+onChangeText?: (value: string) => void;
+```
+
+### 4. onChangeSelection
+
+callback signature
+
+```ts
+onChangeSelection?: (event: {
+  start: number;
+  end: number;
+  text: string;
+}) => void;
+```
+
+### 4. onPasteImageData
+
+> fires on when user paste image
+
+callback signature
+
+```ts
+onPasteImageData?: (data: {
+  uri: string;
+  type: string;
+  fileName: string;
+  fileSize: Double;
+  source: 'keyboard' | 'clipboard' | 'context_menu'; // it never receives source as 'context_menu' and will be removed in future we suggest not using it
+  error?: { message: string };
+}) => void;
+```
+
+### Event props
+
+- `uri`: uri of the image, can be directly used or passed to Image comp
+- `type`: mime type of image
+- `fileName`: File name of image (always starts with `typerich_` prefix)
+- `fileSize`: File Size in bytes
+- `source`: its enum with two possible values
+  - `keyboard`: if its pasted from gboard's clipboard or is a sticker or something similar
+  - `clipboard`: if its pasted from context menu (long press)
+- `error`: error message if there is any
+
+## Commands
+
+### 1. focus()
+
+> use to get programmatic focus on TextInput
+
+Command signature
+
+```ts
+focus: () => void;
+```
+
+useage
+
+```ts
+inputRef.current?.focus();
+```
+
+### 2. blur()
+
+> use to programmatically blur TextInput
+
+Command signature
+
+```ts
+blur: () => void;
+```
+
+useage
+
+```ts
+inputRef.current?.blur();
+```
+
+### 3. setText(text)
+
+> use to set the value of TextInput (replaces whole content)
+
+> [!NOTE]
+> it does not updates selection automatically use have to call `setSelection()`
+
+Command signature
+
+```ts
+setText: (text: string) => void;
+```
+
+useage
+
+```ts
+inputRef.current?.setText('This is Text');
+```
+
+### 4. insertTextAt(start, end, text)
+
+> use to insert value at specific position (keeps content of TextInput)
+
+> [!NOTE]
+> it preserves the cursor and updates the selection
+> no need to call the `setSelection` after this
+
+Command signature
+
+```ts
+insertTextAt: (start: number, end: number, text: string) => void;
+```
+
+useage
+
+```ts
+inputRef.current?.insertTextAt(4, 6, 'This is Text');
+```
+
+### 5. setSelection(start, end)
+
+> use to set the value of TextInput (replaces whole content)
+
+Command signature
+
+```ts
+setSelection: (start: number, end: number) => void;
+```
+
+useage
+
+```ts
+inputRef.current?.setSelection(4, 6);
+```
+
+### 6. getNativeRef()
+
+> use to get the internal ref object of the TypeRichTextInput
+
+> [!NOTE]
+> you mostly does not need to use this
+> only use this when you need to use the ref in certain cases like following
+
+```ts
+const hostRef = input?.getNativeRef?.();
+const node = findNodeHandle(hostRef); // findNodeHandle is from 'react-native'
+```
+
+Command signature
+
+```ts
+getNativeRef: () => any | null;
+```
+
+useage
+
+```ts
+inputRef.current?.getNativeRef();
+```
+
 ## Contributing
 
 - [Development workflow](CONTRIBUTING.md#development-workflow)
@@ -54,3 +286,12 @@ MIT
 ---
 
 Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+
+## Credits
+
+- **Divyanshu Patil** – Author & maintainer
+- Built with help from the open-source community ❤️
+
+### special thanks to [Software-Mansion](https://github.com/software-mansion) for the custom shadow node code
+
+checkout [react-native-enriched](https://github.com/software-mansion/react-native-enriched) by [software-mansion](https://github.com/software-mansion)

package/ReactNativeTypeRich.podspec

@@ -0,0 +1,41 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReactNativeTypeRich"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/divyanshu-patil/react-native-typerich.git", :tag => "#{s.version}" }
+
+  # s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.source_files = "ios/**/*.{h,m,mm,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+   s.public_header_files = [
+    "ios/**/*.h",
+    "ios/cpp/**/*.h"
+  ]
+
+  s.header_mappings_dir = "ios"
+
+  s.pod_target_xcconfig = {
+    "HEADER_SEARCH_PATHS" => '"$(PODS_TARGET_SRCROOT)/ios"',
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+  }
+
+# Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+# See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+if respond_to?(:install_modules_dependencies, true)
+  install_modules_dependencies(s)
+else
+  s.dependency "React-Core"
+end
+
+end
+

package/android/src/main/java/com/typerich/TypeRichTextInputView.kt

@@ -64,6 +64,7 @@ class TypeRichTextInputView : AppCompatEditText {
   private var lineHeightPx: Int? = null
   private var isSettingTextFromJS = false
   private var isInitialized = false
+  private var disableImagePasting = false
 
   constructor(context: Context) : super(context) {
     prepareComponent()
@@ -140,23 +141,34 @@ class TypeRichTextInputView : AppCompatEditText {
   override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection? {
     val ic = super.onCreateInputConnection(outAttrs) ?: return null
 
-    EditorInfoCompat.setContentMimeTypes(
-      outAttrs,
-      arrayOf("image/png", "image/jpg", "image/jpeg", "image/gif", "image/webp")
-    )
+    if (!disableImagePasting) {
+      EditorInfoCompat.setContentMimeTypes(
+        outAttrs,
+        arrayOf("image/png", "image/jpg", "image/jpeg", "image/gif", "image/webp")
+      )
+
+      return InputConnectionCompat.createWrapper(ic, outAttrs, onCommitContent)
+    }
 
-    return InputConnectionCompat.createWrapper(ic, outAttrs, onCommitContent)
+    return ic
   }
 
   private val onCommitContent = InputConnectionCompat.OnCommitContentListener { info, flags, _ ->
     try {
-      // request permission if needed
-      if ((flags and InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION) != 0) {
+      val hasPermission =
+        (flags and InputConnectionCompat.INPUT_CONTENT_GRANT_READ_URI_PERMISSION) != 0
+
+      if (hasPermission) {
         try {
           info.requestPermission()
-        } catch (ex: Exception) {
-          // permission failed
+        } catch (_: Exception) {}
+      }
+
+      if (disableImagePasting) {
+        if (hasPermission) {
+          try { info.releasePermission() } catch (_: Exception) {}
         }
+        return@OnCommitContentListener false
       }
 
       val uri = info.contentUri
@@ -189,7 +201,7 @@ class TypeRichTextInputView : AppCompatEditText {
     }
   }
 
-  // paste handler
+  // context menu paste handler
   override fun onTextContextMenuItem(id: Int): Boolean {
     if (id == android.R.id.paste || id == android.R.id.pasteAsPlainText) {
       val clipboard = context.getSystemService(Context.CLIPBOARD_SERVICE) as? ClipboardManager
@@ -198,6 +210,12 @@ class TypeRichTextInputView : AppCompatEditText {
       val clip = clipboard.primaryClip ?: return super.onTextContextMenuItem(id)
       val item = clip.getItemAt(0)
 
+      if (disableImagePasting) {
+        if (item.uri != null || item.intent?.data != null) {
+          return true
+        }
+      }
+
       // uri
       item.uri?.let { uri ->
         val source = EnumPasteSource.CLIPBOARD.value
@@ -496,6 +514,7 @@ class TypeRichTextInputView : AppCompatEditText {
     val sizePx = ceil(PixelUtil.toPixelFromSP(size))
     fontSize = sizePx
     setTextSize(TypedValue.COMPLEX_UNIT_PX, sizePx)
+    layoutManager.invalidateLayout()
   }
 
   fun setFontFamily(family: String?) {
@@ -539,6 +558,10 @@ class TypeRichTextInputView : AppCompatEditText {
   }
 
   fun setSecureTextEntry(isSecure: Boolean) {
+    if (isSecure) {
+      setMultiline(false)
+      maxLines = 1
+    }
     transformationMethod =
       if (isSecure)
         android.text.method.PasswordTransformationMethod.getInstance()
@@ -572,6 +595,10 @@ class TypeRichTextInputView : AppCompatEditText {
     }
   }
 
+  fun setDisableImagePasting(disabled: Boolean){
+    this.disableImagePasting = disabled
+  }
+
   override fun isLayoutRequested(): Boolean {
     return false
   }

package/android/src/main/java/com/typerich/TypeRichTextInputViewManager.kt

@@ -145,6 +145,11 @@ class TypeRichTextInputViewManager :
     view?.setLineHeightReact(lineHeight)
   }
 
+  @ReactProp(name = "disableImagePasting")
+  override fun setDisableImagePasting(view: TypeRichTextInputView?, value: Boolean) {
+   view?.setDisableImagePasting(value)
+  }
+
   override fun onAfterUpdateTransaction(view: TypeRichTextInputView) {
     super.onAfterUpdateTransaction(view)
     view.afterUpdateTransaction()

package/ios/TypeRichTextInputView.h

@@ -1,14 +1,34 @@
 #import <React/RCTViewComponentView.h>
+#import <react/renderer/core/State.h>
 #import <UIKit/UIKit.h>
 
-#ifndef TypeRichTextInputViewNativeComponent_h
-#define TypeRichTextInputViewNativeComponent_h
-
 NS_ASSUME_NONNULL_BEGIN
 
-@interface TypeRichTextInputView : RCTViewComponentView
-@end
+@interface TypeRichTextInputView : RCTViewComponentView <UITextViewDelegate>
 
-NS_ASSUME_NONNULL_END
+@property(nonatomic, assign) BOOL blockEmitting;
+@property (atomic, assign) BOOL isUserTyping;
+@property (atomic, assign) CFTimeInterval lastTypingTime;
+
+- (CGSize)measureSize:(CGFloat)maxWidth;
+
+// events
+- (void)emitPasteImageEventWith:(NSString *)uri
+                           type:(NSString *)type
+                       fileName:(NSString *)fileName
+                       fileSize:(NSUInteger)fileSize;
 
-#endif /* TypeRichTextInputViewNativeComponent_h */
+// commands
+- (void)handleCommand:(NSString *)commandName
+                 args:(NSArray *)args;
+
+// helpers used by commands
+- (BOOL)isTouchInProgress;
+//- (BOOL)isHandlingUserInput;
+- (void)invalidateTextLayoutFromCommand;
+- (void)updatePlaceholderVisibilityFromCommand;
+- (void)dispatchSelectionChangeIfNeeded;
+- (BOOL)isDisableImagePasting;
+
+@end
+NS_ASSUME_NONNULL_END