react-native-marked 1.1.2 → 1.1.4

package/src/lib/Parser.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { marked } from 'marked';
 import Renderer from './Renderer';
 import type { MarkedStyles } from '../theme/types';
@@ -21,35 +22,17 @@ class Parser {
   }
 
   parse(tokens: marked.Token[]) {
-    const elements: React.ReactNode[] = tokens.map((token) => {
+    const elements: ReactNode[] = tokens.map((token) => {
       switch (token.type) {
         case 'space': {
           return null;
         }
         case 'paragraph': {
-          let tempTokens: marked.Token[] = [];
-          const paragraphChildren: React.ReactNode[] = [];
-          token.tokens.forEach((t) => {
-            /* To avoid inlining of image */
-            if (t.type === 'image') {
-              paragraphChildren.push(
-                this.renderer.getTextNode(
-                  this.parseInline(tempTokens),
-                  this.styles.text
-                )
-              );
-              paragraphChildren.push(this.parseInline([t]));
-              tempTokens = [];
-              return;
-            }
-            tempTokens = [...tempTokens, t];
-          });
-
-          if (tempTokens.length > 0) {
-            paragraphChildren.push(
-              this.renderer.getTextNode(this.parseInline(tempTokens), {})
+          const paragraphChildren =
+            this.getNormalizedSiblingNodesForBlockAndInlineTokens(
+              token.tokens,
+              this.styles.text
             );
-          }
 
           return this.renderer.getViewNode(
             paragraphChildren,
@@ -64,7 +47,10 @@ class Parser {
         }
         case 'heading': {
           const styles = this.headingStylesMap[token.depth] ?? this.styles.text;
-          return this.renderer.getTextNode(token.text, styles);
+          return this.renderer.getTextNode(
+            this.parseInline(token.tokens, styles),
+            styles
+          );
         }
         case 'code': {
           return this.renderer.getCodeBlockNode(
@@ -78,19 +64,24 @@ class Parser {
         }
         case 'list': {
           const li = token.items.map((item) => {
-            if (
-              item.tokens.length > 0 &&
-              item.tokens[0]?.type === 'text' &&
-              // @ts-ignore
-              Array.isArray(item.tokens[0]?.tokens)
-            ) {
-              return this.renderer.getTextNode(
-                // @ts-ignore
-                this.parseInline(item.tokens[0]?.tokens),
-                this.styles.li
-              );
-            }
-            return this.renderer.getTextNode(item.text, this.styles.li);
+            const children = item.tokens.map((cItem) => {
+              if (cItem.type === 'text') {
+                /* getViewNode since tokens could contain a block like elements (i.e. img) */
+                const listChildren =
+                  this.getNormalizedSiblingNodesForBlockAndInlineTokens(
+                    // Note: Upstream types aren't available for this specific use-case
+                    // @types/marked (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/marked/index.d.ts)
+                    // @ts-ignore
+                    cItem.tokens,
+                    this.styles.li
+                  );
+                return this.renderer.getViewNode(listChildren, this.styles.li);
+              }
+
+              /* Parse the nested token */
+              return this.parse([cItem]);
+            });
+            return this.renderer.getViewNode(children, this.styles.li);
           });
           return this.renderer.getListNode(
             token.ordered,
@@ -99,51 +90,63 @@ class Parser {
             this.styles.li
           );
         }
-        case 'html': {
-          return this.renderer.getTextNode(token.text.trim(), this.styles.text);
-        }
         default:
-          console.warn(`Token with '${token.type}' type was not found.`);
-          return null;
+          return this.parseInline([token]);
       }
     });
-    return elements;
+    return elements.filter((element) => element !== null);
   }
 
   parseInline(tokens: marked.Token[], styles?: CustomStyleProp) {
-    const elements: React.ReactNode[] = tokens.map((token) => {
+    const elements: ReactNode[] = tokens.map((token) => {
       if (!token) return null;
 
       switch (token.type) {
         case 'escape': {
           return this.renderer.getTextNode(token.text, {
-            ...styles,
             ...this.styles.text,
+            ...styles,
           });
         }
         case 'link': {
-          return this.renderer.getLinkNode(token.text, token.href, {
+          const linkStyle = {
             ...styles,
-            ...this.styles.link,
-          });
+            ...this.styles.link, // To override color property
+          };
+          return this.renderer.getLinkNode(
+            this.parseInline(token.tokens, linkStyle),
+            token.href,
+            linkStyle
+          );
         }
         case 'image': {
           return this.renderer.getImageNode(token.href);
         }
         case 'strong': {
+          const boldStyle = {
+            ...this.styles.strong,
+            ...styles,
+          };
           return this.renderer.getTextNode(
-            this.parseInline(token.tokens, this.styles.strong),
-            { ...styles, ...this.styles.strong }
+            this.parseInline(token.tokens, boldStyle),
+            boldStyle
           );
         }
         case 'em': {
+          const italicStyle = {
+            ...this.styles.em,
+            ...styles,
+          };
           return this.renderer.getTextNode(
-            this.parseInline(token.tokens, this.styles.em),
-            { ...styles, ...this.styles.em }
+            this.parseInline(token.tokens, italicStyle),
+            italicStyle
           );
         }
         case 'codespan': {
-          return this.renderer.getTextNode(token.text, this.styles.codespan);
+          return this.renderer.getTextNode(token.text, {
+            ...this.styles.codespan,
+            ...styles,
+          });
         }
         case 'br': {
           return this.renderer.getTextNode('\n', {});
@@ -151,10 +154,15 @@ class Parser {
         case 'del': {
           return null;
         }
-        case 'text': {
+        case 'text':
+        case 'html': {
+          if (token.raw.trim().length < 1) {
+            return null;
+          }
+
           return this.renderer.getTextNode(token.raw, {
-            ...styles,
             ...this.styles.text,
+            ...styles,
           });
         }
         default: {
@@ -163,8 +171,42 @@ class Parser {
         }
       }
     });
-    return elements;
+    return elements.filter((element) => element !== null);
   }
+
+  private getNormalizedSiblingNodesForBlockAndInlineTokens = (
+    tokens: marked.Token[],
+    textStyle: TextStyleProp
+  ): ReactNode[] => {
+    let tempTokens: marked.Token[] = [];
+    const siblingNodes: ReactNode[] = [];
+    tokens.forEach((t) => {
+      /**
+       * To avoid inlining images
+       * Note: to be extend for other token types
+       */
+      if (t.type === 'image') {
+        const parsed = this.parseInline(tempTokens);
+        if (parsed.length > 0) {
+          siblingNodes.push(
+            this.renderer.getTextNode(this.parseInline(tempTokens), textStyle)
+          );
+        }
+        siblingNodes.push(this.parseInline([t]));
+        tempTokens = [];
+        return;
+      }
+      tempTokens = [...tempTokens, t];
+    });
+
+    /* Remaining temp tokens if any */
+    if (tempTokens.length > 0) {
+      siblingNodes.push(
+        this.renderer.getTextNode(this.parseInline(tempTokens), {})
+      );
+    }
+    return siblingNodes;
+  };
 }
 
 export default Parser;

package/src/lib/Renderer.tsx

@@ -1,19 +1,15 @@
-import * as React from 'react';
-import { Linking, ScrollView, View, Text } from 'react-native';
+import React, { ReactNode } from 'react';
+import { ScrollView, View, Text } from 'react-native';
 import MarkedList from '@jsamr/react-native-li';
 import Disc from '@jsamr/counter-style/presets/disc';
 import Decimal from '@jsamr/counter-style/presets/decimal';
 import MDImage from './../components/MDImage';
 import { generateRandomString } from '../utils/string';
 import type { TextStyleProp, ViewStyleProp } from './types';
+import { onLinkPress } from '../utils/handlers';
 
 class Renderer {
-  private onLinkPress = (href: string) => () => Linking.openURL(href);
-
-  getTextNode = (
-    children: string | React.ReactNode[],
-    styles: TextStyleProp
-  ) => {
+  getTextNode = (children: string | ReactNode[], styles: TextStyleProp) => {
     return (
       <Text key={generateRandomString()} style={styles}>
         {children}
@@ -21,19 +17,23 @@ class Renderer {
     );
   };
 
-  getLinkNode = (text: string, href: string, styles: TextStyleProp) => {
+  getLinkNode = (
+    children: string | ReactNode[],
+    href: string,
+    styles: TextStyleProp
+  ) => {
     return (
       <Text
         key={generateRandomString()}
-        onPress={this.onLinkPress(href)}
+        onPress={onLinkPress(href)}
         style={styles}
       >
-        {text}
+        {children}
       </Text>
     );
   };
 
-  getViewNode(children: React.ReactNode[] | null, styles: ViewStyleProp) {
+  getViewNode(children: ReactNode[] | null, styles: ViewStyleProp) {
     return (
       <View key={generateRandomString()} style={styles}>
         {children}
@@ -47,13 +47,17 @@ class Renderer {
     textStyle: TextStyleProp
   ) {
     return (
-      <ScrollView contentContainerStyle={containerStyle} horizontal>
+      <ScrollView
+        key={generateRandomString()}
+        contentContainerStyle={containerStyle}
+        horizontal
+      >
         <Text style={textStyle}>{text}</Text>
       </ScrollView>
     );
   }
 
-  getBlockquoteNode(children: React.ReactNode[], styles: ViewStyleProp) {
+  getBlockquoteNode(children: ReactNode[], styles: ViewStyleProp) {
     return (
       <View key={generateRandomString()} style={styles}>
         {children}
@@ -67,7 +71,7 @@ class Renderer {
 
   getListNode(
     ordered: boolean,
-    li: React.ReactNode[],
+    li: ReactNode[],
     listStyle: ViewStyleProp,
     textStyle: TextStyleProp
   ) {
@@ -76,6 +80,7 @@ class Renderer {
         counterRenderer={ordered ? Decimal : Disc}
         markerTextStyle={textStyle}
         markerBoxStyle={listStyle}
+        key={generateRandomString()}
       >
         {li.map((node) => node)}
       </MarkedList>

package/src/theme/styles.ts

@@ -34,7 +34,9 @@ const getStyles = (
       ...fontStyle.regular,
       fontWeight: 'bold',
     },
-    text: { ...fontStyle.regular },
+    text: {
+      ...fontStyle.regular,
+    },
     paragraph: {
       ...fontStyle.regular,
       paddingVertical: 8,

package/src/utils/handlers.ts

@@ -0,0 +1,9 @@
+import { Linking } from 'react-native';
+
+export const onLinkPress = (url: string) => () => {
+  try {
+    Linking.openURL(url);
+  } catch (e) {
+    console.warn("URL can't be opened", e);
+  }
+};