Merge pull request #29 from jsamr/image-component

Add support for ImageComponent prop
imnapo · Mar 20, 2019 · 4db4cc8 · 4db4cc8
2 parents a6a6167 + c932aef
commit 4db4cc8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ yarn add react-native-cn-richtext-editor
 
 Here is a simple overview of our components usage.
 
-```
+``` jsx
 import React, { Component } from 'react';
 import { View, StyleSheet, Keyboard
 , TouchableWithoutFeedback, Text
@@ -176,8 +176,10 @@ Also be noticed that this example is writen with expo and required 'react-native
 | onSelectedTagChanged   | this event triggers when selected tag of editor is changed. | No |
 | onSelectedStyleChanged | this event triggers when selected style of editor is changed. | No |
 | onValueChanged | this event triggers when value of editor is changed. | No |
+| onRemoveImage | this event triggers when an image is removed. Callback param in the form `{ uri, id }`. | No |
 | value    | an array object which keeps value of the editor | Yes |
 | styleList  | an object consist of styles name and values (use getDefaultStyles function) | Yes |
+| ImageComponent | a React component (class or functional) which will be used to render images. Will be passed `style` and `source` props. | No |
 
 ### CNToolbar
 

diff --git a/src/CNRichTextEditor.js b/src/CNRichTextEditor.js
@@ -450,7 +450,7 @@ class CNRichTextEditor extends Component {
         const { width, height } = image.size;
         let myHeight = (this.state.layoutWidth - 4 < width) ? height * ((this.state.layoutWidth - 4) / width) : height; 
         let myWidth = (this.state.layoutWidth - 4 < width) ? this.state.layoutWidth - 4 : width;
-
+        const { ImageComponent = Image } = this.props
         return (
             <View key={`image${index}`}
             style={{
@@ -468,15 +468,14 @@ class CNRichTextEditor extends Component {
                 onPress={() => this.onImageClicked(index)}
 
                 >
-                    <Image
+                    <ImageComponent
                         style={{width: myWidth, height: myHeight
                         , opacity: this.state.imageHighLightedInex === index ? .8  : 1
                         }}
                         source={{uri: image.url}}
                         />                
                 </TouchableWithoutFeedback>
                 <TextInput
-
                         onKeyPress={(event) => this.handleKeyDown(event, index)}
                         //onSelectionChange={(event) =>this.onSelectionChange(event, index)} 
                         multiline={false}

diff --git a/src/CNRichTextView.js b/src/CNRichTextView.js
@@ -69,11 +69,10 @@ class CNRichTextView extends Component {
     renderImage(image, index) {
         const { width, height } = image.size;
         const { layoutWidth } = this.state;
-
+        const { ImageComponent = Image } = this.props
         let myHeight = (layoutWidth - 4 < width) ? height * ((layoutWidth - 4) / width) : height; 
         let myWidth = (layoutWidth - 4 < width) ? layoutWidth - 4 : width;
 
-
         return (
             <View key={`image${index}`}
                 style={{
@@ -82,8 +81,7 @@ class CNRichTextView extends Component {
                 }}
             >
                 <View>
-                    <Image
-
+                    <ImageComponent
                         style={{
                             width: myWidth, height: myHeight
                             , opacity: this.state.imageHighLightedInex === index ? .8 : 1