react-native-enriched 0.1.0 â 0.1.1
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 +103 -97
- package/ios/inputParser/InputParser.mm +42 -52
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# react-native-enriched
|
|
2
2
|
|
|
3
|
-
`react-native-enriched` is a powerful React Native library that
|
|
3
|
+
`react-native-enriched` is a powerful React Native library that exposes a rich text editor component:
|
|
4
4
|
|
|
5
5
|
- ⥠Fully native text input component
|
|
6
6
|
- đšī¸ Synchronous text styling
|
|
@@ -9,26 +9,32 @@
|
|
|
9
9
|
- đą Mobile platforms support
|
|
10
10
|
- đ Supports only the New Architecture
|
|
11
11
|
|
|
12
|
-
`EnrichedTextInput`, the rich text editor component
|
|
12
|
+
`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.
|
|
13
13
|
|
|
14
14
|
Built by [Software Mansion](https://swmansion.com/) and sponsored by [Filament](https://filament.dm/).
|
|
15
15
|
|
|
16
|
+
<img width="128" height="69" alt="Software Mansion Logo" src="https://github.com/user-attachments/assets/f0e18471-a7aa-4e80-86ac-87686a86fe56" />
|
|
17
|
+
|
|
18
|
+
<img width="48" height="48" alt="" src="https://github.com/user-attachments/assets/46c6bf1f-2685-497e-b699-d5a94b2582a3" />
|
|
19
|
+
|
|
20
|
+
<img width="80" height="80" alt="Filament Logo" src="https://github.com/user-attachments/assets/4103ab79-da34-4164-aa5f-dcf08815bf65" />
|
|
21
|
+
|
|
16
22
|
## Table of Contents
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
- [Prerequisites](#prerequisites)
|
|
25
|
+
- [Installation](#installation)
|
|
26
|
+
- [Usage](#usage)
|
|
27
|
+
- [Non Parametrized Styles](#non-parametrized-styles)
|
|
28
|
+
- [Links](#links)
|
|
29
|
+
- [Mentions](#mentions)
|
|
30
|
+
- [Inline Images](#inline-images)
|
|
31
|
+
- [Style Detection](#style-detection)
|
|
32
|
+
- [Other Events](#other-events)
|
|
33
|
+
- [Customizing \<EnrichedTextInput /> styles](#customizing-enrichedtextinput--styles)
|
|
34
|
+
- [API Reference](#api-reference)
|
|
35
|
+
- [Future Plans](#future-plans)
|
|
36
|
+
- [Contributing](#contributing)
|
|
37
|
+
- [License](#license)
|
|
32
38
|
|
|
33
39
|
## Prerequisites
|
|
34
40
|
|
|
@@ -114,9 +120,9 @@ const styles = StyleSheet.create({
|
|
|
114
120
|
},
|
|
115
121
|
input: {
|
|
116
122
|
fontSize: 20,
|
|
117
|
-
padding:
|
|
123
|
+
padding: 10,
|
|
118
124
|
maxHeight: 200,
|
|
119
|
-
|
|
125
|
+
backgroundColor: 'lightgray',
|
|
120
126
|
},
|
|
121
127
|
});
|
|
122
128
|
|
|
@@ -158,7 +164,7 @@ If the selection spans more than one paragraph, logically more of them will be a
|
|
|
158
164
|
|
|
159
165
|
## Links
|
|
160
166
|
|
|
161
|
-
The links are here, just like in any other editor, a piece of text with a URL
|
|
167
|
+
The links are here, just like in any other editor, a piece of text with a URL attributed to it. They can be added in two ways: automatically or manually.
|
|
162
168
|
|
|
163
169
|
### Automatic links detection
|
|
164
170
|
|
|
@@ -218,7 +224,7 @@ You can find some examples in the [usage section](#usage) or in the example app.
|
|
|
218
224
|
`react-native-enriched` emits a few more events that may be of use:
|
|
219
225
|
|
|
220
226
|
- [onFocus](#onfocus) - emits whenever input focuses.
|
|
221
|
-
- [onBlur](#onblur) - emits
|
|
227
|
+
- [onBlur](#onblur) - emits whenever input blurs.
|
|
222
228
|
- [onChangeText](#onchangetext) - returns the input's text anytime it changes.
|
|
223
229
|
- [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).
|
|
224
230
|
- [onChangeSelection](#onchangeselection) - returns all the data needed for working with selections (as of now it's mainly useful for [links](#links)).
|
|
@@ -237,9 +243,9 @@ You can find some examples in the [usage section](#usage) or in the example app.
|
|
|
237
243
|
|
|
238
244
|
If `true`, focuses the input.
|
|
239
245
|
|
|
240
|
-
| Type
|
|
241
|
-
|
|
242
|
-
| `bool` | `false`
|
|
246
|
+
| Type | Default Value | Platform |
|
|
247
|
+
|--------|---------------|----------|
|
|
248
|
+
| `bool` | `false` | Both |
|
|
243
249
|
|
|
244
250
|
#### `autoCapitalize`
|
|
245
251
|
|
|
@@ -250,57 +256,57 @@ Tells input to automatically capitalize certain characters.
|
|
|
250
256
|
- `sentences`: first letter of each sentence.
|
|
251
257
|
- `none`: don't auto capitalize anything.
|
|
252
258
|
|
|
253
|
-
| Type
|
|
254
|
-
|
|
255
|
-
| `'none' \| 'sentences' \| 'words' \| 'characters'` | `'sentences'` | Both
|
|
259
|
+
| Type | Default Value | Platform |
|
|
260
|
+
|----------------------------------------------------|---------------|----------|
|
|
261
|
+
| `'none' \| 'sentences' \| 'words' \| 'characters'` | `'sentences'` | Both |
|
|
256
262
|
|
|
257
263
|
#### `cursorColor`
|
|
258
264
|
|
|
259
265
|
When provided it will set the color of the cursor (or "caret") in the component.
|
|
260
266
|
|
|
261
|
-
| Type
|
|
262
|
-
|
|
263
|
-
| [`color`](https://reactnative.dev/docs/colors) | system default | Android
|
|
267
|
+
| Type | Default Value | Platform |
|
|
268
|
+
|------------------------------------------------|----------------|----------|
|
|
269
|
+
| [`color`](https://reactnative.dev/docs/colors) | system default | Android |
|
|
264
270
|
|
|
265
271
|
#### `defaultValue`
|
|
266
272
|
|
|
267
273
|
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.
|
|
268
274
|
|
|
269
|
-
| Type
|
|
270
|
-
|
|
271
|
-
| `string` | -
|
|
275
|
+
| Type | Default Value | Platform |
|
|
276
|
+
|----------|---------------|----------|
|
|
277
|
+
| `string` | - | Both |
|
|
272
278
|
|
|
273
279
|
#### `editable`
|
|
274
280
|
|
|
275
281
|
If `false`, text is not editable.
|
|
276
282
|
|
|
277
|
-
| Type
|
|
278
|
-
|
|
279
|
-
| `bool` | `true`
|
|
283
|
+
| Type | Default Value | Platform |
|
|
284
|
+
|--------|---------------|----------|
|
|
285
|
+
| `bool` | `true` | Both |
|
|
280
286
|
|
|
281
287
|
#### `htmlStyle`
|
|
282
288
|
|
|
283
289
|
A prop for customizing styles' appearances.
|
|
284
290
|
|
|
285
|
-
| Type
|
|
286
|
-
|
|
287
|
-
| [`HtmlStyle`](#htmlstyle-type) | default values from [`HtmlStyle`](#htmlstyle-type)
|
|
291
|
+
| Type | Default Value | Platform |
|
|
292
|
+
|--------------------------------|----------------------------------------------------|----------|
|
|
293
|
+
| [`HtmlStyle`](#htmlstyle-type) | default values from [`HtmlStyle`](#htmlstyle-type) | Both |
|
|
288
294
|
|
|
289
295
|
#### `mentionIndicators`
|
|
290
296
|
|
|
291
297
|
The recognized mention indicators. Each item needs to be a 1 character long string.
|
|
292
298
|
|
|
293
|
-
| Type
|
|
294
|
-
|
|
295
|
-
| array of `string` | `['@']`
|
|
299
|
+
| Type | Default Value | Platform |
|
|
300
|
+
|-------------------|---------------|----------|
|
|
301
|
+
| array of `string` | `['@']` | Both |
|
|
296
302
|
|
|
297
303
|
#### `onBlur`
|
|
298
304
|
|
|
299
305
|
Callback that's called whenever the input loses focused (is blurred).
|
|
300
306
|
|
|
301
|
-
| Type
|
|
302
|
-
|
|
303
|
-
| `() => void` | -
|
|
307
|
+
| Type | Default Value | Platform |
|
|
308
|
+
|--------------|---------------|----------|
|
|
309
|
+
| `() => void` | - | Both |
|
|
304
310
|
|
|
305
311
|
#### `onChangeHtml`
|
|
306
312
|
|
|
@@ -316,9 +322,9 @@ interface OnChangeHtmlEvent {
|
|
|
316
322
|
|
|
317
323
|
- `value` is the new HTML.
|
|
318
324
|
|
|
319
|
-
| Type
|
|
320
|
-
|
|
321
|
-
| `(NativeSyntheticEvent\<OnChangeHtmlEvent>) => void` | -
|
|
325
|
+
| Type | Default Value | Platform |
|
|
326
|
+
|------------------------------------------------------|---------------|----------|
|
|
327
|
+
| `(NativeSyntheticEvent\<OnChangeHtmlEvent>) => void` | - | Both |
|
|
322
328
|
|
|
323
329
|
#### `onChangeMention`
|
|
324
330
|
|
|
@@ -336,9 +342,9 @@ interface OnChangeMentionEvent {
|
|
|
336
342
|
- `indicator` is the indicator of the currently edited mention.
|
|
337
343
|
- `text` contains whole text that has been typed after the indicator.
|
|
338
344
|
|
|
339
|
-
| Type
|
|
340
|
-
|
|
341
|
-
| `(OnChangeMentionEvent) => void` | -
|
|
345
|
+
| Type | Default Value | Platform |
|
|
346
|
+
|----------------------------------|---------------|----------|
|
|
347
|
+
| `(OnChangeMentionEvent) => void` | - | Both |
|
|
342
348
|
|
|
343
349
|
#### `onChangeSelection`
|
|
344
350
|
|
|
@@ -358,9 +364,9 @@ OnChangeSelectionEvent {
|
|
|
358
364
|
- `end` is the first index after the selection's ending. For just a cursor in place (no selection), `start` equals `end`.
|
|
359
365
|
- `text` is the input's text in the current selection.
|
|
360
366
|
|
|
361
|
-
| Type
|
|
362
|
-
|
|
363
|
-
| `(NativeSyntheticEvent\<OnChangeSelectionEvent>) => void` | -
|
|
367
|
+
| Type | Default Value | Platform |
|
|
368
|
+
|-----------------------------------------------------------|---------------|----------|
|
|
369
|
+
| `(NativeSyntheticEvent\<OnChangeSelectionEvent>) => void` | - | Both |
|
|
364
370
|
|
|
365
371
|
#### `onChangeState`
|
|
366
372
|
|
|
@@ -388,9 +394,9 @@ interface OnChangeStateEvent {
|
|
|
388
394
|
}
|
|
389
395
|
```
|
|
390
396
|
|
|
391
|
-
| Type
|
|
392
|
-
|
|
393
|
-
| `(NativeSyntheticEvent\<OnChangeStateEvent>) => void` | -
|
|
397
|
+
| Type | Default Value | Platform |
|
|
398
|
+
|-------------------------------------------------------|---------------|----------|
|
|
399
|
+
| `(NativeSyntheticEvent\<OnChangeStateEvent>) => void` | - | Both |
|
|
394
400
|
|
|
395
401
|
#### `onChangeText`
|
|
396
402
|
|
|
@@ -406,9 +412,9 @@ interface OnChangeTextEvent {
|
|
|
406
412
|
|
|
407
413
|
- `value` is the new text value of the input.
|
|
408
414
|
|
|
409
|
-
| Type
|
|
410
|
-
|
|
411
|
-
| `(NativeSyntheticEvent\<OnChangeTextEvent>) => void` | -
|
|
415
|
+
| Type | Default Value | Platform |
|
|
416
|
+
|------------------------------------------------------|---------------|----------|
|
|
417
|
+
| `(NativeSyntheticEvent\<OnChangeTextEvent>) => void` | - | Both |
|
|
412
418
|
|
|
413
419
|
#### `onEndMention`
|
|
414
420
|
|
|
@@ -416,17 +422,17 @@ Callback that is called when the user no longer edits a mention actively - has m
|
|
|
416
422
|
|
|
417
423
|
- `indicator` is the indicator of the mention that was being edited.
|
|
418
424
|
|
|
419
|
-
| Type
|
|
420
|
-
|
|
421
|
-
| `(indicator: string) => void` | -
|
|
425
|
+
| Type | Default Value | Platform |
|
|
426
|
+
|-------------------------------|---------------|----------|
|
|
427
|
+
| `(indicator: string) => void` | - | Both |
|
|
422
428
|
|
|
423
429
|
#### `onFocus`
|
|
424
430
|
|
|
425
431
|
Callback that's called whenever the input is focused.
|
|
426
432
|
|
|
427
|
-
| Type
|
|
428
|
-
|
|
429
|
-
| `() => void` | -
|
|
433
|
+
| Type | Default Value | Platform |
|
|
434
|
+
|--------------|---------------|----------|
|
|
435
|
+
| `() => void` | - | Both |
|
|
430
436
|
|
|
431
437
|
#### `onLinkDetected`
|
|
432
438
|
|
|
@@ -448,9 +454,9 @@ interface OnLinkDetected {
|
|
|
448
454
|
- `start` is the starting index of the link.
|
|
449
455
|
- `end` is the first index after the ending index of the link.
|
|
450
456
|
|
|
451
|
-
| Type
|
|
452
|
-
|
|
453
|
-
| `(OnLinkDetected) => void` | -
|
|
457
|
+
| Type | Default Value | Platform |
|
|
458
|
+
|----------------------------|---------------|----------|
|
|
459
|
+
| `(OnLinkDetected) => void` | - | Both |
|
|
454
460
|
|
|
455
461
|
#### `onMentionDetected`
|
|
456
462
|
|
|
@@ -468,11 +474,11 @@ OnMentionDetected {
|
|
|
468
474
|
|
|
469
475
|
- `text` is the mention's displayed text.
|
|
470
476
|
- `indicator` is the indicator of the mention.
|
|
471
|
-
- `attributes` are the additional user-defined
|
|
477
|
+
- `attributes` are the additional user-defined attributes that are being stored with the mention.
|
|
472
478
|
|
|
473
|
-
| Type
|
|
474
|
-
|
|
475
|
-
| `(OnMentionDetected) => void` | -
|
|
479
|
+
| Type | Default Value | Platform |
|
|
480
|
+
|-------------------------------|---------------|----------|
|
|
481
|
+
| `(OnMentionDetected) => void` | - | Both |
|
|
476
482
|
|
|
477
483
|
#### `onStartMention`
|
|
478
484
|
|
|
@@ -480,41 +486,41 @@ Callback that gets called whenever a mention editing starts (after placing the i
|
|
|
480
486
|
|
|
481
487
|
- `indicator` is the indicator of the mention that begins editing.
|
|
482
488
|
|
|
483
|
-
| Type
|
|
484
|
-
|
|
485
|
-
| `(indicator: string) => void` | -
|
|
489
|
+
| Type | Default Value | Platform |
|
|
490
|
+
|-------------------------------|---------------|----------|
|
|
491
|
+
| `(indicator: string) => void` | - | Both |
|
|
486
492
|
|
|
487
493
|
#### `placeholder`
|
|
488
494
|
|
|
489
495
|
The placeholder text that is displayed in the input if nothing has been typed yet. Disappears when something is typed.
|
|
490
496
|
|
|
491
|
-
| Type
|
|
492
|
-
|
|
493
|
-
| `string` | `''`
|
|
497
|
+
| Type | Default Value | Platform |
|
|
498
|
+
|----------|---------------|----------|
|
|
499
|
+
| `string` | `''` | Both |
|
|
494
500
|
|
|
495
501
|
#### `placeholderTextColor`
|
|
496
502
|
|
|
497
503
|
Input placeholder's text color.
|
|
498
504
|
|
|
499
|
-
| Type
|
|
500
|
-
|
|
501
|
-
| [`color`](https://reactnative.dev/docs/colors) | input's [color](#style) | Both
|
|
505
|
+
| Type | Default Value | Platform |
|
|
506
|
+
|------------------------------------------------|-------------------------|----------|
|
|
507
|
+
| [`color`](https://reactnative.dev/docs/colors) | input's [color](#style) | Both |
|
|
502
508
|
|
|
503
509
|
#### `ref`
|
|
504
510
|
|
|
505
511
|
A React ref that lets you call any ref methods on the input.
|
|
506
512
|
|
|
507
|
-
| Type
|
|
508
|
-
|
|
509
|
-
| `RefObject<EnrichedTextInputInstance \| null>` | -
|
|
513
|
+
| Type | Default Value | Platform |
|
|
514
|
+
|------------------------------------------------|---------------|----------|
|
|
515
|
+
| `RefObject<EnrichedTextInputInstance \| null>` | - | Both |
|
|
510
516
|
|
|
511
517
|
#### `selectionColor`
|
|
512
518
|
|
|
513
519
|
Color of the selection rectangle that gets drawn over the selected text. On iOS, the cursor (caret) also gets set to this color.
|
|
514
520
|
|
|
515
|
-
| Type
|
|
516
|
-
|
|
517
|
-
| [`color`](https://reactnative.dev/docs/colors) | system default | Both
|
|
521
|
+
| Type | Default Value | Platform |
|
|
522
|
+
|------------------------------------------------|----------------|----------|
|
|
523
|
+
| [`color`](https://reactnative.dev/docs/colors) | system default | Both |
|
|
518
524
|
|
|
519
525
|
#### `style`
|
|
520
526
|
|
|
@@ -528,9 +534,9 @@ Additionally following [TextStyle](https://reactnative.dev/docs/text#style) prop
|
|
|
528
534
|
- fontWeight
|
|
529
535
|
- fontStyle only on Android
|
|
530
536
|
|
|
531
|
-
| Type
|
|
532
|
-
|
|
533
|
-
| [`View Style`](https://reactnative.dev/docs/view#style) \| [`Text Style`](https://reactnative.dev/docs/text#style) | -
|
|
537
|
+
| Type | Default Value | Platform |
|
|
538
|
+
|--------------------------------------------------------------------------------------------------------------------|---------------|----------|
|
|
539
|
+
| [`View Style`](https://reactnative.dev/docs/view#style) \| [`Text Style`](https://reactnative.dev/docs/text#style) | - | Both |
|
|
534
540
|
|
|
535
541
|
#### `ViewProps`
|
|
536
542
|
|
|
@@ -540,9 +546,9 @@ The input inherits [ViewProps](https://reactnative.dev/docs/view#props), but kee
|
|
|
540
546
|
|
|
541
547
|
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.
|
|
542
548
|
|
|
543
|
-
| Type
|
|
544
|
-
|
|
545
|
-
| `bool` | `false`
|
|
549
|
+
| Type | Default Value | Platform |
|
|
550
|
+
|--------|---------------|----------|
|
|
551
|
+
| `bool` | `false` | Android |
|
|
546
552
|
|
|
547
553
|
### Ref Methods
|
|
548
554
|
|
|
@@ -609,7 +615,7 @@ Sets the currently edited mention with a given indicator, displayed text and cus
|
|
|
609
615
|
|
|
610
616
|
- `indicator: string` - the indicator of the set mention.
|
|
611
617
|
- `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.
|
|
612
|
-
- `attributes?: Record<string, string>` - additional, custom
|
|
618
|
+
- `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.
|
|
613
619
|
|
|
614
620
|
#### `.setValue()`
|
|
615
621
|
|
|
@@ -831,7 +837,7 @@ If only a single config is given, the style applies to all mention types. You ca
|
|
|
831
837
|
|
|
832
838
|
#### img (inline image)
|
|
833
839
|
|
|
834
|
-
- `width` is the width of the inline image,
|
|
840
|
+
- `width` is the width of the inline image, defaults to `80`.
|
|
835
841
|
- `height` is the height of the inline image, defaults to `80`.
|
|
836
842
|
|
|
837
843
|
#### ol (ordered list)
|
|
@@ -850,12 +856,12 @@ By bullet we mean the dot that begins each line of the list.
|
|
|
850
856
|
- `bulletColor` defines the color of the bullet, takes [color](https://reactnative.dev/docs/colors) value and defaults to `black`.
|
|
851
857
|
- `bulletSize` sets both the height and the width of the bullet, defaults to `8`.
|
|
852
858
|
- `marginLeft` is the margin to the left of the bullet (between the bullet and input's left edge), defaults to `16`.
|
|
853
|
-
- `gapWidth` sets the gap between the bullet and the list item's text,
|
|
859
|
+
- `gapWidth` sets the gap between the bullet and the list item's text, defaults to `16`.
|
|
854
860
|
|
|
855
861
|
## Future Plans
|
|
856
862
|
|
|
857
863
|
- Adding Codeblocks and Inline Images to iOS input.
|
|
858
|
-
- Making some
|
|
864
|
+
- Making some optimizations around `onChangeHtml` event, maybe some imperative API to get the HTML output.
|
|
859
865
|
- Creating `EnrichedText` text component that supports our HTML output format with all additional interactions like pressing links or mentions.
|
|
860
866
|
- Adding API for custom link detection regex.
|
|
861
867
|
- Web library implementation via `react-native-web`.
|
|
@@ -171,10 +171,11 @@
|
|
|
171
171
|
|
|
172
172
|
for(NSNumber *activeStyle in currentActiveStyles) {
|
|
173
173
|
NSInteger activeStyleBeginning = [currentActiveStylesBeginning[activeStyle] integerValue];
|
|
174
|
-
|
|
175
|
-
//
|
|
176
|
-
//
|
|
177
|
-
|
|
174
|
+
|
|
175
|
+
// we end the styles that began after the currently ended style but not at the "i" (cause the old style ended at exactly "i-1"
|
|
176
|
+
// also the ones that began in the exact same place but are "inner" in relation to them due to StyleTypeEnum integer values
|
|
177
|
+
|
|
178
|
+
if((activeStyleBeginning > styleBeginning && activeStyleBeginning < i) ||
|
|
178
179
|
(activeStyleBeginning == styleBeginning && activeStyleBeginning < i && [activeStyle integerValue] > [style integerValue])) {
|
|
179
180
|
[fixedEndedStyles addObject:activeStyle];
|
|
180
181
|
[stylesToBeReAdded addObject:activeStyle];
|
|
@@ -405,24 +406,16 @@
|
|
|
405
406
|
if(html.length >= 13) {
|
|
406
407
|
NSString *firstSix = [html substringWithRange:NSMakeRange(0, 6)];
|
|
407
408
|
NSString *lastSeven = [html substringWithRange:NSMakeRange(html.length-7, 7)];
|
|
408
|
-
NSInteger newlinesCount = [[html componentsSeparatedByString:@"\n"] count] - 1;
|
|
409
409
|
|
|
410
410
|
if([firstSix isEqualToString:@"<html>"] && [lastSeven isEqualToString:@"</html>"]) {
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
// firstly remove newlined html tags if any:
|
|
420
|
-
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<html>\n" withString:@""];
|
|
421
|
-
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"\n</html>" withString:@""];
|
|
422
|
-
// fallback; remove html tags without their newlines
|
|
423
|
-
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<html>" withString:@""];
|
|
424
|
-
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"</html>" withString:@""];
|
|
425
|
-
}
|
|
411
|
+
// remove html tags, might be with newlines or without them
|
|
412
|
+
fixedHtml = [html copy];
|
|
413
|
+
// firstly remove newlined html tags if any:
|
|
414
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<html>\n" withString:@""];
|
|
415
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"\n</html>" withString:@""];
|
|
416
|
+
// fallback; remove html tags without their newlines
|
|
417
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<html>" withString:@""];
|
|
418
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"</html>" withString:@""];
|
|
426
419
|
} else {
|
|
427
420
|
// in other case we are most likely working with some external html - try getting the styles from between body tags
|
|
428
421
|
NSRange openingBodyRange = [html rangeOfString:@"<body>"];
|
|
@@ -438,38 +431,35 @@
|
|
|
438
431
|
|
|
439
432
|
// second processing - try fixing htmls with wrong newlines' setup
|
|
440
433
|
if(fixedHtml != nullptr) {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
fixedHtml = [self stringByAddingNewlinesToTag:@"</h2>" inString:fixedHtml leading:NO trailing:YES];
|
|
471
|
-
fixedHtml = [self stringByAddingNewlinesToTag:@"</h3>" inString:fixedHtml leading:NO trailing:YES];
|
|
472
|
-
}
|
|
434
|
+
// add <br> tag wherever needed
|
|
435
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<p></p>" withString:@"<br>"];
|
|
436
|
+
|
|
437
|
+
// remove <p> tags inside of <li>
|
|
438
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"<li><p>" withString:@"<li>"];
|
|
439
|
+
fixedHtml = [fixedHtml stringByReplacingOccurrencesOfString:@"</p></li>" withString:@"</li>"];
|
|
440
|
+
|
|
441
|
+
// tags that have to be in separate lines
|
|
442
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<br>" inString:fixedHtml leading:YES trailing:YES];
|
|
443
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<ul>" inString:fixedHtml leading:YES trailing:YES];
|
|
444
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</ul>" inString:fixedHtml leading:YES trailing:YES];
|
|
445
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<ol>" inString:fixedHtml leading:YES trailing:YES];
|
|
446
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</ol>" inString:fixedHtml leading:YES trailing:YES];
|
|
447
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<blockquote>" inString:fixedHtml leading:YES trailing:YES];
|
|
448
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</blockquote>" inString:fixedHtml leading:YES trailing:YES];
|
|
449
|
+
|
|
450
|
+
// line opening tags
|
|
451
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<p>" inString:fixedHtml leading:YES trailing:NO];
|
|
452
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<li>" inString:fixedHtml leading:YES trailing:NO];
|
|
453
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<h1>" inString:fixedHtml leading:YES trailing:NO];
|
|
454
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<h2>" inString:fixedHtml leading:YES trailing:NO];
|
|
455
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"<h3>" inString:fixedHtml leading:YES trailing:NO];
|
|
456
|
+
|
|
457
|
+
// line closing tags
|
|
458
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</p>" inString:fixedHtml leading:NO trailing:YES];
|
|
459
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</li>" inString:fixedHtml leading:NO trailing:YES];
|
|
460
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</h1>" inString:fixedHtml leading:NO trailing:YES];
|
|
461
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</h2>" inString:fixedHtml leading:NO trailing:YES];
|
|
462
|
+
fixedHtml = [self stringByAddingNewlinesToTag:@"</h3>" inString:fixedHtml leading:NO trailing:YES];
|
|
473
463
|
}
|
|
474
464
|
|
|
475
465
|
return fixedHtml;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-enriched",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Rich Text Editor component for React Native",
|
|
5
5
|
"source": "./src/index.tsx",
|
|
6
6
|
"main": "./lib/module/index.js",
|
|
@@ -48,14 +48,14 @@
|
|
|
48
48
|
],
|
|
49
49
|
"repository": {
|
|
50
50
|
"type": "git",
|
|
51
|
-
"url": "git+https://github.com/software-mansion-labs/react-native-
|
|
51
|
+
"url": "git+https://github.com/software-mansion-labs/react-native-enriched.git"
|
|
52
52
|
},
|
|
53
53
|
"author": "Software Mansion <contact@swmansion.com> (https://swmansion.com)",
|
|
54
54
|
"license": "MIT",
|
|
55
55
|
"bugs": {
|
|
56
|
-
"url": "https://github.com/software-mansion-labs/react-native-
|
|
56
|
+
"url": "https://github.com/software-mansion-labs/react-native-enriched/issues"
|
|
57
57
|
},
|
|
58
|
-
"homepage": "https://github.com/software-mansion-labs/react-native-
|
|
58
|
+
"homepage": "https://github.com/software-mansion-labs/react-native-enriched#readme",
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"registry": "https://registry.npmjs.org/"
|
|
61
61
|
},
|