bump(*): bump version (@1.0.60-rc.0)

- Add mailto support
- Add link support - @linonetwo
- Add listItemText support - @chandlervdw 
- Add video support
- Add GIF support
- Add url support

README.md

@@ -21,9 +21,19 @@ import Markdown from 'react-native-simple-markdown'
 const MyAwesomeApp = () => {
   return (
     <Markdown styles={styles}>
-      #Who is the best dev in town?
+      #Markdown in react-native is so cool!
       {'\n\n'}
-      Probably **the one** reading this lines 😏…
+      You can **emphasize** what you want, or just _suggest it_ 😏…
+      {'\n\n'}
+      You can even [link your website](http://charlesmangwa.surge.sh) or if you prefer: [email sombedy](mailto:[email protected])
+      {'\n\n'}
+      Spice it up with some GIF 💃:
+      {'\n\n'}
+      ![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif)
+      {'\n\n'}
+      And even add a cool video 😎!
+      {'\n\n'}
+      [![A cool video](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)
     </Markdown>    
   )
 }
@@ -75,7 +85,10 @@ Example:
 - `hr` (`<View>`)
 - `heading` (`<Text>`) - Also `heading1` through `heading6`
 - `inlineCode` (`<Text>`)
+- `image` (`<Image>`) - Supports `.jpg`, `.png`, `.gif`, etc
+- `link` (`Text`)
 - `list` (`<View>`) - Also `listItem` (`<View>`), `listItemBullet` (`<Text>`), `listItemNumber` (`<Text>`) and `listItemText` (`<Text>`)
+- `mailTo` (`Text`)
 - `paragraph` (`<View>`)
 - `plainText` (`<Text>`) - Use for styling text without any associated styles
 - `strong` (`<Text>`)
@@ -88,7 +101,8 @@ Example:
 - `text` (`<Text>`) - Inherited by all text based elements
 - `u` (`<View>`)
 - `url` (`<Text>`)
-- `view` (`<View>`) - This is the container `View` that the Markdown is rendered in.
+- `video` (`<Image>`)
+- `view` (`<View>`) - This is the `View` container where the Markdown is render.
 
 ##### WIP
 
@@ -97,9 +111,6 @@ _Most of these elements can be used, but I'm still working on some improvements.
 - `autolink` (`<Text>`)
 - `blockQuote` (`<Text>`)
 - `codeBlock` (`<View>`)
-- `image` (`<Image>`) - Usable but need to herit image size
-- `link` (`<Text>`)
-- `mailto` (`<Text>`)
 - `newline` (`<Text>`)
 
 ## Credits

package.json

@@ -4,8 +4,8 @@
     "type": "git",
     "url": "https://github.com/CharlesMangwa/react-native-simple-markdown.git"
   },
-  "version": "1.0.54",
-  "description": "A component for rendering Markdown in React Native with native components.",
+  "version": "1.0.60-rc.0",
+  "description": "Render Markdown in React Native with native components (iOS & Android)",
   "main": "index.js",
   "author": "Charles Mangwa <[email protected]> (http://charlesmangwa.surge.sh)",
   "dependencies": {

rules.js

@@ -1,5 +1,5 @@
 import React, { createElement } from 'react'
-import { Image, Text, View } from 'react-native'
+import { Image, Text, View, Linking } from 'react-native'
 import SimpleMarkdown from 'simple-markdown'
 import _ from 'lodash'
 
@@ -9,7 +9,7 @@ export default (styles) => ({
       state.withinText = true
       return createElement(Text, {
         key: state.key,
-        style: styles.autolink,
+        style: styles.link,
         onPress: _.noop
       }, output(node.content, state))
     }
@@ -77,7 +77,7 @@ export default (styles) => ({
       return createElement(Image, {
         key: state.key,
         source: { uri: node.target },
-        style: styles.image
+        style: node.target.match(/youtube/) ? styles.video : styles.image
       })
     }
   },
@@ -93,9 +93,13 @@ export default (styles) => ({
   link: {
     react: (node, output, state) => {
       state.withinText = true
+      const openUrl = (url) => {
+        Linking.openURL(url).catch(error => console.warn('An error occurred: ', error))
+      }
       return createElement(Text, {
+        style: node.target.match(/@/) ? styles.mailTo : styles.link,
         key: state.key,
-        style: styles.autolink
+        onPress: () => openUrl(node.target)
       }, output(node.content, state))
     }
   },
@@ -118,16 +122,6 @@ export default (styles) => ({
       return createElement(View, { key: state.key, style: styles.list }, items)
     }
   },
-  mailto: {
-    react: (node, output, state) => {
-      state.withinText = true
-      return createElement(Text, {
-        key: state.key,
-        style: styles.mailto,
-        onPress: _.noop
-      }, output(node.content, state))
-    }
-  },
   newline: {
     react: (node, output, state) => {
       return createElement(Text, {
@@ -206,10 +200,13 @@ export default (styles) => ({
   url: {
     react: (node, output, state) => {
       state.withinText = true
+      const openUrl = (url) => {
+        Linking.openURL(url).catch(error => console.warn('An error occurred: ', error))
+      }
       return createElement(Text, {
         key: state.key,
         style: styles.url,
-        onPress: _.noop
+        onPress: openURL(node.target)
       }, output(node.content, state))
     }
   }

styles.js

@@ -49,6 +49,9 @@ const styles = {
     fontFamily: 'Courier',
     fontWeight: 'bold',
   },
+  link: {
+    textDecorationLine: 'underline',
+  },
   list: {},
   listItem: {
     flexDirection: 'row',
@@ -61,6 +64,9 @@ const styles = {
   listItemNumber: {
     fontWeight: 'bold',
   },
+  mailTo: {
+    textDecorationLine: 'underline',
+  },
   paragraph: {
     marginTop: 10,
     marginBottom: 10,
@@ -113,6 +119,10 @@ const styles = {
     borderColor: '#222222',
     borderBottomWidth: 1,
   },
+  video: {
+    width: 300,
+    height: 300,
+  }
 }
 
 export default styles