rn-rich-text-editor 1.0.4 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-rich-text-editor",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "A rich text editor component for React Native",
   "keywords": [
     "react-native",

package/src/Editor.js

@@ -335,15 +335,16 @@ export default class Editor extends Component {
     // useContainer is an optional prop with default value of true
     // If set to true, it will use a View wrapper with styles and height.
     // If set to false, it will not use a View wrapper
-    const { useContainer, style, errorMessage } = this.props;
-    const errorStyle = errorMessage ? { borderWidth: 1, borderColor: '#d92d20' } : {};
+    const { useContainer, style, errorMessage, readOnly, disabled } = this.props;
+    const errorStyle = !readOnly && errorMessage ? { borderWidth: 1, borderColor: '#d92d20' } : {};
+    const disabledStyle = disabled ? { backgroundColor: '#C9CED7' } : {};
     
     return useContainer ? (
-      <View style={[editorBorderStyle, style, { height }, errorStyle]} onLayout={this.onViewLayout}>
+      <View style={[disabledStyle, style, { height }, errorStyle]} onLayout={this.onViewLayout}>
         {this.renderWebView()}
       </View>
     ) : (
-      <View style={[editorBorderStyle, errorStyle]}>
+      <View style={[disabledStyle, style, errorStyle]}>
         {this.renderWebView()}
       </View>
     );
@@ -518,19 +519,6 @@ 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.svg');
+  texts[actions.setItalic] = require('./img/italic.png');
   texts[actions.setSubscript] = require('./img/subscript.png');
   texts[actions.setSuperscript] = require('./img/superscript.png');
   texts[actions.insertBulletsList] = require('./img/list.png');
@@ -97,7 +97,6 @@ function getDefaultIcon() {
   return texts;
 }
 
-// noinspection FallThroughInSwitchStatementJS
 export default class Toolbar extends Component {
   static defaultProps = {
     actions: defaultActions,
@@ -463,8 +462,9 @@ export default class Toolbar extends Component {
     if (readOnly) {
       return null;
     }
-    const vStyle = [styles.barContainer, style, disabled && this._getButtonDisabledStyle()];
-    const barBg = (style && style.backgroundColor) || TOOLBAR_BG;
+    const disabledStyle = disabled ? { backgroundColor: '#C9CED7' } : {};
+    const vStyle = [styles.barContainer, disabledStyle, style, disabled && this._getButtonDisabledStyle()];
+    const barBg = (style && style.backgroundColor) || (disabled && '#C9CED7') || TOOLBAR_BG;
     const showFades = horizontal;
     return (
       <View style={vStyle}>
@@ -503,21 +503,11 @@ 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/editor/createHTML.js

@@ -799,7 +799,7 @@ function createReadOnlyHTML(options = {}) {
             height: 100%;
             overflow-y: auto;
             -webkit-overflow-scrolling: touch;
-            padding: 10px;
+            padding: 0;
             ${contentCSSText}
         }
     </style>