react-native-enriched 0.1.3 → 0.1.5

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.
Files changed (34) hide show
  1. package/README.md +36 -648
  2. package/ReactNativeEnriched.podspec +1 -1
  3. package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputView.kt +32 -16
  4. package/android/src/main/java/com/swmansion/enriched/EnrichedTextInputViewLayoutManager.kt +12 -2
  5. package/android/src/main/java/com/swmansion/enriched/events/MentionHandler.kt +5 -0
  6. package/android/src/main/java/com/swmansion/enriched/spans/EnrichedBlockQuoteSpan.kt +6 -2
  7. package/android/src/main/java/com/swmansion/enriched/spans/EnrichedCodeBlockSpan.kt +9 -5
  8. package/android/src/main/java/com/swmansion/enriched/spans/EnrichedInlineCodeSpan.kt +10 -5
  9. package/android/src/main/java/com/swmansion/enriched/spans/EnrichedOrderedListSpan.kt +11 -1
  10. package/android/src/main/java/com/swmansion/enriched/spans/EnrichedUnorderedListSpan.kt +11 -1
  11. package/android/src/main/java/com/swmansion/enriched/styles/ListStyles.kt +1 -2
  12. package/android/src/main/java/com/swmansion/enriched/styles/ParametrizedStyles.kt +12 -8
  13. package/android/src/main/java/com/swmansion/enriched/utils/EnrichedSelection.kt +1 -1
  14. package/android/src/main/java/com/swmansion/enriched/watchers/EnrichedTextWatcher.kt +2 -2
  15. package/android/src/main/new_arch/CMakeLists.txt +13 -9
  16. package/android/src/main/new_arch/react/renderer/components/RNEnrichedTextInputViewSpec/EnrichedTextInputMeasurementManager.h +2 -2
  17. package/ios/EnrichedTextInputView.mm +64 -56
  18. package/ios/internals/EnrichedTextInputViewShadowNode.mm +4 -1
  19. package/ios/styles/BlockQuoteStyle.mm +18 -23
  20. package/ios/styles/BoldStyle.mm +5 -2
  21. package/ios/styles/HeadingStyleBase.mm +37 -5
  22. package/ios/styles/InlineCodeStyle.mm +5 -2
  23. package/ios/styles/ItalicStyle.mm +5 -5
  24. package/ios/styles/OrderedListStyle.mm +18 -23
  25. package/ios/styles/StrikethroughStyle.mm +5 -2
  26. package/ios/styles/UnderlineStyle.mm +5 -2
  27. package/ios/styles/UnorderedListStyle.mm +18 -23
  28. package/ios/utils/OccurenceUtils.h +6 -0
  29. package/ios/utils/OccurenceUtils.mm +31 -0
  30. package/ios/utils/ParagraphAttributesUtils.h +6 -0
  31. package/ios/utils/ParagraphAttributesUtils.mm +67 -0
  32. package/ios/utils/StyleHeaders.h +2 -0
  33. package/ios/utils/ZeroWidthSpaceUtils.mm +14 -6
  34. package/package.json +6 -5
package/README.md CHANGED
@@ -13,15 +13,8 @@
13
13
 
