rn-rich-text-editor 1.0.3 → 1.0.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.
- package/README.md +2 -0
- package/package.json +8 -2
- package/src/Editor.js +3 -2
- package/src/Toolbar.js +18 -4
- package/src/img/italic.svg +1 -1
package/README.md
CHANGED
|
@@ -31,6 +31,8 @@ Make sure you have these installed:
|
|
|
31
31
|
npm install react react-native react-native-webview
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
If your app already has `react-native-svg-transformer` (e.g. in devDependencies), toolbar SVG icons (e.g. italic) work with no extra setup. Install `react-native-svg` for runtime.
|
|
35
|
+
|
|
34
36
|
## Quick Start
|
|
35
37
|
|
|
36
38
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rn-rich-text-editor",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "A rich text editor component for React Native",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -34,6 +34,12 @@
|
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": "*",
|
|
36
36
|
"react-native": "*",
|
|
37
|
-
"react-native-webview": "*"
|
|
37
|
+
"react-native-webview": "*",
|
|
38
|
+
"react-native-svg": "*"
|
|
39
|
+
},
|
|
40
|
+
"peerDependenciesMeta": {
|
|
41
|
+
"react-native-svg": {
|
|
42
|
+
"optional": true
|
|
43
|
+
}
|
|
38
44
|
}
|
|
39
45
|
}
|
package/src/Editor.js
CHANGED
|
@@ -523,11 +523,12 @@ const BORDER_RADIUS = 6;
|
|
|
523
523
|
|
|
524
524
|
const editorBorderStyle = {
|
|
525
525
|
borderColor: BORDER_COLOR,
|
|
526
|
+
borderTopWidth: 1,
|
|
526
527
|
borderLeftWidth: 1,
|
|
527
528
|
borderRightWidth: 1,
|
|
528
529
|
borderBottomWidth: 1,
|
|
529
|
-
|
|
530
|
-
|
|
530
|
+
borderTopLeftRadius: BORDER_RADIUS,
|
|
531
|
+
borderTopRightRadius: BORDER_RADIUS,
|
|
531
532
|
};
|
|
532
533
|
|
|
533
534
|
const styles = StyleSheet.create({
|
package/src/Toolbar.js
CHANGED
|
@@ -69,7 +69,7 @@ function getDefaultIcon() {
|
|
|
69
69
|
texts[actions.insertImage] = require('./img/image.png');
|
|
70
70
|
texts[actions.keyboard] = require('./img/keyboard.png');
|
|
71
71
|
texts[actions.setBold] = require('./img/bold.png');
|
|
72
|
-
texts[actions.setItalic] = require('./img/italic.
|
|
72
|
+
texts[actions.setItalic] = require('./img/italic.png');
|
|
73
73
|
texts[actions.setSubscript] = require('./img/subscript.png');
|
|
74
74
|
texts[actions.setSuperscript] = require('./img/superscript.png');
|
|
75
75
|
texts[actions.insertBulletsList] = require('./img/list.png');
|
|
@@ -372,7 +372,17 @@ export default class Toolbar extends Component {
|
|
|
372
372
|
onPress={() => that._onPress(action)}>
|
|
373
373
|
{icon ? (
|
|
374
374
|
typeof icon === 'function' ? (
|
|
375
|
-
icon({
|
|
375
|
+
icon({
|
|
376
|
+
selected,
|
|
377
|
+
disabled,
|
|
378
|
+
tintColor,
|
|
379
|
+
iconSize,
|
|
380
|
+
iconGap,
|
|
381
|
+
width: iconSize,
|
|
382
|
+
height: iconSize,
|
|
383
|
+
color: tintColor,
|
|
384
|
+
fill: tintColor,
|
|
385
|
+
})
|
|
376
386
|
) : (
|
|
377
387
|
<Image
|
|
378
388
|
source={icon}
|
|
@@ -419,6 +429,10 @@ export default class Toolbar extends Component {
|
|
|
419
429
|
tintColor: tintColor,
|
|
420
430
|
iconSize,
|
|
421
431
|
iconGap,
|
|
432
|
+
width: iconSize,
|
|
433
|
+
height: iconSize,
|
|
434
|
+
color: tintColor,
|
|
435
|
+
fill: tintColor,
|
|
422
436
|
})
|
|
423
437
|
) : (
|
|
424
438
|
<Image
|
|
@@ -502,8 +516,8 @@ const styles = StyleSheet.create({
|
|
|
502
516
|
borderLeftWidth: 1,
|
|
503
517
|
borderRightWidth: 1,
|
|
504
518
|
borderBottomWidth: 1,
|
|
505
|
-
|
|
506
|
-
|
|
519
|
+
borderBottomLeftRadius: BORDER_RADIUS,
|
|
520
|
+
borderBottomRightRadius: BORDER_RADIUS,
|
|
507
521
|
},
|
|
508
522
|
|
|
509
523
|
item: {
|
package/src/img/italic.svg
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M12.5 0C12.9602 0 13.3333 0.373096 13.3333 0.833333C13.3333 1.29357 12.9602 1.66667 12.5 1.66667H9.74447L5.36947 13.3333H8.33333C8.79357 13.3333 9.16667 13.7064 9.16667 14.1667C9.16667 14.6269 8.79357 15 8.33333 15H0.833333C0.373096 15 0 14.6269 0 14.1667C0 13.7064 0.373096 13.3333 0.833333 13.3333H3.58887L7.96387 1.66667H5C4.53976 1.66667 4.16667 1.29357 4.16667 0.833333C4.16667 0.373096 4.53976 0 5 0H12.5Z" fill="
|
|
2
|
+
<path d="M12.5 0C12.9602 0 13.3333 0.373096 13.3333 0.833333C13.3333 1.29357 12.9602 1.66667 12.5 1.66667H9.74447L5.36947 13.3333H8.33333C8.79357 13.3333 9.16667 13.7064 9.16667 14.1667C9.16667 14.6269 8.79357 15 8.33333 15H0.833333C0.373096 15 0 14.6269 0 14.1667C0 13.7064 0.373096 13.3333 0.833333 13.3333H3.58887L7.96387 1.66667H5C4.53976 1.66667 4.16667 1.29357 4.16667 0.833333C4.16667 0.373096 4.53976 0 5 0H12.5Z" fill="currentColor"/>
|
|
3
3
|
</svg>
|