From cfc0d8910d0aaaf93d5ac2791a62dee18b4d22c4 Mon Sep 17 00:00:00 2001 From: Acelya Vuluvan Date: Tue, 7 Jun 2022 13:28:27 +0300 Subject: [PATCH 1/5] Option to define an image prefix is added --- index.js | 2 ++ rules.js | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 3d9a15b..360d01a 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,7 @@ class Markdown extends Component { enableLightBox: props.enableLightBox, navigator: props.navigator, imageParam: props.imageParam, + imagePrefix: props.imagePrefix, onLink: props.onLink, bgImage: props.bgImage, onImageOpen: props.onImageOpen, @@ -58,6 +59,7 @@ class Markdown extends Component { Markdown.propTypes = { enableLightBox: PropTypes.bool, + imagePrefix: PropTypes.string, onLink: PropTypes.func, onImageOpen: PropTypes.func, onImageClose: PropTypes.func, diff --git a/rules.js b/rules.js index 789b67f..3d922c0 100644 --- a/rules.js +++ b/rules.js @@ -140,7 +140,8 @@ module.exports = function (styles, opts = {}) { image: { react: function (node, output, {...state}) { var imageParam = opts.imageParam ? opts.imageParam : ''; - var target = node.target + imageParam; + var prefix = opts.imagePrefix ? opts.imagePrefix : ''; + var target = prefix + node.target + imageParam; var image = React.createElement(Image, { key: state.key, // resizeMode: 'contain', From 832f2f45cc50e0e21cfb721201f915092e795156 Mon Sep 17 00:00:00 2001 From: Acelya Vuluvan Date: Sat, 11 Jun 2022 00:28:06 +0300 Subject: [PATCH 2/5] Readme is updated --- README.md | 96 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 57 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index d64ce75..57c5d5b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ [![npm downloads](https://img.shields.io/npm/dm/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) [![npm_downloads](https://img.shields.io/npm/dt/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) # React Native Markdown Package + React Native Markdown Package is a library for implementing markdown syntax in React Native. ## Getting started To install this library, you can easily run this command from your project folder. -    `npm i react-native-markdown-package --save` - +`npm i react-native-markdown-package --save` Check this simple app for implementation example [Example app](https://github.com/andangrd/rn-markdown-example) @@ -19,7 +19,7 @@ Check this simple app for implementation example [Example app](https://github.co What you need to do is `import` the `react-native-markdown-package` module and then use the `` tag. -How to use? +How to use? Here we are, take a look at this simple implementation: @@ -78,12 +78,12 @@ Below is some example to print blockquote > Test block Quote > Another block Quote -this is _italic_ +this is _italic_ this is **strong** Some *really* ~~basic~~ **Markdown**. -| # | Name | Age +| # | Name | Age |---|--------|-----| | 1 | John | 19 | | 2 | Sally | 18 | @@ -107,13 +107,13 @@ export default class App extends Component<{}> { Welcome to React Native! - Linking.openURL(url)} > - { text } + { text } - this is a test single line md @@ -220,7 +220,6 @@ This prop will accept a function. This is a callback function for any link insid `onLinkCallback` should be a function that returns a promise. - ``` const onLinkCallback = (url) => { @@ -246,8 +245,25 @@ const onLinkCallback = (url) => { ``` +#### `imagePrefix` + +This prop will accept string, It can be used to assign a prefix to image filenames + +``` + +... + + +{text} + + +... -*NOTE :* +``` + +_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)_ ## Thanks To @@ -260,45 +276,47 @@ thanks to all contributors who help me to make this libary better: [![img](https://avatars0.githubusercontent.com/u/8979249?s=60&v=4)](https://github.com/ntcong91) This project was actually forked from [lwansbrough](https://github.com/lwansbrough) , with some enhancements below : - 1. Styling method. - + +1. Styling method. + Now you can easily add styling on each syntax, e.g. add different color either in `strong`, `header`, or another md syntax. All default styles in this package is also already moved to new file `styles.js`. - 2. Refactoring some codes to adopt ES6 style. - + +2. Refactoring some codes to adopt ES6 style. + Refactor index.js using ES6. :) - 3. Support `Sublist`. - - In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... - 4. Latest release: - * add Proptypes Support, (1.0.1) +3. Support `Sublist`. + + In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... + +4. Latest release: + + - add Proptypes Support, (1.0.1) + + - Fix deprecated View.proptypes and update Readme (1.0.3) + + - Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + + - Fix performance issue, import only necessarry function from lodash (1.1.1) + + - Finalize Blockquote feature (1.2.0) - * Fix deprecated View.proptypes and update Readme (1.0.3) - - * Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + - Update Docs (1.2.1) - * Fix performance issue, import only necessarry function from lodash (1.1.1) + - Allow user to include plain text from variable using back tick (1.3.3) - * Finalize Blockquote feature (1.2.0) + - New feature, codeblock (1.4.0) - * Update Docs (1.2.1) + - New feature, on link handler (1.4.3) - * Allow user to include plain text from variable using back tick (1.3.3) + - Bug fix, Strike through issue (1.4.4) - * New feature, codeblock (1.4.0) - - * 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.5.0) - * Default Style for outer View, remove deprecated ComponentWillMount (1.5.0) - - * 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) + - 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.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) - - + - Update to use latest simple-markdown [(v1.8.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.8.0) Happy Coding... ;) From 28203dfa9ef5d75fd0cf0f5d1c0d516b956e9ade Mon Sep 17 00:00:00 2001 From: Acelya Vuluvan Date: Tue, 7 Jun 2022 13:28:27 +0300 Subject: [PATCH 3/5] Option to define an image prefix is added Readme is updated --- README.md | 96 +++++++++++++++++++++++++++++++++---------------------- index.js | 2 ++ rules.js | 3 +- 3 files changed, 61 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index d64ce75..57c5d5b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ [![npm downloads](https://img.shields.io/npm/dm/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) [![npm_downloads](https://img.shields.io/npm/dt/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) # React Native Markdown Package + React Native Markdown Package is a library for implementing markdown syntax in React Native. ## Getting started To install this library, you can easily run this command from your project folder. -    `npm i react-native-markdown-package --save` - +`npm i react-native-markdown-package --save` Check this simple app for implementation example [Example app](https://github.com/andangrd/rn-markdown-example) @@ -19,7 +19,7 @@ Check this simple app for implementation example [Example app](https://github.co What you need to do is `import` the `react-native-markdown-package` module and then use the `` tag. -How to use? +How to use? Here we are, take a look at this simple implementation: @@ -78,12 +78,12 @@ Below is some example to print blockquote > Test block Quote > Another block Quote -this is _italic_ +this is _italic_ this is **strong** Some *really* ~~basic~~ **Markdown**. -| # | Name | Age +| # | Name | Age |---|--------|-----| | 1 | John | 19 | | 2 | Sally | 18 | @@ -107,13 +107,13 @@ export default class App extends Component<{}> { Welcome to React Native! - Linking.openURL(url)} > - { text } + { text } - this is a test single line md @@ -220,7 +220,6 @@ This prop will accept a function. This is a callback function for any link insid `onLinkCallback` should be a function that returns a promise. - ``` const onLinkCallback = (url) => { @@ -246,8 +245,25 @@ const onLinkCallback = (url) => { ``` +#### `imagePrefix` + +This prop will accept string, It can be used to assign a prefix to image filenames + +``` + +... + + +{text} + + +... -*NOTE :* +``` + +_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)_ ## Thanks To @@ -260,45 +276,47 @@ thanks to all contributors who help me to make this libary better: [![img](https://avatars0.githubusercontent.com/u/8979249?s=60&v=4)](https://github.com/ntcong91) This project was actually forked from [lwansbrough](https://github.com/lwansbrough) , with some enhancements below : - 1. Styling method. - + +1. Styling method. + Now you can easily add styling on each syntax, e.g. add different color either in `strong`, `header`, or another md syntax. All default styles in this package is also already moved to new file `styles.js`. - 2. Refactoring some codes to adopt ES6 style. - + +2. Refactoring some codes to adopt ES6 style. + Refactor index.js using ES6. :) - 3. Support `Sublist`. - - In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... - 4. Latest release: - * add Proptypes Support, (1.0.1) +3. Support `Sublist`. + + In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... + +4. Latest release: + + - add Proptypes Support, (1.0.1) + + - Fix deprecated View.proptypes and update Readme (1.0.3) + + - Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + + - Fix performance issue, import only necessarry function from lodash (1.1.1) + + - Finalize Blockquote feature (1.2.0) - * Fix deprecated View.proptypes and update Readme (1.0.3) - - * Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + - Update Docs (1.2.1) - * Fix performance issue, import only necessarry function from lodash (1.1.1) + - Allow user to include plain text from variable using back tick (1.3.3) - * Finalize Blockquote feature (1.2.0) + - New feature, codeblock (1.4.0) - * Update Docs (1.2.1) + - New feature, on link handler (1.4.3) - * Allow user to include plain text from variable using back tick (1.3.3) + - Bug fix, Strike through issue (1.4.4) - * New feature, codeblock (1.4.0) - - * 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.5.0) - * Default Style for outer View, remove deprecated ComponentWillMount (1.5.0) - - * 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) + - 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.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) - - + - Update to use latest simple-markdown [(v1.8.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.8.0) Happy Coding... ;) diff --git a/index.js b/index.js index 3d9a15b..360d01a 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,7 @@ class Markdown extends Component { enableLightBox: props.enableLightBox, navigator: props.navigator, imageParam: props.imageParam, + imagePrefix: props.imagePrefix, onLink: props.onLink, bgImage: props.bgImage, onImageOpen: props.onImageOpen, @@ -58,6 +59,7 @@ class Markdown extends Component { Markdown.propTypes = { enableLightBox: PropTypes.bool, + imagePrefix: PropTypes.string, onLink: PropTypes.func, onImageOpen: PropTypes.func, onImageClose: PropTypes.func, diff --git a/rules.js b/rules.js index 789b67f..3d922c0 100644 --- a/rules.js +++ b/rules.js @@ -140,7 +140,8 @@ module.exports = function (styles, opts = {}) { image: { react: function (node, output, {...state}) { var imageParam = opts.imageParam ? opts.imageParam : ''; - var target = node.target + imageParam; + var prefix = opts.imagePrefix ? opts.imagePrefix : ''; + var target = prefix + node.target + imageParam; var image = React.createElement(Image, { key: state.key, // resizeMode: 'contain', From 0979aa63e8727dad1fe38f8e839558130197fce5 Mon Sep 17 00:00:00 2001 From: Acelya Vuluvan Date: Tue, 7 Jun 2022 13:28:27 +0300 Subject: [PATCH 4/5] Option to define an image prefix is added Readme is updated Option to define an image prefix is added Readme is updated Option to define an image prefix is added Readme is updated Reverted changes due to format on readme Reverted changes due to format on readme --- README.md | 91 ++++++++++++++++++++++++++++++++----------------------- index.js | 2 ++ rules.js | 3 +- 3 files changed, 57 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index d64ce75..dc58a8e 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ [![npm downloads](https://img.shields.io/npm/dm/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) [![npm_downloads](https://img.shields.io/npm/dt/react-native-markdown-package)](https://www.npmjs.com/package/react-native-markdown-package) # React Native Markdown Package + React Native Markdown Package is a library for implementing markdown syntax in React Native. ## Getting started To install this library, you can easily run this command from your project folder. -    `npm i react-native-markdown-package --save` - +`npm i react-native-markdown-package --save` Check this simple app for implementation example [Example app](https://github.com/andangrd/rn-markdown-example) @@ -19,7 +19,7 @@ Check this simple app for implementation example [Example app](https://github.co What you need to do is `import` the `react-native-markdown-package` module and then use the `` tag. -How to use? +How to use? Here we are, take a look at this simple implementation: @@ -78,12 +78,12 @@ Below is some example to print blockquote > Test block Quote > Another block Quote -this is _italic_ +this is _italic_ this is **strong** Some *really* ~~basic~~ **Markdown**. -| # | Name | Age +| # | Name | Age |---|--------|-----| | 1 | John | 19 | | 2 | Sally | 18 | @@ -107,13 +107,13 @@ export default class App extends Component<{}> { Welcome to React Native! - Linking.openURL(url)} > - { text } + { text } - this is a test single line md @@ -220,7 +220,6 @@ This prop will accept a function. This is a callback function for any link insid `onLinkCallback` should be a function that returns a promise. - ``` const onLinkCallback = (url) => { @@ -246,6 +245,20 @@ const onLinkCallback = (url) => { ``` +#### `imagePrefix` + +This prop will accept string, It can be used to assign a prefix to image filenames + +``` +... + +{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)_ @@ -260,45 +273,47 @@ thanks to all contributors who help me to make this libary better: [![img](https://avatars0.githubusercontent.com/u/8979249?s=60&v=4)](https://github.com/ntcong91) This project was actually forked from [lwansbrough](https://github.com/lwansbrough) , with some enhancements below : - 1. Styling method. - + +1. Styling method. + Now you can easily add styling on each syntax, e.g. add different color either in `strong`, `header`, or another md syntax. All default styles in this package is also already moved to new file `styles.js`. - 2. Refactoring some codes to adopt ES6 style. - + +2. Refactoring some codes to adopt ES6 style. + Refactor index.js using ES6. :) - 3. Support `Sublist`. - - In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... - 4. Latest release: - * add Proptypes Support, (1.0.1) +3. Support `Sublist`. + + In the previous library, you couldn't add sublist. It was not supported. But now, this feature already added here. Please follow the instruction above... + +4. Latest release: + + - add Proptypes Support, (1.0.1) + + - Fix deprecated View.proptypes and update Readme (1.0.3) + + - Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + + - Fix performance issue, import only necessarry function from lodash (1.1.1) + + - Finalize Blockquote feature (1.2.0) - * Fix deprecated View.proptypes and update Readme (1.0.3) - - * Upgrade dependency, lodash, avoid vulnerabilities (1.1.0) + - Update Docs (1.2.1) - * Fix performance issue, import only necessarry function from lodash (1.1.1) + - Allow user to include plain text from variable using back tick (1.3.3) - * Finalize Blockquote feature (1.2.0) + - New feature, codeblock (1.4.0) - * Update Docs (1.2.1) + - New feature, on link handler (1.4.3) - * Allow user to include plain text from variable using back tick (1.3.3) + - Bug fix, Strike through issue (1.4.4) - * New feature, codeblock (1.4.0) - - * 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.5.0) - * Default Style for outer View, remove deprecated ComponentWillMount (1.5.0) - - * 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) + - 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.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) - - + - Update to use latest simple-markdown [(v1.8.0)](https://github.com/andangrd/react-native-markdown-package/releases/tag/v1.8.0) Happy Coding... ;) diff --git a/index.js b/index.js index 3d9a15b..360d01a 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,7 @@ class Markdown extends Component { enableLightBox: props.enableLightBox, navigator: props.navigator, imageParam: props.imageParam, + imagePrefix: props.imagePrefix, onLink: props.onLink, bgImage: props.bgImage, onImageOpen: props.onImageOpen, @@ -58,6 +59,7 @@ class Markdown extends Component { Markdown.propTypes = { enableLightBox: PropTypes.bool, + imagePrefix: PropTypes.string, onLink: PropTypes.func, onImageOpen: PropTypes.func, onImageClose: PropTypes.func, diff --git a/rules.js b/rules.js index 789b67f..3d922c0 100644 --- a/rules.js +++ b/rules.js @@ -140,7 +140,8 @@ module.exports = function (styles, opts = {}) { image: { react: function (node, output, {...state}) { var imageParam = opts.imageParam ? opts.imageParam : ''; - var target = node.target + imageParam; + var prefix = opts.imagePrefix ? opts.imagePrefix : ''; + var target = prefix + node.target + imageParam; var image = React.createElement(Image, { key: state.key, // resizeMode: 'contain', From 7048ff0f4646b562cb5aae2eb655c1f0992ec9fe Mon Sep 17 00:00:00 2001 From: Acelya Vuluvan Date: Wed, 15 Jun 2022 15:29:23 +0300 Subject: [PATCH 5/5] Reverted changes due to format on readme --- README.md | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/README.md b/README.md index 6bd9b73..04e6971 100644 --- a/README.md +++ b/README.md @@ -249,27 +249,17 @@ const onLinkCallback = (url) => { This prop will accept string, It can be used to assign a prefix to image filenames -``` -<<<<<<< HEAD -... -======= +``` ... ->>>>>>> 1288f24b5bfbaedffad6aa12b3b4c9b8e7ff1aa9 {text} -<<<<<<< HEAD -... - -``` -======= ... ->>>>>>> 1288f24b5bfbaedffad6aa12b3b4c9b8e7ff1aa9 ```