14
14
  `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.
15
15
 
16
- Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](https://filament.dm/).
17
-
18
- <img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />
19
- &nbsp;&nbsp;&nbsp;
20
- <img width="48" height="48" alt="" src="https://github.com/user-attachments/assets/46c6bf1f-2685-497e-b699-d5a94b2582a3" />
21
- &nbsp;&nbsp;&nbsp;
22
- <img width="80" height="80" alt="Filament Logo" src="https://github.com/user-attachments/assets/4103ab79-da34-4164-aa5f-dcf08815bf65" />
16
+ <https://github.com/user-attachments/assets/4778d541-d967-47e7-8013-6f7c436bcb95>
23
17
 
24
- \
25
18
  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.
26
19
  We can help you build your next dream product –
27
20
  [Hire us](https://swmansion.com/contact/projects?utm_source=react-native-enriched&utm_medium=readme).
@@ -39,6 +32,7 @@ We can help you build your next dream product –
39
32
  - [Other Events](#other-events)
40
33
  - [Customizing \<EnrichedTextInput /> styles](#customizing-enrichedtextinput--styles)
41
34
  - [API Reference](#api-reference)
35
+ - [Known limitations](#known-limitations)
42
36
  - [Future Plans](#future-plans)
43
37
  - [Contributing](#contributing)
44
38
  - [License](#license)
@@ -46,7 +40,7 @@ We can help you build your next dream product –
46
40
  ## Prerequisites
47
41
 
48
42
  - `react-native-enriched` currently supports only Android and iOS platforms
49
- - It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports the 3 latest stable React Native releases, currently `0.79`, `0.80` and `0.81`
43
+ - 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` and `0.82`
50
44
 
51
45
  ## Installation
52
46
 
@@ -180,9 +174,9 @@ The links are here, just like in any other editor, a piece of text with a URL at
180
174
 
181
175
  ### Applying links manually
182
176
 
