add target="_blank" prop to LinkText for safari (#606)

2 files changed, 18 insertions, 2 deletions

diff --git a/src/lib/strings/url-helpers.ts b/src/lib/strings/url-helpers.ts
index 17a49fb26..549587f74 100644
--- a/src/lib/strings/url-helpers.ts
+++ b/src/lib/strings/url-helpers.ts
@@ -66,6 +66,10 @@ export function isBskyAppUrl(url: string): boolean {
   return url.startsWith('https://bsky.app/')
 }
 
+export function isExternalUrl(url: string): boolean {
+  return !isBskyAppUrl(url) && url.startsWith('http')
+}
+
 export function isBskyPostUrl(url: string): boolean {
   if (isBskyAppUrl(url)) {
     try {
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 253f80bdc..f753f01cc 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -1,4 +1,4 @@
-import React, {ComponentProps} from 'react'
+import React, {ComponentProps, useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
 import {
   Linking,
@@ -21,7 +21,7 @@ import {TypographyVariant} from 'lib/ThemeContext'
 import {NavigationProp} from 'lib/routes/types'
 import {router} from '../../../routes'
 import {useStores, RootStoreModel} from 'state/index'
-import {convertBskyAppUrlIfNeeded} from 'lib/strings/url-helpers'
+import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers'
 import {isDesktopWeb} from 'platform/detection'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 
@@ -132,6 +132,16 @@ export const TextLink = observer(function TextLink({
     },
     [store, navigation, href],
   )
+  const hrefAttrs = useMemo(() => {
+    const isExternal = isExternalUrl(href)
+    if (isExternal) {
+      return {
+        target: '_blank',
+        // rel: 'noopener noreferrer',
+      }
+    }
+    return {}
+  }, [href])
 
   return (
     <Text
@@ -142,6 +152,8 @@ export const TextLink = observer(function TextLink({
       lineHeight={lineHeight}
       // @ts-ignore web only -prf
       dataSet={dataSet}
+      // @ts-ignore web only -prf
+      hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
       {...props}>
       {text}
     </Text>