From de1a51bf7cc44d9d6abeff2f1a6e7b80ab5fd5fa Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Thu, 5 Sep 2024 10:30:39 +0000
Subject: [PATCH] fix(core): should open a new tab with parameters (#8118)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes [AF-1343](https://linear.app/affine-design/issue/AF-1343/点击-center-peek-右侧的按钮时，应该携带参数)
---
 .../peek-view/view/peek-view-controls.tsx     | 16 ++++++++-----
 .../peek-view/view/peek-view-manager.tsx      |  3 ++-
 .../src/modules/quicksearch/services/cmdk.ts  | 10 +++++---
 .../modules/workbench/entities/workbench.ts   | 23 +++++++++++++------
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
index f7c0977c37..87c293334d 100644
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
@@ -59,8 +59,9 @@ export const ControlButton = ({
 
 type DocPeekViewControlsProps = HTMLAttributes<HTMLDivElement> & {
   docId: string;
-  blockId?: string;
   mode?: DocMode;
+  blockIds?: string[];
+  elementIds?: string[];
 };
 
 export const DefaultPeekViewControls = ({
@@ -90,8 +91,9 @@ export const DefaultPeekViewControls = ({
 
 export const DocPeekViewControls = ({
   docId,
-  blockId,
   mode,
+  blockIds,
+  elementIds,
   className,
   ...rest
 }: DocPeekViewControlsProps) => {
@@ -111,8 +113,7 @@ export const DocPeekViewControls = ({
         name: t['com.affine.peek-view-controls.open-doc'](),
         nameKey: 'open',
         onClick: () => {
-          // TODO(@Peng): for frame blocks, we should mimic "view in edgeless" button behavior
-          workbench.openDoc({ docId, mode, blockId });
+          workbench.openDoc({ docId, mode, blockIds, elementIds });
           peekView.close('none');
         },
       },
@@ -121,7 +122,10 @@ export const DocPeekViewControls = ({
         nameKey: 'new-tab',
         name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](),
         onClick: () => {
-          workbench.openDoc({ docId, mode }, { at: 'new-tab' });
+          workbench.openDoc(
+            { docId, mode, blockIds, elementIds },
+            { at: 'new-tab' }
+          );
           peekView.close('none');
         },
       },
@@ -135,7 +139,7 @@ export const DocPeekViewControls = ({
         },
       },
     ].filter((opt): opt is ControlButtonProps => Boolean(opt));
-  }, [blockId, docId, mode, peekView, t, workbench]);
+  }, [docId, mode, blockIds, elementIds, peekView, t, workbench]);
   return (
     <div {...rest} className={clsx(styles.root, className)}>
       {controls.map(option => (
diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
index febfbae8e4..8b9e30e291 100644
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
@@ -53,7 +53,8 @@ const renderControls = ({ info }: ActivePeekView) => {
       <DocPeekViewControls
         mode={info.mode}
         docId={info.docId}
-        blockId={info.docId}
+        blockIds={info.blockIds}
+        elementIds={info.elementIds}
       />
     );
   }
diff --git a/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts b/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
index 973bc608a3..31e9c16fbb 100644
--- a/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
+++ b/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
@@ -54,10 +54,14 @@ export class CMDKQuickSearchService extends Service {
             result.source === 'docs' &&
               track.$.cmdk.results.searchResultsDocs();
 
-            this.workbenchService.workbench.openDoc({
+            const options: { docId: string; blockIds?: string[] } = {
               docId: doc.docId,
-              blockId: doc.blockId,
-            });
+            };
+            if (doc.blockId) {
+              options.blockIds = [doc.blockId];
+            }
+
+            this.workbenchService.workbench.openDoc(options);
           } else if (result.source === 'collections') {
             this.workbenchService.workbench.openCollection(
               result.payload.collectionId
diff --git a/packages/frontend/core/src/modules/workbench/entities/workbench.ts b/packages/frontend/core/src/modules/workbench/entities/workbench.ts
index cdbad82a43..5711a1a745 100644
--- a/packages/frontend/core/src/modules/workbench/entities/workbench.ts
+++ b/packages/frontend/core/src/modules/workbench/entities/workbench.ts
@@ -122,18 +122,27 @@ export class Workbench extends Entity {
   }
 
   openDoc(
-    id: string | { docId: string; blockId?: string; mode?: DocMode },
+    id:
+      | string
+      | {
+          docId: string;
+          mode?: DocMode;
+          blockIds?: string[];
+          elementIds?: string[];
+        },
     options?: WorkbenchOpenOptions
   ) {
-    const docId = typeof id === 'string' ? id : id.docId;
-    const blockId = typeof id === 'string' ? undefined : id.blockId;
-    const mode = typeof id === 'string' ? undefined : id.mode;
+    const isString = typeof id === 'string';
+    const docId = isString ? id : id.docId;
+
     let query = '';
-    if (mode || blockId) {
+    if (!isString) {
+      const { mode, blockIds, elementIds } = id;
       const search = new URLSearchParams();
       if (mode) search.set('mode', mode);
-      if (blockId) search.set('blockIds', blockId);
-      query = `?${search.toString()}`;
+      if (blockIds?.length) search.set('blockIds', blockIds.join(','));
+      if (elementIds?.length) search.set('elementIds', elementIds.join(','));
+      if (search.size > 0) query = `?${search.toString()}`;
     }
 
     this.open(`/${docId}${query}`, options);