fixed issue with images not linking. #39

Author: mientjan

example/react-native-markdown-renderer/lib/AstRenderer.js

@@ -2,8 +2,8 @@ import React, { Component, PropTypes } from "react";
 import { Text, View } from "react-native";
 import getUniqueID from "./util/getUniqueID";
 
-export function rootRenderRule(children) {
-  return <View key={getUniqueID()}>{children}</View>;
+export function rootRenderRule(children, styles) {
+  return <View key={getUniqueID()} styles={styles.root}>{children}</View>;
 }
 
 /**
@@ -66,6 +66,6 @@ export default class AstRenderer {
    */
   render = nodes => {
     const children = nodes.map(value => this.renderNode(value, []));
-    return rootRenderRule(children);
+    return rootRenderRule(children, this._style);
   };
 }

example/react-native-markdown-renderer/lib/parser.js

@@ -13,8 +13,35 @@ import groupTextTokens from './util/groupTextTokens';
  * @return {View}
  */
 export function parser(source, renderer, markdownIt) {
-
   let tokens = stringToTokens(source, markdownIt);
+
+  tokens = tokens.reduce((acc, curr) => {
+    if (curr.children && curr.children.length > 0) {
+      console.log(curr);
+      // acc.push({
+      //   ...curr,
+      //   children: null,
+      //   nesting: 1,
+      // });
+
+      while (curr.children.length) {
+        acc.push(curr.children.shift());
+      }
+
+      // acc.push({
+      //   ...curr,
+      //   children: null,
+      //   nesting: -1,
+      // });
+    } else {
+      acc.push(curr);
+    }
+
+    return acc;
+  }, []);
+
+  console.log(tokens);
+
   tokens = cleanupTokens(tokens);
   tokens = groupTextTokens(tokens);
 

example/react-native-markdown-renderer/lib/renderRules.js

@@ -29,8 +29,6 @@ const renderRules = {
   },
 
   text: (node, children, parent, styles) => {
-    console.log('text', node.content);
-    console.log('parent', parent);
     return <Text key={node.key}>{node.content}</Text>;
   },
   span: (node, children, parent, styles) => {

example/react-native-markdown-renderer/lib/styles.js

@@ -5,6 +5,7 @@ import PlatformEnum from './data/PlatformEnum';
  *
  */
 export const styles = StyleSheet.create({
+  root: {},
   view: {},
   codeBlock: {
     borderWidth: 1,

example/react-native-markdown-renderer/lib/util/cleanupTokens.js

@@ -4,7 +4,13 @@ import getIsTextType from './getIsTextType';
 
 export function cleanupTokens(tokens) {
   tokens = removeInlineTokens(tokens);
-  tokens.forEach(token => (token.type = getTokenTypeByToken(token)));
+  tokens.forEach(token => {
+    token.type = getTokenTypeByToken(token);
+
+    if (token.type === 'image') {
+      token.block = true;
+    }
+  });
 
   /**
    * changing a link token to a blocklink to fix issue where link tokens with
@@ -17,7 +23,9 @@ export function cleanupTokens(tokens) {
     } else if (stack.length > 0 && token.type === 'link' && token.nesting === -1) {
       if (stack.some(stackToken => stackToken.block)) {
         stack[0].type = 'blocklink';
+        stack[0].block = true;
         token.type = 'blocklink';
+        token.block = true;
       }
 
       stack.push(token);

example/src/copy/linkedimg.js

@@ -1,5 +1,13 @@
 
 const copy = `
+
+[![Minion](https://octodex.github.com/images/minion.png)](https://google.com)
+[![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.png)](https://google.com)
+
+## Links
+
+`;
+const copy2 = `
 **tes
 t**
 
@@ -30,5 +38,4 @@ With a reference later in the document defining the URL location:
 
 [id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
 `;
-
 export default copy;

src/lib/parser.js

@@ -13,8 +13,35 @@ import groupTextTokens from './util/groupTextTokens';
  * @return {View}
  */
 export function parser(source, renderer, markdownIt) {
-
   let tokens = stringToTokens(source, markdownIt);
+
+  tokens = tokens.reduce((acc, curr) => {
+    if (curr.children && curr.children.length > 0) {
+      console.log(curr);
+      // acc.push({
+      //   ...curr,
+      //   children: null,
+      //   nesting: 1,
+      // });
+
+      while (curr.children.length) {
+        acc.push(curr.children.shift());
+      }
+
+      // acc.push({
+      //   ...curr,
+      //   children: null,
+      //   nesting: -1,
+      // });
+    } else {
+      acc.push(curr);
+    }
+
+    return acc;
+  }, []);
+
+  console.log(tokens);
+
   tokens = cleanupTokens(tokens);
   tokens = groupTextTokens(tokens);
 

src/lib/renderRules.js

@@ -29,8 +29,6 @@ const renderRules = {
   },
 
   text: (node, children, parent, styles) => {
-    console.log('text', node.content);
-    console.log('parent', parent);
     return <Text key={node.key}>{node.content}</Text>;
   },
   span: (node, children, parent, styles) => {

src/lib/util/cleanupTokens.js

@@ -4,7 +4,13 @@ import getIsTextType from './getIsTextType';
 
 export function cleanupTokens(tokens) {
   tokens = removeInlineTokens(tokens);
-  tokens.forEach(token => (token.type = getTokenTypeByToken(token)));
+  tokens.forEach(token => {
+    token.type = getTokenTypeByToken(token);
+
+    if (token.type === 'image') {
+      token.block = true;
+    }
+  });
 
   /**
    * changing a link token to a blocklink to fix issue where link tokens with
@@ -17,7 +23,9 @@ export function cleanupTokens(tokens) {
     } else if (stack.length > 0 && token.type === 'link' && token.nesting === -1) {
       if (stack.some(stackToken => stackToken.block)) {
         stack[0].type = 'blocklink';
+        stack[0].block = true;
         token.type = 'blocklink';
+        token.block = true;
       }
 
       stack.push(token);