react-native-marked 1.6.2 → 1.6.4

package/src/lib/Renderer.tsx

@@ -1,121 +1,121 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode } from "react";
 import {
-  ScrollView,
-  View,
-  Text,
-  TouchableHighlight,
-  TextStyle,
-  ViewStyle,
-  ImageStyle,
-} 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 { onLinkPress } from '../utils/handlers';
+	ScrollView,
+	View,
+	Text,
+	TouchableHighlight,
+	TextStyle,
+	ViewStyle,
+	ImageStyle,
+} 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 { onLinkPress } from "../utils/handlers";
 
 class Renderer {
-  getTextNode = (children: string | ReactNode[], styles?: TextStyle) => {
-    return (
-      <Text key={generateRandomString()} style={styles}>
-        {children}
-      </Text>
-    );
-  };
+	getTextNode = (children: string | ReactNode[], styles?: TextStyle) => {
+		return (
+			<Text key={generateRandomString()} style={styles}>
+				{children}
+			</Text>
+		);
+	};
 
-  getTextLinkNode = (
-    children: string | ReactNode[],
-    href: string,
-    styles?: TextStyle
-  ) => {
-    return (
-      <Text
-        accessibilityRole="link"
-        accessibilityHint="Opens in a new window"
-        key={generateRandomString()}
-        onPress={onLinkPress(href)}
-        style={styles}
-      >
-        {children}
-      </Text>
-    );
-  };
+	getTextLinkNode = (
+		children: string | ReactNode[],
+		href: string,
+		styles?: TextStyle,
+	) => {
+		return (
+			<Text
+				accessibilityRole="link"
+				accessibilityHint="Opens in a new window"
+				key={generateRandomString()}
+				onPress={onLinkPress(href)}
+				style={styles}
+			>
+				{children}
+			</Text>
+		);
+	};
 
-  getImageLinkNode = (
-    href: string,
-    imageUrl: string,
-    alt?: string,
-    style?: ImageStyle
-  ) => {
-    const imageNode = this.getImageNode(imageUrl, alt, style);
-    return (
-      <TouchableHighlight
-        accessibilityRole="link"
-        accessibilityHint="Opens in a new window"
-        onPress={onLinkPress(href)}
-        key={generateRandomString()}
-      >
-        {imageNode}
-      </TouchableHighlight>
-    );
-  };
+	getImageLinkNode = (
+		href: string,
+		imageUrl: string,
+		alt?: string,
+		style?: ImageStyle,
+	) => {
+		const imageNode = this.getImageNode(imageUrl, alt, style);
+		return (
+			<TouchableHighlight
+				accessibilityRole="link"
+				accessibilityHint="Opens in a new window"
+				onPress={onLinkPress(href)}
+				key={generateRandomString()}
+			>
+				{imageNode}
+			</TouchableHighlight>
+		);
+	};
 
-  getViewNode(children: ReactNode[] | null, styles?: ViewStyle) {
-    return (
-      <View key={generateRandomString()} style={styles}>
-        {children}
-      </View>
-    );
-  }
+	getViewNode(children: ReactNode[] | null, styles?: ViewStyle) {
+		return (
+			<View key={generateRandomString()} style={styles}>
+				{children}
+			</View>
+		);
+	}
 
-  getCodeBlockNode(
-    text: string,
-    containerStyle?: ViewStyle,
-    textStyle?: TextStyle
-  ) {
-    return (
-      <ScrollView
-        key={generateRandomString()}
-        contentContainerStyle={containerStyle}
-        horizontal
-      >
-        <Text style={textStyle}>{text}</Text>
-      </ScrollView>
-    );
-  }
+	getCodeBlockNode(
+		text: string,
+		containerStyle?: ViewStyle,
+		textStyle?: TextStyle,
+	) {
+		return (
+			<ScrollView
+				key={generateRandomString()}
+				contentContainerStyle={containerStyle}
+				horizontal={true}
+			>
+				<Text style={textStyle}>{text}</Text>
+			</ScrollView>
+		);
+	}
 
-  getBlockquoteNode(children: ReactNode[], styles?: ViewStyle) {
-    return (
-      <View key={generateRandomString()} style={styles}>
-        {children}
-      </View>
-    );
-  }
+	getBlockquoteNode(children: ReactNode[], styles?: ViewStyle) {
+		return (
+			<View key={generateRandomString()} style={styles}>
+				{children}
+			</View>
+		);
+	}
 
-  getImageNode(uri: string, alt?: string, style?: ImageStyle) {
-    return (
-      <MDImage key={generateRandomString()} uri={uri} alt={alt} style={style} />
-    );
-  }
+	getImageNode(uri: string, alt?: string, style?: ImageStyle) {
+		return (
+			<MDImage key={generateRandomString()} uri={uri} alt={alt} style={style} />
+		);
+	}
 
-  getListNode(
-    ordered: boolean,
-    li: ReactNode[],
-    listStyle?: ViewStyle,
-    textStyle?: TextStyle
-  ) {
-    return (
-      <MarkedList
-        counterRenderer={ordered ? Decimal : Disc}
-        markerTextStyle={textStyle}
-        markerBoxStyle={listStyle}
-        key={generateRandomString()}
-      >
-        {li.map((node) => node)}
-      </MarkedList>
-    );
-  }
+	getListNode(
+		ordered: boolean,
+		li: ReactNode[],
+		listStyle?: ViewStyle,
+		textStyle?: TextStyle,
+	) {
+		return (
+			<MarkedList
+				counterRenderer={ordered ? Decimal : Disc}
+				markerTextStyle={textStyle}
+				markerBoxStyle={listStyle}
+				key={generateRandomString()}
+			>
+				{li.map((node) => node)}
+			</MarkedList>
+		);
+	}
 }
 
 export default Renderer;

