rn-rich-text-editor 1.0.2 → 1.0.4

package/README.md

@@ -31,6 +31,8 @@ Make sure you have these installed:
 npm install react react-native react-native-webview
 ```
 
+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.
+
 ## Quick Start
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-rich-text-editor",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A rich text editor component for React Native",
   "keywords": [
     "react-native",
@@ -34,6 +34,12 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview": "*"
+    "react-native-webview": "*",
+    "react-native-svg": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
   }
 }

package/src/Editor.js

@@ -339,11 +339,11 @@ export default class Editor extends Component {
     const errorStyle = errorMessage ? { borderWidth: 1, borderColor: '#d92d20' } : {};
     
     return useContainer ? (
-      <View style={[style, { height }, errorStyle]} onLayout={this.onViewLayout}>
+      <View style={[editorBorderStyle, style, { height }, errorStyle]} onLayout={this.onViewLayout}>
         {this.renderWebView()}
       </View>
     ) : (
-      <View style={errorStyle}>
+      <View style={[editorBorderStyle, errorStyle]}>
         {this.renderWebView()}
       </View>
     );
@@ -518,6 +518,19 @@ export default class Editor extends Component {
   }
 }
 
+const BORDER_COLOR = '#C9CED7';
+const BORDER_RADIUS = 6;
+
+const editorBorderStyle = {
+  borderColor: BORDER_COLOR,
+  borderTopWidth: 1,
+  borderLeftWidth: 1,
+  borderRightWidth: 1,
+  borderBottomWidth: 1,
+  borderTopLeftRadius: BORDER_RADIUS,
+  borderTopRightRadius: BORDER_RADIUS,
+};
+
 const styles = StyleSheet.create({
   _input: {
     position: 'absolute',

package/src/Toolbar.js

@@ -69,7 +69,7 @@ function getDefaultIcon() {
   texts[actions.insertImage] = require('./img/image.png');
   texts[actions.keyboard] = require('./img/keyboard.png');
   texts[actions.setBold] = require('./img/bold.png');
-  texts[actions.setItalic] = require('./img/italic.png');
+  texts[actions.setItalic] = require('./img/italic.svg');
   texts[actions.setSubscript] = require('./img/subscript.png');
   texts[actions.setSuperscript] = require('./img/superscript.png');
   texts[actions.insertBulletsList] = require('./img/list.png');
@@ -372,7 +372,17 @@ export default class Toolbar extends Component {
         onPress={() => that._onPress(action)}>
         {icon ? (
           typeof icon === 'function' ? (
-            icon({ selected, disabled, tintColor, iconSize, iconGap })
+            icon({
+              selected,
+              disabled,
+              tintColor,
+              iconSize,
+              iconGap,
+              width: iconSize,
+              height: iconSize,
+              color: tintColor,
+              fill: tintColor,
+            })
           ) : (
             <Image
               source={icon}
@@ -419,6 +429,10 @@ export default class Toolbar extends Component {
               tintColor: tintColor,
               iconSize,
               iconGap,
+              width: iconSize,
+              height: iconSize,
+              color: tintColor,
+              fill: tintColor,
             })
           ) : (
             <Image
@@ -489,11 +503,21 @@ export default class Toolbar extends Component {
   }
 }
 
+const BORDER_COLOR = '#C9CED7';
+const BORDER_RADIUS = 6;
+
 const styles = StyleSheet.create({
   barContainer: {
     height: 44,
     backgroundColor: '#efefef',
     alignItems: 'center',
+    borderColor: BORDER_COLOR,
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderBottomLeftRadius: BORDER_RADIUS,
+    borderBottomRightRadius: BORDER_RADIUS,
   },
 
   item: {

package/src/img/italic.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>