From f26bc9e80f8893e474ed1133c0d91da1830e3537 Mon Sep 17 00:00:00 2001 From: Andang Rian Dimas Date: Sat, 5 Oct 2019 02:40:33 +0700 Subject: [PATCH 1/8] update dependencies, avoid vulnerabilities --- package-lock.json | 12 ++++++------ package.json | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8070b5e..7fd7f0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,9 +61,9 @@ "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" }, "loose-envify": { "version": "1.3.1", @@ -119,9 +119,9 @@ "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, "simple-markdown": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.4.4.tgz", - "integrity": "sha512-ZmlNUGR1KI12sPHeQ7dQY1qM5KfOgFqClNNVO8zQ9Pg6u7gHLCPFGD+VC7MCwpGDMd1uw3Bb2TfFfR8d6bB34A==" + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.6.0.tgz", + "integrity": "sha512-xZd6I4W1jtfP73hpAYwwVY7t+gQWqfZ105NP3qS/hOTtXZ9beQ2Q572Mpk+jBqoUNafgvd7XeeIx5NEOOYFz0Q==" }, "ua-parser-js": { "version": "0.7.17", diff --git a/package.json b/package.json index a330d3d..fddb1fa 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,10 @@ "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { - "lodash": "^4.17.11", + "lodash": "^4.17.15", "prop-types": "^15.6.0", "react-native-lightbox": "^0.7.0", - "simple-markdown": "^0.4.4" + "simple-markdown": "^0.6.0" }, "repository": { "type": "git", From ee127b44abe5b5d43c1ad44d9489ad65ebe8c5c2 Mon Sep 17 00:00:00 2001 From: Andang Rian Dimas Date: Sat, 5 Oct 2019 02:40:59 +0700 Subject: [PATCH 2/8] replace componentWillMount --- index.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index 2177f3c..b06cd3c 100644 --- a/index.js +++ b/index.js @@ -6,22 +6,23 @@ import SimpleMarkdown from 'simple-markdown'; import styles from './styles'; class Markdown extends Component { - componentWillMount() { - if (this.props.enableLightBox && !this.props.navigator) { + constructor(props) { + super(props); + if (props.enableLightBox && !props.navigator) { throw new Error('props.navigator must be specified when enabling lightbox'); } const opts = { - enableLightBox: this.props.enableLightBox, - navigator: this.props.navigator, - imageParam: this.props.imageParam, - onLink: this.props.onLink, - bgImage: this.props.bgImage, - onImageOpen: this.props.onImageOpen, - onImageClose: this.props.onImageClose, + enableLightBox: props.enableLightBox, + navigator: props.navigator, + imageParam: props.imageParam, + onLink: props.onLink, + bgImage: props.bgImage, + onImageOpen: props.onImageOpen, + onImageClose: props.onImageClose, }; - const mergedStyles = merge({}, styles, this.props.styles); + const mergedStyles = StyleSheet.create(merge({}, styles, props.styles)); var rules = require('./rules')(mergedStyles, opts); rules = merge({}, SimpleMarkdown.defaultRules, rules); From 26153951938a4e52f5b7b06c9c5d09ac07c304ae Mon Sep 17 00:00:00 2001 From: Andang Rian Dimas Date: Sat, 5 Oct 2019 03:55:26 +0700 Subject: [PATCH 3/8] update RN 0.61.2 --- index.js | 2 +- styles.js | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index b06cd3c..dc46794 100644 --- a/index.js +++ b/index.js @@ -22,7 +22,7 @@ class Markdown extends Component { onImageClose: props.onImageClose, }; - const mergedStyles = StyleSheet.create(merge({}, styles, props.styles)); + const mergedStyles = merge({}, styles, props.styles); var rules = require('./rules')(mergedStyles, opts); rules = merge({}, SimpleMarkdown.defaultRules, rules); diff --git a/styles.js b/styles.js index 361041a..ddabd20 100644 --- a/styles.js +++ b/styles.js @@ -1,6 +1,7 @@ -import { Dimensions } from 'react-native'; -export default { +import { Dimensions, StyleSheet } from 'react-native'; + +export default StyleSheet.create({ autolink: { color: 'blue', }, @@ -175,5 +176,5 @@ export default { borderColor: '#222222', borderBottomWidth: 1, }, - }; + }); \ No newline at end of file From 1d237cd464829fd61c6767accb5b3b55b5edfafd Mon Sep 17 00:00:00 2001 From: Andang Rian Dimas Date: Sat, 5 Oct 2019 03:56:31 +0700 Subject: [PATCH 4/8] add default styling of outer view to be stretched --- styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.js b/styles.js index ddabd20..aa84bce 100644 --- a/styles.js +++ b/styles.js @@ -30,6 +30,7 @@ export default StyleSheet.create({ overflow: 'hidden', }, view: { + alignSelf: 'stretch', }, codeBlock: { fontFamily: 'Courier', From 3c6e9e71b3baf15f7143b5afb73ca5a9677742c4 Mon Sep 17 00:00:00 2001 From: Andang Rian Dimas Date: Sat, 5 Oct 2019 04:48:03 +0700 Subject: [PATCH 5/8] docs(ReadMe): Update Readme --- README.md | 142 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 88 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index e919210..f72e9e7 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ To install this library, you can easily run this command from your project folde Check this simple app for implementation example [Example app](https://github.com/andangrd/rn-markdown-example) - + ## How to use @@ -25,18 +25,23 @@ Here we are, take a look at this simple implementation: /** * Sample React Native App * https://github.com/facebook/react-native + * + * @format * @flow */ -import React, { Component } from 'react'; -import Markdown from 'react-native-markdown-package'; +import React from 'react'; import { - AppRegistry, StyleSheet, - Text, + ScrollView, View, + Text, Linking } from 'react-native'; +import { + Colors, +} from 'react-native/Libraries/NewAppScreen'; +import Markdown from 'react-native-markdown-package'; const text = ` # This is Heading 1 @@ -81,28 +86,90 @@ Some *really* ~~basic~~ **Markdown**. | 1 | John | 19 | | 2 | Sally | 18 | | 3 | Stream | 20 | -` ; -export default class App extends Component<{}> { - render() { - return ( + +this is an example for adding picture: + +![Screen Shot 2019-10-05 at 3 19 33 AM](https://user-images.githubusercontent.com/26213148/66237659-d11f4280-e71f-11e9-91e3-7a3f08659d89.png) + + +`; + + +const App: () => React$Node = () => { + return ( + Welcome to React Native! Linking.openURL(url)} > { text } - + + this is a test single line md + - ); - } + + ); } +const singleStyle = { + text: { + color: 'blue', + textAlign: "right" + }, + view: { + alignSelf: 'stretch', + } +}; -const styles = { +const msrkdownStyle = { + heading1: { + color: 'red' + }, + heading2: { + color: 'green', + textAlign: "right" + }, + strong: { + color: 'blue' + }, + em: { + color: 'cyan' + }, + text: { + color: 'black', + }, + blockQuoteText: { + color: 'grey' + }, + blockQuoteSection: { + flexDirection: 'row', + }, + blockQuoteSectionBar: { + width: 3, + height: null, + backgroundColor: '#DDDDDD', + marginRight: 15, + }, + codeBlock: { + fontFamily: 'Courier', + fontWeight: '500', + backgroundColor: '#DDDDDD', + }, + tableHeader: { + backgroundColor: 'grey', + }, +}; + +const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', @@ -111,6 +178,9 @@ const styles = { margin: 10, padding:20 }, + scrollView: { + backgroundColor: Colors.lighter, + }, welcome: { fontSize: 20, textAlign: 'center', @@ -119,48 +189,10 @@ const styles = { textAlign: 'center', color: '#333333', marginBottom: 5, - }, - markdown: { - heading1: { - color: 'red' - }, - heading2: { - color: 'green' - }, - strong: { - color: 'blue' - }, - em: { - color: 'cyan' - }, - text: { - color: 'black', - }, - blockQuoteText: { - color: 'grey' - }, - blockQuoteSection: { - flexDirection: 'row', - }, - blockQuoteSectionBar: { - width: 3, - height: null, - backgroundColor: '#DDDDDD', - marginRight: 15, - }, - codeBlock: { - fontFamily: 'Courier', - fontWeight: '500', - backgroundColor: '#DDDDDD', - }, - tableHeader: { - backgroundColor: 'grey', - }, } -}; +}); - -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); +export default App; ``` @@ -210,6 +242,8 @@ I'm very thankful to contributors who help me to make this libary better, and al * New feature, on link handler (1.4.3) * Bug fix, Strike through issue (1.4.4) + + * Default Style for outer View, remove deprecated ComponentWillMount (1.4.5) From accf51ee06920111c1ef736081fac3610defc2ef Mon Sep 17 00:00:00 2001 From: andangrd Date: Sun, 30 Aug 2020 02:17:32 +0700 Subject: [PATCH 6/8] chore(simple-markdown): update dependency, simple markdown to 0.7.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3b22ac4..e934f43 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "lodash": "^4.17.15", "prop-types": "^15.6.0", "react-native-lightbox": "^0.7.0", - "simple-markdown": "^0.6.0" + "simple-markdown": "^0.7.1" }, "repository": { "type": "git", From a5f151e98bdcbd53b18eb4ff3972e4323d231303 Mon Sep 17 00:00:00 2001 From: andangrd Date: Sun, 30 Aug 2020 02:48:22 +0700 Subject: [PATCH 7/8] fix(List): fix styling for list not applied to the first list --- rules.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/rules.js b/rules.js index f078781..789b67f 100644 --- a/rules.js +++ b/rules.js @@ -192,6 +192,8 @@ module.exports = function (styles, opts = {}) { var numberIndex = 1; var items = map(node.items, function (item, i) { var bullet; + state.withinList = false; + if (node.ordered) { bullet = React.createElement(Text, {key: 0, style: styles.listItemNumber}, (numberIndex) + '. '); } From 325372c2e8defe3dfef08bc0e08d9d7b4c2dc845 Mon Sep 17 00:00:00 2001 From: andangrd Date: Sun, 30 Aug 2020 02:59:18 +0700 Subject: [PATCH 8/8] chore(Docs): update readme --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index ea64a67..c751e14 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,35 @@ Default style properties will be applied to the markdown. You could replace it w This prop will accept a function. This is a callback function for any link inside markdown syntax, so you could costumize the handler for onClick event from the link. +`onLinkCallback` should be a function that returns a promise. + + +``` + +const onLinkCallback = (url) => { + console.log('test test test'); + + const isErrorResult = false; + + return new Promise((resolve, reject) => { + isErrorResult ? reject() : resolve(); + }); +}; + +... + + + {text} + + +... + + +``` + + *NOTE :* _Email link (mailto) could be tested on real device only, it won't be able to test on Simulator as discuss in this [StackOverflow](https://stackoverflow.com/questions/44769710/opneurl-react-native-linking-call-mailto)_ @@ -267,6 +296,8 @@ This project was actually forked from [lwansbrough](https://github.com/lwansbrou * Allow user to replace default rules, update default font family for `codeBlock` on android [(v1.6.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.6.0) * Update to use latest simple-markdown [(v1.7.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.7.0) + + * Update to use latest simple-markdown [(v1.8.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.8.0)