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

fix PD-1521

packages/frontend/core/src/components/app-sidebar/add-page-button/index.tsx

@@ -3,11 +3,12 @@ import { useI18n } from '@affine/i18n';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type React from 'react';
+import type { MouseEventHandler } from 'react';
 
 import * as styles from './index.css';
 
 interface AddPageButtonProps {
-  onClick?: () => void;
+  onClick?: MouseEventHandler;
   className?: string;
   style?: React.CSSProperties;
 }

packages/frontend/core/src/components/blocksuite/block-suite-header/menu/index.tsx

@@ -19,6 +19,7 @@ import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { mixpanel } from '@affine/core/mixpanel';
+import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useDetailPageHeaderResponsive } from '@affine/core/pages/workspace/detail-page/use-header-responsive';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
@@ -31,8 +32,10 @@ import {
   HistoryIcon,
   ImportIcon,
   InformationIcon,
+  OpenInNewIcon,
   PageIcon,
   ShareIcon,
+  SplitViewIcon,
 } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import {
@@ -73,6 +76,8 @@ export const PageHeaderMenuButton = ({
   const isInTrash = useLiveData(doc.meta$.map(m => m.trash));
   const currentMode = useLiveData(doc.mode$);
 
+  const workbench = useService(WorkbenchService).workbench;
+
   const { favorite, toggleFavorite } = useFavorite(pageId);
 
   const { duplicate } = useBlockSuiteMetaHelper(docCollection);
@@ -94,6 +99,18 @@ export const PageHeaderMenuButton = ({
     setOpenInfoModal(true);
   };
 
+  const handleOpenInNewTab = useCallback(() => {
+    workbench.openDoc(pageId, {
+      at: 'new-tab',
+    });
+  }, [pageId, workbench]);
+
+  const handleOpenInSplitView = useCallback(() => {
+    workbench.openDoc(pageId, {
+      at: 'tail',
+    });
+  }, [pageId, workbench]);
+
   const handleOpenTrashModal = useCallback(() => {
     setTrashModal({
       open: true,
@@ -237,16 +254,35 @@ export const PageHeaderMenuButton = ({
           ? t['com.affine.favoritePageOperation.remove']()
           : t['com.affine.favoritePageOperation.add']()}
       </MenuItem>
-      {/* {TODO(@Peng): add tag function support} */}
-      {/* <MenuItem
-        icon={<TagsIcon />}
-        data-testid="editor-option-menu-add-tag"
-        onClick={() => {}}
+      <MenuSeparator />
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <OpenInNewIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-open-in-new-tab"
+        onSelect={handleOpenInNewTab}
         style={menuItemStyle}
       >
-        {t['com.affine.header.option.add-tag']()}
-      </MenuItem> */}
+        {t['com.affine.workbench.tab.page-menu-open']()}
+      </MenuItem>
+
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <SplitViewIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-open-in-split-new"
+        onSelect={handleOpenInSplitView}
+        style={menuItemStyle}
+      >
+        {t['com.affine.workbench.split-view.page-menu-open']()}
+      </MenuItem>
+
       <MenuSeparator />
+
       {runtimeConfig.enableInfoModal && (
         <MenuItem
           preFix={

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,6 +1,5 @@
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { mixpanel } from '@affine/core/mixpanel';
 import {
   ExplorerCollections,
@@ -19,7 +18,7 @@ import type { Doc } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useAtomValue, useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
+import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
 
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
@@ -72,14 +71,12 @@ export type RootAppSidebarProps = {
 export const RootAppSidebar = (): ReactElement => {
   const currentWorkspace = useService(WorkspaceService).workspace;
   const currentWorkspaceId = currentWorkspace.id;
-  const { openPage } = useNavigateHelper();
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
   const t = useI18n();
+  const workbench = useService(WorkbenchService).workbench;
   const currentPath = useLiveData(
-    useService(WorkbenchService).workbench.location$.map(
-      location => location.pathname
-    )
+    workbench.location$.map(location => location.pathname)
   );
   const cmdkQuickSearchService = useService(CMDKQuickSearchService);
   const onOpenQuickSearchModal = useCallback(() => {
@@ -93,27 +90,29 @@ export const RootAppSidebar = (): ReactElement => {
   const allPageActive = currentPath === '/all';
 
   const pageHelper = usePageHelper(currentWorkspace.docCollection);
-  const createPage = useCallback(() => {
-    return pageHelper.createPage();
-  }, [pageHelper]);
 
-  const onClickNewPage = useAsyncCallback(async () => {
-    const page = createPage();
-    page.load();
-    openPage(currentWorkspaceId, page.id);
-    mixpanel.track('DocCreated', {
-      segment: 'navigation panel',
-      module: 'bottom button',
-      control: 'new doc button',
-      category: 'page',
-      type: 'doc',
-    });
-  }, [createPage, currentWorkspaceId, openPage]);
+  const onClickNewPage = useAsyncCallback(
+    async (e?: MouseEvent) => {
+      const page = pageHelper.createPage('page', false);
+      page.load();
+      mixpanel.track('DocCreated', {
+        segment: 'navigation panel',
+        module: 'bottom button',
+        control: 'new doc button',
+        category: 'page',
+        type: 'doc',
+      });
+      workbench.openDoc(page.id, {
+        at: e?.ctrlKey || e?.metaKey ? 'new-tab' : 'active',
+      });
+    },
+    [pageHelper, workbench]
+  );
 
   // Listen to the "New Page" action from the menu
   useEffect(() => {
     if (environment.isDesktop) {
-      return events?.applicationMenu.onNewPageAction(onClickNewPage);
+      return events?.applicationMenu.onNewPageAction(() => onClickNewPage());
     }
     return;
   }, [onClickNewPage]);

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

packages/frontend/core/src/utils/popup.ts

@@ -4,7 +4,5 @@ export function popupWindow(target: string) {
     ? target
     : runtimeConfig.serverUrlPrefix + target;
   url.searchParams.set('redirect_uri', target);
-
-  console.log(url.href);
   return window.open(url, '_blank', `noreferrer noopener`);
 }