initial rework

Author: iamacup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-markdown-display",
-  "version": "5.1.1",
+  "version": "6.0.0",
   "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

@@ -139,7 +139,7 @@ const Markdown = React.memo(
     rules = null,
     plugins = [],
     style = null,
-    mergeStyle = false,
+    mergeStyle = true,
     markdownit = MarkdownIt({
       typographer: true,
     }),

src/lib/AstRenderer.js

@@ -75,18 +75,37 @@ export default class AstRenderer {
       return this.renderNode(value, parents);
     });
 
-    // text node type is a special case because it is always the 'last' element in a chain
+    // render any special types of nodes that have different renderRule function signatures
 
-    if (
-      node.type === 'text' ||
-      node.type === 'list_item' ||
-      node.type === 'code_inline' ||
-      node.type === 'code_block' ||
-      node.type === 'fence'
-    ) {
-      // we build up a style object for text types, this effectively grabs the styles from parents and
-      // applies them in order of priority parent (most) to child (least) priority
-      // so that if we overwride the text style, it does not overwrite a header1 style, for instance.
+    if (node.type === 'link' || node.type === 'blocklink') {
+      return renderFunction(
+        node,
+        children,
+        parentNodes,
+        this._style,
+        this._onLinkPress,
+      );
+    }
+
+    if (node.type === 'image') {
+      return renderFunction(
+        node,
+        children,
+        parentNodes,
+        this._style,
+        this._allowedImageHandlers,
+        this._defaultImageHandler,
+      );
+    }
+
+    // We are at the bottom of some tree - grab all the parent styles
+    // this effectively grabs the styles from parents and
+    // applies them in order of priority parent (least) to child (most)
+    // to allow styling global, then lower down things individually
+
+    // we have to handle list_item seperately here because they have some child
+    // pseudo classes that need the additional style props from parents passed down to them
+    if (children.length === 0 || node.type === 'list_item') {
       const styleObj = {};
 
       for (let a = parentNodes.length - 1; a > -1; a--) {
@@ -107,6 +126,22 @@ export default class AstRenderer {
             ...refStyle,
             ...StyleSheet.flatten(this._style[parentNodes[a].type]),
           };
+
+          // workaround for list_items and their content cascading down the tree
+          if (parentNodes[a].type === 'list_item') {
+            let contentStyle = {};
+
+            if (parentNodes[a + 1].type === 'bullet_list') {
+              contentStyle = this._style.bullet_list_content;
+            } else if (parentNodes[a + 1].type === 'ordered_list') {
+              contentStyle = this._style.ordered_list_content;
+            }
+
+            refStyle = {
+              ...refStyle,
+              ...StyleSheet.flatten(contentStyle),
+            };
+          }
         }
 
         // then work out if any of them are text styles that should be used in the end.
@@ -122,29 +157,6 @@ export default class AstRenderer {
       return renderFunction(node, children, parentNodes, this._style, styleObj);
     }
 
-    // render any special types of nodes that have different renderRule function signatures
-
-    if (node.type === 'link' || node.type === 'blocklink') {
-      return renderFunction(
-        node,
-        children,
-        parentNodes,
-        this._style,
-        this._onLinkPress,
-      );
-    }
-
-    if (node.type === 'image') {
-      return renderFunction(
-        node,
-        children,
-        parentNodes,
-        this._style,
-        this._allowedImageHandlers,
-        this._defaultImageHandler,
-      );
-    }
-
     // cull top level children
 
     if (
@@ -167,7 +179,7 @@ export default class AstRenderer {
    * @return {*}
    */
   render = nodes => {
-    const root = {type: 'root', key: getUniqueID(), children: nodes};
+    const root = {type: 'body', key: getUniqueID(), children: nodes};
     return this.renderNode(root, [], true);
   };
 }