react-native-rich-text-fabric 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 asteriskzuo
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,247 @@
+# react-native-rich-text-fabric
+
+<p align="center">
+  <a href="https://opensource.org/licenses/MIT">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-native-rich-text-fabric">
+    <img src="https://img.shields.io/npm/v/react-native-rich-text-fabric?color=brightgreen" alt="npm version" />
+  </a>
+  <a href="https://github.com/AsteriskZuo/react-native-rich-text">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" />
+  </a>
+  <img src="https://img.shields.io/badge/React%20Native-0.83+-61dafb?logo=react" alt="React Native 0.83+" />
+  <img src="https://img.shields.io/badge/Fabric-required-purple" alt="Fabric Required" />
+  <img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android-lightgrey" alt="Platform iOS | Android" />
+</p>
+
+A high-performance rich text display and input component library for React Native, built with the new Fabric architecture.
+
+## ✨ Features
+
+- 🚀 **Pure Native Implementation** - No WebView, no third-party dependencies
+- 📝 **RichText** - Display component with mixed text and images
+- ✏️ **RichTextInput** - Native input with image insertion and text styling
+- 🏷️ **@ Mention Support** - Atomic text deletion for @mention scenarios
+- 🎨 **Customizable Styles** - Font, color, bold, italic, underline, background
+- 📱 **Cross Platform** - iOS and Android support
+
+## 📸 Preview
+
+![RichTextInput Example](./res/move.gif)
+
+<img src="./res/WX20260106-151110@2x.png" alt="RichText Example" height="800" /> <img src="./res/WX20260106-151122@2x.png" alt="RichText Example" height="800" />
+
+## 📦 Installation
+
+```sh
+npm install react-native-rich-text-fabric
+# or
+yarn add react-native-rich-text-fabric
+```
+
+## 🚀 Quick Start
+
+### RichText - Display Component
+
+```tsx
+import { RichText } from 'react-native-rich-text-fabric';
+
+const content = [
+  { type: 'text', text: 'Hello, ' },
+  {
+    type: 'text',
+    text: 'World!',
+    textStyle: { fontWeight: 'bold', color: 'red' },
+  },
+  {
+    type: 'image',
+    image: 'https://example.com/emoji.png',
+    imageStyle: { width: 20, height: 20 },
+  },
+];
+
+<RichText content={content} />;
+```
+
+### RichTextInput - Input Component
+
+```tsx
+import { useRef } from 'react';
+import {
+  RichTextInput,
+  type RichTextInputRef,
+} from 'react-native-rich-text-fabric';
+
+const ref = useRef<RichTextInputRef>(null);
+
+<RichTextInput
+  ref={ref}
+  placeholder="Enter rich text..."
+  onContentChange={(content) => console.log(content)}
+/>;
+
+// Insert styled text
+ref.current?.insertText({
+  text: 'styled',
+  textStyle: { fontWeight: 'bold', color: 'blue' },
+});
+
+// Insert image
+ref.current?.insertImage({
+  image: 'https://example.com/image.png',
+  imageStyle: { width: 24, height: 24 },
+});
+```
+
+### RichTextInput - @ Mention Feature
+
+```tsx
+import { useRef } from 'react';
+import {
+  RichTextInput,
+  generateAtomicId,
+  type RichTextInputRef,
+} from 'react-native-rich-text-fabric';
+
+const ref = useRef<RichTextInputRef>(null);
+
+// Insert @mention with atomic deletion support
+const insertMention = (userId: string, userName: string) => {
+  ref.current?.insertText({
+    text: `@${userName} `,
+    textStyle: { color: '#1890ff' },
+    atomicId: userId, // Enables atomic deletion - the entire @mention deletes as one unit
+  });
+};
+
+<RichTextInput
+  ref={ref}
+  placeholder="Type @ to mention someone..."
+  onContentChange={(content) => {
+    // content includes atomicId for @mentions
+    console.log(content);
+  }}
+/>;
+```
+
+## 📖 API Reference
+
+### RichText Props
+
+| Prop                | Type                                                       | Description         |
+| ------------------- | ---------------------------------------------------------- | ------------------- |
+| `content`           | `Array<string \| RichTextStringItem \| RichTextImageItem>` | Content array       |
+| `defaultTextStyle`  | `TextStyle`                                                | Default text style  |
+| `defaultImageStyle` | `ImageStyle`                                               | Default image style |
+
+### RichTextInput Props
+
+| Prop                     | Type                                       | Default | Description                    |
+| ------------------------ | ------------------------------------------ | ------- | ------------------------------ |
+| `placeholder`            | `string`                                   | -       | Placeholder text               |
+| `placeholderTextColor`   | `ColorValue`                               | -       | Placeholder color              |
+| `multiline`              | `boolean`                                  | `true`  | Enable multiline               |
+| `maxLength`              | `number`                                   | -       | Maximum character length       |
+| `editable`               | `boolean`                                  | `true`  | Enable editing                 |
+| `autoFocus`              | `boolean`                                  | `false` | Auto focus on mount            |
+| `defaultTextStyle`       | `TextStyle`                                | -       | Default text style             |
+| `defaultImageStyle`      | `ImageStyle`                               | -       | Default image style            |
+| `inheritInsertedStyle`   | `boolean`                                  | `true`  | Inherit style after insertText |
+| `cursorColor`            | `ColorValue`                               | -       | Cursor color                   |
+| `imagePlaceholderColor`  | `ColorValue`                               | -       | Image placeholder background   |
+| `imagePlaceholderSource` | `ImageSourcePropType`                      | -       | Image placeholder image        |
+| `onContentChange`        | `(content: RichTextContentItem[]) => void` | -       | Content change callback        |
+| `onFocus`                | `() => void`                               | -       | Focus callback                 |
+| `onBlur`                 | `() => void`                               | -       | Blur callback                  |
+
+### RichTextInput Ref Methods
+
+| Method                   | Description                                  |
+| ------------------------ | -------------------------------------------- |
+| `focus()`                | Focus the input                              |
+| `blur()`                 | Blur the input                               |
+| `isFocused()`            | Returns focus state                          |
+| `insertText(text)`       | Insert text with optional style and atomicId |
+| `insertImage(image)`     | Insert image                                 |
+| `clearContent()`         | Clear all content                            |
+| `getContent()`           | Get current content                          |
+| `setCursorPosition(pos)` | Set cursor position                          |
+
+## 🔧 Requirements
+
+- React Native >= 0.83
+- New Architecture (Fabric) enabled
+- iOS 13.0+
+- Android SDK 24+
+
+## 📱 Platform Support
+
+| Feature                 | iOS | Android |
+| ----------------------- | --- | ------- |
+| RichText Display        | ✅  | ✅      |
+| RichTextInput           | ✅  | ✅      |
+| Image Insertion         | ✅  | ✅      |
+| Text Styling            | ✅  | ✅      |
+| Atomic Text (@ Mention) | ✅  | ✅      |
+| Custom Cursor Color     | ✅  | ✅      |
+| Image Placeholder       | ✅  | ✅      |
+
+## 📚 Alternatives
+
+**Rich Text Editors (WebView-based):**
+
+- [@10play/tentap-editor](https://www.npmjs.com/package/@10play/tentap-editor) - TipTap/ProseMirror based
+- [react-native-pell-rich-editor](https://www.npmjs.com/package/react-native-pell-rich-editor) - Popular WebView editor
+- [react-native-cn-quill](https://www.npmjs.com/package/react-native-cn-quill) - Quill.js based
+- [react-native-webview-quill](https://www.npmjs.com/package/react-native-webview-quill) - WebView + Quill
+
+**Rich Text Editors (Native):**
+
+- [react-native-rich-text](https://www.npmjs.com/package/react-native-rich-text) - Original name (taken)
+- [react-native-ete-rich-editor](https://www.npmjs.com/package/react-native-ete-rich-editor) - Native editor
+- [react-native-texted](https://github.com/AltamarKM/react-native-texted) - Native rich text
+
+**@ Mention Components:**
+
+- [react-native-mentions](https://www.npmjs.com/package/react-native-mentions) - Pure TS mention
+- [react-native-controlled-mentions](https://www.npmjs.com/package/react-native-controlled-mentions) - Controlled mention input
+
+## 🗺️ Roadmap
+
+- [x] AtTextInput - @ mention input component
+- [x] UserList - User selection popup component
+- [x] RichText - Rich text display with mixed text/images
+- [x] RichTextInput - Native rich text input
+- [x] Text styling support (color, bold, italic, underline, background)
+- [x] Atomic text (@ mention with atomic deletion)
+- [x] Style inheritance control (`inheritInsertedStyle`)
+- [x] Custom cursor color
+- [x] Image placeholder support
+- [x] Hyperlink support for RichText
+- [ ] Playground / Online demo
+- [ ] Cloud build for example project
+
+## 🤝 Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+We have templates to help you get started:
+
+- [Pull Request Template](.github/PULL_REQUEST_TEMPLATE.md) - For submitting changes
+- [Bug Report](.github/ISSUE_TEMPLATE/bug_report.yml) - For reporting bugs
+- [Feature Request](.github/ISSUE_TEMPLATE/feature_request.yml) - For suggesting new features
+
+## 🔒 Security
+
+For information about reporting security vulnerabilities, please see our [Security Policy](SECURITY.md).
+
+## 📄 License
+
+MIT
+
+---
+
+Made with ❤️ by [AsteriskZuo](https://github.com/AsteriskZuo)
+
+<img src="./res/github_star_qr.png" alt="RichText Example" height="400" />

package/RichText.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "RichText"
+  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/AsteriskZuo/react-native-rich-text.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,77 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['RichText_' + 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')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["RichText_" + name]).toInteger()
+}
+
+android {
+  namespace "com.richtext"
+
+  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()
+}
+
+def kotlin_version = getExtOrDefault("kotlinVersion")
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+RichText_kotlinVersion=2.0.21
+RichText_minSdkVersion=24
+RichText_targetSdkVersion=34
+RichText_compileSdkVersion=35
+RichText_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>