react-native-marked 1.0.0-alpha.1 → 1.0.0

package/src/lib/Parser.tsx

@@ -0,0 +1,163 @@
+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) => item.text);
+          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,29 @@ 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: string[],
+    listStyle: ViewStyle | undefined,
+    textStyle: TextStyle | undefined
+  ) {
+    return (
+      <MarkedList
+        counterRenderer={ordered ? Decimal : Disc}
+        markerTextStyle={textStyle}
+        markerBoxStyle={listStyle}
+      >
+        {li.map((text, index) => (
+          <Text key={index} style={textStyle}>
+            {text}
+          </Text>
+        ))}
+      </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;
-}

package/src/lib/Parser.ts

@@ -1,256 +0,0 @@
-import type { marked } from 'marked';
-import {
-  ImageStyle,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-import Renderer from './Renderer';
-import type { MarkedStyles, ParserOptions } from '../types/types';
-
-class Parser {
-  private renderer;
-  private styles: MarkedStyles;
-  private options: ParserOptions;
-  constructor(options: ParserOptions) {
-    this.renderer = new Renderer();
-    this.options = options;
-    this.styles = {
-      ...defaultStyles,
-      ...options.styles,
-    };
-  }
-
-  parse(tokens: marked.Token[]) {
-    return this.parseBlocks(tokens);
-  }
-
-  parseBlocks(
-    tokens: marked.Token[],
-    styleObj: StyleProp<ViewStyle | TextStyle | ImageStyle> = {}
-  ) {
-    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) => {
-            // TODO: move type checking value to const
-            if (t.type === 'image') {
-              paragraphChildren.push(
-                this.renderer.getTextNode(
-                  this.parseInline(tempTokens),
-                  styleObj
-                )
-              );
-              paragraphChildren.push(this.parseInline([t]));
-              tempTokens = [];
-              return;
-            }
-            tempTokens = [...tempTokens, t];
-          });
-
-          if (tempTokens.length > 0) {
-            paragraphChildren.push(
-              this.renderer.getTextNode(this.parseInline(tempTokens), styleObj)
-            );
-          }
-
-          return this.renderer.getParagraph(paragraphChildren, [
-            styleObj,
-            this.styles.paragraph,
-          ]);
-        }
-        case 'blockquote': {
-          return this.renderer.getBlockquote(
-            this.parseBlocks(token.tokens, this.styles.blockquoteText),
-            this.styles.blockquoteContainer
-          );
-        }
-        case 'heading': {
-          switch (token.depth) {
-            case 1:
-              return this.renderer.getHeading(token.text, this.styles.h1);
-            case 2:
-              return this.renderer.getHeading(token.text, this.styles.h2);
-            case 3:
-              return this.renderer.getHeading(token.text, this.styles.h3);
-            case 4:
-              return this.renderer.getHeading(token.text, this.styles.h4);
-            case 5:
-              return this.renderer.getHeading(token.text, this.styles.h5);
-            case 6:
-              return this.renderer.getHeading(token.text, this.styles.h6);
-            default:
-              return null;
-          }
-        }
-        case 'code': {
-          return this.renderer.getCodeBlock(
-            token.text,
-            this.styles.code,
-            this.styles.em
-          );
-        }
-        default:
-          return null;
-      }
-    });
-    return elements;
-  }
-
-  parseInline(
-    tokens: marked.Token[],
-    styleObj: 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, [
-            styleObj,
-            this.styles.text,
-          ]);
-        }
-        case 'html': {
-          console.log('html', token);
-          return null;
-        }
-        case 'link': {
-          return this.renderer.getLinkNode(token.text, token.href, [
-            styleObj,
-            this.styles.link,
-          ]);
-        }
-        case 'image': {
-          return this.renderer.getImage(token.href, this.options.contentWidth);
-        }
-        case 'strong': {
-          return this.renderer.getTextNode(
-            this.parseInline(token.tokens, this.styles.strong),
-            [styleObj, this.styles.strong]
-          );
-        }
-        case 'em': {
-          return this.renderer.getTextNode(
-            this.parseInline(token.tokens, this.styles.em),
-            [styleObj, 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, [
-            styleObj,
-            this.styles.text,
-          ]);
-        }
-        default: {
-          const errMsg = 'Token with "' + token.type + '" type was not found.';
-          console.error(errMsg);
-          return null;
-        }
-      }
-    });
-    return elements;
-  }
-}
-
-// TODO: material typography for font size
-const defaultStyles = StyleSheet.create<MarkedStyles>({
-  em: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontStyle: 'italic',
-  },
-  strong: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: 'bold',
-  },
-  text: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  paragraph: {
-    fontSize: 16,
-    lineHeight: 24,
-    paddingVertical: 8,
-  },
-  link: {
-    fontStyle: 'italic',
-    fontSize: 16,
-    lineHeight: 24,
-    color: '#0074cc',
-  },
-  blockquoteText: {
-    color: '#6a737d',
-  },
-  blockquoteContainer: {
-    borderLeftColor: '#dfe2e5',
-    paddingLeft: 16,
-    borderLeftWidth: 5,
-  },
-  h1: {
-    fontSize: 32,
-    lineHeight: 40,
-    fontWeight: 'bold',
-    paddingVertical: 8,
-    letterSpacing: 0,
-  },
-  h2: {
-    fontSize: 28,
-    lineHeight: 36,
-    fontWeight: '500',
-    paddingVertical: 8,
-  },
-  h3: {
-    fontSize: 36,
-    lineHeight: 44,
-    fontWeight: '500',
-  },
-  h4: {
-    fontSize: 22,
-    lineHeight: 28,
-    fontWeight: '500',
-  },
-  h5: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '500',
-  },
-  h6: {
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: '500',
-  },
-  codespan: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontStyle: 'italic',
-    backgroundColor: '#afb8c133',
-    fontWeight: '300',
-  },
-  code: {
-    padding: 16,
-    backgroundColor: '#afb8c133',
-    minWidth: '100%',
-  },
-});
-
-export default Parser;