react-native-marked 1.0.0-alpha.3 → 1.0.2

package/src/lib/Parser.tsx

@@ -0,0 +1,177 @@
+import type { marked } from 'marked';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import Renderer from './Renderer';
+import type { MarkedStyles } from '../theme/types';
+
+interface ParserOptions {
+  styles?: MarkedStyles;
+}
+
+class Parser {
+  private renderer;
+  private styles: MarkedStyles;
+  private headingStylesMap: Record<number, TextStyle | undefined>;
+  constructor(options: ParserOptions) {
+    this.styles = { ...options.styles };
+    this.renderer = new Renderer();
+    this.headingStylesMap = {
+      1: this.styles.h1,
+      2: this.styles.h2,
+      3: this.styles.h3,
+      4: this.styles.h4,
+      5: this.styles.h5,
+      6: this.styles.h6,
+    };
+  }
+
+  parse(tokens: marked.Token[]) {
+    const elements: React.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) => {
+            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), {})
+            );
+          }
+
+          return this.renderer.getViewNode(
+            paragraphChildren,
+            this.styles.paragraph
+          );
+        }
+        case 'blockquote': {
+          return this.renderer.getBlockquoteNode(
+            this.parse(token.tokens),
+            this.styles.blockquote
+          );
+        }
+        case 'heading': {
+          const styles = this.headingStylesMap[token.depth] ?? this.styles.text;
+          return this.renderer.getTextNode(token.text, styles);
+        }
+        case 'code': {
+          return this.renderer.getCodeBlockNode(
+            token.text,
+            this.styles.code,
+            this.styles.em
+          );
+        }
+        case 'hr': {
+          return this.renderer.getViewNode(null, this.styles.hr);
+        }
+        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);
+          });
+          return this.renderer.getListNode(
+            token.ordered,
+            li,
+            this.styles.list,
+            this.styles.li
+          );
+        }
+        default:
+          console.warn(`Token with '${token.type}' type was not found.`);
+          return null;
+      }
+    });
+    return elements;
+  }
+
+  parseInline(
+    tokens: marked.Token[],
+    styles: StyleProp<ViewStyle | TextStyle | ImageStyle> = {}
+  ) {
+    const elements: React.ReactNode[] = tokens.map((token) => {
+      if (!token) return null;
+
+      switch (token.type) {
+        case 'escape': {
+          return this.renderer.getTextNode(token.text, [
+            styles,
+            this.styles.text,
+          ]);
+        }
+        case 'html': {
+          console.log('html', token);
+          return null;
+        }
+        case 'link': {
+          return this.renderer.getLinkNode(token.text, token.href, [
+            styles,
+            this.styles.link,
+          ]);
+        }
+        case 'image': {
+          return this.renderer.getImageNode(token.href);
+        }
+        case 'strong': {
+          return this.renderer.getTextNode(
+            this.parseInline(token.tokens, this.styles.strong),
+            [styles, this.styles.strong]
+          );
+        }
+        case 'em': {
+          return this.renderer.getTextNode(
+            this.parseInline(token.tokens, this.styles.em),
+            [styles, this.styles.em]
+          );
+        }
+        case 'codespan': {
+          return this.renderer.getTextNode(token.text, this.styles.codespan);
+        }
+        case 'br': {
+          return this.renderer.getTextNode('\n', {});
+        }
+        case 'del': {
+          return null;
+        }
+        case 'text': {
+          return this.renderer.getTextNode(token.raw, [
+            styles,
+            this.styles.text,
+          ]);
+        }
+        default: {
+          console.warn(`Token with '${token.type}' type was not found.`);
+          return null;
+        }
+      }
+    });
+    return elements;
+  }
+}
+
+export default Parser;

package/src/lib/Renderer.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { Linking, ScrollView, View, ViewStyle } from 'react-native';
-import type { StyleProp, TextStyle } from 'react-native';
-import { Text } from 'react-native';
+import { Text, StyleProp, TextStyle } 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';
 
 class Renderer {
@@ -31,7 +34,10 @@ class Renderer {
     );
   };
 
