fix(core): ctrl/cmd + click on add page button opens in new tab (#7701)

fix PD-1521

packages/frontend/core/src/modules/workbench/entities/workbench.ts

@@ -1,20 +1,25 @@
 import { Unreachable } from '@affine/env/constant';
 import { Entity, LiveData } from '@toeverything/infra';
-import type { To } from 'history';
+import { type To } from 'history';
 import { nanoid } from 'nanoid';
 
+import type { WorkbenchNewTabHandler } from '../services/workbench-new-tab-handler';
 import type { WorkbenchDefaultState } from '../services/workbench-view-state';
 import { View } from './view';
 
 export type WorkbenchPosition = 'beside' | 'active' | 'head' | 'tail' | number;
 
-interface WorkbenchOpenOptions {
-  at?: WorkbenchPosition;
+type WorkbenchOpenOptions = {
+  at?: WorkbenchPosition | 'new-tab';
   replaceHistory?: boolean;
-}
+  show?: boolean; // only for new tab
+};
 
 export class Workbench extends Entity {
-  constructor(private readonly defaultState: WorkbenchDefaultState) {
+  constructor(
+    private readonly defaultState: WorkbenchDefaultState,
+    private readonly newTabHandler: WorkbenchNewTabHandler
+  ) {
     super();
   }
 
@@ -74,26 +79,45 @@ export class Workbench extends Entity {
     this.sidebarOpen$.next(!this.sidebarOpen$.value);
   }
 
-  open(
-    to: To,
-    { at = 'active', replaceHistory = false }: WorkbenchOpenOptions = {}
-  ) {
-    let view = this.viewAt(at);
-    if (!view) {
-      const newIndex = this.createView(at, to);
-      view = this.viewAt(newIndex);
-      if (!view) {
-        throw new Unreachable();
-      }
+  open(to: To, option: WorkbenchOpenOptions = {}) {
+    if (option.at === 'new-tab') {
+      this.newTab(to, {
+        show: option.show,
+      });
     } else {
-      if (replaceHistory) {
-        view.history.replace(to);
+      const { at = 'active', replaceHistory = false } = option;
+      let view = this.viewAt(at);
+      if (!view) {
+        const newIndex = this.createView(at, to);
+        view = this.viewAt(newIndex);
+        if (!view) {
+          throw new Unreachable();
+        }
       } else {
-        view.history.push(to);
+        if (replaceHistory) {
+          view.history.replace(to);
+        } else {
+          view.history.push(to);
+        }
       }
     }
   }
 
+  newTab(
+    to: To,
+    {
+      show,
+    }: {
+      show?: boolean;
+    } = {}
+  ) {
+    this.newTabHandler({
+      basename: this.basename$.value,
+      to,
+      show: show ?? true,
+    });
+  }
+
   openDoc(
     id: string | { docId: string; blockId?: string },
     options?: WorkbenchOpenOptions

packages/frontend/core/src/modules/workbench/index.ts

@@ -20,6 +20,11 @@ import { ViewScope } from './scopes/view';
 import { DesktopStateSynchronizer } from './services/desktop-state-synchronizer';
 import { ViewService } from './services/view';
 import { WorkbenchService } from './services/workbench';
+import {
+  BrowserWorkbenchNewTabHandler,
+  DesktopWorkbenchNewTabHandler,
+  WorkbenchNewTabHandler,
+} from './services/workbench-new-tab-handler';
 import {
   DesktopWorkbenchDefaultState,
   InMemoryWorkbenchDefaultState,
@@ -30,7 +35,7 @@ export function configureWorkbenchCommonModule(services: Framework) {
   services
     .scope(WorkspaceScope)
     .service(WorkbenchService)
-    .entity(Workbench, [WorkbenchDefaultState])
+    .entity(Workbench, [WorkbenchDefaultState, WorkbenchNewTabHandler])
     .entity(View)
     .scope(ViewScope)
     .service(ViewService, [ViewScope])
@@ -41,7 +46,8 @@ export function configureBrowserWorkbenchModule(services: Framework) {
   configureWorkbenchCommonModule(services);
   services
     .scope(WorkspaceScope)
-    .impl(WorkbenchDefaultState, InMemoryWorkbenchDefaultState);
+    .impl(WorkbenchDefaultState, InMemoryWorkbenchDefaultState)
+    .impl(WorkbenchNewTabHandler, () => BrowserWorkbenchNewTabHandler);
 }
 
 export function configureDesktopWorkbenchModule(services: Framework) {
@@ -51,5 +57,6 @@ export function configureDesktopWorkbenchModule(services: Framework) {
     .impl(WorkbenchDefaultState, DesktopWorkbenchDefaultState, [
       GlobalStateService,
     ])
+    .impl(WorkbenchNewTabHandler, () => DesktopWorkbenchNewTabHandler)
     .service(DesktopStateSynchronizer, [WorkbenchService]);
 }

packages/frontend/core/src/modules/workbench/services/workbench-new-tab-handler.ts

@@ -0,0 +1,38 @@
+import { popupWindow } from '@affine/core/utils';
+import { apis } from '@affine/electron-api';
+import { createIdentifier } from '@toeverything/infra';
+import { parsePath, type To } from 'history';
+
+export type WorkbenchNewTabHandler = (option: {
+  basename: string;
+  to: To;
+  show: boolean;
+}) => void;
+
+export const WorkbenchNewTabHandler = createIdentifier<WorkbenchNewTabHandler>(
+  'WorkbenchNewTabHandler'
+);
+
+export const BrowserWorkbenchNewTabHandler: WorkbenchNewTabHandler = ({
+  basename,
+  to,
+}) => {
+  const link =
+    basename +
+    (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
+  popupWindow(link);
+};
+
+export const DesktopWorkbenchNewTabHandler: WorkbenchNewTabHandler = ({
+  basename,
+  to,
+}) => {
+  const path = typeof to === 'string' ? parsePath(to) : to;
+  apis?.ui
+    .addTab({
+      basename,
+      view: { path },
+      show: false,
+    })
+    .catch(console.error);
+};

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

@@ -1,9 +1,7 @@
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { popupWindow } from '@affine/core/utils';
-import { apis } from '@affine/electron-api';
 import { useLiveData, useService } from '@toeverything/infra';
-import { parsePath, type To } from 'history';
+import { type To } from 'history';
 import { forwardRef, type MouseEvent } from 'react';
 
 import { WorkbenchService } from '../services/workbench';
@@ -31,26 +29,18 @@ export const WorkbenchLink = forwardRef<
         return;
       }
 
-      if (event.ctrlKey || event.metaKey) {
-        if (environment.isDesktop) {
-          if (event.altKey && appSettings.enableMultiView) {
-            workbench.open(to, { at: 'tail' });
-          } else {
-            const path = typeof to === 'string' ? parsePath(to) : to;
-            await apis?.ui.addTab({
-              basename,
-              view: { path },
-              show: false,
-            });
-          }
-        } else if (!environment.isDesktop) {
-          popupWindow(link);
+      const at = (() => {
+        if (event.ctrlKey || event.metaKey) {
+          return event.altKey && appSettings.enableMultiView
+            ? 'tail'
+            : 'new-tab';
         }
-      } else {
-        workbench.open(to);
-      }
+        return 'active';
+      })();
+
+      workbench.open(to, { at });
     },
-    [appSettings.enableMultiView, basename, link, onClick, to, workbench]
+    [appSettings.enableMultiView, onClick, to, workbench]
   );
 
   // eslint suspicious runtime error