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

fix AF-1200
2026-02-12 04:18:54 +00:00 · 2024-08-08 09:43:35 +00:00
parent fd6e198295
commit 7fca13076a
22 changed files with 163 additions and 78 deletions
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -106,7 +106,6 @@ export function AffinePageReference({
        e.preventDefault();
        e.stopPropagation();
        peekView.open(ref.current).catch(console.error);
-        return false; // means this click is handled
      }
      if (isInPeekView) {
        peekView.close();
--- a/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx
@@ -29,6 +29,7 @@ export function AddPageButton({
      style={style}
      className={clsx([styles.root, className])}
      onClick={onClick}
+      onAuxClick={onClick}
    >
      <PlusIcon />
    </IconButton>
--- a/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/collections/collection-list-item.tsx
@@ -1,13 +1,14 @@
 import { Checkbox, useDraggable } from '@affine/component';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
+import { stopPropagation } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import type { ForwardedRef, PropsWithChildren } from 'react';
 import { forwardRef, useCallback, useMemo } from 'react';

 import { selectionStateAtom, useAtom } from '../scoped-atoms';
 import type { CollectionListItemProps, PageListItemProps } from '../types';
-import { ColWrapper, stopPropagation } from '../utils';
+import { ColWrapper } from '../utils';
 import * as styles from './collection-list-item.css';

 const ListTitleCell = ({
--- a/packages/frontend/core/src/components/page-list/components/new-page-button.tsx
+++ b/packages/frontend/core/src/components/page-list/components/new-page-button.tsx
@@ -35,6 +35,7 @@ export const CreateNewPagePopup = ({
        desc={t['com.affine.write_with_a_blank_page']()}
        right={<PageIcon width={20} height={20} />}
        onClick={createNewPage}
+        onAuxClick={createNewPage}
        data-testid="new-page-button-in-all-page"
      />
      <BlockCard
@@ -42,6 +43,7 @@ export const CreateNewPagePopup = ({
        desc={t['com.affine.draw_with_a_blank_whiteboard']()}
        right={<EdgelessIcon width={20} height={20} />}
        onClick={createNewEdgeless}
+        onAuxClick={createNewEdgeless}
        data-testid="new-edgeless-button-in-all-page"
      />
      {importFile ? (
@@ -117,6 +119,7 @@ export const NewPageButton = ({
      <DropdownButton
        size={size}
        onClick={handleCreateNewPage}
+        onAuxClick={handleCreateNewPage}
        onClickDropDown={useCallback(() => setOpen(open => !open), [])}
      >
        {children}
--- a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
@@ -10,6 +10,7 @@ import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { track } from '@affine/core/mixpanel';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
+import { isNewTabTrigger } from '@affine/core/utils';
 import type { Collection } from '@affine/env/filter';
 import { useI18n } from '@affine/i18n';
 import {
@@ -66,12 +67,9 @@ export const PageListHeader = () => {
        size="small"
        testId="new-page-button-trigger"
        onCreateEdgeless={e =>
-          // todo: abstract this for ctrl check
-          createEdgeless(e?.metaKey || e?.ctrlKey ? 'new-tab' : true)
-        }
-        onCreatePage={e =>
-          createPage(e?.metaKey || e?.ctrlKey ? 'new-tab' : true)
+          createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
        }
+        onCreatePage={e => createPage(isNewTabTrigger(e) ? 'new-tab' : true)}
        onImportFile={onImportFile}
      >
        <div className={styles.buttonText}>{t['New Page']()}</div>
--- a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -1,6 +1,7 @@
 import { Checkbox, Tooltip, useDraggable } from '@affine/component';
 import { TagService } from '@affine/core/modules/tag';
 import type { AffineDNDData } from '@affine/core/types/dnd';
+import { stopPropagation } from '@affine/core/utils';
 import { i18nTime } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { ForwardedRef, PropsWithChildren } from 'react';
@@ -15,7 +16,7 @@ import {
 } from '../scoped-atoms';
 import type { PageListItemProps } from '../types';
 import { useAllDocDisplayProperties } from '../use-all-doc-display-properties';
-import { ColWrapper, stopPropagation } from '../utils';
+import { ColWrapper } from '../utils';
 import * as styles from './page-list-item.css';
 import { PageTags } from './page-tags';

@@ -310,18 +311,18 @@ const PageListItemWrapper = forwardRef(
        if (!selectionState.selectable) {
          return;
        }
-        stopPropagation(e);
+        e.stopPropagation();
        const currentIndex = pageIds.indexOf(pageId);

        if (e.shiftKey) {
+          e.preventDefault();
          if (!selectionState.selectionActive) {
            setSelectionActive(true);
            setAnchorIndex(currentIndex);
            onClick?.();
-            return false;
+          } else {
+            handleShiftClick(currentIndex);
          }
-          handleShiftClick(currentIndex);
-          return false;
        } else {
          setAnchorIndex(undefined);
          setRangeIds([]);
--- a/packages/frontend/core/src/components/page-list/docs/page-tags.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-tags.tsx
@@ -1,13 +1,13 @@
 import { Menu } from '@affine/component';
 import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import type { Tag } from '@affine/core/modules/tag';
+import { stopPropagation } from '@affine/core/utils';
 import { CloseIcon, MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import { LiveData, useLiveData } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useMemo } from 'react';

-import { stopPropagation } from '../utils';
 import * as styles from './page-tags.css';

 export interface PageTagsProps {
--- a/packages/frontend/core/src/components/page-list/operation-cell.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-cell.tsx
@@ -9,6 +9,7 @@ import {
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { track } from '@affine/core/mixpanel';
 import { FavoriteService } from '@affine/core/modules/favorite';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
@@ -277,18 +278,30 @@ export const TrashOperationCell = ({
  const t = useI18n();
  const { openConfirmModal } = useConfirmModal();

-  const onConfirmPermanentlyDelete = useCallback(() => {
-    openConfirmModal({
-      title: `${t['com.affine.trashOperation.deletePermanently']()}?`,
-      description: t['com.affine.trashOperation.deleteDescription'](),
-      cancelText: t['Cancel'](),
-      confirmText: t['com.affine.trashOperation.delete'](),
-      confirmButtonOptions: {
-        variant: 'error',
-      },
-      onConfirm: onPermanentlyDeletePage,
-    });
-  }, [onPermanentlyDeletePage, openConfirmModal, t]);
+  const onConfirmPermanentlyDelete = useCatchEventCallback(
+    e => {
+      e.preventDefault();
+      openConfirmModal({
+        title: `${t['com.affine.trashOperation.deletePermanently']()}?`,
+        description: t['com.affine.trashOperation.deleteDescription'](),
+        cancelText: t['Cancel'](),
+        confirmText: t['com.affine.trashOperation.delete'](),
+        confirmButtonOptions: {
+          variant: 'error',
+        },
+        onConfirm: onPermanentlyDeletePage,
+      });
+    },
+    [onPermanentlyDeletePage, openConfirmModal, t]
+  );
+
+  const handleRestorePage = useCatchEventCallback(
+    e => {
+      e.preventDefault();
+      onRestorePage();
+    },
+    [onRestorePage]
+  );

  return (
    <ColWrapper flex={1}>
@@ -297,9 +310,7 @@ export const TrashOperationCell = ({
        tooltipOptions={tooltipSideTop}
        data-testid="restore-page-button"
        style={{ marginRight: '12px' }}
-        onClick={() => {
-          onRestorePage();
-        }}
+        onClick={handleRestorePage}
        size="20"
      >
        <ResetIcon />
--- a/packages/frontend/core/src/components/page-list/page-header.tsx
+++ b/packages/frontend/core/src/components/page-list/page-header.tsx
@@ -1,5 +1,6 @@
 import type { CheckboxProps } from '@affine/component';
 import { Checkbox } from '@affine/component';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { useI18n } from '@affine/i18n';
 import { MultiSelectIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
@@ -19,7 +20,6 @@ import {
  useAtomValue,
 } from './scoped-atoms';
 import type { HeaderColDef, ListItem } from './types';
-import { stopPropagation } from './utils';

 // the checkbox on the header has three states:
 // when list selectable = true, the checkbox will be presented
@@ -28,23 +28,19 @@ import { stopPropagation } from './utils';
 const ListHeaderCheckbox = () => {
  const [selectionState, setSelectionState] = useAtom(selectionStateAtom);
  const items = useAtomValue(itemsAtom);
-  const onActivateSelection: MouseEventHandler = useCallback(
-    e => {
-      stopPropagation(e);
-      setSelectionState(true);
-    },
-    [setSelectionState]
-  );
+  const onActivateSelection: MouseEventHandler = useCatchEventCallback(() => {
+    setSelectionState(true);
+  }, [setSelectionState]);
  const handlers = useAtomValue(listHandlersAtom);
-  const onChange: NonNullable<CheckboxProps['onChange']> = useCallback(
-    (e, checked) => {
-      stopPropagation(e);
-      handlers.onSelectedIdsChange?.(
-        checked ? (items ?? []).map(i => i.id) : []
-      );
-    },
-    [handlers, items]
-  );
+  const onChange: NonNullable<CheckboxProps['onChange']> =
+    useCatchEventCallback(
+      (_e, checked) => {
+        handlers.onSelectedIdsChange?.(
+          checked ? (items ?? []).map(i => i.id) : []
+        );
+      },
+      [handlers, items]
+    );

  if (!selectionState.selectable) {
    return null;
--- a/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
+++ b/packages/frontend/core/src/components/page-list/tags/tag-list-item.tsx
@@ -1,13 +1,14 @@
 import { Checkbox, useDraggable } from '@affine/component';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import type { AffineDNDData } from '@affine/core/types/dnd';
+import { stopPropagation } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import type { ForwardedRef, PropsWithChildren } from 'react';
 import { forwardRef, useCallback, useMemo } from 'react';

 import { selectionStateAtom, useAtom } from '../scoped-atoms';
 import type { TagListItemProps } from '../types';
-import { ColWrapper, stopPropagation } from '../utils';
+import { ColWrapper } from '../utils';
 import * as styles from './tag-list-item.css';

 const TagListTitleCell = ({
--- a/packages/frontend/core/src/components/page-list/utils.tsx
+++ b/packages/frontend/core/src/components/page-list/utils.tsx
@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import type { BaseSyntheticEvent } from 'react';
 import { forwardRef } from 'react';

 import * as styles from './list.css';
@@ -58,14 +57,6 @@ export const betweenDaysAgo = (
  return !withinDaysAgo(date, days0) && withinDaysAgo(date, days1);
 };

-export function stopPropagation(event: BaseSyntheticEvent) {
-  event.stopPropagation();
-  event.preventDefault();
-}
-export function stopPropagationWithoutPrevent(event: BaseSyntheticEvent) {
-  event.stopPropagation();
-}
-
 // credit: https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/shallowEqual.js
 export function shallowEqual(objA: any, objB: any) {
  if (Object.is(objA, objB)) {
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -9,6 +9,7 @@ import {
 } from '@affine/core/modules/explorer';
 import { ExplorerTags } from '@affine/core/modules/explorer/views/sections/tags';
 import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/services/cmdk';
+import { isNewTabTrigger } from '@affine/core/utils';
 import { events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
 import { AllDocsIcon, SettingsIcon } from '@blocksuite/icons/rc';
@@ -85,9 +86,7 @@ export const RootAppSidebar = (): ReactElement => {

  const onClickNewPage = useAsyncCallback(
    async (e?: MouseEvent) => {
-      const page = pageHelper.createPage(
-        e?.ctrlKey || e?.metaKey ? 'new-tab' : true
-      );
+      const page = pageHelper.createPage(isNewTabTrigger(e) ? 'new-tab' : true);
      page.load();
      track.$.navigationPanel.$.createDoc();
    },
--- a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
@@ -1,13 +1,15 @@
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import {
  useJournalInfoHelper,
  useJournalRouteHelper,
 } from '@affine/core/hooks/use-journal';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import type { DocCollection } from '@affine/core/shared';
+import { isNewTabTrigger } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { TodayIcon, TomorrowIcon, YesterdayIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { type MouseEvent, useCallback } from 'react';
+import { type MouseEvent } from 'react';

 import { MenuItem } from '../app-sidebar';

@@ -27,9 +29,9 @@ export const AppSidebarJournalButton = ({
    location.pathname.split('/')[1]
  );

-  const handleOpenToday = useCallback(
+  const handleOpenToday = useCatchEventCallback(
    (e: MouseEvent) => {
-      openToday(e.ctrlKey || e.metaKey);
+      openToday(isNewTabTrigger(e));
    },
    [openToday]
  );
@@ -48,6 +50,7 @@ export const AppSidebarJournalButton = ({
      data-testid="slider-bar-journals-button"
      active={isJournal}
      onClick={handleOpenToday}
+      onAuxClick={handleOpenToday}
      icon={<Icon />}
    >
      {t['com.affine.journal.app-sidebar-title']()}
--- a/packages/frontend/core/src/hooks/use-catch-event-hook.ts
+++ b/packages/frontend/core/src/hooks/use-catch-event-hook.ts
@@ -2,14 +2,17 @@ import { type DependencyList, type SyntheticEvent } from 'react';

 import { useAsyncCallback } from './affine-async-hooks';

-export const useCatchEventCallback = <E extends SyntheticEvent>(
-  cb: (e: E) => void | Promise<void>,
+export const useCatchEventCallback = <
+  E extends SyntheticEvent,
+  Args extends any[],
+>(
+  cb: (e: E, ...args: Args) => void | Promise<void>,
  deps: DependencyList
 ) => {
  return useAsyncCallback(
-    async (e: E) => {
+    async (e: E, ...args: Args) => {
      e.stopPropagation();
-      await cb(e);
+      await cb(e, ...args);
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    deps
--- a/packages/frontend/core/src/modules/explorer/views/sections/favorites/index.tsx
+++ b/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'
--- a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+++ b/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}
+    />
+  );
 });
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
@@ -8,6 +8,7 @@ import { Header } from '@affine/core/components/pure/header';
 import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { track } from '@affine/core/mixpanel';
+import { isNewTabTrigger } from '@affine/core/utils';
 import type { Filter } from '@affine/env/filter';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import { useService, WorkspaceService } from '@toeverything/infra';
@@ -60,10 +61,10 @@ export const AllPageHeader = ({
              !showCreateNew && styles.headerCreateNewButtonHidden
            )}
            onCreateEdgeless={e =>
-              createEdgeless(e?.metaKey || e?.ctrlKey ? 'new-tab' : true)
+              createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
            }
            onCreatePage={e =>
-              createPage(e?.metaKey || e?.ctrlKey ? 'new-tab' : true)
+              createPage(isNewTabTrigger(e) ? 'new-tab' : true)
            }
            onImportFile={onImportFile}
          >
--- a/packages/frontend/core/src/utils/event.ts
+++ b/packages/frontend/core/src/utils/event.ts
@@ -0,0 +1,14 @@
+import type { BaseSyntheticEvent } from 'react';
+
+export function stopPropagation(event: BaseSyntheticEvent) {
+  event.stopPropagation();
+}
+
+export function stopEvent(event: BaseSyntheticEvent) {
+  event.stopPropagation();
+  event.preventDefault();
+}
+
+export function isNewTabTrigger(event?: React.MouseEvent) {
+  return event ? event.ctrlKey || event.metaKey || event.button === 1 : false;
+}
--- a/packages/frontend/core/src/utils/index.ts
+++ b/packages/frontend/core/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './create-emotion-cache';
+export * from './event';
 export * from './fractional-indexing';
 export * from './popup';
 export * from './string2color';