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

package/dist/module/lib/Renderer.js

@@ -3,6 +3,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { Linking, ScrollView, View } from 'react-native';
 import { 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';
 
@@ -26,14 +29,14 @@ class Renderer {
     });
   }
 
-  getParagraph(children, styles) {
+  getViewNode(children, styles) {
     return /*#__PURE__*/React.createElement(View, {
       key: generateRandomString(),
       style: styles
     }, children);
   }
 
-  getCodeBlock(text, containerStyle, textStyle) {
+  getCodeBlockNode(text, containerStyle, textStyle) {
     return /*#__PURE__*/React.createElement(ScrollView, {
       contentContainerStyle: containerStyle,
       horizontal: true
@@ -42,28 +45,28 @@ class Renderer {
     }, text));
   }
 
-  getBlockquote(children, styles) {
+  getBlockquoteNode(children, styles) {
     return /*#__PURE__*/React.createElement(View, {
       key: generateRandomString(),
       style: styles
     }, children);
   }
 
-  getHeading(text, styles) {
-    return /*#__PURE__*/React.createElement(Text, {
-      key: generateRandomString(),
-      style: styles
-    }, text);
-  }
-
-  getImage(uri, width) {
+  getImageNode(uri) {
     return /*#__PURE__*/React.createElement(MDImage, {
       key: generateRandomString(),
-      uri: uri,
-      width: width
+      uri: uri
     });
   }
 
+  getListNode(ordered, li, listStyle, textStyle) {
+    return /*#__PURE__*/React.createElement(MarkedList, {
+      counterRenderer: ordered ? Decimal : Disc,
+      markerTextStyle: textStyle,
+      markerBoxStyle: listStyle
+    }, li.map(node => node));
+  }
+
 }
 
 export default Renderer;

package/dist/module/lib/Renderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Linking","ScrollView","View","Text","MDImage","generateRandomString","Renderer","href","openURL","children","styles","text","onLinkPress","getParagraph","getCodeBlock","containerStyle","textStyle","getBlockquote","getHeading","getImage","uri","width"],"sources":["Renderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Linking, ScrollView, View, ViewStyle } from 'react-native';\nimport type { StyleProp, TextStyle } from 'react-native';\nimport { Text } from 'react-native';\nimport MDImage from './../components/MDImage';\nimport { generateRandomString } from '../utils/string';\n\nclass Renderer {\n  private onLinkPress = (href: string) => () => Linking.openURL(href);\n\n  getTextNode = (\n    children: string | React.ReactNode[],\n    styles: StyleProp<TextStyle>\n  ) => {\n    return (\n      <Text key={generateRandomString()} style={styles}>\n        {children}\n      </Text>\n    );\n  };\n\n  getLinkNode = (text: string, href: string, styles: StyleProp<TextStyle>) => {\n    return (\n      <Text\n        key={generateRandomString()}\n        onPress={this.onLinkPress(href)}\n        style={styles}\n      >\n        {text}\n      </Text>\n    );\n  };\n\n  getParagraph(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {\n    return (\n      <View key={generateRandomString()} style={styles}>\n        {children}\n      </View>\n    );\n  }\n\n  getCodeBlock(\n    text: string,\n    containerStyle: StyleProp<ViewStyle>,\n    textStyle: StyleProp<TextStyle>\n  ) {\n    return (\n      <ScrollView contentContainerStyle={containerStyle} horizontal>\n        <Text style={textStyle}>{text}</Text>\n      </ScrollView>\n    );\n  }\n\n  getBlockquote(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {\n    return (\n      <View key={generateRandomString()} style={styles}>\n        {children}\n      </View>\n    );\n  }\n\n  getHeading(text: string, styles: StyleProp<TextStyle>) {\n    return (\n      <Text key={generateRandomString()} style={styles}>\n        {text}\n      </Text>\n    );\n  }\n\n  getImage(uri: string, width: number) {\n    return <MDImage key={generateRandomString()} uri={uri} width={width} />;\n  }\n}\n\nexport default Renderer;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAkBC,UAAlB,EAA8BC,IAA9B,QAAqD,cAArD;AAEA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AACA,SAASC,oBAAT,QAAqC,iBAArC;;AAEA,MAAMC,QAAN,CAAe;EAAA;IAAA,qCACUC,IAAD,IAAkB,MAAMP,OAAO,CAACQ,OAAR,CAAgBD,IAAhB,CADjC;;IAAA,qCAGC,CACZE,QADY,EAEZC,MAFY,KAGT;MACH,oBACE,oBAAC,IAAD;QAAM,GAAG,EAAEL,oBAAoB,EAA/B;QAAmC,KAAK,EAAEK;MAA1C,GACGD,QADH,CADF;IAKD,CAZY;;IAAA,qCAcC,CAACE,IAAD,EAAeJ,IAAf,EAA6BG,MAA7B,KAA8D;MAC1E,oBACE,oBAAC,IAAD;QACE,GAAG,EAAEL,oBAAoB,EAD3B;QAEE,OAAO,EAAE,KAAKO,WAAL,CAAiBL,IAAjB,CAFX;QAGE,KAAK,EAAEG;MAHT,GAKGC,IALH,CADF;IASD,CAxBY;EAAA;;EA0BbE,YAAY,CAACJ,QAAD,EAA8BC,MAA9B,EAA4D;IACtE,oBACE,oBAAC,IAAD;MAAM,GAAG,EAAEL,oBAAoB,EAA/B;MAAmC,KAAK,EAAEK;IAA1C,GACGD,QADH,CADF;EAKD;;EAEDK,YAAY,CACVH,IADU,EAEVI,cAFU,EAGVC,SAHU,EAIV;IACA,oBACE,oBAAC,UAAD;MAAY,qBAAqB,EAAED,cAAnC;MAAmD,UAAU;IAA7D,gBACE,oBAAC,IAAD;MAAM,KAAK,EAAEC;IAAb,GAAyBL,IAAzB,CADF,CADF;EAKD;;EAEDM,aAAa,CAACR,QAAD,EAA8BC,MAA9B,EAA4D;IACvE,oBACE,oBAAC,IAAD;MAAM,GAAG,EAAEL,oBAAoB,EAA/B;MAAmC,KAAK,EAAEK;IAA1C,GACGD,QADH,CADF;EAKD;;EAEDS,UAAU,CAACP,IAAD,EAAeD,MAAf,EAA6C;IACrD,oBACE,oBAAC,IAAD;MAAM,GAAG,EAAEL,oBAAoB,EAA/B;MAAmC,KAAK,EAAEK;IAA1C,GACGC,IADH,CADF;EAKD;;EAEDQ,QAAQ,CAACC,GAAD,EAAcC,KAAd,EAA6B;IACnC,oBAAO,oBAAC,OAAD;MAAS,GAAG,EAAEhB,oBAAoB,EAAlC;MAAsC,GAAG,EAAEe,GAA3C;MAAgD,KAAK,EAAEC;IAAvD,EAAP;EACD;;AAhEY;;AAmEf,eAAef,QAAf"}
+{"version":3,"names":["React","Linking","ScrollView","View","Text","MarkedList","Disc","Decimal","MDImage","generateRandomString","Renderer","href","openURL","children","styles","text","onLinkPress","getViewNode","getCodeBlockNode","containerStyle","textStyle","getBlockquoteNode","getImageNode","uri","getListNode","ordered","li","listStyle","map","node"],"sources":["Renderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Linking, ScrollView, View, ViewStyle } from 'react-native';\nimport { Text, StyleProp, TextStyle } from 'react-native';\nimport MarkedList from '@jsamr/react-native-li';\nimport Disc from '@jsamr/counter-style/presets/disc';\nimport Decimal from '@jsamr/counter-style/presets/decimal';\nimport MDImage from './../components/MDImage';\n\nimport { generateRandomString } from '../utils/string';\n\nclass Renderer {\n  private onLinkPress = (href: string) => () => Linking.openURL(href);\n\n  getTextNode = (\n    children: string | React.ReactNode[],\n    styles: StyleProp<TextStyle>\n  ) => {\n    return (\n      <Text key={generateRandomString()} style={styles}>\n        {children}\n      </Text>\n    );\n  };\n\n  getLinkNode = (text: string, href: string, styles: StyleProp<TextStyle>) => {\n    return (\n      <Text\n        key={generateRandomString()}\n        onPress={this.onLinkPress(href)}\n        style={styles}\n      >\n        {text}\n      </Text>\n    );\n  };\n\n  getViewNode(\n    children: React.ReactNode[] | null,\n    styles: StyleProp<ViewStyle>\n  ) {\n    return (\n      <View key={generateRandomString()} style={styles}>\n        {children}\n      </View>\n    );\n  }\n\n  getCodeBlockNode(\n    text: string,\n    containerStyle: StyleProp<ViewStyle>,\n    textStyle: StyleProp<TextStyle>\n  ) {\n    return (\n      <ScrollView contentContainerStyle={containerStyle} horizontal>\n        <Text style={textStyle}>{text}</Text>\n      </ScrollView>\n    );\n  }\n\n  getBlockquoteNode(children: React.ReactNode[], styles: StyleProp<ViewStyle>) {\n    return (\n      <View key={generateRandomString()} style={styles}>\n        {children}\n      </View>\n    );\n  }\n\n  getImageNode(uri: string) {\n    return <MDImage key={generateRandomString()} uri={uri} />;\n  }\n\n  getListNode(\n    ordered: boolean,\n    li: React.ReactNode[],\n    listStyle: ViewStyle | undefined,\n    textStyle: TextStyle | undefined\n  ) {\n    return (\n      <MarkedList\n        counterRenderer={ordered ? Decimal : Disc}\n        markerTextStyle={textStyle}\n        markerBoxStyle={listStyle}\n      >\n        {li.map((node) => node)}\n      </MarkedList>\n    );\n  }\n}\n\nexport default Renderer;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAkBC,UAAlB,EAA8BC,IAA9B,QAAqD,cAArD;AACA,SAASC,IAAT,QAA2C,cAA3C;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,IAAP,MAAiB,mCAAjB;AACA,OAAOC,OAAP,MAAoB,sCAApB;AACA,OAAOC,OAAP,MAAoB,yBAApB;AAEA,SAASC,oBAAT,QAAqC,iBAArC;;AAEA,MAAMC,QAAN,CAAe;EAAA;IAAA,qCACUC,IAAD,IAAkB,MAAMV,OAAO,CAACW,OAAR,CAAgBD,IAAhB,CADjC;;IAAA,qCAGC,CACZE,QADY,EAEZC,MAFY,KAGT;MACH,oBACE,oBAAC,IAAD;QAAM,GAAG,EAAEL,oBAAoB,EAA/B;QAAmC,KAAK,EAAEK;MAA1C,GACGD,QADH,CADF;IAKD,CAZY;;IAAA,qCAcC,CAACE,IAAD,EAAeJ,IAAf,EAA6BG,MAA7B,KAA8D;MAC1E,oBACE,oBAAC,IAAD;QACE,GAAG,EAAEL,oBAAoB,EAD3B;QAEE,OAAO,EAAE,KAAKO,WAAL,CAAiBL,IAAjB,CAFX;QAGE,KAAK,EAAEG;MAHT,GAKGC,IALH,CADF;IASD,CAxBY;EAAA;;EA0BbE,WAAW,CACTJ,QADS,EAETC,MAFS,EAGT;IACA,oBACE,oBAAC,IAAD;MAAM,GAAG,EAAEL,oBAAoB,EAA/B;MAAmC,KAAK,EAAEK;IAA1C,GACGD,QADH,CADF;EAKD;;EAEDK,gBAAgB,CACdH,IADc,EAEdI,cAFc,EAGdC,SAHc,EAId;IACA,oBACE,oBAAC,UAAD;MAAY,qBAAqB,EAAED,cAAnC;MAAmD,UAAU;IAA7D,gBACE,oBAAC,IAAD;MAAM,KAAK,EAAEC;IAAb,GAAyBL,IAAzB,CADF,CADF;EAKD;;EAEDM,iBAAiB,CAACR,QAAD,EAA8BC,MAA9B,EAA4D;IAC3E,oBACE,oBAAC,IAAD;MAAM,GAAG,EAAEL,oBAAoB,EAA/B;MAAmC,KAAK,EAAEK;IAA1C,GACGD,QADH,CADF;EAKD;;EAEDS,YAAY,CAACC,GAAD,EAAc;IACxB,oBAAO,oBAAC,OAAD;MAAS,GAAG,EAAEd,oBAAoB,EAAlC;MAAsC,GAAG,EAAEc;IAA3C,EAAP;EACD;;EAEDC,WAAW,CACTC,OADS,EAETC,EAFS,EAGTC,SAHS,EAITP,SAJS,EAKT;IACA,oBACE,oBAAC,UAAD;MACE,eAAe,EAAEK,OAAO,GAAGlB,OAAH,GAAaD,IADvC;MAEE,eAAe,EAAEc,SAFnB;MAGE,cAAc,EAAEO;IAHlB,GAKGD,EAAE,CAACE,GAAH,CAAQC,IAAD,IAAUA,IAAjB,CALH,CADF;EASD;;AA5EY;;AA+Ef,eAAenB,QAAf"}

package/dist/module/theme/colors.js

@@ -0,0 +1,18 @@
+const colors = {
+  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;
+//# sourceMappingURL=colors.js.map

package/dist/module/theme/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","light","background","code","link","text","border","dark"],"sources":["colors.ts"],"sourcesContent":["import type { ColorKeys } from './types';\n\nconst colors: Record<'light' | 'dark', Record<ColorKeys, string>> = {\n  light: {\n    background: '#ffffff',\n    code: '#f6f8fa',\n    link: '#58a6ff',\n    text: '#333333',\n    border: '#d0d7de',\n  },\n  dark: {\n    background: '#000000',\n    code: '#161b22',\n    link: '#58a6ff',\n    text: '#ffffff',\n    border: '#30363d',\n  },\n};\n\nexport default colors;\n"],"mappings":"AAEA,MAAMA,MAA2D,GAAG;EAClEC,KAAK,EAAE;IACLC,UAAU,EAAE,SADP;IAELC,IAAI,EAAE,SAFD;IAGLC,IAAI,EAAE,SAHD;IAILC,IAAI,EAAE,SAJD;IAKLC,MAAM,EAAE;EALH,CAD2D;EAQlEC,IAAI,EAAE;IACJL,UAAU,EAAE,SADR;IAEJC,IAAI,EAAE,SAFF;IAGJC,IAAI,EAAE,SAHF;IAIJC,IAAI,EAAE,SAJF;IAKJC,MAAM,EAAE;EALJ;AAR4D,CAApE;AAiBA,eAAeN,MAAf"}

package/dist/module/theme/styles.js

@@ -0,0 +1,102 @@
+import { StyleSheet } from 'react-native';
+import { getTheme } from './theme';
+
+const getFontStyles = theme => {
+  return StyleSheet.create({
+    regular: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: theme.colors.text
+    },
+    heading: {
+      fontWeight: '500',
+      color: theme.colors.text
+    }
+  });
+};
+
+const getStyles = (userStyles, colorScheme) => {
+  const theme = getTheme(colorScheme || 'light');
+  const fontStyle = getFontStyles(theme);
+  const defaultStyles = StyleSheet.create({
+    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;
+//# sourceMappingURL=styles.js.map

package/dist/module/theme/styles.js.map

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

package/dist/module/theme/theme.js

@@ -0,0 +1,7 @@
+import colors from './colors';
+export const getTheme = theme => {
+  return {
+    colors: colors[theme || 'light']
+  };
+};
+//# sourceMappingURL=theme.js.map

package/dist/module/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","getTheme","theme"],"sources":["theme.ts"],"sourcesContent":["import type { ColorSchemeName } from 'react-native';\nimport colors from './colors';\nimport type { Theme } from './types';\n\nexport const getTheme = (theme: ColorSchemeName): Theme => {\n  return {\n    colors: colors[theme || 'light'],\n  };\n};\n"],"mappings":"AACA,OAAOA,MAAP,MAAmB,UAAnB;AAGA,OAAO,MAAMC,QAAQ,GAAIC,KAAD,IAAmC;EACzD,OAAO;IACLF,MAAM,EAAEA,MAAM,CAACE,KAAK,IAAI,OAAV;EADT,CAAP;AAGD,CAJM"}

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { TextStyle, ViewStyle } from 'react-native';\n\nexport interface MarkedStyles {\n  container?: ViewStyle;\n  em?: TextStyle;\n  strong?: TextStyle;\n  text?: TextStyle;\n  paragraph?: ViewStyle;\n  link?: TextStyle;\n  blockquote?: ViewStyle;\n  h1?: TextStyle;\n  h2?: TextStyle;\n  h3?: TextStyle;\n  h4?: TextStyle;\n  h5?: TextStyle;\n  h6?: TextStyle;\n  codespan?: TextStyle;\n  code?: ViewStyle;\n  hr?: ViewStyle;\n  list?: ViewStyle;\n  li?: TextStyle;\n}\n\nexport type ColorKeys = 'background' | 'code' | 'link' | 'text' | 'border';\n\nexport interface Theme {\n  colors: Record<ColorKeys, string>;\n}\n"],"mappings":""}

package/dist/typescript/components/MDImage.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface MDImageProps {
     uri: string;
-    width: number;
 }
-declare const _default: React.MemoExoticComponent<({ uri, width }: MDImageProps) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ uri }: MDImageProps) => JSX.Element>;
 export default _default;

package/dist/typescript/lib/Markdown.d.ts

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { FlatListProps } from 'react-native';
+import type { MarkedStyles } from '../theme/types';
 interface MarkdownProps {
     value: string;
-    contentWidth: number;
-    listProps?: Omit<FlatListProps<ReactNode>, 'data' | 'renderItem' | 'horizontal'>;
+    flatListProps?: Omit<FlatListProps<ReactNode>, 'data' | 'renderItem' | 'horizontal'>;
+    styles?: MarkedStyles;
 }
-declare const Markdown: ({ value, contentWidth, listProps }: MarkdownProps) => JSX.Element;
-export default Markdown;
+declare const _default: React.MemoExoticComponent<({ value, flatListProps, styles: userStyles, }: MarkdownProps) => JSX.Element>;
+export default _default;

package/dist/typescript/lib/Parser.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import type { marked } from 'marked';
-import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { ParserOptions } from '../types/types';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { MarkedStyles } from '../theme/types';
+interface ParserOptions {
+    styles?: MarkedStyles;
+}
 declare class Parser {
     private renderer;
     private styles;
-    private options;
+    private headingStylesMap;
     constructor(options: ParserOptions);
     parse(tokens: marked.Token[]): import("react").ReactNode[];
-    parseBlocks(tokens: marked.Token[], styleObj?: StyleProp<ViewStyle | TextStyle | ImageStyle>): import("react").ReactNode[];
-    parseInline(tokens: marked.Token[], styleObj?: StyleProp<ViewStyle | TextStyle | ImageStyle>): import("react").ReactNode[];
+    parseInline(tokens: marked.Token[], styles?: StyleProp<ViewStyle | TextStyle | ImageStyle>): import("react").ReactNode[];
 }
 export default Parser;

package/dist/typescript/lib/Renderer.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { ViewStyle } from 'react-native';
-import type { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 declare class Renderer {
     private onLinkPress;
     getTextNode: (children: string | React.ReactNode[], styles: StyleProp<TextStyle>) => JSX.Element;
     getLinkNode: (text: string, href: string, styles: StyleProp<TextStyle>) => JSX.Element;
-    getParagraph(children: React.ReactNode[], styles: StyleProp<ViewStyle>): JSX.Element;
-    getCodeBlock(text: string, containerStyle: StyleProp<ViewStyle>, textStyle: StyleProp<TextStyle>): JSX.Element;
-    getBlockquote(children: React.ReactNode[], styles: StyleProp<ViewStyle>): JSX.Element;
-    getHeading(text: string, styles: StyleProp<TextStyle>): JSX.Element;
-    getImage(uri: string, width: number): JSX.Element;
+    getViewNode(children: React.ReactNode[] | null, styles: StyleProp<ViewStyle>): JSX.Element;
+    getCodeBlockNode(text: string, containerStyle: StyleProp<ViewStyle>, textStyle: StyleProp<TextStyle>): JSX.Element;
+    getBlockquoteNode(children: React.ReactNode[], styles: StyleProp<ViewStyle>): JSX.Element;
+    getImageNode(uri: string): JSX.Element;
+    getListNode(ordered: boolean, li: React.ReactNode[], listStyle: ViewStyle | undefined, textStyle: TextStyle | undefined): JSX.Element;
 }
 export default Renderer;

package/dist/typescript/theme/colors.d.ts

@@ -0,0 +1,3 @@
+import type { ColorKeys } from './types';
+declare const colors: Record<'light' | 'dark', Record<ColorKeys, string>>;
+export default colors;

package/dist/typescript/theme/styles.d.ts

@@ -0,0 +1,4 @@
+import { ColorSchemeName } from 'react-native';
+import type { MarkedStyles } from './types';
+declare const getStyles: (userStyles?: MarkedStyles, colorScheme?: ColorSchemeName) => MarkedStyles;
+export default getStyles;

package/dist/typescript/theme/theme.d.ts

@@ -0,0 +1,3 @@
+import type { ColorSchemeName } from 'react-native';
+import type { Theme } from './types';
+export declare const getTheme: (theme: ColorSchemeName) => Theme;

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

@@ -0,0 +1,25 @@
+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 declare type ColorKeys = 'background' | 'code' | 'link' | 'text' | 'border';
+export interface Theme {
+    colors: Record<ColorKeys, string>;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-marked",
-  "version": "1.0.0-alpha.3",
-  "description": "test",
+  "version": "1.0.2",
+  "description": "Markdown renderer for React Native powered by marked.js",
   "main": "dist/commonjs/index",
   "module": "dist/module/index",
   "types": "dist/typescript/index.d.ts",
@@ -27,12 +27,12 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "build": "bob build",
     "prepare": "npm run build",
-    "release": "release-it --preRelease=alpha"
+    "release": "release-it"
   },
   "keywords": [
     "react-native",
-    "ios",
-    "android"
+    "markdown",
+    "react-native markdown"
   ],
   "repository": "https://github.com/gmsgowtham/react-native-marked",
   "author": "Gowtham G <webappsbygowtham@gmail.com> (https://github.com/gmsgowtham)",
@@ -46,7 +46,9 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.7",
+    "@babel/core": "^7.19.0",
     "@babel/eslint-parser": "^7.18.2",
+    "@babel/preset-env": "^7.19.0",
     "@commitlint/config-conventional": "^17.0.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
@@ -66,7 +68,7 @@
     "react": "17.0.2",
     "react-native": "0.68.2",
     "react-native-builder-bob": "^0.18.3",
-    "release-it": "^15.0.0",
+    "release-it": "^15.4.1",
     "typescript": "^4.5.2"
   },
   "resolutions": {
@@ -103,7 +105,8 @@
           "revert",
           "style",
           "test",
-          "todo"
+          "todo",
+          "bump"
         ]
       ]
     }
@@ -143,7 +146,8 @@
           "trailingComma": "es5",
           "useTabs": false
         }
-      ]
+      ],
+      "@typescript-eslint/ban-ts-comment": "off"
     }
   },
   "eslintIgnore": [
@@ -173,7 +177,9 @@
     ]
   },
   "dependencies": {
+    "@jsamr/counter-style": "^2.0.2",
+    "@jsamr/react-native-li": "^2.3.1",
     "marked": "^4.0.18",
-    "react-native-fast-image": "^8.5.11"
+    "react-native-fit-image": "^1.5.5"
   }
 }

