You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
30
22
We can help you build your next dream product –
@@ -184,9 +176,9 @@ The links are here, just like in any other editor, a piece of text with a URL at
184
176
185
177
### Applying links manually
186
178
187
-
Links can also be added by calling [setLink](#setlink) method on the input ref:
179
+
Links can also be added by calling [`setLink`](docs/API_REFERENCE.md#setlink) method on the input ref:
188
180
189
-
The `start`, `end` and `text` arguments for the method can be easily taken from [onChangeSelection](#onchangeselection) event payload as it returns exact `start` and `end` of the selection and the `text` it spans. This way, you just set the underlying URL to whatever is selected in there.
181
+
The `start`, `end` and `text` arguments for the method can be easily taken from [onChangeSelection](docs/API_REFERENCE.md#onchangeselection) event payload as it returns exact `start` and `end` of the selection and the `text` it spans. This way, you just set the underlying URL to whatever is selected in there.
190
182
191
183
Passing a different `text` than the one in the selection will properly replace it before applying the link.
192
184
@@ -198,27 +190,27 @@ Mentions are meant to be a customisable style that lets you put mentioning phras
198
190
199
191
### Mention Indicators
200
192
201
-
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.
193
+
There is a [mentionIndicators](docs/API_REFERENCE.md#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.
202
194
203
195
### Starting a mention
204
196
205
-
There are two ways in which a mention can be started; either by typing one of the `mentionIndicators` set or by calling a [startMention](#startmention) method on the input ref.
197
+
There are two ways in which a mention can be started; either by typing one of the `mentionIndicators` set or by calling a [startMention](docs/API_REFERENCE.md#startmention) method on the input ref.
206
198
207
199
### Mention related events
208
200
209
201
`react-native-enriched` emits 3 different events that help handling mentions' editing:
210
202
211
-
-[onStartMention](#onstartmention) is emitted whenever mention is started in one of the ways from the [previous section](#starting-a-mention) or the user has come back (moved selection) to some unfinished mention they have started. It can be used for opening proper tools you use in the app to edit a mention (e.g. a list for choosing from users or channels that the mention will affect).
212
-
-[onChangeMention](#onchangemention) is emitted whenever user put or removed some characters after a mention indicator. This way you can react to active mention editing by, for example, filtering users in your displayed list based on the typed text.
213
-
-[onEndMention](#onendmention) is emitted whenever user is no longer editing a mention: they might have put a space or changed the cursor position to be no longer near the indicator. You can use it to hide appropriate tools that were used for mention editing.
203
+
-[onStartMention](docs/API_REFERENCE.md#onstartmention) is emitted whenever mention is started in one of the ways from the [previous section](#starting-a-mention) or the user has come back (moved selection) to some unfinished mention they have started. It can be used for opening proper tools you use in the app to edit a mention (e.g. a list for choosing from users or channels that the mention will affect).
204
+
-[onChangeMention](docs/API_REFERENCE.md#onchangemention) is emitted whenever user put or removed some characters after a mention indicator. This way you can react to active mention editing by, for example, filtering users in your displayed list based on the typed text.
205
+
-[onEndMention](docs/API_REFERENCE.md#onendmention) is emitted whenever user is no longer editing a mention: they might have put a space or changed the cursor position to be no longer near the indicator. You can use it to hide appropriate tools that were used for mention editing.
214
206
215
207
### Setting a mention
216
208
217
-
Whenever you feel ready with the currently edited mention (so most likely user chooses something from your additional mention editor), you can complete it by calling [setMention](#setmention) ref method.
209
+
Whenever you feel ready with the currently edited mention (so most likely user chooses something from your additional mention editor), you can complete it by calling [setMention](docs/API_REFERENCE.md#setmention) ref method.
218
210
219
211
## Inline images
220
212
221
-
You can insert an image into the input using [setImage](#setimage) ref method.
213
+
You can insert an image into the input using [setImage](docs/API_REFERENCE.md#setimage) ref method.
222
214
223
215
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.
224
216
@@ -227,25 +219,25 @@ The image will be put into a single line in the input and will affect the line's
227
219
228
220
## Style Detection
229
221
230
-
All of the above styles can be detected with the use of [onChangeState](#onchangestate) event payload.
222
+
All of the above styles can be detected with the use of [onChangeState](docs/API_REFERENCE.md#onchangestate) event payload.
231
223
232
224
You can find some examples in the [usage section](#usage) or in the example app.
233
225
234
226
## Other Events
235
227
236
228
`react-native-enriched` emits a few more events that may be of use:
-[onChangeText](#onchangetext) - returns the input's text anytime it changes.
241
-
-[onChangeHtml](#onchangehtml) - returns HTML string parsed from current input text and styles anytime it would change. As parsing the HTML on each input change is a pretty expensive operation, not assigning the event's callback will speed up iOS input a bit. We are considering adding some API to improve it, see [future plans](#future-plans).
242
-
-[onChangeSelection](#onchangeselection) - returns all the data needed for working with selections (as of now it's mainly useful for [links](#links)).
243
-
-[onLinkDetected](#onlinkdetected) - returns link's detailed info whenever user selection is near one.
244
-
-[onMentionDetected](#onmentiondetected) - returns mention's detailed info whenever user selection is near one.
-[onChangeText](docs/API_REFERENCE.md#onchangetext) - returns the input's text anytime it changes.
233
+
-[onChangeHtml](docs/API_REFERENCE.md#onchangehtml) - returns HTML string parsed from current input text and styles anytime it would change. As parsing the HTML on each input change is a pretty expensive operation, not assigning the event's callback will speed up iOS input a bit. We are considering adding some API to improve it, see [future plans](#future-plans).
234
+
-[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)).
235
+
-[onLinkDetected](docs/API_REFERENCE.md#onlinkdetected) - returns link's detailed info whenever user selection is near one.
236
+
-[onMentionDetected](docs/API_REFERENCE.md#onmentiondetected) - returns mention's detailed info whenever user selection is near one.
245
237
246
238
## Customizing \<EnrichedTextInput /> styles
247
239
248
-
`react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](#htmlstyle) prop.
240
+
`react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop.
249
241
250
242
## API Reference
251
243
@@ -266,3 +258,12 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
266
258
## License
267
259
268
260
`react-native-enriched` library is licensed under [The MIT License](./LICENSE).
261
+
262
+
---
263
+
Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](https://filament.dm/).
0 commit comments