react-native-marked 1.0.0-alpha.1

package/package.json

@@ -0,0 +1,179 @@
+{
+  "name": "react-native-marked",
+  "version": "1.0.0-alpha.1",
+  "description": "test",
+  "main": "dist/commonjs/index",
+  "module": "dist/module/index",
+  "types": "dist/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "dist",
+    "android",
+    "ios",
+    "cpp",
+    "react-native-marked.podspec",
+    "!dist/typescript/example",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "build": "bob build",
+    "prepare": "npm run build",
+    "release": "release-it --preRelease=alpha"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://github.com/gmsgowtham/react-native-marked",
+  "author": "Gowtham G <webappsbygowtham@gmail.com> (https://github.com/gmsgowtham)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/gmsgowtham/react-native-marked/issues"
+  },
+  "homepage": "https://github.com/gmsgowtham/react-native-marked#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@arkweid/lefthook": "^0.7.7",
+    "@babel/eslint-parser": "^7.18.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/marked": "^4.0.3",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.68.0",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.34.0",
+    "commitlint": "^17.0.2",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "17.0.2",
+    "react-native": "0.68.2",
+    "react-native-builder-bob": "^0.18.3",
+    "release-it": "^15.0.0",
+    "typescript": "^4.5.2"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "react-native": ">=0.60.0"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/examples/*/node_modules",
+      "<rootDir>/dist/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ],
+    "rules": {
+      "type-enum": [
+        2,
+        "always",
+        [
+          "build",
+          "chore",
+          "ci",
+          "docs",
+          "feat",
+          "fix",
+          "perf",
+          "refactor",
+          "revert",
+          "style",
+          "test",
+          "todo"
+        ]
+      ]
+    }
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+      "@react-native-community",
+      "prettier",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/",
+    "examples/*/node_modules"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "marked": "^4.0.18",
+    "react-native-fast-image": "^8.5.11"
+  }
+}

package/src/components/MDImage.tsx

@@ -0,0 +1,40 @@
+import React, { memo, useEffect, useState } from 'react';
+import { Image } from 'react-native';
+import FastImage from 'react-native-fast-image';
+
+interface MDImageProps {
+  uri: string;
+  width: number;
+}
+
+const MDImage = ({ uri, width }: MDImageProps) => {
+  const [height, setHeight] = useState<number>(0);
+
+  useEffect(() => {
+    Image.prefetch(uri);
+    Image.getSize(uri, (iWidth, iHeight) => {
+      const heightCalc = width * (iHeight / iWidth);
+      setHeight(heightCalc);
+    });
+  }, [uri, width, height]);
+
+  if (height < 1) {
+    return null;
+  }
+
+  return (
+    <FastImage
+      fallback
+      source={{ uri }}
+      style={[
+        {
+          width: width,
+          height: height,
+        },
+      ]}
+      resizeMode={FastImage.resizeMode.cover}
+    />
+  );
+};
+
+export default memo(MDImage);

package/src/index.ts

@@ -0,0 +1,3 @@
+import Markdown from './lib/Markdown';
+
+export default Markdown;

package/src/lib/Markdown.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode, useCallback } from 'react';
+import { marked } from 'marked';
+import Parser from './Parser';
+import { FlatList, FlatListProps } from 'react-native';
+
+interface MarkdownProps {
+  value: string;
+  contentWidth: number;
+  listProps?: Omit<
+    FlatListProps<ReactNode>,
+    'data' | 'renderItem' | 'horizontal'
+  >;
+}
+
+const Markdown = ({ value, contentWidth, listProps }: MarkdownProps) => {
+  const tokens = marked.lexer(value.trim());
+  const parser = new Parser({ contentWidth });
+  const rnElements = parser.parse(tokens);
+
+  const renderItem = useCallback(({ item }: { item: ReactNode }) => {
+    return <>{item}</>;
+  }, []);
+
+  const keyExtractor = useCallback((_, index) => index.toString(), []);
+
+  return (
+    <FlatList
+      keyExtractor={keyExtractor}
+      maxToRenderPerBatch={8}
+      initialNumToRender={8}
+      removeClippedSubviews
+      {...listProps}
+      data={rnElements}
+      renderItem={renderItem}
+    />
+  );
+};
+
+export default Markdown;

package/src/lib/Parser.ts

@@ -0,0 +1,256 @@
+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;

package/src/lib/Renderer.tsx

@@ -0,0 +1,75 @@
+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 MDImage from './../components/MDImage';
+import { generateRandomString } from '../utils/string';
+
+class Renderer {
+  private onLinkPress = (href: string) => () => Linking.openURL(href);
+
+  getTextNode = (
+    children: string | React.ReactNode[],
+    styles: StyleProp<TextStyle>
+  ) => {
+    return (
+      <Text key={generateRandomString()} style={styles}>
+        {children}
+      </Text>
+    );
+  };
+
+  getLinkNode = (text: string, href: string, styles: StyleProp<TextStyle>) => {
+    return (
+      <Text
+        key={generateRandomString()}
+        onPress={this.onLinkPress(href)}
+        style={styles}
+      >
+        {text}
+      </Text>
+    );
+  };
+
+  getParagraph(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {
+    return (
+      <View key={generateRandomString()} style={styles}>
+        {children}
+      </View>
+    );
+  }
+
+  getCodeBlock(
+    text: string,
+    containerStyle: StyleProp<ViewStyle>,
+    textStyle: StyleProp<TextStyle>
+  ) {
+    return (
+      <ScrollView contentContainerStyle={containerStyle} horizontal>
+        <Text style={textStyle}>{text}</Text>
+      </ScrollView>
+    );
+  }
+
+  getBlockquote(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {
+    return (
+      <View key={generateRandomString()} style={styles}>
+        {children}
+      </View>
+    );
+  }
+
+  getHeading(text: string, styles: StyleProp<TextStyle>) {
+    return (
+      <Text key={generateRandomString()} style={styles}>
+        {text}
+      </Text>
+    );
+  }
+
+  getImage(uri: string, width: number) {
+    return <MDImage key={generateRandomString()} uri={uri} width={width} />;
+  }
+}
+
+export default Renderer;

package/src/types/types.ts

@@ -0,0 +1,25 @@
+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/utils/string.ts

@@ -0,0 +1,7 @@
+/**
+ * Generates a random string
+ * @returns string
+ */
+export const generateRandomString = () => {
+  return (Math.random() + 1).toString(36).substring(7);
+};