From 6a22189b478afb9378ca05dbeb7f725e8b82a694 Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 10:02:53 +0100 Subject: [PATCH 1/7] https://github.com/iamacup/react-native-markdown-display/issues/89 --- README.md | 4 ++-- package.json | 3 --- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 43c40a1..3a8c76b 100644 --- a/README.md +++ b/README.md @@ -449,7 +449,7 @@ const App: () => React$Node = () => { // examine the node properties to see what video we need to render console.log(node); // expected output of this is in readme.md below this code snip - return ( + return ( Return a video component instead of this text component! ); } @@ -1033,7 +1033,7 @@ Something like this with `yourCustomHandlerFunctionOrLogicHere`: import React from 'react'; import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native'; -import Markdown, {getUniqueID} from 'react-native-markdown-display'; +import Markdown from 'react-native-markdown-display'; const copy = `[This is a link!](https://github.com/iamacup/react-native-markdown-display/)`; diff --git a/package.json b/package.json index f152677..f510fad 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,6 @@ "scripts": { "lint": "./node_modules/.bin/eslint --fix --cache ./src" }, - "pre-commit": [ - "lint" - ], "repository": { "type": "git", "url": "git+https://github.com/iamacup/react-native-markdown-display.git" From b48b1257b264b07043bcbedbe62663fa84dcb29b Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 10:03:13 +0100 Subject: [PATCH 2/7] https://github.com/iamacup/react-native-markdown-display/issues/87 --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index 2bd1021..6e810cd 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,7 @@ import removeTextStyleProps from './lib/util/removeTextStyleProps'; import {styles} from './lib/styles'; import {stringToTokens} from './lib/util/stringToTokens'; import FitImage from 'react-native-fit-image'; +import textStyleProps from './lib/data/textStyleProps'; export { getUniqueID, @@ -32,6 +33,7 @@ export { styles, removeTextStyleProps, FitImage, + textStyleProps, }; // we use StyleSheet.flatten here to make sure we have an object, in case someone From d5601553c6f76f1669bef4e87c94bf7c98af8520 Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 10:05:23 +0100 Subject: [PATCH 3/7] return --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index f510fad..f152677 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,9 @@ "scripts": { "lint": "./node_modules/.bin/eslint --fix --cache ./src" }, + "pre-commit": [ + "lint" + ], "repository": { "type": "git", "url": "git+https://github.com/iamacup/react-native-markdown-display.git" From dce1c9c6b55eddab145b0cdfde0af16933d3763d Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 10:36:54 +0100 Subject: [PATCH 4/7] https://github.com/iamacup/react-native-markdown-display/issues/79 --- src/index.js | 5 ++++- src/lib/parser.js | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 6e810cd..962168d 100644 --- a/src/index.js +++ b/src/index.js @@ -187,7 +187,10 @@ const Markdown = React.memo( ); Markdown.propTypes = { - children: PropTypes.node.isRequired, + children: PropTypes.oneOfType([ + PropTypes.node, + PropTypes.array, + ]).isRequired, renderer: PropTypes.oneOfType([ PropTypes.func, PropTypes.instanceOf(AstRenderer), diff --git a/src/lib/parser.js b/src/lib/parser.js index a9ab66d..52b41c7 100644 --- a/src/lib/parser.js +++ b/src/lib/parser.js @@ -11,6 +11,10 @@ import groupTextTokens from './util/groupTextTokens'; * @return {View} */ export default function parser(source, renderer, markdownIt) { + if(Array.isArray(source)) { + return renderer(source); + } + let tokens = stringToTokens(source, markdownIt); tokens = cleanupTokens(tokens); tokens = groupTextTokens(tokens); From 0f574991fdeabb6fefc4f553a792a1d279585ab2 Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 10:37:11 +0100 Subject: [PATCH 5/7] lint --- src/index.js | 5 +---- src/lib/parser.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 962168d..59afec7 100644 --- a/src/index.js +++ b/src/index.js @@ -187,10 +187,7 @@ const Markdown = React.memo( ); Markdown.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.node, - PropTypes.array, - ]).isRequired, + children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]).isRequired, renderer: PropTypes.oneOfType([ PropTypes.func, PropTypes.instanceOf(AstRenderer), diff --git a/src/lib/parser.js b/src/lib/parser.js index 52b41c7..d0507a1 100644 --- a/src/lib/parser.js +++ b/src/lib/parser.js @@ -11,7 +11,7 @@ import groupTextTokens from './util/groupTextTokens'; * @return {View} */ export default function parser(source, renderer, markdownIt) { - if(Array.isArray(source)) { + if (Array.isArray(source)) { return renderer(source); } From c03c2b2b89bfcc9ed07a58b90d4fda48fe1c1d38 Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 19:27:46 +0100 Subject: [PATCH 6/7] readme updates --- README.md | 44 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3a8c76b..1a5db7b 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ The `` object takes the following common props: | Property | Default | Required | Description | --- | --- | --- | --- -| `children` | N/A | `true` | The markdown string to render +| `children` | N/A | `true` | The markdown string to render, or the [pre-processed tree](#pre-processing) | `style` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/styles.js) | `false` | An object to override the styling for the various rules, [see style section below](#style) for more info | `mergeStyle` | `true` | `false` | If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them | `rules` | [source](https://github.com/iamacup/react-native-markdown-display/blob/master/src/lib/renderRules.js) | `false` | An object of rules that specify how to render each markdown item, [see rules section below](#rules) for more info @@ -1120,6 +1120,48 @@ export default App; A full list of things you can turn off is [here](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.js) +### Pre Processing + +It is possible to need to pre-process the data outside of this library ([related discussion here](https://github.com/iamacup/react-native-markdown-display/issues/79)). As a result, you can pass an AST tree directly as the children like this: + +```jsx +import React from 'react'; +import { SafeAreaView, ScrollView, StatusBar, Text } from 'react-native'; + +import Markdown, { MarkdownIt, tokensToAST, stringToTokens } from 'react-native-markdown-display'; + +const markdownItInstance = MarkdownIt({typographer: true}); + +const copy = ` +# Hello this is a title + +This is some text with **BOLD!** +`; + +const ast = tokensToAST(stringToTokens(copy, markdownItInstance)) + +const App: () => React$Node = () => { + return ( + <> + + + + + {ast} + + + + + ); +}; + +export default App; +``` + ### Other Notes From 2d0c71c8994a813d70a20c289174824561ceb1b3 Mon Sep 17 00:00:00 2001 From: Tom Pickard Date: Sat, 4 Jul 2020 19:30:20 +0100 Subject: [PATCH 7/7] version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f152677..12d94b8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-markdown-display", - "version": "6.1.4", + "version": "6.1.5", "description": "Markdown renderer for react-native, with CommonMark spec support + adds syntax extensions & sugar (URL autolinking, typographer), originally created by Mient-jan Stelling as react-native-markdown-renderer", "main": "src/index.js", "types": "src/index.d.ts",