package/src/components/MDImage.tsx

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

package/src/lib/Markdown.tsx

@@ -1,21 +1,38 @@
-import React, { ReactNode, useCallback } from 'react';
+import React, { memo, ReactNode, useCallback, useMemo } from 'react';
+import { FlatList, FlatListProps, useColorScheme } from 'react-native';
 import { marked } from 'marked';
 import Parser from './Parser';
-import { FlatList, FlatListProps } from 'react-native';
+import getStyles from '../theme/styles';
+import type { MarkedStyles } from '../theme/types';
 
 interface MarkdownProps {
   value: string;
-  contentWidth: number;
-  listProps?: Omit<
+  flatListProps?: Omit<
     FlatListProps<ReactNode>,
     'data' | 'renderItem' | 'horizontal'
   >;
+  styles?: MarkedStyles;
 }
 
-const Markdown = ({ value, contentWidth, listProps }: MarkdownProps) => {
-  const tokens = marked.lexer(value.trim());
-  const parser = new Parser({ contentWidth });
-  const rnElements = parser.parse(tokens);
+const Markdown = ({
+  value,
+  flatListProps,
+  styles: userStyles,
+}: MarkdownProps) => {
+  const systemTheme = useColorScheme();
+  const styles = useMemo(
+    () => getStyles(userStyles, systemTheme),
+    [userStyles, systemTheme]
+  );
+
+  const rnElements = useMemo(() => {
+    const parser = new Parser({
+      styles,
+    });
+    const tokens = marked.lexer(value.trim());
+
+    return parser.parse(tokens);
+  }, [value, styles]);
 
   const renderItem = useCallback(({ item }: { item: ReactNode }) => {
     return <>{item}</>;
@@ -29,11 +46,12 @@ const Markdown = ({ value, contentWidth, listProps }: MarkdownProps) => {
       maxToRenderPerBatch={8}
       initialNumToRender={8}
       removeClippedSubviews
-      {...listProps}
+      style={styles.container}
+      {...flatListProps}
       data={rnElements}
       renderItem={renderItem}
     />
   );
 };
 
-export default Markdown;
+export default memo(Markdown);