package/src/lib/types.ts

@@ -1,17 +1,17 @@
-import type { ReactNode } from 'react';
-import type { FlatListProps } from 'react-native';
-import type { MarkedStyles, UserTheme } from './../theme/types';
+import type { ReactNode } from "react";
+import type { FlatListProps } from "react-native";
+import type { MarkedStyles, UserTheme } from "./../theme/types";
 
 export interface ParserOptions {
-  styles?: MarkedStyles;
-  baseUrl?: string;
+	styles?: MarkedStyles;
+	baseUrl?: string;
 }
 
 export interface MarkdownProps extends ParserOptions {
-  value: string;
-  flatListProps?: Omit<
-    FlatListProps<ReactNode>,
-    'data' | 'renderItem' | 'horizontal'
-  >;
-  theme?: UserTheme;
+	value: string;
+	flatListProps?: Omit<
+		FlatListProps<ReactNode>,
+		"data" | "renderItem" | "horizontal"
+	>;
+	theme?: UserTheme;
 }

package/src/theme/colors.ts

@@ -1,21 +1,21 @@
-export type ColorKeysType = 'background' | 'code' | 'link' | 'text' | 'border';
+export type ColorKeysType = "background" | "code" | "link" | "text" | "border";
 export type ColorsPropType = Record<ColorKeysType, string>;
 
