Merge remote-tracking branch 'origin/master'

apps/storybook/stories/Markdown.stories.tsx

@@ -109,3 +109,16 @@ export const MarkdownSizes = bind(
 )
 
 MarkdownSizes.storyName = 'Different Markdown Sizes'
+
+const PLAYER_REGEX = '^https://my\\.learnn\\.com/player/.*$'
+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'>[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>
+    </HorizontalStack>
+  </AppShell>,
+)
+
+MarkdownOpenLinks.storyName = 'Different Markdown Opening links'

packages/designn/src/components/Markdown.tsx

@@ -24,19 +24,20 @@ export type MarkdownProps = {
   size?: Size
   /** Markdown Overrides */
   overrides?: MarkdownOverrides
+  /** If the regex matches the link, opens it in the same tab */
+  opensInSameTabRegex?: string
 }
 
-export const Markdown = ({ children, overrides, ...props }: MarkdownProps & SpaceProps & LayoutProps) => {
+export const Markdown = ({ children, overrides, opensInSameTabRegex, ...props }: MarkdownProps & SpaceProps & LayoutProps) => {
   return (
     <StyledMarkdown {...props}>
       <ReactMarkdown
         renderers={{
-          link: props => (
-            <a href={props.node.url} target='_blank'>
-              {props.children}
-            </a>
-          ),
-        }}
+          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>
+          },
+        }} 
         {...overrides?.reactMarkdownProps}
       >
         {children}