Merge pull request #44 from learnn-com/markdown-generalize

Generalize markdown component
learnn-com · Jan 23, 2025 · 4980edf · 4980edf
2 parents 1c8822a + 80a9495
commit 4980edf
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 8 deletions.
diff --git a/apps/storybook/stories/Markdown.stories.tsx b/apps/storybook/stories/Markdown.stories.tsx
@@ -111,12 +111,24 @@ export const MarkdownSizes = bind(
 MarkdownSizes.storyName = 'Different Markdown Sizes'
 
 const PLAYER_REGEX = '^https://my\\.learnn\\.com/player/.*$'
+const COURSE_REGEX = '^https://my\\.learnn\\.com/corso/.*$'
+
+const parseUrl = (link: string): string => {
+  if (link.startsWith('learnn://')) {
+    return link.replace('learnn://', 'https://my.learnn.com/')
+  }
+  return link
+}
+
 export const MarkdownOpenLinks = bind(
   <AppShell theme={defaultTheme}>
     <HorizontalStack justifyContent='space-evenly'>
-      <Markdown size='sm' opensInSameTabRegex={PLAYER_REGEX}>[Open in the same tab](https://my.learnn.com/player/7164/?t=14) </Markdown>
+      <Markdown size='sm' opensInSameTabRegexes={[PLAYER_REGEX, COURSE_REGEX]}>[Open in the same tab](https://my.learnn.com/player/7164/?t=14) </Markdown>
       <Markdown size='sm'>[Open in a new tab](https://my.learnn.com/player/7164/?t=14)</Markdown>
-      <Markdown size='sm' opensInSameTabRegex={PLAYER_REGEX}>[Open in the same tab](https://my.learnn.com/player/7164)</Markdown>
+      <Markdown size='sm' opensInSameTabRegexes={[PLAYER_REGEX, COURSE_REGEX]}>[Open in the same tab](https://my.learnn.com/corso/1)</Markdown>
+    </HorizontalStack>
+    <HorizontalStack justifyContent='space-evenly'>
+      <Markdown size='sm' opensInSameTabRegexes={[PLAYER_REGEX, COURSE_REGEX]} parseUrlsMethod={parseUrl} >[Modify link and open in same tab](learnn://player/7164/?t=14) </Markdown>
     </HorizontalStack>
   </AppShell>,
 )

diff --git a/packages/designn/src/components/Markdown.tsx b/packages/designn/src/components/Markdown.tsx
@@ -24,18 +24,54 @@ export type MarkdownProps = {
   size?: Size
   /** Markdown Overrides */
   overrides?: MarkdownOverrides
-  /** If the regex matches the link, opens it in the same tab */
-  opensInSameTabRegex?: string
+  /** If the regex matches one of the links, opens it in the same tab */
+  opensInSameTabRegexes?: string[]
+  /** Optionally parse links and modify the url */
+  parseUrlsMethod?: (url: string) => string
 }
 
-export const Markdown = ({ children, overrides, opensInSameTabRegex, ...props }: MarkdownProps & SpaceProps & LayoutProps) => {
+type LinkProps = {
+  children: React.ReactNode[];
+  href: string;                 
+  node: {
+    type: string;
+    title: string | null;
+    url: string;
+    children: React.ReactNode[]; 
+    position?: object;  
+  };                   
+}
+
+export const Markdown = ({ children, overrides, opensInSameTabRegexes, parseUrlsMethod, ...props }: MarkdownProps & SpaceProps & LayoutProps) => {
   return (
     <StyledMarkdown {...props}>
       <ReactMarkdown
         renderers={{
-          link: (props: any) => {
-            const target = opensInSameTabRegex && new RegExp(opensInSameTabRegex).test(props.node.url) ? '' : '_blank'
-            return <a href={props.node.url} target={target}>{props.children}</a>
+          link: (props: LinkProps) => {
+            const url = props.node.url
+            const openInSameTab = opensInSameTabRegexes?.some(regex => new RegExp(regex).test(url))
+            const parsedUrl = parseUrlsMethod?.(url) 
+            if (openInSameTab) {
+              return (
+                <a href={url}>
+                  {props.children}
+                </a>
+              )
+            }
+            else if (parsedUrl) {
+              return (
+                <a href={parsedUrl}>
+                  {props.children}
+                </a>
+              )
+            }
+            else {
+              return (
+                <a href={url} target='_blank'>
+                  {props.children}
+                </a>
+              )
+            }
           },
         }} 
         {...overrides?.reactMarkdownProps}