react-native-enriched 0.2.1 → 0.4.0

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://github.com/user-attachments/assets/b010571e-e4a3-4d92-a409-4f9fe614025d" alt="react-native-enriched by Software Mansion" width="100%">
+<img src="https://github.com/user-attachments/assets/6963e203-38c8-4209-b1b2-1ff65f6765f9" alt="react-native-enriched by Software Mansion" width="100%">
 
 # react-native-enriched
 
@@ -13,7 +13,7 @@
 
 `EnrichedTextInput`, the rich text editor component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.
 
-<https://github.com/user-attachments/assets/4778d541-d967-47e7-8013-6f7c436bcb95>
+![react-native-enriched-demo](https://github.com/user-attachments/assets/a2c968c0-9b85-492f-ac71-af64ef231fbf)
 
 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 –
@@ -40,7 +40,7 @@ We can help you build your next dream product –
 ## Prerequisites
 
 - `react-native-enriched` currently supports only Android and iOS platforms
-- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.79`, `0.80`, `0.81`, `0.82` and `0.83`
+- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.79`, `0.80`, `0.81`, `0.82`, `0.83` and `0.84`.
 
 ## Installation
 
@@ -101,12 +101,12 @@ export default function App() {
     <View style={styles.container}>
       <EnrichedTextInput
         ref={ref}
-        onChangeState={e => setStylesState(e.nativeEvent)}
+        onChangeState={(e) => setStylesState(e.nativeEvent)}
         style={styles.input}
       />
       <Button
-        title={stylesState?.isBold ? 'Unbold' : 'Bold'}
-        color={stylesState?.isBold ? 'green' : 'gray'}
+        title={stylesState?.bold.isActive ? 'Unbold' : 'Bold'}
+        color={stylesState?.bold.isActive ? 'green' : 'gray'}
         onPress={() => ref.current?.toggleBold()}
       />
     </View>
@@ -127,13 +127,16 @@ const styles = StyleSheet.create({
     backgroundColor: 'lightgray',
   },
 });
-
 ```
 
 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 style state information is emitted by the `onChangeState` event. Set up a proper callback that accepts a `NativeSyntheticEvent<OnChangeStateEvent>` argument. The event payload provides a nested object for each style (e.g., `bold`, `italic`), containing three properties to guide your UI logic:
+
+- `isActive`: Indicates if the style is currently applied (highlight the button).
+- `isBlocking`: Indicates if the style is blocked by another active style (disable the button).
+- `isConflicting`: Indicates if the style is in conflict with another active style.
 
 ## Non Parametrized Styles
 
@@ -144,13 +147,12 @@ Supported styles:
 - underline
 - strikethrough
 - inline code
-- H1 heading
-- H2 heading
-- H3 heading
+- H1, H2, H3, H4, H5 and H6 headings
 - codeblock
 - blockquote
 - ordered list
 - unordered list
+- checkbox list
 
 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.
 
@@ -158,8 +160,8 @@ Each call toggles the style within the current text selection. We can still divi
 
 - Inline styles (bold, italic, underline, strikethrough, inline code). They are being toggled on exactly the character range that is currently selected. When toggling the style with just the cursor in place (no selection), the style is ready to be used and will be applied to the next characters that the user inputs.
 
-- Paragraph styles (headings, codeblock, blockquote, lists). They are being toggled on the entire paragraph that the selection is in. By paragraph we mean a part of the text between two newlines (enters) or the text's beginning/ending.
-If the selection spans more than one paragraph, logically more of them will be affected by the toggle. Toggling these styles with the cursor in place (no selection) makes changes to the very paragraph the cursor is in.
+- Paragraph styles (headings, codeblock, blockquote, lists). They are being toggled on the entire paragraph that the selection is in. By paragraph, we mean a part of the text between two newlines (enters) or the text's beginning/ending.
+  If the selection spans more than one paragraph, logically more of them will be affected by the toggle. Toggling these styles with the cursor in place (no selection) makes changes to the very paragraph the cursor is in.
 
 ## Links
 
@@ -167,7 +169,8 @@ 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.
+You can customize this behavior by providing your own regular expression via [linkRegex](docs/API_REFERENCE.md#linkregex) prop.
 
 ### Applying links manually
 
@@ -226,10 +229,12 @@ You can find some examples in the [usage section](#usage) or in the example app.
 - [onChangeSelection](docs/API_REFERENCE.md#onchangeselection) - returns all the data needed for working with selections (as of now it's mainly useful for [links](#links)).
 - [onLinkDetected](docs/API_REFERENCE.md#onlinkdetected) - returns link's detailed info whenever user selection is near one.
 - [onMentionDetected](docs/API_REFERENCE.md#onmentiondetected) - returns mention's detailed info whenever user selection is near one.
+- [onKeyPress](docs/API_REFERENCE.md#onkeypress) - emits whenever a key is pressed. Follows react-native TextInput's onKeyPress event [spec](https://reactnative.dev/docs/textinput#onkeypress).
+- [onPasteImages](docs/API_REFERENCE.md#onpasteimages) - returns an array of images details whenever an image/GIF is pasted into the input.
 
 ## Customizing \<EnrichedTextInput /> styles
 
-`react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component.  See [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop.
+`react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop.
 
 ## API Reference
 
@@ -243,7 +248,6 @@ See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all th
 ## Future Plans
 
 - Creating `EnrichedText` text component that supports our HTML output format with all additional interactions like pressing links or mentions.
-- Adding API for custom link detection regex.
 - Web library implementation via `react-native-web`.
 
 ## Contributing
@@ -255,6 +259,7 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 `react-native-enriched` library is licensed under [The MIT License](./LICENSE).
 
 ---
+
 Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](https://filament.dm/).
 
 [<img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />](https://swmansion.com/)

package/android/build.gradle

@@ -1,18 +1,21 @@
 buildscript {
-  ext.getExtOrDefault = {name ->
-    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['EnrichedTextInput_' + name]
-  }
-
-  repositories {
-    google()
-    mavenCentral()
-  }
-
-  dependencies {
-    classpath "com.android.tools.build:gradle:8.7.2"
-    // noinspection DifferentKotlinGradleVersion
-    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
-  }
+	ext.getExtOrDefault = {name ->
+		return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ReactNativeEnriched_' + name]
+	}
+
+	repositories {
+		google()
+		mavenCentral()
+		gradlePluginPortal()
+	}
+
+	dependencies {
+		classpath "com.android.tools.build:gradle:8.7.2"
+		// noinspection DifferentKotlinGradleVersion
+		classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+		classpath "org.jlleitschuh.gradle:ktlint-gradle:14.0.1"
+		classpath 'com.diffplug.spotless:spotless-plugin-gradle:8.1.0'
+	}
 }
 
 
@@ -21,81 +24,83 @@ apply plugin: "kotlin-android"
 
 apply plugin: "com.facebook.react"
 
+apply from: "lint.gradle"
+
 def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["EnrichedTextInput_" + name]).toInteger()
+	return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ReactNativeEnriched_" + name]).toInteger()
 }
 
 def supportsNamespace() {
-  def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
-  def major = parsed[0].toInteger()
-  def minor = parsed[1].toInteger()
+	def parsed = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')
+	def major = parsed[0].toInteger()
+	def minor = parsed[1].toInteger()
 
-  // Namespace support was added in 7.3.0
-  return (major == 7 && minor >= 3) || major >= 8
+	// Namespace support was added in 7.3.0
+	return (major == 7 && minor >= 3) || major >= 8
 }
 
 android {
-  if (supportsNamespace()) {
-    namespace "com.swmansion.enriched"
-
-    sourceSets {
-      main {
-        manifest.srcFile "src/main/AndroidManifestNew.xml"
-      }
-    }
-  }
-
-  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
-
-  defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
-    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
-  }
-
-  buildFeatures {
-    buildConfig true
-  }
-
-  buildTypes {
-    release {
-      minifyEnabled false
-    }
-  }
-
-  lintOptions {
-    disable "GradleCompatible"
-  }
-
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-  }
-
-  sourceSets {
-    main {
-      java.srcDirs += [
-        "generated/java",
-        "generated/jni"
-      ]
-    }
-  }
+	if (supportsNamespace()) {
+		namespace "com.swmansion.enriched"
+
+		sourceSets {
+			main {
+				manifest.srcFile "src/main/AndroidManifestNew.xml"
+			}
+		}
+	}
+
+	compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+	defaultConfig {
+		minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+		targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+	}
+
+	buildFeatures {
+		buildConfig true
+	}
+
+	buildTypes {
+		release {
+			minifyEnabled false
+		}
+	}
+
+	lintOptions {
+		disable "GradleCompatible"
+	}
+
+	compileOptions {
+		sourceCompatibility JavaVersion.VERSION_1_8
+		targetCompatibility JavaVersion.VERSION_1_8
+	}
+
+	sourceSets {
+		main {
+			java.srcDirs += [
+				"generated/java",
+				"generated/jni"
+			]
+		}
+	}
 }
 
 repositories {
-  mavenCentral()
-  google()
+	mavenCentral()
+	google()
 }
 
 def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
-  implementation "com.facebook.react:react-android"
-  implementation 'org.ccil.cowan.tagsoup:tagsoup:1.2.1'
-  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+	implementation "com.facebook.react:react-android"
+	implementation 'org.ccil.cowan.tagsoup:tagsoup:1.2.1'
+	implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }
 
 react {
-  jsRootDir = file("../src/")
-  libraryName = "EnrichedTextInputView"
-  codegenJavaPackageName = "com.swmansion.enriched"
+	jsRootDir = file("../src/")
+	libraryName = "ReactNativeEnriched"
+	codegenJavaPackageName = "com.swmansion.enriched"
 }

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerDelegate.java

@@ -58,6 +58,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "scrollEnabled":
         mViewManager.setScrollEnabled(view, value == null ? false : (boolean) value);
         break;
+      case "linkRegex":
+        mViewManager.setLinkRegex(view, (ReadableMap) value);
+        break;
       case "color":
         mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
@@ -76,6 +79,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "isOnChangeHtmlSet":
         mViewManager.setIsOnChangeHtmlSet(view, value == null ? false : (boolean) value);
         break;
+      case "isOnChangeTextSet":
+        mViewManager.setIsOnChangeTextSet(view, value == null ? false : (boolean) value);
+        break;
       case "androidExperimentalSynchronousEvents":
         mViewManager.setAndroidExperimentalSynchronousEvents(view, value == null ? false : (boolean) value);
         break;
@@ -96,6 +102,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "setValue":
         mViewManager.setValue(view, args.getString(0));
         break;
+      case "setSelection":
+        mViewManager.setSelection(view, args.getInt(0), args.getInt(1));
+        break;
       case "toggleBold":
         mViewManager.toggleBold(view);
         break;
@@ -120,6 +129,15 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "toggleH3":
         mViewManager.toggleH3(view);
         break;
+      case "toggleH4":
+        mViewManager.toggleH4(view);
+        break;
+      case "toggleH5":
+        mViewManager.toggleH5(view);
+        break;
+      case "toggleH6":
+        mViewManager.toggleH6(view);
+        break;
       case "toggleCodeBlock":
         mViewManager.toggleCodeBlock(view);
         break;
@@ -132,6 +150,9 @@ public class EnrichedTextInputViewManagerDelegate<T extends View, U extends Base
       case "toggleUnorderedList":
         mViewManager.toggleUnorderedList(view);
         break;
+      case "toggleCheckboxList":
+        mViewManager.toggleCheckboxList(view, args.getBoolean(0));
+        break;
       case "addLink":
         mViewManager.addLink(view, args.getInt(0), args.getInt(1), args.getString(2), args.getString(3));
         break;

package/android/generated/java/com/facebook/react/viewmanagers/EnrichedTextInputViewManagerInterface.java

@@ -27,16 +27,19 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void setAutoCapitalize(T view, @Nullable String value);
   void setHtmlStyle(T view, @Nullable ReadableMap value);
   void setScrollEnabled(T view, boolean value);
+  void setLinkRegex(T view, @Nullable ReadableMap value);
   void setColor(T view, @Nullable Integer value);
   void setFontSize(T view, float value);
   void setFontFamily(T view, @Nullable String value);
   void setFontWeight(T view, @Nullable String value);
   void setFontStyle(T view, @Nullable String value);
   void setIsOnChangeHtmlSet(T view, boolean value);
+  void setIsOnChangeTextSet(T view, boolean value);
   void setAndroidExperimentalSynchronousEvents(T view, boolean value);
   void focus(T view);
   void blur(T view);
   void setValue(T view, String text);
+  void setSelection(T view, int start, int end);
   void toggleBold(T view);
   void toggleItalic(T view);
   void toggleUnderline(T view);
@@ -45,10 +48,14 @@ public interface EnrichedTextInputViewManagerInterface<T extends View> extends V
   void toggleH1(T view);
   void toggleH2(T view);
   void toggleH3(T view);
+  void toggleH4(T view);
+  void toggleH5(T view);
+  void toggleH6(T view);
   void toggleCodeBlock(T view);
   void toggleBlockQuote(T view);
   void toggleOrderedList(T view);
   void toggleUnorderedList(T view);
+  void toggleCheckboxList(T view, boolean checked);
   void addLink(T view, int start, int end, String text, String url);
   void addImage(T view, String uri, float width, float height);
   void startMention(T view, String indicator);

package/android/generated/jni/react/renderer/components/{RNEnrichedTextInputViewSpec → ReactNativeEnrichedSpec}/ComponentDescriptors.cpp

@@ -14,7 +14,7 @@
 
 namespace facebook::react {
 
-void RNEnrichedTextInputViewSpec_registerComponentDescriptorsFromCodegen(
+void ReactNativeEnrichedSpec_registerComponentDescriptorsFromCodegen(
   std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
 
 }

package/android/generated/jni/react/renderer/components/{RNEnrichedTextInputViewSpec → ReactNativeEnrichedSpec}/ComponentDescriptors.h

@@ -18,7 +18,7 @@ namespace facebook::react {
 
 
 
-void RNEnrichedTextInputViewSpec_registerComponentDescriptorsFromCodegen(
+void ReactNativeEnrichedSpec_registerComponentDescriptorsFromCodegen(
   std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
 
 } // namespace facebook::react