react-native-marked 1.4.3 → 1.6.0

package/src/theme/styles.ts

@@ -1,30 +1,34 @@
 import { ColorSchemeName, StyleSheet } from 'react-native';
-import { getTheme } from './theme';
-import type { MarkedStyles, Theme } from './types';
+import spacing from './spacing';
+import colors, { type ColorsPropType } from './colors';
+import type { MarkedStyles, UserTheme } from './types';
 
-const getFontStyles = (theme: Theme) => {
+const getFontStyles = (mdColors: ColorsPropType) => {
   return StyleSheet.create({
     regular: {
       fontSize: 16,
       lineHeight: 24,
-      color: theme.colors.text,
+      color: mdColors.text,
     },
     heading: {
       fontWeight: '500',
-      color: theme.colors.text,
+      color: mdColors.text,
     },
   });
 };
 
 const getStyles = (
   userStyles?: MarkedStyles,
-  colorScheme?: ColorSchemeName
+  colorScheme?: ColorSchemeName,
+  userTheme?: UserTheme
 ): MarkedStyles => {
-  const theme = getTheme(colorScheme || 'light');
-  const fontStyle = getFontStyles(theme);
+  const mdColors = { ...colors[colorScheme || 'light'], ...userTheme?.colors };
+  const mdSpacing = { ...spacing, ...userTheme?.spacing };
+
+  const fontStyle = getFontStyles(mdColors);
   const defaultStyles = StyleSheet.create<MarkedStyles>({
     container: {
-      backgroundColor: theme.colors.background,
+      backgroundColor: mdColors.background,
     },
     em: {
       ...fontStyle.regular,
@@ -44,76 +48,76 @@ const getStyles = (
     },
     paragraph: {
       ...fontStyle.regular,
-      paddingVertical: 8,
+      paddingVertical: mdSpacing.m,
     },
     link: {
       ...fontStyle.regular,
       fontStyle: 'italic',
-      color: theme.colors.link,
+      color: mdColors.link,
     },
     blockquote: {
-      borderLeftColor: theme.colors.border,
-      paddingLeft: 16,
-      borderLeftWidth: 5,
+      borderLeftColor: mdColors.border,
+      paddingLeft: mdSpacing.l,
+      borderLeftWidth: mdSpacing.s,
       opacity: 0.8,
     },
     h1: {
       fontSize: 32,
       lineHeight: 40,
       fontWeight: 'bold',
-      marginVertical: 8,
+      marginVertical: mdSpacing.m,
       letterSpacing: 0,
-      paddingBottom: 4,
-      borderBottomColor: theme.colors.border,
+      paddingBottom: mdSpacing.s,
+      borderBottomColor: mdColors.border,
       borderBottomWidth: 1,
     },
     h2: {
       ...fontStyle.heading,
       fontSize: 28,
       lineHeight: 36,
-      marginVertical: 8,
-      paddingBottom: 4,
-      borderBottomColor: theme.colors.border,
+      marginVertical: mdSpacing.m,
+      paddingBottom: mdSpacing.s,
+      borderBottomColor: mdColors.border,
       borderBottomWidth: 1,
     },
     h3: {
       ...fontStyle.heading,
       fontSize: 24,
       lineHeight: 32,
-      marginVertical: 4,
+      marginVertical: mdSpacing.s,
     },
     h4: {
       ...fontStyle.heading,
       fontSize: 22,
       lineHeight: 28,
-      marginVertical: 4,
+      marginVertical: mdSpacing.s,
     },
     h5: {
       ...fontStyle.regular,
       ...fontStyle.heading,
-      marginVertical: 2,
+      marginVertical: mdSpacing.xs,
     },
     h6: {
       ...fontStyle.heading,
       fontSize: 14,
       lineHeight: 20,
-      marginVertical: 2,
+      marginVertical: mdSpacing.xs,
     },
     codespan: {
       ...fontStyle.regular,
       fontStyle: 'italic',
-      backgroundColor: theme.colors.code,
+      backgroundColor: mdColors.code,
       fontWeight: '300',
     },
     code: {
-      padding: 16,
-      backgroundColor: theme.colors.code,
+      padding: mdSpacing.l,
+      backgroundColor: mdColors.code,
       minWidth: '100%',
     },
     hr: {
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.border,
-      marginVertical: 4,
+      borderBottomColor: mdColors.border,
+      marginVertical: mdSpacing.s,
     },
     li: {
       ...fontStyle.regular,

package/src/theme/types.ts

@@ -1,4 +1,6 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import type { ColorKeysType } from './colors';
+import type { SpacingKeysType } from './spacing';
 
 export interface MarkedStyles {
   container?: ViewStyle;
@@ -23,8 +25,7 @@ export interface MarkedStyles {
   image?: ImageStyle;
 }
 
-export type ColorKeys = 'background' | 'code' | 'link' | 'text' | 'border';
-
-export interface Theme {
-  colors: Record<ColorKeys, string>;
+export interface UserTheme {
+  colors?: Record<ColorKeysType, string>;
+  spacing?: Record<SpacingKeysType, number>;
 }

package/src/utils/url.ts

@@ -0,0 +1,19 @@
+export const getValidURL = (prefix: string, path: string) => {
+  // remove trailing slash from prefix
+  if (prefix.endsWith('/')) {
+    prefix = prefix.slice(0, -1);
+  }
+
+  // path is valid url
+  if (path.startsWith('https') || path.startsWith('http')) {
+    return path;
+  }
+
+  // absolute path
+  if (path.startsWith('/')) {
+    return `${prefix}${path}`;
+  }
+
+  // relative path
+  return `${prefix}/${path}`;
+};

package/dist/commonjs/theme/theme.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTheme = void 0;
-
-var _colors = _interopRequireDefault(require("./colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const getTheme = theme => {
-  return {
-    colors: _colors.default[theme || 'light']
-  };
-};
-
-exports.getTheme = getTheme;
-//# sourceMappingURL=theme.js.map

package/dist/commonjs/theme/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getTheme","theme","colors"],"sourceRoot":"../../src","sources":["theme.ts"],"mappings":";;;;;;;AACA;;;;AAGO,MAAMA,QAAQ,GAAIC,KAAD,IAAmC;EACzD,OAAO;IACLC,MAAM,EAAEA,eAAA,CAAOD,KAAK,IAAI,OAAhB;EADH,CAAP;AAGD,CAJM"}

package/dist/module/theme/theme.js

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["colors","getTheme","theme"],"sourceRoot":"../../src","sources":["theme.ts"],"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/typescript/theme/theme.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,QAAQ,UAAW,eAAe,KAAG,KAIjD,CAAC"}

package/src/theme/theme.ts

@@ -1,9 +0,0 @@
-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'],
-  };
-};