From 79e1e8dd2f85f9992d32e8886e634fcd8e15870e Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Thu, 6 Jun 2024 15:40:22 +0000
Subject: [PATCH] fix: close peek view when clicking on reference link (#7137)

---
 .../components/affine/reference-link/index.tsx    | 15 +++++++++++----
 .../components/page-list/docs/page-list-item.tsx  |  8 ++++----
 .../src/modules/workbench/view/workbench-link.tsx | 11 ++++++++---
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/reference-link/index.tsx b/packages/frontend/core/src/components/affine/reference-link/index.tsx
index 1d1f010181..03335956bd 100644
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -1,6 +1,9 @@
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useJournalHelper } from '@affine/core/hooks/use-journal';
-import { PeekViewService } from '@affine/core/modules/peek-view';
+import {
+  PeekViewService,
+  useInsidePeekView,
+} from '@affine/core/modules/peek-view';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { LinkedPageIcon, TodayIcon } from '@blocksuite/icons';
@@ -69,6 +72,7 @@ export function AffinePageReference({
   const ref = useRef<HTMLAnchorElement>(null);
 
   const peekView = useService(PeekViewService).peekView;
+  const isInPeekView = useInsidePeekView();
 
   const onClick = useCallback(
     (e: React.MouseEvent) => {
@@ -76,11 +80,14 @@ export function AffinePageReference({
         e.preventDefault();
         e.stopPropagation();
         peekView.open(ref.current);
-        return true; // means this click is handled
+        return false; // means this click is handled
       }
-      return false;
+      if (isInPeekView) {
+        peekView.close();
+      }
+      return;
     },
-    [peekView]
+    [isInPeekView, peekView]
   );
 
   return (
diff --git 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
index cc04b80c35..b477994ade 100644
--- 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
@@ -287,7 +287,7 @@ function PageListItemWrapper({
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
       if (!selectionState.selectable) {
-        return false;
+        return;
       }
       stopPropagation(e);
       const currentIndex = pageIds.indexOf(pageId);
@@ -297,15 +297,15 @@ function PageListItemWrapper({
           setSelectionActive(true);
           setAnchorIndex(currentIndex);
           onClick?.();
-          return true;
+          return false;
         }
         handleShiftClick(currentIndex);
-        return true;
+        return false;
       } else {
         setAnchorIndex(undefined);
         setRangeIds([]);
         onClick?.();
-        return false;
+        return;
       }
     },
     [
diff --git a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
index 44bdcebd42..35fd731b16 100644
--- a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
@@ -2,13 +2,18 @@ import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-h
 import { popupWindow } from '@affine/core/utils';
 import { useLiveData, useService } from '@toeverything/infra';
 import type { To } from 'history';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, type MouseEvent, useCallback } from 'react';
 
 import { WorkbenchService } from '../services/workbench';
 
 export const WorkbenchLink = forwardRef<
   HTMLAnchorElement,
-  React.PropsWithChildren<{ to: To } & React.HTMLProps<HTMLAnchorElement>>
+  React.PropsWithChildren<
+    {
+      to: To;
+      onClick?: (e: MouseEvent) => boolean | void; // return false to stop propagation
+    } & React.HTMLProps<HTMLAnchorElement>
+  >
 >(function WorkbenchLink({ to, onClick, ...other }, ref) {
   const workbench = useService(WorkbenchService).workbench;
   const { appSettings } = useAppSettingHelper();
@@ -20,7 +25,7 @@ export const WorkbenchLink = forwardRef<
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       event.stopPropagation();
-      if (onClick?.(event)) {
+      if (onClick?.(event) === false) {
         return;
       }