-  getParagraph(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {
+  getViewNode(
+    children: React.ReactNode[] | null,
+    styles: StyleProp<ViewStyle>
+  ) {
     return (
       <View key={generateRandomString()} style={styles}>
         {children}
@@ -39,7 +45,7 @@ class Renderer {
     );
   }
 
-  getCodeBlock(
+  getCodeBlockNode(
     text: string,
     containerStyle: StyleProp<ViewStyle>,
     textStyle: StyleProp<TextStyle>
@@ -51,7 +57,7 @@ class Renderer {
     );
   }
 
-  getBlockquote(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {
+  getBlockquoteNode(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {
     return (
       <View key={generateRandomString()} style={styles}>
         {children}
@@ -59,16 +65,25 @@ class Renderer {
     );
   }
 
-  getHeading(text: string, styles: StyleProp<TextStyle>) {
-    return (
-      <Text key={generateRandomString()} style={styles}>
-        {text}
-      </Text>
-    );
+  getImageNode(uri: string) {
+    return <MDImage key={generateRandomString()} uri={uri} />;
   }
 
-  getImage(uri: string, width: number) {
-    return <MDImage key={generateRandomString()} uri={uri} width={width} />;
+  getListNode(
+    ordered: boolean,
+    li: React.ReactNode[],
+    listStyle: ViewStyle | undefined,
+    textStyle: TextStyle | undefined
+  ) {
+    return (
+      <MarkedList
+        counterRenderer={ordered ? Decimal : Disc}
+        markerTextStyle={textStyle}
+        markerBoxStyle={listStyle}
+      >
+        {li.map((node) => node)}
+      </MarkedList>
+    );
   }
 }
 

package/src/theme/colors.ts

@@ -0,0 +1,20 @@
+import type { ColorKeys } from './types';
+
+const colors: Record<'light' | 'dark', Record<ColorKeys, string>> = {
+  light: {
+    background: '#ffffff',
+    code: '#f6f8fa',
+    link: '#58a6ff',
+    text: '#333333',
+    border: '#d0d7de',
+  },
+  dark: {
+    background: '#000000',
+    code: '#161b22',
+    link: '#58a6ff',
+    text: '#ffffff',
+    border: '#30363d',
+  },
+};
+
+export default colors;

package/src/theme/styles.ts

@@ -0,0 +1,117 @@
+import { ColorSchemeName, StyleSheet } from 'react-native';
+import { getTheme } from './theme';
+import type { MarkedStyles, Theme } from './types';
+
+const getFontStyles = (theme: Theme) => {
+  return StyleSheet.create({
+    regular: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: theme.colors.text,
+    },
+    heading: {
+      fontWeight: '500',
+      color: theme.colors.text,
+    },
+  });
+};
+
+const getStyles = (
+  userStyles?: MarkedStyles,
+  colorScheme?: ColorSchemeName
+): MarkedStyles => {
+  const theme = getTheme(colorScheme || 'light');
+  const fontStyle = getFontStyles(theme);
+  const defaultStyles = StyleSheet.create<MarkedStyles>({
+    container: {
+      backgroundColor: theme.colors.background,
+    },
+    em: {
+      ...fontStyle.regular,
+      fontStyle: 'italic',
+    },
+    strong: {
+      ...fontStyle.regular,
+      fontWeight: 'bold',
+    },
+    text: { ...fontStyle.regular },
+    paragraph: {
+      ...fontStyle.regular,
+      paddingVertical: 8,
+    },
+    link: {
+      ...fontStyle.regular,
+      fontStyle: 'italic',
+      color: theme.colors.link,
+    },
+    blockquote: {
+      borderLeftColor: theme.colors.border,
+      paddingLeft: 16,
+      borderLeftWidth: 5,
+      opacity: 0.8,
+    },
+    h1: {
+      fontSize: 32,
+      lineHeight: 40,
+      fontWeight: 'bold',
+      marginVertical: 8,
+      letterSpacing: 0,
+    },
+    h2: {
+      ...fontStyle.heading,
+      fontSize: 28,
+      lineHeight: 36,
+      marginVertical: 8,
+    },
+    h3: {
+      ...fontStyle.heading,
+      fontSize: 24,
+      lineHeight: 32,
+      marginVertical: 4,
+    },
+    h4: {
+      ...fontStyle.heading,
+      fontSize: 22,
+      lineHeight: 28,
+      marginVertical: 4,
+    },
+    h5: {
+      ...fontStyle.regular,
+      ...fontStyle.heading,
+      marginVertical: 2,
+    },
+    h6: {
+      ...fontStyle.heading,
+      fontSize: 14,
+      lineHeight: 20,
+      marginVertical: 2,
+    },
+    codespan: {
+      ...fontStyle.regular,
+      fontStyle: 'italic',
+      backgroundColor: theme.colors.code,
+      fontWeight: '300',
+    },
+    code: {
+      padding: 16,
+      backgroundColor: theme.colors.code,
+      minWidth: '100%',
+    },
+    hr: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+      marginVertical: 4,
+    },
+    li: {
+      ...fontStyle.regular,
+      flexShrink: 1,
+    },
+  });
+
+  return {
+    ...defaultStyles,
+    ...userStyles,
+  };
+};
+
+export default getStyles;

package/src/theme/theme.ts

@@ -0,0 +1,9 @@
+import type { ColorSchemeName } from 'react-native';
+import colors from './colors';
+import type { Theme } from './types';
+
+export const getTheme = (theme: ColorSchemeName): Theme => {
+  return {
+    colors: colors[theme || 'light'],
+  };
+};

package/src/theme/types.ts

@@ -0,0 +1,28 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+export interface MarkedStyles {
+  container?: ViewStyle;
+  em?: TextStyle;
+  strong?: TextStyle;
+  text?: TextStyle;
+  paragraph?: ViewStyle;
+  link?: TextStyle;
+  blockquote?: ViewStyle;
+  h1?: TextStyle;
+  h2?: TextStyle;
+  h3?: TextStyle;
+  h4?: TextStyle;
+  h5?: TextStyle;
+  h6?: TextStyle;
+  codespan?: TextStyle;
+  code?: ViewStyle;
+  hr?: ViewStyle;
+  list?: ViewStyle;
+  li?: TextStyle;
+}
+
+export type ColorKeys = 'background' | 'code' | 'link' | 'text' | 'border';
+
+export interface Theme {
+  colors: Record<ColorKeys, string>;
+}

package/dist/commonjs/types/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nexport interface MarkedStyles {\n  em?: TextStyle;\n  strong?: TextStyle;\n  text?: TextStyle;\n  paragraph?: ViewStyle;\n  link?: TextStyle;\n  blockquoteText?: TextStyle;\n  blockquoteContainer?: ViewStyle;\n  h1?: TextStyle;\n  h2?: TextStyle;\n  h3?: TextStyle;\n  h4?: TextStyle;\n  h5?: TextStyle;\n  h6?: TextStyle;\n  image?: ImageStyle;\n  codespan?: TextStyle;\n  code?: ViewStyle;\n}\n\nexport interface ParserOptions {\n  contentWidth: number;\n  styles?: MarkedStyles;\n}\n"],"mappings":""}

package/dist/module/types/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';\n\nexport interface MarkedStyles {\n  em?: TextStyle;\n  strong?: TextStyle;\n  text?: TextStyle;\n  paragraph?: ViewStyle;\n  link?: TextStyle;\n  blockquoteText?: TextStyle;\n  blockquoteContainer?: ViewStyle;\n  h1?: TextStyle;\n  h2?: TextStyle;\n  h3?: TextStyle;\n  h4?: TextStyle;\n  h5?: TextStyle;\n  h6?: TextStyle;\n  image?: ImageStyle;\n  codespan?: TextStyle;\n  code?: ViewStyle;\n}\n\nexport interface ParserOptions {\n  contentWidth: number;\n  styles?: MarkedStyles;\n}\n"],"mappings":""}

package/dist/typescript/types/types.d.ts

@@ -1,23 +0,0 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-export interface MarkedStyles {
-    em?: TextStyle;
-    strong?: TextStyle;
-    text?: TextStyle;
-    paragraph?: ViewStyle;
-    link?: TextStyle;
-    blockquoteText?: TextStyle;
-    blockquoteContainer?: ViewStyle;
-    h1?: TextStyle;
-    h2?: TextStyle;
-    h3?: TextStyle;
-    h4?: TextStyle;
-    h5?: TextStyle;
-    h6?: TextStyle;
-    image?: ImageStyle;
-    codespan?: TextStyle;
-    code?: ViewStyle;
-}
-export interface ParserOptions {
-    contentWidth: number;
-    styles?: MarkedStyles;
-}