🐛 Handle middle mouse click on feed list items (#1469)

* 🐛 Handle middle mouse click on feed list items

* ♻️ Refactor the event listener and turn it into a dedicated hook for web

* 🧹 Cleanup unnecessary Link changes

* Fix import

* Create native version of useAuxClick

---------

Co-authored-by: Paul Frazee <[email protected]>

src/lib/hooks/useAuxClick.ts

@@ -0,0 +1,2 @@
+// does nothing in native
+export const useAuxClick = () => {}

src/lib/hooks/useAuxClick.web.ts

@@ -0,0 +1,43 @@
+import {useEffect} from 'react'
+
+// This is the handler for the middle mouse button click on the feed.
+// Normally, we would do this via `onAuxClick` handler on each link element
+// However, that handler is not supported on react-native-web and there are some
+// discrepancies between various browsers (i.e: safari doesn't trigger it and routes through click event)
+// So, this temporary alternative is meant to bridge the gap in an efficient way until the support improves.
+export const useAuxClick = () => {
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  useEffect(() => {
+    // On the web, it should always be there but in case it gets accidentally included in native builds
+    const wrapperEl = document?.body
+
+    // Safari already handles auxclick event as click+metaKey so we need to avoid doing this there in case it becomes recursive
+    if (wrapperEl && !isSafari) {
+      const handleAuxClick = (e: MouseEvent & {target: HTMLElement}) => {
+        // Only handle the middle mouse button click
+        // Only handle if the clicked element itself or one of its ancestors is a link
+        if (
+          e.button !== 1 ||
+          e.target.closest('a') ||
+          e.target.tagName === 'A'
+        ) {
+          return
+        }
+
+        // On the original element, trigger a click event with metaKey set to true so that it triggers
+        // the browser's default behavior of opening the link in a new tab
+        e.target.dispatchEvent(
+          new MouseEvent('click', {metaKey: true, bubbles: true}),
+        )
+      }
+
+      // @ts-ignore For web only
+      wrapperEl.addEventListener('auxclick', handleAuxClick)
+
+      return () => {
+        // @ts-ignore For web only
+        wrapperEl?.removeEventListener('auxclick', handleAuxClick)
+      }
+    }
+  }, [isSafari])
+}

src/view/com/util/Link.tsx

@@ -59,6 +59,7 @@ export const Link = observer(function Link({
 }: Props) {
   const store = useStores()
   const navigation = useNavigation<NavigationProp>()
+  const anchorHref = asAnchor ? sanitizeUrl(href) : undefined
 
   const onPress = React.useCallback(
     (e?: Event) => {
@@ -96,7 +97,7 @@ export const Link = observer(function Link({
         accessibilityRole="link"
         {...props}>
         {/* @ts-ignore web only -prf */}
-        <View style={style} href={asAnchor ? sanitizeUrl(href) : undefined}>
+        <View style={style} href={anchorHref}>
           {children ? children : <Text>{title || 'link'}</Text>}
         </View>
       </TouchableWithoutFeedback>
@@ -123,7 +124,7 @@ export const Link = observer(function Link({
       accessible={accessible}
       accessibilityRole="link"
       // @ts-ignore web only -prf
-      href={asAnchor ? sanitizeUrl(href) : undefined}
+      href={anchorHref}
       {...props}>
       {children ? children : <Text>{title || 'link'}</Text>}
     </Com>

src/view/shell/index.web.tsx

@@ -16,11 +16,13 @@ import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
+import {useAuxClick} from 'lib/hooks/useAuxClick'
 
 const ShellInner = observer(function ShellInnerImpl() {
   const store = useStores()
   const {isDesktop, isMobile} = useWebMediaQueries()
   const navigator = useNavigation<NavigationProp>()
+  useAuxClick()
 
   useEffect(() => {
     navigator.addListener('state', () => {