diff --git a/README.md b/README.md index 43c40a1e..1a5db7b0 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 @@ -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/)`; @@ -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 diff --git a/package.json b/package.json index f1526775..12d94b80 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", diff --git a/src/index.js b/src/index.js index 2bd10212..59afec7c 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 @@ -185,7 +187,7 @@ 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 a9ab66d0..d0507a1f 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);