Merge pull request #90 from iamacup/6.x

6.x

README.md

@@ -61,7 +61,7 @@ The `<Markdown>` 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 (<Text key={getUniqueID()} style={styles.video}>
+                    return (<Text key={node.key} style={styles.video}>
                       Return a video component instead of this text component!
                     </Text>);
                   }
@@ -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 (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={{height: '100%'}}
+        >
+            <Markdown
+            >
+              {ast}
+            </Markdown>
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+};
+
+export default App;
+```
+
 
 ### Other Notes
 

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",

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),

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);