feat(major): support relative links by exposing baseUrl prop

gmsgowtham · Oct 29, 2022 · 053cf11 · 053cf11
1 parent 1aba41b
commit 053cf11
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,7 @@ export default ExampleComponent;
 | flatListProps | Props for customizing the underlying FlatList used                                                                                           | `Omit<FlatListProps<ReactNode>, 'data' \| 'renderItem' \| 'horizontal'>`<br><br><br>(`'data'`, `'renderItem'`, and `'horizontal'` props are omitted and cannot be overridden.) | true      |
 | styles        | Styles for parsed components                                                                                                                 | [MarkedStyles](https://github.com/gmsgowtham/react-native-marked/blob/4ef070931b7d309a7490c41e45129e12525d12d9/src/theme/types.ts#L3)                                          | true      |
 | theme         | Props for customizing colors and spacing for all components,and it will get overridden with custom component style applied via 'styles' prop | [UserTheme](https://github.com/gmsgowtham/react-native-marked/blob/6eba804c617099ffb574aa97c57a71ea3e0184fb/src/theme/types.ts#L28)                                            | true      |
+| baseUrl       | A prefix url for any relative link                                                                                                           | string                                                                                                                                                                         | true      |
 
 ## Supported elements
 

diff --git a/src/lib/Markdown.tsx b/src/lib/Markdown.tsx
@@ -9,6 +9,7 @@ const Markdown = ({
   value,
   flatListProps,
   theme,
+  baseUrl,
   styles: userStyles,
 }: MarkdownProps) => {
   const colorScheme = useColorScheme();
@@ -18,16 +19,10 @@ const Markdown = ({
   );
 
   const rnElements = useMemo(() => {
-    const parser = new Parser({
-      styles,
-    });
-    const tokens = marked.lexer(value, {
-      mangle: false,
-      gfm: true,
-    });
-
+    const parser = new Parser({ styles, baseUrl });
+    const tokens = marked.lexer(value, { mangle: false, gfm: true });
     return parser.parse(tokens);
-  }, [value, styles]);
+  }, [value, styles, baseUrl]);
 
   const renderItem = useCallback(({ item }: { item: ReactNode }) => {
     return <>{item}</>;

diff --git a/src/lib/Parser.tsx b/src/lib/Parser.tsx
@@ -9,8 +9,10 @@ class Parser {
   private renderer;
   private styles: MarkedStyles;
   private headingStylesMap: Record<number, TextStyle | undefined>;
+  private baseUrl: string;
   constructor(options: ParserOptions) {
     this.styles = { ...options.styles };
+    this.baseUrl = options.baseUrl ?? '';
     this.renderer = new Renderer();
     this.headingStylesMap = {
       1: this.styles.h1,
@@ -115,9 +117,10 @@ class Parser {
             ...styles,
             ...this.styles.link, // To override color property
           };
+          const href = this.getAbsLink(token.href);
           return this.renderer.getTextLinkNode(
             this.parseInline(token.tokens, linkStyle),
-            token.href,
+            href,
             linkStyle
           );
         }
@@ -220,9 +223,10 @@ class Parser {
           siblingNodes.push(this.parseInline([t]));
         } else if (t.type === 'link') {
           const imageToken = t.tokens[0] as marked.Tokens.Image;
+          const href = this.getAbsLink(t.href);
           siblingNodes.push(
             this.renderer.getImageLinkNode(
-              t.href,
+              href,
               imageToken.href,
               imageToken.text || imageToken.title,
               this.styles.image
@@ -245,6 +249,17 @@ class Parser {
 
     return siblingNodes;
   };
+
+  private getAbsLink = (href: string): string => {
+    if (href.startsWith('http') || href.startsWith('https')) {
+      return href;
+    }
+    if (href.startsWith('/')) {
+      return `${this.baseUrl}${href}`;
+    }
+
+    return `${this.baseUrl}/${href}`;
+  };
 }
 
 export default Parser;
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -4,14 +4,14 @@ import type { MarkedStyles, UserTheme } from './../theme/types';
 
 export interface ParserOptions {
   styles?: MarkedStyles;
+  baseUrl?: string;
 }
 
-export interface MarkdownProps {
+export interface MarkdownProps extends ParserOptions {
   value: string;
   flatListProps?: Omit<
     FlatListProps<ReactNode>,
     'data' | 'renderItem' | 'horizontal'
   >;
-  styles?: MarkedStyles;
   theme?: UserTheme;
 }