feat: mid click links to open in new tab (#7784)

fix AF-1200

packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '@affine/core/modules/favorite';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
+import { isNewTabTrigger } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import { DocsService, useLiveData, useServices } from '@toeverything/infra';
@@ -81,7 +82,7 @@ export const ExplorerFavorites = () => {
         favoriteService.favoriteList.indexAt('before')
       );
       workbenchService.workbench.openDoc(newDoc.id, {
-        at: e.ctrlKey || e.metaKey ? 'new-tab' : 'active',
+        at: isNewTabTrigger(e) ? 'new-tab' : 'active',
       });
       explorerSection.setCollapsed(false);
     },
@@ -173,6 +174,7 @@ export const ExplorerFavorites = () => {
             data-event-props="$.navigationPanel.favorites.createDoc"
             data-event-args-control="addFavorite"
             onClick={handleCreateNewFavoriteDoc}
+            onAuxClick={handleCreateNewFavoriteDoc}
             size="16"
             tooltip={t[
               'com.affine.rootAppSidebar.explorer.fav-section-add-tooltip'

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -1,5 +1,6 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
+import { isNewTabTrigger } from '@affine/core/utils';
 import { useLiveData, useService } from '@toeverything/infra';
 import { type To } from 'history';
 import { forwardRef, type MouseEvent } from 'react';
@@ -11,7 +12,7 @@ export const WorkbenchLink = forwardRef<
   React.PropsWithChildren<
     {
       to: To;
-      onClick?: (e: MouseEvent) => boolean | void; // return false to stop propagation
+      onClick?: (e: MouseEvent) => void;
     } & React.HTMLProps<HTMLAnchorElement>
   >
 >(function WorkbenchLink({ to, onClick, ...other }, ref) {
@@ -23,26 +24,33 @@ export const WorkbenchLink = forwardRef<
     (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
   const handleClick = useCatchEventCallback(
     async (event: React.MouseEvent<HTMLAnchorElement>) => {
-      event.preventDefault();
-      if (onClick?.(event) === false) {
+      onClick?.(event);
+      if (event.defaultPrevented) {
         return;
       }
-
       const at = (() => {
-        if (event.ctrlKey || event.metaKey) {
+        if (isNewTabTrigger(event)) {
           return event.altKey && appSettings.enableMultiView
             ? 'tail'
             : 'new-tab';
         }
         return 'active';
       })();
-
       workbench.open(to, { at });
+      event.preventDefault();
     },
     [appSettings.enableMultiView, onClick, to, workbench]
   );
 
   // eslint suspicious runtime error
   // eslint-disable-next-line react/no-danger-with-children
-  return <a {...other} ref={ref} href={link} onClick={handleClick} />;
+  return (
+    <a
+      {...other}
+      ref={ref}
+      href={link}
+      onClick={handleClick}
+      onAuxClick={handleClick}
+    />
+  );
 });