Image real size added

Author: imnapo

expo-demo/package.json

@@ -10,7 +10,7 @@
     "expo": "^31.0.2",
     "react": "16.5.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
-    "react-native-cn-richtext-editor": "^1.0.28",
+    "react-native-cn-richtext-editor": "^1.0.29",
     "react-native-popup-menu": "^0.14.2"
   },
   "devDependencies": {

expo-demo/yarn.lock

@@ -3730,10 +3730,10 @@ react-native-branch@2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/react-native-branch/-/react-native-branch-2.2.5.tgz#4074dd63b4973e6397d9ce50e97b57c77a518e9d"
 
-react-native-cn-richtext-editor@^1.0.28:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/react-native-cn-richtext-editor/-/react-native-cn-richtext-editor-1.0.28.tgz#6c076f0c1eba4183f222d06eeef77600f18bff62"
-  integrity sha512-PzIbwwj1qIwxW9mcatvXmb8uNamNOYj1mFI1B0Hn/vxaVxksjxQBHBK8DDawF4D28pxhvCp6QlYY7C61QuyJ4Q==
+react-native-cn-richtext-editor@^1.0.29:
+  version "1.0.29"
+  resolved "https://registry.yarnpkg.com/react-native-cn-richtext-editor/-/react-native-cn-richtext-editor-1.0.29.tgz#98e9b2cd38c1a932ffda39dc18f4ddff5e6a85e5"
+  integrity sha512-t3wdl4uYPdx+V3qnbtIYxaeUfjHmWea2YdLnRdnlQUu431FBQg7oqXB1HaLq6JcSS/fIfEoSsLb2ZyUv4W92+w==
   dependencies:
     diff-match-patch "^1.0.4"
     immutability-helper "^2.8.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-cn-richtext-editor",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "RichText Editor for React-Native",
   "main": "index.js",
   "scripts": {
@@ -27,11 +27,11 @@
     "type": "git",
     "url": "git+https://github.com/imnapo/react-native-cn-richtext-editor.git"
   },
-  "author": "Narbe HS <imnapo@gmail.com> (http://learncode.net)",
   "contributors": [
     "Narbe HS <imnapo@gmail.com> (http://learncode.net)",
     "Christ Kho <christ.khodabakhshi@gmail.com> (http://learncode.net)"
   ],
+  "author": "Narbe HS <imnapo@gmail.com> (http://learncode.net)",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/imnapo/react-native-cn-richtext-editor/issues"

src/CNRichTextEditor.js

@@ -236,16 +236,14 @@ class CNRichTextEditor extends Component {
         const { value } = this.props;
         let index = focusInputIndex + 1;
 
-        let myHeight = (this.layoutWidth - 4 < width) ? height * ((this.layoutWidth - 4) / width) : height; 
-
         const item = {
             id: shortid.generate(),
             imageId: id,
             component: 'image',
             url: url,
             size: {
-                height:  myHeight, 
-                width: (this.layoutWidth - 4 < width) ? this.layoutWidth - 4 : width
+                height:  height, 
+                width: width
             }
         };
 
@@ -314,9 +312,7 @@ class CNRichTextEditor extends Component {
 
 
 
-        if(height != null && width != null) {
-            
-            
+        if(height != null && width != null) {           
             this.addImageContent(url, id, height, width);
         }
         else {
@@ -456,6 +452,9 @@ class CNRichTextEditor extends Component {
     }
 
     renderImage(image, index) {
+        const { width, height } = image.size;
+        let myHeight = (this.layoutWidth - 4 < width) ? height * ((this.layoutWidth - 4) / width) : height; 
+        let myWidth = (this.layoutWidth - 4 < width) ? this.layoutWidth - 4 : width;
 
         return (
             <View key={`image${index}`}
@@ -467,16 +466,15 @@ class CNRichTextEditor extends Component {
                 paddingLeft: 2,
                 paddingRight: 2,
                 paddingTop: 2,
-                paddingBottom: 2,
+                paddingBottom: 2
             }}
             >
                 <TouchableWithoutFeedback
                 onPress={() => this.onImageClicked(index)}
 
                 >
                     <Image
-                        
-                        style={{width: image.size.width, height: image.size.height
+                        style={{width: myWidth, height: myHeight
                         , opacity: this.state.imageHighLightedInex === index ? .8  : 1
                         }}
                         source={{uri: image.url}}
@@ -488,7 +486,7 @@ class CNRichTextEditor extends Component {
                         //onSelectionChange={(event) =>this.onSelectionChange(event, index)} 
                         multiline={false}
                         style={{
-                            fontSize: image.size.height * .65,
+                            fontSize: myHeight * .65,
                             borderWidth: 0,
                             paddingBottom:1,
                             width: 1

src/CNRichTextView.js

@@ -69,9 +69,11 @@ class CNRichTextView extends Component {
     renderImage(image, index) {
         const { width, height } = image.size;
         const { layoutWidth } = this.state;
-        let myHeight = height * (layoutWidth / width); 
-        let myWidth = layoutWidth
 
+        let myHeight = (layoutWidth - 4 < width) ? height * ((layoutWidth - 4) / width) : height; 
+        let myWidth = (layoutWidth - 4 < width) ? layoutWidth - 4 : width;
+
+
         return (
             <View key={`image${index}`}
                 style={{