fixing issue mientjan#52

fixed issue mientjan#46

Author: mientjan

example/App.js

@@ -62,7 +62,54 @@ const renderer = new AstRenderer(
 const routes = {
   all: () => (
     <ScrollView>
-      <Markdown children={all} />
+      <Markdown
+        children={all}
+        style={StyleSheet.create({
+          foo: {
+            color: 'red',
+          },
+        })}
+        rules={{
+          foo: (node, children, parent, styles) => (
+            <Text key={node.key} style={styles.foo}>
+              {node.content}
+            </Text>
+          ),
+        }}
+        plugins={[
+          new PluginContainer(
+            (md, name, options) => {
+              const parse = state => {
+                const Token = state.Token;
+
+                for (let i = 0; i < state.tokens.length; i++) {
+                  const block = state.tokens[i];
+                  if (block.type !== 'inline') {
+                    continue;
+                  }
+
+                  for (let j = 0; j < block.children.length; j++) {
+                    const token = block.children[j];
+                    if (token.type !== 'text') {
+                      continue;
+                    }
+
+                    if (token.content === name) {
+                      const newToken = new Token(name, '', token.nesting);
+                      newToken.content = token.content;
+                      block.children = md.utils.arrayReplaceAt(block.children, j, [newToken]);
+                    }
+                  }
+                }
+              };
+
+              md.core.ruler.after('inline', name, parse);
+            },
+            'foo',
+            {}
+          ),
+        ]}
+      />
     </ScrollView>
   ),
   linkedimg: () => (

example/react-native-markdown-renderer/index.d.ts

@@ -3,6 +3,8 @@ import { MarkdownIt, Token } from 'markdown-it';
 import { ComponentType, ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+export function applyStyle(children: any[], styles: any, type: string): any;
+
 export function getUniqueID(): string;
 export function openUrl(url: string): void;
 

example/react-native-markdown-renderer/index.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { parser, stringToTokens } from './lib/parser';
+import applyStyle from './lib/util/applyStyle';
 import getUniqueID from './lib/util/getUniqueID';
 import hasParents from './lib/util/hasParents';
 import openUrl from './lib/util/openUrl';
@@ -21,6 +22,7 @@ import { styles } from './lib/styles';
  *
  */
 export {
+  applyStyle,
   getUniqueID,
   openUrl,
   hasParents,

example/react-native-markdown-renderer/lib/data/InlineTextTypes.js

@@ -0,0 +1,10 @@
+export default [
+	'text',
+	'span',
+	'strong',
+	'code_inline',
+	'link',
+	's',
+	'em',
+	'softbreak',
+];

example/react-native-markdown-renderer/lib/enum/PlatformEnum.js renamed to example/react-native-markdown-renderer/lib/data/PlatformEnum.js

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet } from 'react-native';
-import PlatformEnum from './enum/PlatformEnum';
+import PlatformEnum from './data/PlatformEnum';
 
 /**
  *

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

@@ -1,22 +1,10 @@
-/**
- *
- * @type {[string,string,string,string,string,string,string]}
- */
-const textTypes = [
-  'text',
-  'span',
-  'strong',
-  'link',
-  's',
-  'em',
-  'softbreak',
-];
+import InlineTextTypes from "../data/InlineTextTypes"
 
 /**
  *
  * @param node
  * @return {boolean}
  */
-export default function getIsInlineTextType(type) {
-  return textTypes.indexOf(type) > -1;
+export default function getIsInlineTextType(type, ) {
+  return InlineTextTypes.indexOf(type) > -1;
 }

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

@@ -1,5 +1,10 @@
 const copy = `
- # Syntax Support
+# Syntax Support
+foo
+ 
+# code inline
+
+Hello \`code inline\` code_inline
 
 __Advertisement :)__
 

example/src/copy/all.js

@@ -0,0 +1,10 @@
+export default [
+	'text',
+	'span',
+	'strong',
+	'code_inline',
+	'link',
+	's',
+	'em',
+	'softbreak',
+];

src/lib/data/InlineTextTypes.js

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet } from 'react-native';
-import PlatformEnum from './enum/PlatformEnum';
+import PlatformEnum from './data/PlatformEnum';
 
 /**
  *

src/lib/enum/PlatformEnum.js renamed to src/lib/data/PlatformEnum.js

@@ -1,22 +1,10 @@
-/**
- *
- * @type {[string,string,string,string,string,string,string]}
- */
-const textTypes = [
-  'text',
-  'span',
-  'strong',
-  'link',
-  's',
-  'em',
-  'softbreak',
-];
+import InlineTextTypes from "../data/InlineTextTypes"
 
 /**
  *
  * @param node
  * @return {boolean}
  */
-export default function getIsInlineTextType(type) {
-  return textTypes.indexOf(type) > -1;
+export default function getIsInlineTextType(type, ) {
+  return InlineTextTypes.indexOf(type) > -1;
 }