-const colors: Record<'light' | 'dark', ColorsPropType> = {
-  light: {
-    background: '#ffffff',
-    code: '#f6f8fa',
-    link: '#58a6ff',
-    text: '#333333',
-    border: '#d0d7de',
-  },
-  dark: {
-    background: '#000000',
-    code: '#161b22',
-    link: '#58a6ff',
-    text: '#ffffff',
-    border: '#30363d',
-  },
+const colors: Record<"light" | "dark", ColorsPropType> = {
+	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/spacing.ts

@@ -1,10 +1,10 @@
-export type SpacingKeysType = 'xs' | 's' | 'm' | 'l';
+export type SpacingKeysType = "xs" | "s" | "m" | "l";
 
 const padding: Record<SpacingKeysType, number> = {
-  xs: 2,
-  s: 4,
-  m: 8,
-  l: 16,
+	xs: 2,
+	s: 4,
+	m: 8,
+	l: 16,
 };
 
 export default padding;

package/src/theme/styles.ts

@@ -1,137 +1,137 @@
-import { ColorSchemeName, StyleSheet } from 'react-native';
-import spacing from './spacing';
-import colors, { type ColorsPropType } from './colors';
-import type { MarkedStyles, UserTheme } from './types';
+import { ColorSchemeName, StyleSheet } from "react-native";
+import spacing from "./spacing";
+import colors, { type ColorsPropType } from "./colors";
+import type { MarkedStyles, UserTheme } from "./types";
 
 const getFontStyles = (mdColors: ColorsPropType) => {
-  return StyleSheet.create({
-    regular: {
-      fontSize: 16,
-      lineHeight: 24,
-      color: mdColors.text,
-    },
-    heading: {
-      fontWeight: '500',
-      color: mdColors.text,
-    },
-  });
+	return StyleSheet.create({
+		regular: {
+			fontSize: 16,
+			lineHeight: 24,
+			color: mdColors.text,
+		},
+		heading: {
+			fontWeight: "500",
+			color: mdColors.text,
+		},
+	});
 };
 
 const getStyles = (
-  userStyles?: MarkedStyles,
-  colorScheme?: ColorSchemeName,
-  userTheme?: UserTheme
+	userStyles?: MarkedStyles,
+	colorScheme?: ColorSchemeName,
+	userTheme?: UserTheme,
 ): MarkedStyles => {
-  const mdColors = { ...colors[colorScheme || 'light'], ...userTheme?.colors };
-  const mdSpacing = { ...spacing, ...userTheme?.spacing };
+	const mdColors = { ...colors[colorScheme || "light"], ...userTheme?.colors };
+	const mdSpacing = { ...spacing, ...userTheme?.spacing };
 
-  const fontStyle = getFontStyles(mdColors);
-  const defaultStyles = StyleSheet.create<MarkedStyles>({
-    container: {
-      backgroundColor: mdColors.background,
-    },
-    em: {
-      ...fontStyle.regular,
-      fontStyle: 'italic',
-    },
-    strong: {
-      ...fontStyle.regular,
-      fontWeight: 'bold',
-    },
-    strikethrough: {
-      ...fontStyle.regular,
-      textDecorationLine: 'line-through',
-      textDecorationStyle: 'solid',
-    },
-    text: {
-      ...fontStyle.regular,
-    },
-    paragraph: {
-      ...fontStyle.regular,
-      paddingVertical: mdSpacing.m,
-    },
-    link: {
-      ...fontStyle.regular,
-      fontStyle: 'italic',
-      color: mdColors.link,
-    },
-    blockquote: {
-      borderLeftColor: mdColors.border,
-      paddingLeft: mdSpacing.l,
-      borderLeftWidth: mdSpacing.s,
-      opacity: 0.8,
-    },
-    h1: {
-      fontSize: 32,
-      lineHeight: 40,
-      fontWeight: 'bold',
-      marginVertical: mdSpacing.m,
-      letterSpacing: 0,
-      paddingBottom: mdSpacing.s,
-      borderBottomColor: mdColors.border,
-      borderBottomWidth: 1,
-    },
-    h2: {
-      ...fontStyle.heading,
-      fontSize: 28,
-      lineHeight: 36,
-      marginVertical: mdSpacing.m,
-      paddingBottom: mdSpacing.s,
-      borderBottomColor: mdColors.border,
-      borderBottomWidth: 1,
-    },
-    h3: {
-      ...fontStyle.heading,
-      fontSize: 24,
-      lineHeight: 32,
-      marginVertical: mdSpacing.s,
-    },
-    h4: {
-      ...fontStyle.heading,
-      fontSize: 22,
-      lineHeight: 28,
-      marginVertical: mdSpacing.s,
-    },
-    h5: {
-      ...fontStyle.regular,
-      ...fontStyle.heading,
-      marginVertical: mdSpacing.xs,
-    },
-    h6: {
-      ...fontStyle.heading,
-      fontSize: 14,
-      lineHeight: 20,
-      marginVertical: mdSpacing.xs,
-    },
-    codespan: {
-      ...fontStyle.regular,
-      fontStyle: 'italic',
-      backgroundColor: mdColors.code,
-      fontWeight: '300',
-    },
-    code: {
-      padding: mdSpacing.l,
-      backgroundColor: mdColors.code,
-      minWidth: '100%',
-    },
-    hr: {
-      borderBottomWidth: 1,
-      borderBottomColor: mdColors.border,
-      marginVertical: mdSpacing.s,
-    },
-    li: {
-      ...fontStyle.regular,
-      flexShrink: 1,
-    },
-    image: {
-      resizeMode: 'cover',
-    },
-  });
+	const fontStyle = getFontStyles(mdColors);
+	const defaultStyles = StyleSheet.create<MarkedStyles>({
+		container: {
+			backgroundColor: mdColors.background,
+		},
+		em: {
+			...fontStyle.regular,
+			fontStyle: "italic",
+		},
+		strong: {
+			...fontStyle.regular,
+			fontWeight: "bold",
+		},
+		strikethrough: {
+			...fontStyle.regular,
+			textDecorationLine: "line-through",
+			textDecorationStyle: "solid",
+		},
+		text: {
+			...fontStyle.regular,
+		},
+		paragraph: {
+			...fontStyle.regular,
+			paddingVertical: mdSpacing.m,
+		},
+		link: {
+			...fontStyle.regular,
+			fontStyle: "italic",
+			color: mdColors.link,
+		},
+		blockquote: {
+			borderLeftColor: mdColors.border,
+			paddingLeft: mdSpacing.l,
+			borderLeftWidth: mdSpacing.s,
+			opacity: 0.8,
+		},
+		h1: {
+			fontSize: 32,
+			lineHeight: 40,
+			fontWeight: "bold",
+			marginVertical: mdSpacing.m,
+			letterSpacing: 0,
+			paddingBottom: mdSpacing.s,
+			borderBottomColor: mdColors.border,
+			borderBottomWidth: 1,
+		},
+		h2: {
+			...fontStyle.heading,
+			fontSize: 28,
+			lineHeight: 36,
+			marginVertical: mdSpacing.m,
+			paddingBottom: mdSpacing.s,
+			borderBottomColor: mdColors.border,
+			borderBottomWidth: 1,
+		},
+		h3: {
+			...fontStyle.heading,
+			fontSize: 24,
+			lineHeight: 32,
+			marginVertical: mdSpacing.s,
+		},
+		h4: {
+			...fontStyle.heading,
+			fontSize: 22,
+			lineHeight: 28,
+			marginVertical: mdSpacing.s,
+		},
+		h5: {
+			...fontStyle.regular,
+			...fontStyle.heading,
+			marginVertical: mdSpacing.xs,
+		},
+		h6: {
+			...fontStyle.heading,
+			fontSize: 14,
+			lineHeight: 20,
+			marginVertical: mdSpacing.xs,
+		},
+		codespan: {
+			...fontStyle.regular,
+			fontStyle: "italic",
+			backgroundColor: mdColors.code,
+			fontWeight: "300",
+		},
+		code: {
+			padding: mdSpacing.l,
+			backgroundColor: mdColors.code,
+			minWidth: "100%",
+		},
+		hr: {
+			borderBottomWidth: 1,
+			borderBottomColor: mdColors.border,
+			marginVertical: mdSpacing.s,
+		},
+		li: {
+			...fontStyle.regular,
+			flexShrink: 1,
+		},
+		image: {
+			resizeMode: "cover",
+		},
+	});
 
-  return {
-    ...defaultStyles,
-    ...userStyles,
-  };
+	return {
+		...defaultStyles,
+		...userStyles,
+	};
 };
 
 export default getStyles;

package/src/theme/types.ts

@@ -1,31 +1,31 @@
-import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
-import type { ColorKeysType } from './colors';
-import type { SpacingKeysType } from './spacing';
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+import type { ColorKeysType } from "./colors";
+import type { SpacingKeysType } from "./spacing";
 
 export interface MarkedStyles {
-  container?: ViewStyle;
-  em?: TextStyle;
-  strong?: TextStyle;
-  strikethrough?: 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;
-  image?: ImageStyle;
+	container?: ViewStyle;
+	em?: TextStyle;
+	strong?: TextStyle;
+	strikethrough?: 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;
+	image?: ImageStyle;
 }
 
 export interface UserTheme {
-  colors?: Record<ColorKeysType, string>;
-  spacing?: Record<SpacingKeysType, number>;
+	colors?: Record<ColorKeysType, string>;
+	spacing?: Record<SpacingKeysType, number>;
 }

package/src/utils/handlers.ts

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

package/src/utils/string.ts

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