react-native-enriched 0.1.1 → 0.1.3

package/README.md

@@ -1,3 +1,5 @@
+<img src="https://github.com/user-attachments/assets/abc75d3b-495b-4a76-a72f-d87ce3ca1ff9" alt="react-native-enriched by Software Mansion" width="100%">
+
 # react-native-enriched
 
 `react-native-enriched` is a powerful React Native library that exposes a rich text editor component:
@@ -19,6 +21,11 @@ Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](
 &nbsp;&nbsp;&nbsp;
 <img width="80" height="80" alt="Filament Logo" src="https://github.com/user-attachments/assets/4103ab79-da34-4164-aa5f-dcf08815bf65" />
 
+\
+Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues.
+We can help you build your next dream product –
+[Hire us](https://swmansion.com/contact/projects?utm_source=react-native-enriched&utm_medium=readme).
+
 ## Table of Contents
 
 - [Prerequisites](#prerequisites)
@@ -119,6 +126,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   input: {
+    width: '100%',
     fontSize: 20,
     padding: 10,
     maxHeight: 200,
@@ -131,27 +139,27 @@ const styles = StyleSheet.create({
 Summary of what happens here:
 
 1. Any methods imperatively called on the input to e.g. toggle some style must be used through a `ref` of `EnrichedTextInputInstance` type. Here, `toggleBold` method that is called on the button press calls `ref.current?.toggleBold()`, which toggles the bold styling within the current selection.
-2. All the active styles info is emitted by `onChangeState` event. Set up a proper callback that accepts a `NativeSyntheticEvent<OnChangeStateEvent>` argument and you can access an object with boolean properties indicating which styles are active, such as `isBold` in the example. Here, this info is stored in a react state and used to change colors on the button.
+2. All the active styles info is emitted by `onChangeState` event. Set up a proper callback that accepts a `NativeSyntheticEvent<OnChangeStateEvent>` argument, and you can access an object with boolean properties indicating which styles are active, such as `isBold` in the example. Here, this info is stored in a React state and used to change colors on the button.
 
 ## Non Parametrized Styles
 
 Supported styles:
 
-- **bold**
-- *italic*
-- <ins>underline</ins>
-- ~~strikethrough~~
-- `inline code`
+- bold
+- italic
+- underline
+- strikethrough
+- inline code
 - H1 heading
 - H2 heading
 - H3 heading
-- `codeblock`
-- > blockquote
+- codeblock
+- blockquote
 - ordered list
 - unordered list
 
 > [!NOTE]
-> The iOS doesn't support codeblocks just yet but it's planned in the near future!
+> The iOS doesn't support codeblocks just yet, but it's planned in the near future!
 
 Each of the styles can be toggled the same way as in the example from [usage section](#usage); call a proper `toggle` function on the component ref.
 
@@ -168,7 +176,7 @@ The links are here, just like in any other editor, a piece of text with a URL at
 
 ### Automatic links detection
 
-`react-native-enriched` automatically detects words that appear to be some URLs and makes them links. Currently we are using pretty naive approach to detect whether text can be treated as a link or not. On iOS it's a pretty simple regex, on Android we are using URL regex provided by the system.
+`react-native-enriched` automatically detects words that appear to be some URLs and makes them links. Currently, we are using pretty naive approach to detect whether text can be treated as a link or not. On iOS it's a pretty simple regex, on Android we are using URL regex provided by the system.
 
 ### Applying links manually
 
@@ -186,7 +194,7 @@ Mentions are meant to be a customisable style that lets you put mentioning phras
 
 ### Mention Indicators
 
-There is a [mentionIndicators](#mentionindicators) prop that lets you define what characters can start a mention. By default it is set to `[ @ ]`, meaning that typing a `@` character in the input will start the creation of a mention.
+There is a [mentionIndicators](#mentionindicators) prop that lets you define what characters can start a mention. By default, it is set to `[ @ ]`, meaning that typing a `@` character in the input will start the creation of a mention.
 
 ### Starting a mention
 
@@ -208,10 +216,10 @@ Whenever you feel ready with the currently edited mention (so most likely user c
 
 You can insert an image into the input using [setImage](#setimage) ref method.
 
-The image will be put into a single line in the input and will affects the line's height as well as input's height. Keep in mind, that image will replace currently selected text or insert into the cursor position if there is no text selection.
+The image will be put into a single line in the input and will affect the line's height as well as input's height. Keep in mind, that image will replace currently selected text or insert into the cursor position if there is no text selection.
 
 > [!NOTE]
-> The iOS doesn't support inline images just yet but it's planned in the near future!
+> The iOS doesn't support inline images just yet, but it's planned in the near future!
 
 ## Style Detection
 
@@ -286,7 +294,7 @@ If `false`, text is not editable.
 
 #### `htmlStyle`
 
-A prop for customizing styles' appearances.
+A prop for customizing styles appearances.
 
 | Type                           | Default Value                                      | Platform |
 |--------------------------------|----------------------------------------------------|----------|
@@ -322,9 +330,9 @@ interface OnChangeHtmlEvent {
 
 - `value` is the new HTML.
 
-| Type                                                 | Default Value | Platform |
-|------------------------------------------------------|---------------|----------|
-| `(NativeSyntheticEvent\<OnChangeHtmlEvent>) => void` | -             | Both     |
+| Type                                                       | Default Value | Platform |
+|------------------------------------------------------------|---------------|----------|
+| `(event: NativeSyntheticEvent<OnChangeHtmlEvent>) => void` | -             | Both     |
 
 #### `onChangeMention`
 
@@ -342,9 +350,9 @@ interface OnChangeMentionEvent {
 - `indicator` is the indicator of the currently edited mention.
 - `text` contains whole text that has been typed after the indicator.
 
-| Type                             | Default Value | Platform |
-|----------------------------------|---------------|----------|
-| `(OnChangeMentionEvent) => void` | -             | Both     |
+| Type                                    | Default Value | Platform |
+|-----------------------------------------|---------------|----------|
+| `(event: OnChangeMentionEvent) => void` | -             | Both     |
 
 #### `onChangeSelection`
 
@@ -353,7 +361,7 @@ Callback that is called each time user changes selection or moves the cursor in
 Payload interface:
 
 ```ts
-OnChangeSelectionEvent {
+interface OnChangeSelectionEvent {
   start: Int32;
   end: Int32;
   text: string;
@@ -364,9 +372,9 @@ OnChangeSelectionEvent {
 - `end` is the first index after the selection's ending. For just a cursor in place (no selection), `start` equals `end`.
 - `text` is the input's text in the current selection.
 
-| Type                                                      | Default Value | Platform |
-|-----------------------------------------------------------|---------------|----------|
-| `(NativeSyntheticEvent\<OnChangeSelectionEvent>) => void` | -             | Both     |
+| Type                                                            | Default Value | Platform |
+|-----------------------------------------------------------------|---------------|----------|
+| `(event: NativeSyntheticEvent<OnChangeSelectionEvent>) => void` | -             | Both     |
 
 #### `onChangeState`
 
@@ -394,9 +402,9 @@ interface OnChangeStateEvent {
 }
 ```
 
-| Type                                                  | Default Value | Platform |
-|-------------------------------------------------------|---------------|----------|
-| `(NativeSyntheticEvent\<OnChangeStateEvent>) => void` | -             | Both     |
+| Type                                                        | Default Value | Platform |
+|-------------------------------------------------------------|---------------|----------|
+| `(event: NativeSyntheticEvent<OnChangeStateEvent>) => void` | -             | Both     |
 
 #### `onChangeText`
 
@@ -412,9 +420,9 @@ interface OnChangeTextEvent {
 
 - `value` is the new text value of the input.
 
-| Type                                                 | Default Value | Platform |
-|------------------------------------------------------|---------------|----------|
-| `(NativeSyntheticEvent\<OnChangeTextEvent>) => void` | -             | Both     |
+| Type                                                       | Default Value | Platform |
+|------------------------------------------------------------|---------------|----------|
+| `(event: NativeSyntheticEvent<OnChangeTextEvent>) => void` | -             | Both     |
 
 #### `onEndMention`
 
@@ -454,9 +462,9 @@ interface OnLinkDetected {
 - `start` is the starting index of the link.
 - `end` is the first index after the ending index of the link.
 
-| Type                       | Default Value | Platform |
-|----------------------------|---------------|----------|
-| `(OnLinkDetected) => void` | -             | Both     |
+| Type                              | Default Value | Platform |
+|-----------------------------------|---------------|----------|
+| `(event: OnLinkDetected) => void` | -             | Both     |
 
 #### `onMentionDetected`
 
@@ -465,7 +473,7 @@ Callback called when mention has been detected - either a new mention has been a
 Payload interface contains all the useful mention data:
 
 ```ts
-OnMentionDetected {
+interface OnMentionDetected {
   text: string;
   indicator: string;
   attributes: Record<string, string>;
@@ -476,9 +484,9 @@ OnMentionDetected {
 - `indicator` is the indicator of the mention.
 - `attributes` are the additional user-defined attributes that are being stored with the mention.
 
-| Type                          | Default Value | Platform |
-|-------------------------------|---------------|----------|
-| `(OnMentionDetected) => void` | -             | Both     |
+| Type                                 | Default Value | Platform |
+|--------------------------------------|---------------|----------|
+| `(event: OnMentionDetected) => void` | -             | Both     |
 
 #### `onStartMention`
 
@@ -552,12 +560,12 @@ If true, Android will use experimental synchronous events. This will prevent fro
 
 ### Ref Methods
 
-All of the methods should be called on the input's [ref](#ref).
+All the methods should be called on the input's [ref](#ref).
 
 #### `.blur()`
 
 ```ts
-blur: () => void
+blur: () => void;
 ```
 
 Blurs the input.
@@ -804,6 +812,9 @@ interface MentionStyleProperties {
 - `fontSize` is the size of the heading's font, defaults to `32`/`24`/`20` for h1/h2/h3.
 - `bold` defines whether the heading should be bolded, defaults to `false`.
 
+> [!NOTE]
+> On iOS, the headings cannot have same `fontSize` as the component's `fontSize`. Doing so results in unexpected behavior.
+
 #### blockquote
 
 - `borderColor` defines the color of the rectangular border drawn to the left of blockquote text. Takes [color](https://reactnative.dev/docs/colors) value, defaults to `darkgray`.

package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt

@@ -204,7 +204,9 @@ class EnrichedTextInputView : AppCompatEditText {
       }
     }
 
-    val finalText = currentText.mergeSpannables(start, end, item?.text.toString())
+    // Currently, we do not support pasting images
+    if (item?.text == null) return
+    val finalText = currentText.mergeSpannables(start, end, item.text.toString())
     setValue(finalText)
     parametrizedStyles?.detectAllLinks()
   }

package/android/src/main/java/com/swmansion/enriched/styles/HtmlStyle.kt

@@ -154,6 +154,8 @@ class HtmlStyle {
   }
 
   private fun withOpacity(color: Int, alpha: Int): Int {
+    // Do not apply opacity to transparent color
+    if (Color.alpha(color) == 0) return color
     val a = alpha.coerceIn(0, 255)
     return (color and 0x00FFFFFF) or (a shl 24)
   }

package/android/src/main/java/com/swmansion/enriched/styles/ParametrizedStyles.kt

@@ -148,7 +148,7 @@ class ParametrizedStyles(private val view: EnrichedTextInputView) {
         mentionStart = start
       }
 
-      mentionHandler.onMention(indicator, word.replaceFirst(indicator, ""))
+      mentionHandler.onMention(indicator, text)
     } else {
       mentionHandler.endMention()
     }
@@ -208,6 +208,11 @@ class ParametrizedStyles(private val view: EnrichedTextInputView) {
     val (safeStart, safeEnd) = spannable.getSafeSpanBoundaries(start, spanEnd)
     spannable.setSpan(span, safeStart, safeEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
 
+    val hasSpaceAtTheEnd = spannable.length > safeEnd && spannable[safeEnd] == ' '
+    if (!hasSpaceAtTheEnd) {
+      spannable.insert(safeEnd, " ")
+    }
+
     view.selection.validateStyles()
   }
 

package/ios/inputTextView/InputTextView.mm

@@ -76,7 +76,7 @@
 
 - (void)tryHandlingPlainTextItemsIn:(UIPasteboard *)pasteboard range:(NSRange)range input:(EnrichedTextInputView *)input {
   NSArray *existingTypes = pasteboard.pasteboardTypes;
-  NSArray *handledTypes = @[UTTypeUTF8PlainText.identifier, UTTypePlainText.identifier];
+  NSArray *handledTypes = @[UTTypeUTF8PlainText.identifier, UTTypePlainText.identifier, UTTypeURL.identifier];
   NSString *plainText;
   
   for(NSString *type in handledTypes) {
@@ -90,6 +90,8 @@
       plainText = [[NSString alloc]initWithData:value encoding:NSUTF8StringEncoding];
     } else if([value isKindOfClass:[NSString class]]) {
       plainText = (NSString *)value;
+    } else if([value isKindOfClass:[NSURL class]]) {
+      plainText = [(NSURL *)value absoluteString];
     }
   }
   

package/ios/styles/InlineCodeStyle.mm

@@ -3,6 +3,7 @@
 #import "FontExtension.h"
 #import "OccurenceUtils.h"
 #import "ParagraphsUtils.h"
+#import "ColorExtension.h"
 
 @implementation InlineCodeStyle {
   EnrichedTextInputView *_input;
@@ -33,7 +34,7 @@
     NSRange currentRange = [value rangeValue];
     [_input->textView.textStorage beginEditing];
 
-    [_input->textView.textStorage addAttribute:NSBackgroundColorAttributeName value:[[_input->config inlineCodeBgColor] colorWithAlphaComponent:0.4] range:currentRange];
+    [_input->textView.textStorage addAttribute:NSBackgroundColorAttributeName value:[[_input->config inlineCodeBgColor] colorWithAlphaIfNotTransparent:0.4] range:currentRange];
     [_input->textView.textStorage addAttribute:NSForegroundColorAttributeName value:[_input->config inlineCodeFgColor] range:currentRange];
     [_input->textView.textStorage addAttribute:NSUnderlineColorAttributeName value:[_input->config inlineCodeFgColor] range:currentRange];
     [_input->textView.textStorage addAttribute:NSStrikethroughColorAttributeName value:[_input->config inlineCodeFgColor] range:currentRange];
@@ -41,7 +42,7 @@
       usingBlock:^(id  _Nullable value, NSRange range, BOOL * _Nonnull stop) {
         UIFont *font = (UIFont *)value;
         if(font != nullptr) {
-          UIFont *newFont = [[_input->config monospacedFont] withFontTraits:font];
+          UIFont *newFont = [[[_input->config monospacedFont] withFontTraits:font] setSize:font.pointSize];
           [_input->textView.textStorage addAttribute:NSFontAttributeName value:newFont range:range];
         }
       }
@@ -53,13 +54,13 @@
 
 - (void)addTypingAttributes {
   NSMutableDictionary *newTypingAttrs = [_input->textView.typingAttributes mutableCopy];
-  newTypingAttrs[NSBackgroundColorAttributeName] = [[_input->config inlineCodeBgColor] colorWithAlphaComponent:0.4];
+  newTypingAttrs[NSBackgroundColorAttributeName] = [[_input->config inlineCodeBgColor] colorWithAlphaIfNotTransparent:0.4];
   newTypingAttrs[NSForegroundColorAttributeName] = [_input->config inlineCodeFgColor];
   newTypingAttrs[NSUnderlineColorAttributeName] = [_input->config inlineCodeFgColor];
   newTypingAttrs[NSStrikethroughColorAttributeName] = [_input->config inlineCodeFgColor];
   UIFont* currentFont = (UIFont *)newTypingAttrs[NSFontAttributeName];
   if(currentFont != nullptr) {
-    newTypingAttrs[NSFontAttributeName] = [[_input->config monospacedFont] withFontTraits:currentFont];
+    newTypingAttrs[NSFontAttributeName] = [[[_input->config monospacedFont] withFontTraits:currentFont] setSize:currentFont.pointSize];
   }
   _input->textView.typingAttributes = newTypingAttrs;
 }
@@ -75,7 +76,7 @@
     usingBlock:^(id  _Nullable value, NSRange range, BOOL * _Nonnull stop) {
       UIFont *font = (UIFont *)value;
       if(font != nullptr) {
-        UIFont *newFont = [[_input->config primaryFont] withFontTraits:font];
+        UIFont *newFont = [[[_input->config primaryFont] withFontTraits:font] setSize:font.pointSize];
         [_input->textView.textStorage addAttribute:NSFontAttributeName value:newFont range:range];
       }
     }
@@ -92,7 +93,7 @@
   newTypingAttrs[NSStrikethroughColorAttributeName] = [_input->config primaryColor];
   UIFont* currentFont = (UIFont *)newTypingAttrs[NSFontAttributeName];
   if(currentFont != nullptr) {
-    newTypingAttrs[NSFontAttributeName] = [[_input->config primaryFont] withFontTraits:currentFont];
+    newTypingAttrs[NSFontAttributeName] = [[[_input->config primaryFont] withFontTraits:currentFont] setSize:currentFont.pointSize];
   }
   _input->textView.typingAttributes = newTypingAttrs;
 }

package/ios/styles/MentionStyle.mm

@@ -4,6 +4,7 @@
 #import "TextInsertionUtils.h"
 #import "WordsUtils.h"
 #import "UIView+React.h"
+#import "ColorExtension.h"
 
 // custom NSAttributedStringKey to differentiate from links
 static NSString *const MentionAttributeName = @"MentionAttributeName";
@@ -154,7 +155,7 @@ static NSString *const MentionAttributeName = @"MentionAttributeName";
     NSForegroundColorAttributeName: styleProps.color,
     NSUnderlineColorAttributeName: styleProps.color,
     NSStrikethroughColorAttributeName: styleProps.color,
-    NSBackgroundColorAttributeName: [styleProps.backgroundColor colorWithAlphaComponent:0.4],
+    NSBackgroundColorAttributeName: [styleProps.backgroundColor colorWithAlphaIfNotTransparent:0.4],
   } mutableCopy];
   
   if(styleProps.decorationLine == DecorationUnderline) {
@@ -186,7 +187,7 @@ static NSString *const MentionAttributeName = @"MentionAttributeName";
     NSForegroundColorAttributeName: styleProps.color,
     NSUnderlineColorAttributeName: styleProps.color,
     NSStrikethroughColorAttributeName: styleProps.color,
-    NSBackgroundColorAttributeName: [styleProps.backgroundColor colorWithAlphaComponent:0.4],
+    NSBackgroundColorAttributeName: [styleProps.backgroundColor colorWithAlphaIfNotTransparent:0.4],
   } mutableCopy];
   
   if(styleProps.decorationLine == DecorationUnderline) {

package/ios/utils/ColorExtension.h

@@ -3,4 +3,5 @@
 
 @interface UIColor (ColorExtension)
 - (BOOL)isEqualToColor:(UIColor *)otherColor;
+- (UIColor *)colorWithAlphaIfNotTransparent:(CGFloat)newAlpha;
 @end

package/ios/utils/ColorExtension.mm

@@ -24,4 +24,13 @@
 
   return [selfColor isEqual:otherColor];
 }
+
+- (UIColor *)colorWithAlphaIfNotTransparent:(CGFloat)newAlpha {
+  CGFloat alpha = 0.0;
+  [self getRed:nil green:nil blue:nil alpha:&alpha];
+  if (alpha > 0.0) {
+      return [self colorWithAlphaComponent:newAlpha];
+  }
+  return self;
+}
 @end

package/ios/utils/TextInsertionUtils.mm

@@ -18,7 +18,7 @@
   [textView.textStorage insertAttributedString:newAttrStr atIndex:index];
   
   if(withSelection) {
-    if(!textView.focused) {
+    if(![textView isFirstResponder]) {
       [textView reactFocus];
     }
     textView.selectedRange = NSMakeRange(index + text.length, 0);
@@ -38,7 +38,7 @@
   }
   
   if(withSelection) {
-    if(!textView.focused) {
+    if(![textView isFirstResponder]) {
       [textView reactFocus];
     }
     textView.selectedRange = NSMakeRange(range.location + text.length, 0);

package/ios/utils/ZeroWidthSpaceUtils.mm

@@ -63,8 +63,7 @@
   }
   
   // fix the selection if needed
-  if(input->textView.focused) {
-    [input->textView reactFocus];
+  if([input->textView isFirstResponder]) {
     input->textView.selectedRange = NSMakeRange(preRemoveSelection.location + postRemoveOffset, preRemoveSelection.length);
   }
 }
@@ -112,8 +111,7 @@
   }
   
   // fix the selection if needed
-  if(input->textView.focused) {
-    [input->textView reactFocus];
+  if([input->textView isFirstResponder]) {
     input->textView.selectedRange = NSMakeRange(preAddSelection.location + postAddOffset, preAddSelection.length);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-enriched",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Rich Text Editor component for React Native",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",