react-native-marked 8.2.0 → 8.3.1

package/src/theme/colors.ts

@@ -1,31 +1,31 @@
-import type { ColorValue } from "react-native";
-
-export interface ColorsPropType {
-	code: ColorValue;
-	link: ColorValue;
-	text: ColorValue;
-	border: ColorValue;
-	/**
-	 * @deprecated Use flatlist containerStyle or style prop for setting background color
-	 */
-	background?: ColorValue;
-}
-
-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;
+import type { ColorValue } from "react-native";
+
+export interface ColorsPropType {
+	code: ColorValue;
+	link: ColorValue;
+	text: ColorValue;
+	border: ColorValue;
+	/**
+	 * @deprecated Use flatlist containerStyle or style prop for setting background color
+	 */
+	background?: ColorValue;
+}
+
+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";
-
-const padding: Record<SpacingKeysType, number> = {
-	xs: 2,
-	s: 4,
-	m: 8,
-	l: 16,
-};
-
-export default padding;
+export type SpacingKeysType = "xs" | "s" | "m" | "l";
+
+const padding: Record<SpacingKeysType, number> = {
+	xs: 2,
+	s: 4,
+	m: 8,
+	l: 16,
+};
+
+export default padding;

package/src/theme/styles.ts

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

package/src/theme/types.ts

@@ -1,33 +1,34 @@
-import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
-import type { ColorsPropType } from "./colors";
-import type { SpacingKeysType } from "./spacing";
-
-export interface MarkedStyles {
-	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;
-	table?: ViewStyle;
-	tableRow?: ViewStyle;
-	tableCell?: ViewStyle;
-}
-
-export interface UserTheme {
-	colors?: ColorsPropType;
-	spacing?: Record<SpacingKeysType, number>;
-}
+import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
+import type { ColorsPropType } from "./colors";
+import type { SpacingKeysType } from "./spacing";
+
+export interface MarkedStyles {
+	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;
+	codeText?: TextStyle;
+	hr?: ViewStyle;
+	list?: ViewStyle;
+	li?: TextStyle;
+	image?: ImageStyle;
+	table?: ViewStyle;
+	tableRow?: ViewStyle;
+	tableCell?: ViewStyle;
+}
+
+export interface UserTheme {
+	colors?: ColorsPropType;
+	spacing?: Record<SpacingKeysType, number>;
+}

package/src/utils/handlers.ts

@@ -1,9 +1,9 @@
-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);
-		});
-};
+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);
+		});
+};

package/src/utils/svg.ts

@@ -1,14 +1,14 @@
-import type { ElementNode } from "svg-parser";
-import { parse } from "svg-parser";
-
-export const getSvgDimensions = (svg: string) => {
-	const parsed = parse(svg);
-
-	const rootChild = parsed.children[0] as ElementNode;
-
-	return {
-		width: Number.parseInt(String(rootChild.properties?.width ?? "0"), 10),
-		height: Number.parseInt(String(rootChild.properties?.height ?? "0"), 10),
-		viewBox: String(rootChild.properties?.viewBox ?? ""),
-	};
-};
+import type { ElementNode } from "svg-parser";
+import { parse } from "svg-parser";
+
+export const getSvgDimensions = (svg: string) => {
+	const parsed = parse(svg);
+
+	const rootChild = parsed.children[0] as ElementNode;
+
+	return {
+		width: Number.parseInt(String(rootChild.properties?.width ?? "0"), 10),
+		height: Number.parseInt(String(rootChild.properties?.height ?? "0"), 10),
+		viewBox: String(rootChild.properties?.viewBox ?? ""),
+	};
+};

package/src/utils/table.ts

@@ -1,29 +1,29 @@
-import type { TextStyle } from "react-native";
-import type { TableColAlignment } from "../lib/types";
-
-export const getTableWidthArr = (totalCols: number, windowWidth: number) => {
-	if (totalCols < 1) {
-		return [];
-	}
-
-	return Array(totalCols)
-		.fill(0)
-		.map(() => {
-			return Math.floor(windowWidth * (1.3 / 3));
-		});
-};
-
-export const getTableColAlignmentStyle = (
-	alignment?: TableColAlignment,
-): TextStyle => {
-	switch (alignment) {
-		case "center":
-			return { textAlign: "center" };
-		case "left":
-			return { textAlign: "left" };
-		case "right":
-			return { textAlign: "right" };
-		default:
-			return { textAlign: "left" };
-	}
-};
+import type { TextStyle } from "react-native";
+import type { TableColAlignment } from "../lib/types";
+
+export const getTableWidthArr = (totalCols: number, windowWidth: number) => {
+	if (totalCols < 1) {
+		return [];
+	}
+
+	return Array(totalCols)
+		.fill(0)
+		.map(() => {
+			return Math.floor(windowWidth * (1.3 / 3));
+		});
+};
+
+export const getTableColAlignmentStyle = (
+	alignment?: TableColAlignment,
+): TextStyle => {
+	switch (alignment) {
+		case "center":
+			return { textAlign: "center" };
+		case "left":
+			return { textAlign: "left" };
+		case "right":
+			return { textAlign: "right" };
+		default:
+			return { textAlign: "left" };
+	}
+};