183
- Links can also be added by calling [setLink](#setlink) method on the input ref:
177
+ Links can also be added by calling [`setLink`](docs/API_REFERENCE.md#setlink) method on the input ref:
184
178
 
185
- 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.
179
+ 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.
186
180
 
187
181
  Passing a different `text` than the one in the selection will properly replace it before applying the link.
188
182
 
@@ -194,27 +188,27 @@ Mentions are meant to be a customisable style that lets you put mentioning phras
194
188
 
195
189
  ### Mention Indicators
196
190
 
197
- 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.
191
+ 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.
198
192
 
199
193
  ### Starting a mention
200
194
 
201
- 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.
195
+ 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.
202
196
 
203
197
  ### Mention related events
204
198
 
205
199
  `react-native-enriched` emits 3 different events that help handling mentions' editing:
206
200
 
207
- - [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).
208
- - [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.
209
- - [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.
201
+ - [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).
202
+ - [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.
203
+ - [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.
210
204
 
211
205
  ### Setting a mention
212
206
 
213
- 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.
207
+ 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.
214
208
 
215
209
  ## Inline images
216
210
 
217
- You can insert an image into the input using [setImage](#setimage) ref method.
211
+ You can insert an image into the input using [setImage](docs/API_REFERENCE.md#setimage) ref method.
218
212
 
219
213
  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.
220
214
 
@@ -223,7 +217,7 @@ The image will be put into a single line in the input and will affect the line's
223
217
 
224
218
  ## Style Detection
225
219
 
226
- All of the above styles can be detected with the use of [onChangeState](#onchangestate) event payload.
220
+ All of the above styles can be detected with the use of [onChangeState](docs/API_REFERENCE.md#onchangestate) event payload.
227
221
 
228
222
  You can find some examples in the [usage section](#usage) or in the example app.
229
223
 
@@ -231,643 +225,28 @@ You can find some examples in the [usage section](#usage) or in the example app.
231
225
 
232
226
  `react-native-enriched` emits a few more events that may be of use:
233
227
 
234
- - [onFocus](#onfocus) - emits whenever input focuses.
235
- - [onBlur](#onblur) - emits whenever input blurs.
236
- - [onChangeText](#onchangetext) - returns the input's text anytime it changes.
237
- - [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).
238
- - [onChangeSelection](#onchangeselection) - returns all the data needed for working with selections (as of now it's mainly useful for [links](#links)).
239
- - [onLinkDetected](#onlinkdetected) - returns link's detailed info whenever user selection is near one.
240
- - [onMentionDetected](#onmentiondetected) - returns mention's detailed info whenever user selection is near one.
228
+ - [onFocus](docs/API_REFERENCE.md#onfocus) - emits whenever input focuses.
229
+ - [onBlur](docs/API_REFERENCE.md) - emits whenever input blurs.
230
+ - [onChangeText](docs/API_REFERENCE.md#onchangetext) - returns the input's text anytime it changes.
231
+ - [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).
232
+ - [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)).
233
+ - [onLinkDetected](docs/API_REFERENCE.md#onlinkdetected) - returns link's detailed info whenever user selection is near one.
234
+ - [onMentionDetected](docs/API_REFERENCE.md#onmentiondetected) - returns mention's detailed info whenever user selection is near one.
241
235
 
242
236
  ## Customizing \<EnrichedTextInput /> styles
243
237
 
244
- `react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](#htmlstyle) prop.
238
+ `react-native-enriched` allows customizing styles of the `<EnrichedTextInput />` component. See [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop.
245
239
 
246
240
  ## API Reference
247
241
 
248
- ### Props
249
-
250
- #### `autoFocus`
251
-
252
- If `true`, focuses the input.
253
-
254
- | Type | Default Value | Platform |
255
- |--------|---------------|----------|
256
- | `bool` | `false` | Both |
257
-
258
- #### `autoCapitalize`
259
-
260
- Tells input to automatically capitalize certain characters.
261
-
262
- - `characters`: all characters.
263
- - `words`: first letter of each word.
264
- - `sentences`: first letter of each sentence.
265
- - `none`: don't auto capitalize anything.
266
-
267
- | Type | Default Value | Platform |
268
- |----------------------------------------------------|---------------|----------|
269
- | `'none' \| 'sentences' \| 'words' \| 'characters'` | `'sentences'` | Both |
270
-
271
- #### `cursorColor`
272
-
273
- When provided it will set the color of the cursor (or "caret") in the component.
274
-
275
- | Type | Default Value | Platform |
276
- |------------------------------------------------|----------------|----------|
277
- | [`color`](https://reactnative.dev/docs/colors) | system default | Android |
278
-
279
- #### `defaultValue`
280
-
281
- Provides an initial value for the input. If the string is a valid HTML output of the `EnrichedTextInput` component (or other HTML that the parser will accept), proper styles will be applied.
282
-
283
- | Type | Default Value | Platform |
284
- |----------|---------------|----------|
285
- | `string` | - | Both |
286
-
287
- #### `editable`
288
-
289
- If `false`, text is not editable.
290
-
291
- | Type | Default Value | Platform |
292
- |--------|---------------|----------|
293
- | `bool` | `true` | Both |
294
-
295
- #### `htmlStyle`
296
-
297
- A prop for customizing styles appearances.
298
-
299
- | Type | Default Value | Platform |
300
- |--------------------------------|----------------------------------------------------|----------|
301
- | [`HtmlStyle`](#htmlstyle-type) | default values from [`HtmlStyle`](#htmlstyle-type) | Both |
302
-
303
- #### `mentionIndicators`
304
-
305
- The recognized mention indicators. Each item needs to be a 1 character long string.
306
-
307
- | Type | Default Value | Platform |
308
- |-------------------|---------------|----------|
309
- | array of `string` | `['@']` | Both |
310
-
311
- #### `onBlur`
312
-
313
- Callback that's called whenever the input loses focused (is blurred).
314
-
315
- | Type | Default Value | Platform |
316
- |--------------|---------------|----------|
317
- | `() => void` | - | Both |
318
-
319
- #### `onChangeHtml`
320
-
321
- Callback that is called when input's HTML changes.
322
-
323
- Payload interface:
324
-
325
- ```ts
326
- interface OnChangeHtmlEvent {
327
- value: string;
328
- }
329
- ```
330
-
331
- - `value` is the new HTML.
332
-
333
- | Type | Default Value | Platform |
334
- |------------------------------------------------------------|---------------|----------|
335
- | `(event: NativeSyntheticEvent<OnChangeHtmlEvent>) => void` | - | Both |
336
-
337
- #### `onChangeMention`
338
-
339
- Callback that gets called anytime user makes some changes to a mention that is being edited.
340
-
341
- Payload interface:
342
-
343
- ```ts
344
- interface OnChangeMentionEvent {
345
- indicator: string;
346
- text: string;
347
- }
348
- ```
349
-
350
- - `indicator` is the indicator of the currently edited mention.
351
- - `text` contains whole text that has been typed after the indicator.
352
-
353
- | Type | Default Value | Platform |
354
- |-----------------------------------------|---------------|----------|
355
- | `(event: OnChangeMentionEvent) => void` | - | Both |
356
-
357
- #### `onChangeSelection`
358
-
359
- Callback that is called each time user changes selection or moves the cursor in the input.
360
-
361
- Payload interface:
362
-
363
- ```ts
364
- interface OnChangeSelectionEvent {
365
- start: Int32;
366
- end: Int32;
367
- text: string;
368
- }
369
- ```
370
-
371
- - `start` is the index of the selection's beginning.
372
- - `end` is the first index after the selection's ending. For just a cursor in place (no selection), `start` equals `end`.
373
- - `text` is the input's text in the current selection.
374
-
375
- | Type | Default Value | Platform |
376
- |-----------------------------------------------------------------|---------------|----------|
377
- | `(event: NativeSyntheticEvent<OnChangeSelectionEvent>) => void` | - | Both |
378
-
379
- #### `onChangeState`
380
-
381
- Callback that gets called when any of the styles within the selection changes.
382
-
383
- Payload has a bool flag for each style:
384
-
385
- ```ts
386
- interface OnChangeStateEvent {
387
- isBold: boolean;
388
- isItalic: boolean;
389
- isUnderline: boolean;
390
- isStrikeThrough: boolean;
391
- isInlineCode: boolean;
392
- isH1: boolean;
393
- isH2: boolean;
394
- isH3: boolean;
395
- isCodeBlock: boolean;
396
- isBlockQuote: boolean;
397
- isOrderedList: boolean;
398
- isUnorderedList: boolean;
399
- isLink: boolean;
400
- isImage: boolean;
401
- isMention: boolean;
402
- }
403
- ```
404
-
405
- | Type | Default Value | Platform |
406
- |-------------------------------------------------------------|---------------|----------|
407
- | `(event: NativeSyntheticEvent<OnChangeStateEvent>) => void` | - | Both |
408
-
409
- #### `onChangeText`
410
-
411
- Callback called when any text changes occur in the input.
242
+ See the [API Reference](docs/API_REFERENCE.md) for a detailed overview of all the props, methods, and events available.
412
243
 
413
- Payload interface:
244
+ ## Known limitations
414
245
 
415
- ```ts
416
- interface OnChangeTextEvent {
417
- value: string;
418
- }
419
- ```
420
-
421
- - `value` is the new text value of the input.
422
-
423
- | Type | Default Value | Platform |
424
- |------------------------------------------------------------|---------------|----------|
425
- | `(event: NativeSyntheticEvent<OnChangeTextEvent>) => void` | - | Both |
426
-
427
- #### `onEndMention`
428
-
429
- Callback that is called when the user no longer edits a mention actively - has moved the cursor somewhere else or put a space and the cursor isn't within the edited mention.
430
-
431
- - `indicator` is the indicator of the mention that was being edited.
432
-
433
- | Type | Default Value | Platform |
434
- |-------------------------------|---------------|----------|
435
- | `(indicator: string) => void` | - | Both |
436
-
437
- #### `onFocus`
438
-
439
- Callback that's called whenever the input is focused.
440
-
441
- | Type | Default Value | Platform |
442
- |--------------|---------------|----------|
443
- | `() => void` | - | Both |
444
-
445
- #### `onLinkDetected`
446
-
447
- Callback that gets called when either a new link has been added or the user has moved the cursor/selection to some link.
448
-
449
- Payload interface contains all the useful link data:
450
-
451
- ```ts
452
- interface OnLinkDetected {
453
- text: string;
454
- url: string;
455
- start: Int32;
456
- end: Int32;
457
- }
458
- ```
459
-
460
- - `text` is the link's displayed text.
461
- - `url` is the underlying link's URL.
462
- - `start` is the starting index of the link.
463
- - `end` is the first index after the ending index of the link.
464
-
465
- | Type | Default Value | Platform |
466
- |-----------------------------------|---------------|----------|
467
- | `(event: OnLinkDetected) => void` | - | Both |
468
-
469
- #### `onMentionDetected`
470
-
471
- Callback called when mention has been detected - either a new mention has been added or the user has moved the cursor/selection to some mention.
472
-
473
- Payload interface contains all the useful mention data:
474
-
475
- ```ts
476
- interface OnMentionDetected {
477
- text: string;
478
- indicator: string;
479
- attributes: Record<string, string>;
480
- }
481
- ```
482
-
483
- - `text` is the mention's displayed text.
484
- - `indicator` is the indicator of the mention.
485
- - `attributes` are the additional user-defined attributes that are being stored with the mention.
486
-
487
- | Type | Default Value | Platform |
488
- |--------------------------------------|---------------|----------|
489
- | `(event: OnMentionDetected) => void` | - | Both |
490
-
491
- #### `onStartMention`
492
-
493
- Callback that gets called whenever a mention editing starts (after placing the indicator).
494
-
495
- - `indicator` is the indicator of the mention that begins editing.
496
-
497
- | Type | Default Value | Platform |
498
- |-------------------------------|---------------|----------|
499
- | `(indicator: string) => void` | - | Both |
500
-
501
- #### `placeholder`
502
-
503
- The placeholder text that is displayed in the input if nothing has been typed yet. Disappears when something is typed.
504
-
505
- | Type | Default Value | Platform |
506
- |----------|---------------|----------|
507
- | `string` | `''` | Both |
508
-
509
- #### `placeholderTextColor`
510
-
511
- Input placeholder's text color.
512
-
513
- | Type | Default Value | Platform |
514
- |------------------------------------------------|-------------------------|----------|
515
- | [`color`](https://reactnative.dev/docs/colors) | input's [color](#style) | Both |
516
-
517
- #### `ref`
518
-
519
- A React ref that lets you call any ref methods on the input.
520
-
521
- | Type | Default Value | Platform |
522
- |------------------------------------------------|---------------|----------|
523
- | `RefObject<EnrichedTextInputInstance \| null>` | - | Both |
524
-
525
- #### `selectionColor`
526
-
527
- Color of the selection rectangle that gets drawn over the selected text. On iOS, the cursor (caret) also gets set to this color.
528
-
529
- | Type | Default Value | Platform |
530
- |------------------------------------------------|----------------|----------|
531
- | [`color`](https://reactnative.dev/docs/colors) | system default | Both |
532
-
533
- #### `style`
534
-
535
- Accepts most [ViewStyle](https://reactnative.dev/docs/view#style) props, but keep in mind that some of them might not be supported.
536
-
537
- Additionally following [TextStyle](https://reactnative.dev/docs/text#style) props are supported
538
-
539
- - color
540
- - fontFamily
541
- - fontSize
542
- - fontWeight
543
- - fontStyle only on Android
544
-
545
- | Type | Default Value | Platform |
546
- |--------------------------------------------------------------------------------------------------------------------|---------------|----------|
547
- | [`View Style`](https://reactnative.dev/docs/view#style) \| [`Text Style`](https://reactnative.dev/docs/text#style) | - | Both |
548
-
549
- #### `ViewProps`
550
-
551
- The input inherits [ViewProps](https://reactnative.dev/docs/view#props), but keep in mind that some of the props may not be supported.
552
-
553
- #### `androidExperimentalSynchronousEvents` - EXPERIMENTAL
554
-
555
- If true, Android will use experimental synchronous events. This will prevent from input flickering when updating component size. However, this is an experimental feature, which has not been thoroughly tested. We may decide to enable it by default in a future release.
556
-
557
- | Type | Default Value | Platform |
558
- |--------|---------------|----------|
559
- | `bool` | `false` | Android |
560
-
561
- ### Ref Methods
562
-
563
- All the methods should be called on the input's [ref](#ref).
564
-
565
- #### `.blur()`
566
-
567
- ```ts
568
- blur: () => void;
569
- ```
570
-
571
- Blurs the input.
572
-
573
- #### `.focus()`
574
-
575
- ```ts
576
- focus: () => void;
577
- ```
578
-
579
- Focuses the input.
580
-
581
- #### `.setImage()`
582
-
583
- > [!NOTE]
584
- > This function is Android only as iOS doesn't support inline images just yet.
585
-
586
- ```ts
587
- setImage: (src: string) => void;
588
- ```
589
-
590
- Sets the [inline image](#inline-images) at the current selection.
591
-
592
- - `src: string` - the absolute path to the image.
593
-
594
- #### `.setLink()`
595
-
596
- ```ts
597
- setLink: (
598
- start: number,
599
- end: number,
600
- text: string,
601
- url: string
602
- ) => void;
603
- ```
604
-
605
- Sets the link at the given place with a given displayed text and URL. Link will replace any text if there was some between `start` and `end` indexes. Setting a link with `start` equal to `end` will just insert it in place.
606
-
607
- - `start: number` - the starting index where the link should be.
608
- - `end: number` - first index behind the new link's ending index.
609
- - `text: string` - displayed text of the link.
610
- - `url: string` - URL of the link.
611
-
612
- #### `.setMention()`
613
-
614
- ```ts
615
- setMention: (
616
- indicator: string,
617
- text: string,
618
- attributes?: Record<string, string>
619
- ) => void;
620
- ```
621
-
622
- Sets the currently edited mention with a given indicator, displayed text and custom attributes.
623
-
624
- - `indicator: string` - the indicator of the set mention.
625
- - `text: string` - the text that should be displayed for the mention. Anything the user typed gets replaced by that text. The mention indicator isn't added to that text.
626
- - `attributes?: Record<string, string>` - additional, custom attributes for the mention that can be passed as a typescript record. They are properly preserved through parsing from and to the HTML format.
627
-
628
- #### `.setValue()`
629
-
630
- ```ts
631
- setValue: (value: string) => void;
632
- ```
633
-
634
- Sets the input's value.
635
-
636
- - `value: string` - value to set, it can either be `react-native-enriched` supported HTML string or raw text.
637
-
638
- #### `.startMention()`
639
-
640
- ```ts
641
- startMention: (indicator: string) => void;
642
- ```
643
-
644
- Starts a mention with the given indicator. It gets put at the cursor/selection.
645
-
646
- - `indicator: string` - the indicator that starts the new mention.
647
-
648
- #### `.toggleBlockQuote()`
649
-
650
- ```ts
651
- toggleBlockQuote: () => void;
652
- ```
653
-
654
- Toggles blockquote style at the current selection.
655
-
656
- #### `.toggleBold()`
657
-
658
- ```ts
659
- toggleBold: () => void;
660
- ```
661
-
662
- Toggles bold formatting at the current selection.
663
-
664
- #### `.toggleCodeBlock()`
665
-
666
- > [!NOTE]
667
- > This function is Android only as iOS doesn't support codeblocks just yet.
668
-
669
- ```ts
670
- toggleCodeBlock: () => void;
671
- ```
672
-
673
- Toggles codeblock formatting at the current selection.
674
-
675
- #### `.toggleH1()`
676
-
677
- ```ts
678
- toggleH1: () => void;
679
- ```
680
-
681
- Toggles heading 1 (h1) style at the current selection.
682
-
683
- #### `.toggleH2()`
684
-
685
- ```ts
686
- toggleH2: () => void;
687
- ```
688
-
689
- Toggles heading 2 (h2) style at the current selection.
690
-
691
- #### `.toggleH3()`
692
-
693
- ```ts
694
- toggleH3: () => void;
695
- ```
696
-
697
- Toggles heading 3 (h3) style at the current selection.
698
-
699
- #### `.toggleInlineCode()`
700
-
701
- ```ts
702
- toggleInlineCode: () => void;
703
- ```
704
-
705
- Applies inline code formatting to the current selection.
706
-
707
- #### `.toggleItalic()`
708
-
709
- ```ts
710
- toggleItalic: () => void;
711
- ```
712
-
713
- Toggles italic formatting at the current selection.
714
-
715
- #### `.toggleOrderedList()`
716
-
717
- ```ts
718
- toggleOrderedList: () => void;
719
- ```
720
-
721
- Converts current selection into an ordered list.
722
-
723
- #### `.toggleStrikeThrough()`
724
-
725
- ```ts
726
- toggleStrikeThrough: () => void;
727
- ```
728
-
729
- Applies strikethrough formatting to the current selection.
730
-
731
- #### `.toggleUnderline()`
732
-
733
- ```ts
734
- toggleUnderline: () => void;
735
- ```
736
-
737
- Applies underline formatting to the current selection.
738
-
739
- #### `.toggleUnorderedList()`
740
-
741
- ```ts
742
- toggleUnorderedList: () => void;
743
- ```
744
-
745
- Converts current selection into an unordered list.
746
-
747
- ### HtmlStyle type
748
-
749
- Allows customizing HTML styles.
750
-
751
- ```ts
752
- interface HtmlStyle {
753
- h1?: {
754
- fontSize?: number;
755
- bold?: boolean;
756
- };
757
- h2?: {
758
- fontSize?: number;
759
- bold?: boolean;
760
- };
761
- h3?: {
762
- fontSize?: number;
763
- bold?: boolean;
764
- };
765
- blockquote?: {
766
- borderColor?: ColorValue;
767
- borderWidth?: number;
768
- gapWidth?: number;
769
- color?: ColorValue;
770
- };
771
- codeblock?: {
772
- color?: ColorValue;
773
- borderRadius?: number;
774
- backgroundColor?: ColorValue;
775
- };
776
- code?: {
777
- color?: ColorValue;
778
- backgroundColor?: ColorValue;
779
- };
780
- a?: {
781
- color?: ColorValue;
782
- textDecorationLine?: 'underline' | 'none';
783
- };
784
- mention?: Record<string, MentionStyleProperties> | MentionStyleProperties;
785
- img?: {
786
- width?: number;
787
- height?: number;
788
- };
789
- ol?: {
790
- gapWidth?: number;
791
- marginLeft?: number;
792
- markerFontWeight?: TextStyle['fontWeight'];
793
- markerColor?: ColorValue;
794
- };
795
- ul?: {
796
- bulletColor?: ColorValue;
797
- bulletSize?: number;
798
- marginLeft?: number;
799
- gapWidth?: number;
800
- };
801
- }
802
-
803
- interface MentionStyleProperties {
804
- color?: ColorValue;
805
- backgroundColor?: ColorValue;
806
- textDecorationLine?: 'underline' | 'none';
807
- }
808
- ```
809
-
810
- #### h1/h2/h3 (headings)
811
-
812
- - `fontSize` is the size of the heading's font, defaults to `32`/`24`/`20` for h1/h2/h3.
813
- - `bold` defines whether the heading should be bolded, defaults to `false`.
814
-
815
- > [!NOTE]
816
- > On iOS, the headings cannot have same `fontSize` as the component's `fontSize`. Doing so results in unexpected behavior.
817
-
818
- #### blockquote
819
-
820
- - `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`.
821
- - `borderWidth` sets the width of the said border, defaults to `4`.
822
- - `gapWidth` sets the width of the gap between the border and the blockquote text, defaults to `16`.
823
- - `color` defines the color of blockquote's text. Takes [color](https://reactnative.dev/docs/colors) value, if not set makes the blockquote text the same color as the input's [color prop](#style).
824
-
825
- #### codeblock
826
-
827
- - `color` defines the color of codeblock text, takes [color](https://reactnative.dev/docs/colors) value and defaults to `black`.
828
- - `borderRadius` sets the radius of codeblock's border, defaults to 8.
829
- - `backgroundColor` is the codeblock's background color, takes [color](https://reactnative.dev/docs/colors) value and defaults to `darkgray`.
830
-
831
- #### code (inline code)
832
-
833
- - `color` defines the color of inline code's text, takes [color](https://reactnative.dev/docs/colors) value and defaults to `red`.
834
- - `backgroundColor` is the inline code's background color, takes [color](https://reactnative.dev/docs/colors) value and defaults to `darkgray`.
835
-
836
- #### a (link)
837
-
838
- - `color` defines the color of link's text, takes [color](https://reactnative.dev/docs/colors) value and defaults to `blue`.
839
- - `textDecorationLine` decides if the links are underlined or not, takes either `underline` or `none` and defaults to `underline`
840
-
841
- #### mention
842
-
843
- If only a single config is given, the style applies to all mention types. You can also set a different config for each mentionIndicator that has been defined, then the prop should be a record with indicators as a keys and configs as their values.
844
-
845
- - `color` defines the color of mention's text, takes [color](https://reactnative.dev/docs/colors) value and defaults to `blue`.
846
- - `backgroundColor` is the mention's background color, takes [color](https://reactnative.dev/docs/colors) value and defaults to `yellow`.
847
- - `textDecorationLine` decides if the mentions are underlined or not, takes either `underline` or `none` and defaults to `underline`.
848
-
849
- #### img (inline image)
850
-
851
- - `width` is the width of the inline image, defaults to `80`.
852
- - `height` is the height of the inline image, defaults to `80`.
853
-
854
- #### ol (ordered list)
855
-
856
- By marker we mean the number that denotes next lines of the list.
857
-
858
- - `gapWidth` sets the gap between the marker and the list item's text, defaults to `16`.
859
- - `marginLeft` sets the margin to the left of the marker (between the marker and input's left edge), defaults to `16`.
860
- - `markerFontWeight` defines the font weight of the marker, takes a [fontWeight](https://reactnative.dev/docs/text-style-props#fontweight) value and if not set, defaults to the same font weight as input's [fontWeight prop](#style).
861
- - `markerColor` sets the text color of the marker, takes [color](https://reactnative.dev/docs/colors) value and if not set, defaults to the same color as input's [color prop](#style).
862
-
863
- #### ul (unordered list)
864
-
865
- By bullet we mean the dot that begins each line of the list.
866
-
867
- - `bulletColor` defines the color of the bullet, takes [color](https://reactnative.dev/docs/colors) value and defaults to `black`.
868
- - `bulletSize` sets both the height and the width of the bullet, defaults to `8`.
869
- - `marginLeft` is the margin to the left of the bullet (between the bullet and input's left edge), defaults to `16`.
870
- - `gapWidth` sets the gap between the bullet and the list item's text, defaults to `16`.
246
+ - Only one level of lists is supported. We currently do not support nested lists.
247
+ - Inline images are supported only on Android.
248
+ - Codeblocks are supported only on Android.
249
+ - iOS headings can't have the same `fontSize` in their config as input's `fontSize`. Doing so results in incorrect headings behavior.
871
250
 
872
251
  ## Future Plans
873
252
 
@@ -884,3 +263,12 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
884
263
  ## License
885
264
 
886
265
  `react-native-enriched` library is licensed under [The MIT License](./LICENSE).
266
+
267
+ ---
268
+ Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](https://filament.dm/).
269
+
270
+ [<img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />](https://swmansion.com/)
271
+ &nbsp;&nbsp;&nbsp;
272
+ <img width="48" height="48" alt="" src="https://github.com/user-attachments/assets/46c6bf1f-2685-497e-b699-d5a94b2582a3" />
273
+ &nbsp;&nbsp;&nbsp;
274
+ [<img width="80" height="80" alt="Filament Logo" src="https://github.com/user-attachments/assets/4103ab79-da34-4164-aa5f-dcf08815bf65" />](https://filament.dm/)