@chaitrabhairappa/react-native-rich-text-editor 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -48
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
A powerful native rich text editor for React Native with support for text formatting, lists, and more. Works on both iOS and Android.
|
|
4
4
|
|
|
5
|
+
Unlike other rich text editor packages that rely on HTML and WebView, this library is built with **pure native components** — using native iOS and Android text editing APIs directly. This provides better performance, smoother animations, and a more seamless integration with your React Native app.
|
|
6
|
+
|
|
7
|
+
> **Note:** This library requires React Native's **New Architecture** to be enabled. It will not work with the old architecture.
|
|
8
|
+
|
|
9
|
+
## Demo
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
<img src="./assets/demo-1.jpeg" width="300" alt="Demo 1" />
|
|
13
|
+
<img src="./assets/demo-2.jpeg" width="300" alt="Demo 2" />
|
|
14
|
+
</p>
|
|
15
|
+
|
|
5
16
|
## Features
|
|
6
17
|
|
|
7
18
|
- Bold, Italic, Underline, Strikethrough
|
|
@@ -20,15 +31,15 @@ A powerful native rich text editor for React Native with support for text format
|
|
|
20
31
|
## Installation
|
|
21
32
|
|
|
22
33
|
```bash
|
|
23
|
-
npm install react-native-
|
|
34
|
+
npm install @chaitrabhairappa/react-native-rich-text-editor
|
|
24
35
|
# or
|
|
25
|
-
yarn add react-native-
|
|
36
|
+
yarn add @chaitrabhairappa/react-native-rich-text-editor
|
|
26
37
|
```
|
|
27
38
|
|
|
28
39
|
### iOS
|
|
29
40
|
|
|
30
41
|
```bash
|
|
31
|
-
cd ios && pod install
|
|
42
|
+
cd ios && bundle install && bundle exec pod install && cd ..
|
|
32
43
|
```
|
|
33
44
|
|
|
34
45
|
### Android
|
|
@@ -43,8 +54,8 @@ import { View } from 'react-native';
|
|
|
43
54
|
import RichTextEditor, {
|
|
44
55
|
RichTextEditorRef,
|
|
45
56
|
Block,
|
|
46
|
-
ContentChangeEvent
|
|
47
|
-
} from 'react-native-
|
|
57
|
+
ContentChangeEvent,
|
|
58
|
+
} from '@chaitrabhairappa/react-native-rich-text-editor';
|
|
48
59
|
|
|
49
60
|
const App = () => {
|
|
50
61
|
const editorRef = useRef<RichTextEditorRef>(null);
|
|
@@ -90,19 +101,19 @@ export default App;
|
|
|
90
101
|
|
|
91
102
|
## Props
|
|
92
103
|
|
|
93
|
-
| Prop
|
|
94
|
-
|
|
95
|
-
| `placeholder`
|
|
96
|
-
| `initialContent`
|
|
97
|
-
| `readOnly`
|
|
98
|
-
| `maxHeight`
|
|
99
|
-
| `showToolbar`
|
|
100
|
-
| `toolbarOptions`
|
|
101
|
-
| `variant`
|
|
102
|
-
| `onContentChange`
|
|
103
|
-
| `onSelectionChange` | `(event: SelectionChangeEvent) => void` | `undefined`
|
|
104
|
-
| `onFocus`
|
|
105
|
-
| `onBlur`
|
|
104
|
+
| Prop | Type | Default | Description |
|
|
105
|
+
| ------------------- | --------------------------------------- | ------------ | ------------------------------- |
|
|
106
|
+
| `placeholder` | `string` | `""` | Placeholder text |
|
|
107
|
+
| `initialContent` | `Block[]` | `[]` | Initial content blocks |
|
|
108
|
+
| `readOnly` | `boolean` | `false` | Make editor read-only |
|
|
109
|
+
| `maxHeight` | `number` | `undefined` | Maximum height before scrolling |
|
|
110
|
+
| `showToolbar` | `boolean` | `true` | Show/hide floating toolbar |
|
|
111
|
+
| `toolbarOptions` | `ToolbarOption[]` | All options | Customize toolbar buttons |
|
|
112
|
+
| `variant` | `'outlined' \| 'flat'` | `'outlined'` | Editor style variant |
|
|
113
|
+
| `onContentChange` | `(event: ContentChangeEvent) => void` | `undefined` | Called when content changes |
|
|
114
|
+
| `onSelectionChange` | `(event: SelectionChangeEvent) => void` | `undefined` | Called when selection changes |
|
|
115
|
+
| `onFocus` | `() => void` | `undefined` | Called when editor gains focus |
|
|
116
|
+
| `onBlur` | `() => void` | `undefined` | Called when editor loses focus |
|
|
106
117
|
|
|
107
118
|
## Ref Methods
|
|
108
119
|
|
|
@@ -173,46 +184,39 @@ interface StyleRange {
|
|
|
173
184
|
}
|
|
174
185
|
|
|
175
186
|
type ToolbarOption =
|
|
176
|
-
| 'bold'
|
|
177
|
-
| '
|
|
178
|
-
| '
|
|
179
|
-
| '
|
|
180
|
-
| '
|
|
187
|
+
| 'bold'
|
|
188
|
+
| 'italic'
|
|
189
|
+
| 'strikethrough'
|
|
190
|
+
| 'underline'
|
|
191
|
+
| 'code'
|
|
192
|
+
| 'highlight'
|
|
193
|
+
| 'heading'
|
|
194
|
+
| 'bullet'
|
|
195
|
+
| 'numbered'
|
|
196
|
+
| 'quote'
|
|
197
|
+
| 'checklist'
|
|
198
|
+
| 'link'
|
|
199
|
+
| 'undo'
|
|
200
|
+
| 'redo'
|
|
201
|
+
| 'clearFormatting'
|
|
202
|
+
| 'indent'
|
|
203
|
+
| 'outdent'
|
|
204
|
+
| 'alignLeft'
|
|
205
|
+
| 'alignCenter'
|
|
206
|
+
| 'alignRight';
|
|
181
207
|
```
|
|
182
208
|
|
|
183
209
|
## Customizing Toolbar
|
|
184
210
|
|
|
185
211
|
```tsx
|
|
186
|
-
import RichTextEditor, { ToolbarOption } from 'react-native-
|
|
212
|
+
import RichTextEditor, { ToolbarOption } from '@chaitrabhairappa/react-native-rich-text-editor';
|
|
187
213
|
|
|
188
|
-
const toolbarOptions: ToolbarOption[] = [
|
|
189
|
-
'bold',
|
|
190
|
-
'italic',
|
|
191
|
-
'underline',
|
|
192
|
-
'bullet',
|
|
193
|
-
'numbered',
|
|
194
|
-
];
|
|
214
|
+
const toolbarOptions: ToolbarOption[] = ['bold', 'italic', 'underline', 'bullet', 'numbered'];
|
|
195
215
|
|
|
196
216
|
<RichTextEditor
|
|
197
217
|
toolbarOptions={toolbarOptions}
|
|
198
218
|
// ...
|
|
199
|
-
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
## Android Setup
|
|
203
|
-
|
|
204
|
-
Add the package to your `MainApplication.java` or `MainApplication.kt`:
|
|
205
|
-
|
|
206
|
-
```java
|
|
207
|
-
// MainApplication.java
|
|
208
|
-
import com.richtext.editor.RichTextEditorPackage;
|
|
209
|
-
|
|
210
|
-
@Override
|
|
211
|
-
protected List<ReactPackage> getPackages() {
|
|
212
|
-
List<ReactPackage> packages = new PackageList(this).getPackages();
|
|
213
|
-
packages.add(new RichTextEditorPackage());
|
|
214
|
-
return packages;
|
|
215
|
-
}
|
|
219
|
+
/>;
|
|
216
220
|
```
|
|
217
221
|
|
|
218
222
|
## License
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chaitrabhairappa/react-native-rich-text-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A powerful native rich text editor for React Native with support for text formatting, lists, and more",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"typescript": "tsc --noEmit",
|
|
25
25
|
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
26
26
|
"prepare": "bob build",
|
|
27
|
-
"clean": "del-cli lib"
|
|
27
|
+
"clean": "del-cli lib",
|
|
28
|
+
"publish:patch": "npm version patch && npm publish"
|
|
28
29
|
},
|
|
29
30
|
"keywords": [
|
|
30
31
|
"react-native",
|